CSS简介
CSS分为两部分——CSS选择器和CSS属性。
格式
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>
注意点
- style标签必须写在head标签的开始标签和结束标签之间。
- style标签中的type属性可以不用写, 默认就是type=”text/css”
- 设置样式时必须按照固定的格式来设置。key: value；其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
CSS常见属性
文字属性
（1）font-style
- 作用: 规定文字样式
- 格式: font-style: italic;
- 取值:
- normal ： 正常的， 默认就是正常的
- italic : 倾斜的
（2）font-weight
- 作用: 规定文字粗细
- 格式: font-weight: bold;
- 取值:
- 单词取值:
- bold 加粗
- bolder 比加粗还要粗
- lighter 细线， 默认就是细线
- 数字取值：
- 100-900之间整百的数字
- 单词取值:
（3）font-size
- 作用: 规定文字大小
- 格式: font-size: 30px;
- 取值: px(像素 pixel)
（4）font-family
- 作用: 规定文字字体
- 格式: font-family:”楷体”;
- 取值: 各种字体名称
- 注意点
- 如果取值是中文， 需要用双引号或者单引号括起来
- 设置的字体必须是用户电脑里面已经安装的字体
- 给字体设置备选方案
- 格式:font-family:”字体1”, “备选方案1”, …;
- 如果想给中文和英文分别单独设置字体, 怎么办?
- 中文字体里面都包含了英文，英文字体里面都没有包含中文。可以设置备选方案，英文字体在前，中文字体在后。
（5）文字属性缩写
- 格式：font: style weight size family;
font:italic bold 10px "楷体";
文本属性
扫描二维码关注公众号，回复：
2225575 查看本文章
（1）text-decoration
- 作用: 给文本添加装饰
- 格式: text-decoration: underline;
- 取值:
- underline 下划线
- line-through 删除线
- overline 上划线
- none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
（2）text-align
- 作用: 设置文本水平对齐方式
- 格式: text-align: center;
- 取值:
- left 左
- right 右
- center 中
（3）text-indent
- 作用: 设置文本缩进
- 格式: text-indent: 2em;
- 取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
颜色属性
- 作用: 通过color属性来修改文字颜色
- 格式: color: 值;
- 取值
- 英文单词
- rgb
- 格式: rgb(0,0,0)
- 第一个数字就是用来设置三原色的光源元件红色显示的亮度
- 第二个数字就是用来设置三原色的光源元件绿色显示的亮度
- 第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
- 这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
- rgba
- 格式：rgba(255,0,0,0.2)
- a代表透明度, 取值是0-1, 取值越小就越透明
- 十六进制
- 格式：#FFEE00
- 十六进制中是通过每两位表示一个颜色，#FFEE00 FF表示R EE表示G 00表示B
- 十六进制缩写
- 格式：#FFEE00 == #FE0
- 在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
- 如果两位相同的数字不是属于同一个颜色的, 不能简写，如#122334
CSS选择器
标签选择器
（1）作用
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
（2）格式
标签名称{
属性:值;
}
(3)注意点
- 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
<style> p{ color: red; } h1{ color: blue; } </style> <p>我是段落</p> <h1>我是标题</h1>
id选择器
（1）作用
根据指定的id名称找到对应的标签, 然后设置属性
（2）格式
#id名称{
属性:值;
}
（3）注意点
- 在同一个界面中id的名称是不可以重复的
- id的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的
<style> #identity1{ color: red; } </style> <p id="identity4">必成高富帅</p>
类选择器
（1）作用
根据指定的类名称找到对应的标签, 然后设置属性
（2）格式
.类名{
属性:值;
}
（3）注意点
- 在同一个界面中class的名称是可以重复的
- 类名的命名规范和id名称的命名规范一样
- 在HTML中每个标签可以同时绑定多个类名
<style> .para1{ font-size: 100px; } .para2{ font-style: italic; } </style> <p class="para1 para2">我是段落</p>
后代选择器
（1）作用
找到指定标签的所有特定的后代标签, 设置属性
（2）格式：先找到所有叫做”标签名称1”的标签, 然后再在这个标签下面去查找所有叫做”标签名称2”的标签, 设置属性
标签名称1 标签名称2{
属性:值;
}
（3）注意点
- 后代选择器必须用空格隔开
- 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
<style> div ul li p{ color: red; } </style> <div> <ul> <li> <p>我是段落</p> <!--选中--> </li> <li> <p>我是段落</p> <!--选中--> </li> </ul> </div>
子元素选择器
（1）作用
找到指定标签中所有特定的直接子元素, 然后设置属性
（2）格式：先找到所有叫做”标签名称1”的标签, 然后在这个标签中查找所有直接子元素叫做”标签名称2”的元素
标签名称1>标签名称2{
属性:值;
}
（3）注意点
- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
<style> #identity>p{ color: blue; } </style> <div id="identity"> <p>我是段落</p> <!--选中--> <p>我是段落</p> <!--选中--> <ul> <li><p>我是段落</p></li> </ul> </div>
交集选择器
（1）作用
给所有选择器选中的标签中, 相交的那部分标签设置属性
（2）格式
选择器1选择器2{
属性: 值;
}
（3）注意点
- 选择器和选择器之间没有任何的连接符号
- 交集选择器仅仅作为了解, 企业开发中用的并不多
<style> .para1#identity{ color: blue; } </style> <p class="para1" id="identity">我是段落</p>
并集选择器
（1）作用
给所有选择器选中的标签设置属性
（2）格式
选择器1,选择器2{
属性:值;
}
（3）注意点
- 并集选择器必须使用,来连接
<style> .ht,.para{ color: red; } </style> <h1 class="ht">我是标题</h1> <!--选中--> <p class="para">我是段落</p> <!--选中-->
兄弟选择器
（1）相邻兄弟
作用
- 给指定标签后面紧跟的那个标签设置属性
格式
选择器1+选择器2{ 属性:值; }注意点
- 相邻兄弟选择器必须通过+连接
- 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
<style> h1+p{ color: red; } </style> <h1>我是标题</h1> <a href="#">我是超链接</a> <p>我是段落</p> <h1>我是标题</h1> <p>我是段落</p> <!--选中--> <p>我是段落</p>
（2）通用兄弟
作用
- 给指定选择器后面的所有指定标签设置属性
格式
选择器1~选择器2{ 属性:值; }注意
- 通用兄弟选择器必须用~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
<style> /*h1+p{*/ /*color: red;*/ /*}*/ h1~p{ color: green; } </style> <h1>我是标题</h1> <a href="#">我是超链接</a> <p>我是段落</p> <h1>我是标题</h1> <!--选中--> <p>我是段落</p> <!--选中--> <p>我是段落</p> <!--选中-->
序选择器
（1）作用
选中指定的任意标签然后设置属性
（2）格式
同级别第几个
- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :only-child 选中父元素中唯一的标签
- 注意点: 不区分类型
同级同类型的第几个
- :first-of-type 选中同级别中同类型的第一个标签
- :last-of-type 选中同级别中同类型的最后一个标签
- :nth-of-type(n) 选中同级别中同类型的第n个标签
- :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
- :only-of-type 选中父元素中唯一类型的某个标签
其他用法
- :nth-child(odd) 选中同级别中的所有奇数
- :nth-child(even) 选中同级别中的所有偶数
- :nth-child(xn+y)
- x和y是用户自定义的, 而n是一个计数器, 从0开始递增
- :nth-of-type(odd) 选中同级别中同类型的所有奇数
- :nth-of-type(even) 选中同级别中同类型的所有偶数
- :nth-of-type(xn+y)
- x和y是用户自定义的, 而n是一个计数器, 从0开始递增
<style> p:first-child{ color: red; } <!--选中同级别中的第一个标签，这个标签必须是p，否则无效--> </style> <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落5</p> <!--选中--> <p>我是段落6</p> </div><style> p:first-of-type{ color: blue; } </style> <h1>我是标题</h1> <p>我是段落1</p> <!--选中--> <p>我是段落2</p> <div> <p>我是段落5</p> <!--选中--> <p>我是段落6</p> </div>
属性选择器
（1）作用
根据指定的属性名称找到对应的标签, 然后设置属性
（2）格式
- [attribute]：根据指定的属性名称找到对应的标签
- [attribute=value]：根据指定的属性值找到对应的标签
- [attribute^=value]：属性的取值是以什么开头的
- [attribute$=value]：属性的取值是以什么结尾的
- [attribute*=value]：属性的取值是否包含某个特定的值的
<style> img[alt^=abc]{ color: red; } </style> <img src="" alt="abcwwwmmm"> <!--选中--> <img src="" alt="wwwmmmabc"> <img src="" alt="wwwabcmmm"> <img src="" alt="www-abc-mmm"> <img src="" alt="qq">
通配符选择器
（1）作用
给当前界面上所有的标签设置属性
（2）格式
*{
属性:值;
}
（3）注意点
- 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
CSS三大特性
继承性
（1）什么是继承性？
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。
（2）示例代码
<style>
div{
color: red;
}
</style>
<div>
<ul>
<li>
<p>我是段落</p> <!--p会变成红色-->
</li>
</ul>
</div>
（3）注意点
- 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
- 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
- a标签的文字颜色和下划线是不能继承的
- h标签的文字大小是不能继承的
<style> div{ color: red; text-decoration: none; font-size: 30px; } </style> <div> <a href="#">我是超链接</a> </div> <div> <h1>我是大标题</h1> </div> <!--a的颜色和下划线不会发生变化, H的字体大小不变-->应用场景
- 一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
body{ font-size: 30px; font-family: "微软雅黑" color: #666; }
层叠性
（1）什么是层叠性?
CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性。层叠性就是CSS处理冲突的一种能力。
（2）示例代码
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
<p id="identity" class="para">我是段落</p>
<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->
（3）注意点
- 层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性
优先级
（1）什么是优先级?
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
（2）优先级判断的三种方式
- 如果是间接选中（继承）, 那么就是谁离目标标签比较近就听谁的。
<style> li{ color: blue; } ul{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最终显示蓝色 -->如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
<style> p{ color: blue; } p{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最终显示红色 -->如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠（id>类>标签>通配符>继承>浏览器默认）
<style> #identity{ color: purple; } .para{ color: pink; } p{ color: green; } *{ color: blue; } li{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最终显示紫色 -->注意：通配符选择器也是直接选中
优先级权重
（1）什么是优先级的权重?
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
（2）权重的计算规则
- 首先先计算选择器中有多少个id, id多的选择器优先级最高
- 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
- 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
- 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
（3）注意
- 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
<style> #identity1 .box2{ color: red; } .box1 .box2{ color: green; } div ul li p{ color: blue; } </style> <div id="identity1" class="box1"> <ul> <li> <p id="identity2" class="box2">我是段落</p> </li> </ul> </div> <!-- id多最终显示红色 -->
!important
（1）什么是!important？
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
（2）示例代码
<style>
#identity{
color: purple;
font-size: 50px;
}
.para{
color: pink ;
}
p{
color: green !important;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示绿色 -->
（3）注意点
- !important只能用于直接选中, 不能用于间接选中
- 通配符选择器选中的标签也是直接选中的
- !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升