css知识点梳理

CSS

CSS三种规则和三种位置

在这里插入图片描述

规范说明
大括号所有的样式写在大括号中
样式名左边是样式的名字,使用小写。如果有多个单词,使用-分隔
样式值每个样式值都有固定的取值
样式结尾每条样式以分号结尾
注释与Java的多行注释一样 /* */

样式:

1.行内样式:

在这里插入图片描述

  • 位置:样式是出现在标签开始位置,以style属性存在。
  • 特点:只有这个标签有效(实际开发基本不同)
2.内部样式:

在这里插入图片描述

  • 位置:写在HTML文件内部,放在style标签中。
  • 特点:在本HTML文件种的多个标签起作用
3.外部样式:

在这里插入图片描述

  • 位置:以CSS文件的方式存在HTML的外部。
  • 特点:可以给多个HTML使用
三种样式的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的位置</title>

    <!--内部样式:在html中使用style标签-->
    <style type="text/css">
        h2 {
            background-color: red;
        }
    </style>

    <!--外部样式
    rel: 表示html文件和css文件之间的关系,必须指定
    href: 指定外部css文件的位置
    type: 指定文件的类型-->
    <link rel="stylesheet" href="css/01_css.css" type="text/css"/>

</head>
<body>
    <!--行内样式:直接在标签上添加样式-->
    <h1 style="background-color: blue">我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>
</html>

css/01_css.css:

h3 {
    background-color: deeppink;
}

CSS选择器

选择器名格式作用
通用*选中所有的标签
标签标签名选中指定名称的标签
.类名选中指定类名的标签
ID#id选中指定id的标签

选择器之间优先级

通用选择器 < 标签选择器 < 类选择器 < ID选择器

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style type="text/css">
        /*标签选择器:选中所有的h1标签*/
        h1 {
            color: red;
            background-color: blue;
        }

        /*类选择器:选择所有class属性为aa的标签*/
        .aa {
            color: orange;
            background-color: yellow;
        }

        /*ID选择器:选中所有id为one的标签*/
        #one {
            color: aqua;
            background-color: gray;
        }

        /*通用选择器:选择所有的标签*/
        * {
            color: black;
            font-size: 20px;
        }
        h6 {
            color: magenta;
        }
        .cc {
            color: gray;
        }
        #three {
            color: red;
        }
        /*选择器的优先级: 通用选择器 < 标签选择器 < 类选择器 < id选择器*/
    </style>
</head>
<body>
<h1>我是h1</h1>
<h1>我是h1</h1>
<h2 class="aa">我是h2</h2>
<h2 class="aa">我是h2</h2>
<h3 class="aa">我是h3</h3>
<h3 class="aa">我是h3</h3>
<h4 class="bb">我是h4</h4>
<h5 id="two">我是h5</h5>
<h6 class="cc" id="three">我是h6</h6>
</body>
</html>

拓张选择器

扩展选择器选择器符号作用
层级父选择器 空格 子选择器选中父选择器选中的子孙元素
属性标签名[属性]选中带有指定属性名的标签
伪类标签名:状态选中指定标签的指定状态
并集选择器1, 选择器2多个选择器同时有效

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        /*
        层级选择器
        符号: 空格
        作用: 选中父标签的下子孙标签
        */
        ol li {
            color: red;
        }
        /*
        属性选择器
        符号: []
        标签名[属性名] 作用: 选择标签名中含有属性名的标签
        标签名[属性名=值] 作用: 选择标签名中含有属性名=值的标签
         */
        input[type="text"] {
            background-color: blue;
        }

        /*
        伪类选择器
        符号: :
        作用: 设置标签在某种状态下的样式
         */
        /*正常状态*/
        a:link {
            text-decoration: none;
        }
        /*访问过的*/
        a:visited {
            color: green;
        }

        /*正在激活*/
        a:active {
            color: yellow;
        }
        /*鼠标悬浮*/
        a:hover {
            color: aqua;
        }

        /*得到焦点*/
        input:focus {
            background-color: pink;
        }

        /*并集选择器
        符号: ,
        作用: 同时选中多个标签*/
        p,span {
            color: gold;
        }
    </style>
</head>
<body>
<ol>
    <li>红烧肉</li>
    <li>东坡肉</li>
</ol>
<div>
    <ul>
        <li>水煮鱼</li>
        <li>酸菜鱼</li>
    </ul>
</div>

用户名:<input type="text"><br/>
密码:<input type="password"><br/>
qq:<input ><br/>
<hr/>
<a href="#1">这是链接1</a><br/>
<a href="#2">这是链接2</a><br/>
<a href="#3">这是链接3</a><br/>
<a href="#4">这是链接4</a><br/>

<p>
    ddddd
</p>

<span>ssssss</span>
</body>
</html>

CSS背景样式:

属性名属性取值
background-color背景颜色
background-image背景图片
background-repeat背景图片的平铺方式
background-position背景图片的位置
background-size背景图片的大小

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta>charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        body {
        /*    !*背景色*!
            background-color: pink;
            !*背景图片*!
            background-image: url("img/girl1.jpg");
            !*平铺的方式*!
            background-repeat: repeat;
            !*平铺起始位置*!
            background-position: 50px 50px;*/

            /*背景色  alt+enter */
            /*背景图片*/
            /*平铺的方式*/
            /*平铺起始位置*/
            background: pink url("img/girl1.jpg") repeat 50px 50px;

            /*修改背景图片大小*/
            background-size: 100px 100px;
        }
    </style>
</head>
<body>
<h1>我是骑单车的女生</h1>
</body>
</html>

CSS文本样式和字体样式:

属性名作用
color设置颜色
line-height设置行高
text-decoration设置文本的修饰,下划线
text-indent首行缩进
text-align对齐方式
属性名作用
font-family设置字体
font-size设置字体大小
font-styleitalic:文字倾斜
font-weightbolder:文字加粗

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>

    <style>
        div {
            /*诗放在div的层中,宽400px,全文字体大小14px*/
            width: 400px;
            font-size: 14px;
        }

        h1 {
            /*标题文字大小18px,颜色#06F,居中对齐*/
            font-size: 18px;
            color: #06f;
            text-align: center;
        }

        p {
            /*每段文字缩进2em*/
            text-indent: 2em;
            /*段中的行高是22px*/
            line-height: 22px;
        }

        /*"胸怀中满溢着幸福,只因你就在我眼前",加粗,倾斜,蓝色*/
        #xiong {
            font-weight: bolder;
            font-style: italic;
            color: blue;
        }

        /*最后一段,颜色#390; 下划线,鼠标移上去指针变化。*/
        p:last-child {
            color: #390;
            text-decoration: underline;
            cursor: pointer;
        }

        /*美字加粗,颜色color:#F36,大小18px;*/
        .mei {
            color: #f36;
            font-size: 18px;
        }

        /*文席慕容,三个字,12px,颜色#999,不加粗*/
        h1 span {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
    </style>
</head>
<body>
<div>
    <h1>初相遇 <span>文/席慕容</span></h1>
    <p>
        <span class="mei"></span>丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到的时刻里出现。
    </p>
    <p>
        我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解释,心里甚至还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感激。
        <span id="xiong">胸怀中满溢着幸福,只因你就在我眼前,</span>对我微笑,一如当年。
    </p>
    <p>
        我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落落英缤纷,好像你我才初相遇。
    </p>
</div>
</body>
</html>

CSS边框样式设置

属性边框样式
border-style边框的样式
border-width边框的宽度
border-color边框的颜色
border-radius边框的圆角

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS边框样式</title>

    <style>
        /*1.宽和高分别是200px,边框使用double线形,红色,10px粗细*/
        /*2.对div整个居中*/
        div {
            width: 200px;
            height: 200px;
            /*边框的线形*/
            /*border-style: double;
            border-width: 10px;
            border-color: gray;*/
            border-radius: 20px;

            /*边框的线形,颜色,宽度可以合起来写*/
            border: solid lightcoral 20px;

            /*块级元素居中:margin: auto;*/
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    我是div....
</div>
</body>
</html>

两种盒子模型

属性作用
width设置宽度
height设置高度
padding设置内边距
border设置边框
盒子模型的样式名样式值
box-sizing标准盒子模型:content-box
box-sizing怪异盒子模型:border-box

标准盒子

在这里插入图片描述

标准盒子计算方式

内容不变,盒子被撑大

实际宽度 = 设置宽度 + 左右内边距 + 左右边框
实际高度 = 设置高度 + 上下内边距 + 上下边框

怪异盒子模型

在这里插入图片描述

怪异盒子计算方式

盒子不变,内容被缩小

实际宽度 = 设置宽度
实际高度 = 设置高度

用户的注册案例

在这里插入图片描述

步骤

  1. 使用一个四行两列的表格布局,表格居中,宽300px,高180px, 边框1px solid gray
  2. table添加背景,不平铺,图片背景的宽度和高度与table的宽和高一样
  3. 第一行和第四行跨2列,第一行是标题th,第四行是放按钮。使用图片按钮
  4. td的文字居中对齐,字体大小14px
  5. 用户名和密码文本框使用类样式,也可以使用其它选择器。宽150px,高32px,边框用实线,圆角5px,1个宽度,黑色
  6. 使用伪类样式,当鼠标移动到文本框上的时候,变成虚线橙色边框。得到焦点,背景色变成浅黄色
  7. 文本框前面有头像,密码框前面有键盘

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        /*宽300px,高180px; 边框solid 1px gray*/
        table {
            width: 300px;
            height: 180px;
            border: solid 1px gray;
            /*表格居中*/
            margin: auto;
            /*背景图片*/
            background-image: url("img/bg1.jpg");
            background-size: 300px 180px;
            /*圆角*/
            border-radius: 10px;
        }

        td {
            text-align: center;
        }

        /*同时选中2个*/
        #user,#pwd {
            border: 1px solid black;
            /*宽150px,高32px*/
            width: 150px;
            height: 32px;
            border-radius: 5px;
        }

        #user {
            background-image: url("img/head.png");
            /*不平铺*/
            background-repeat: no-repeat;
            /*左内边距*/
            padding-left: 35px;
        }

        #pwd {
            background-image: url("img/keyboard.png");
            /*不平铺*/
            background-repeat: no-repeat;
            /*左内边距*/
            padding-left: 35px;
        }

        /*伪类样式,当鼠标移动到文本框上的时候,变成虚线橙色边框。得到焦点,背景色变成浅黄色*/
        #user:hover,#pwd:hover {
            border: orange dashed 1px;
        }

        #user:focus,#pwd:focus {
            background-color: yellow;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th colspan="2">旅游注册</th>
    </tr>
    <tr>
        <td>用户名:</td>
        <td>
            <input type="text" name="user" id="user">
        </td>
    </tr>
    <tr>
        <td>密码:</td>
        <td>
            <input type="password" name="pwd" id="pwd">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="image" src="img/regbtn.jpg">
        </td>
    </tr>
</table>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值