CSS使用、属性、选择器（基础、属性、关系、后代、伪类选择器等）、三大特性（层叠性、继承性、优先级）
文章目录
- CSS内容
-
- CSS功能
- CSS的使用
-
- CSS使用方法
- 样式规则
- CSS属性
-
- 颜色表示方式
- 尺寸表示方式
- 图像表示方式
- 字体样式属性
- 文本样式属性
- 列表样式规则
- CSS选择器（核心）
-
- 基础选择器
-
- 1)标签名选择器
- 2)id选择器
- 3)类选择器
- 4)通配符选择器
- 属性选择器
- 复合选择器
- 后代选择器
- 关系选择器
- 伪类选择器
- CSS特性：
-
- 层叠性
- 继承性
- 优先级
CSS内容
CSS功能
CSS：可叫作层叠样式表 用于结构和表现分离
HTML只负责展示内容，搭建网页的基本结构，所有样式都由CSS来进行设置
CSS的使用
CSS使用方法
- 页面嵌入式：（控制一个页面）
- 行内嵌入式：给标签加入style属性 设置样式 （控制一个标签）
<body style="text-align: center;">
内容
body>
- 先创建独立样式文件（.css） 在页面中导入样式文件（控制多个页面）
"样式文件的地址" type="text/css" rel="stylesheet"/>
type（样式文件类型） text/css：由CSS构成的文本类型
样式规则
选择器{
样式属性1：值1;
样式属性2：值2;
样式属性n：值n
}
CSS属性
颜色表示方式
-
颜色名：red、green、blue 等
-
十六进制：#rrggbb（r,g,b是三原色，十进制取值在0~255之间，十六进制在0 ~ f之间）
-
函数方式：rgba（r，g，b，alpha）alpha为透明度（用百分号表示）
rgb和十六进制的转换 rgb(1,74,149)
1/16=0余1,74/16=4余10，149/16=9余5 因此十六进制表示为 #014a95
尺寸表示方式
- em：相对长度单位
- px：相对长度单位 像素
- in：英寸 绝对长度单位
- cm：厘米 绝对长度单位
- mm：毫米 绝对长度单位
等…
注意： 1em=16px 1in=2.54cm
图像表示方式
-
.png：体积小，适合于网络传输 ,具有存储形式丰富的特点，保证背景透明
-
.jpg（.jpeg）：体积大，不适合于网络传输 对色彩信息保留较好，产品类图片常用
-
.gif：只能存储256色，显示简单图形和字体，保存透明效果和小动画效果
-
psd图像格式是PS专用格式，不能放到页面中。可存放图层、通道、遮罩等多种设计稿，可以直接从上面复制文字，获得图片，测量大小和距离
注意： url（‘图像的全名’）
字体样式属性
- 字体类型：font-family
- 字体加粗：font-weight （①normal(默认) 不加粗 ②bold 加粗③100-900(400为normal 700为bold) 无单位）
- 字体大小：font-size（谷歌默认16px）
- 字体样式：font-style（①normal(默认) ②italic 斜体）
- 字体复合：font：font-style font-weight font-size font-family（不能更换顺序，size和family不可省略）
文本样式属性
- 单词间距：word-spacing
- 颜色：color
- 字母间距：letter-spacing
- 水平对齐方式：text-align（ left (默认) right center）
- 控制英文字符的大小：text-transform
- 文本的下划线、上划线、删除：text-decoration（none(默认) underline 下划线）
- 首行文本的缩进：text-indent （首行缩进 2em（em为相对单位，相对当前1个文字大小））
- 行高（行间距）：line-height（由上间距、下间距、文本高度组成）
- 文本添加阴影效果：text-shadow（4个参数）水平阴影距离 垂直阴影距离 模糊半径 颜色
技巧：
CSS没有提供文字垂直居中的代码，可以用此方法解决：
让文字的行高(line-height)等于盒子的高度(height)，就可以让文字在当前盒子内垂直居中
行高的上空隙和下空隙把文字挤到中间，如果行高小于盒子高，文字会偏上，反之，文字会偏下
列表样式规则
- list-style-image：用来设置列表项的标记（项目符号）图像。 url（路径）
- list-style-type：用来设置列表项的项目符号样式。 若值是none表示没有项目符号
- list-style-position：设置项目符号和文本的位置。（默认outside）
li{
list-style-image: url(./image/user.png);
list-style-type: none;
list-style-position: inside;
}
注意：
①outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐
②inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐(文本居中时，图标与文本一同居中)
CSS选择器（核心）
基础选择器
1)标签名选择器
标签名{
样式属性：值;
}
2)id选择器
#id属性值{
样式属性：值;
}
注意：
- 给标签带上id属性
- id的属性值不能重复
- 一般用于页面唯一性的元素上，经常和JavaScript搭配使用
3)类选择器
.class属性值{
样式属性：值;
}
注意：
- 给标签带上class属性
- class的属性值可以重复
- 也可以有多个类名 &nbps;&nbps;各个类名用空格隔开
- 一般在CSS修改样式中经常使用
4)通配符选择器
*{
样式属性: 值;
}
- 选择所有的标签
属性选择器
'E’代表标签名 ，'att’为标签的属性
- E[att^=value]：含义是标签的某个属性值是以给定的value开头
- E[att$=value]：含义是标签的某个属性值是以给定的value结尾
- E[att*=value]：含义是标签的某个属性含有给定的value
举例说明：
a[title^='bai']{
text-decoration: none;
/* 去掉文本的下划线 */
}
a[title$='123']{
text-decoration: none;
}
a[title*='an']{
text-decoration: none;
}
<body>
<a href="http://www.baidu.com" title="baidu">百度a>
<br><br>
<a href="http://www.sina.com.cn" title="xinlang">新浪a>
<br><br>
<a href="http://www.hao123.com" title="hao123">hao123a>
body>
复合选择器
多个选择器混合使用，之间用逗号隔开
元素1,元素2 {样式声明}
选择多种元素，定义同样的样式
ul,div,#s1,.s2{
color:red;
}
后代选择器
外层标签写前面，内层标签写后面，中间用空格分隔
元素1 元素2 {样式声明}
选择元素1里面的所有元素2（后代元素）
ul li {
color：red;
}
关系选择器
- 子元素选择器：>
只能选择某元素最近一级的子元素
h1>strong{
color: blue;
}
- 兄弟选择器：
1）用+连接两个选择器 第二个元素必须紧跟第一个元素
div>p+div{
/* div紧跟p之后 */
color: chartreuse;
}
2）用 ~ 连接前后选择器 不需要紧跟
div>p~div{
color: darkblue;
}
伪类选择器
1)元素伪类：
- E : first-child{ } 第一个元素
- E : last-child{ } 最后一个元素
- E：nth-child(n){ } 第n个元素
- E：nth-last-child(n){ } 倒数第n个元素
- E：empty{ } 匹配没有任何子元素（包括next节点） 内容为空的元素
2)链接伪类：
- E：link{ } 设置超链接a在未被访问前的样式
- E：visited{ } 设置超链接a在其链接地址已被访问过时的样式
- E：hover{ } 设置元素元素在其鼠标悬停时的样式
- E：active{ } 设置元素在被用户激活时的样式
/* 用于超链接 */
a:link{
font-size: 25px;
font-family: '宋体';
color:red
}
a:visited{
font-size: 35px;
color:green;
}
a:hover{
font-style: italic;
font-size: 45px;
color: pink;
}
a:active{
font-weight: bolder;
color: yellow;
}
实际开发中经常的写法：
a{
color:#333；
text-decoration:none;
}
a:hover{
color:#369;
text-decoration:underline;
}
注意：
①E对象必须是某个对象的子元素
②hover和active不仅适用于超链接标签，还适用于段落p标签等
顺序： link（正常状态） > visited（访问过后的状态） > hover（鼠标放上去的状态） > active（鼠标按下并未抬起的状态）
3)focus伪类：
用于获取焦点的表单元素，一般情况类表单元素才能获取
input:focus{
background-color:yellow;
}
CSS特性：
层叠性
相同选择器给设置相同的样式，此时一个样式就会层叠另一个冲突的样式
层叠性原则：
- 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
继承性
书写CSS样式表时，子标签会继承父标签的某些样式
P{
color : "red";
}
<p>
你好
<span>内容span>
p>
子元素可以继承父元素的样式（text-,font-,line-元素开头的，以及color属性）
注意： 边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性
行高的继承：
body{
font:12px/1.5 Microsoft YaHei;
}
- 行高可以不跟单位（最好不带单位，会根据文字大小自动调整行高）
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素行高是：当前子元素的文字大小*1.5
优先级
选择器的权重值：
- 继承或者 * ：0
- 元素选择器 ：1
- 类选择器 ： 10
- id选择器 ： 100
- 行内样式style=" " : 1000
- !important 重要的：无穷大
举例说明：
<body>
<p class="father" id="header">
<strong class="blue">你好呀strong>
p>
<div>你好呀div>
body>
/* 子标签选择器：选择p标签下的子标签strong */
p strong{
/* 权重1+1 */
color: black;
}
strong.blue{
/* 权重1+10 */
color: blue;
}
.father strong{
/* 权重10+1 */
color: yellow;
}
p.father strong{
/* 权重1+10+1 */
color: orange;
}
p.father .blue{
/* 权重1+10+10 */
color: gold;
}
#header strong{
/* 权重100+1 */
color: pink;
}
#header strong .blue{
/* 权重100+1+10 */
color: red;
}
注意：
- 权重值越大，优先级越高
- 复合选择器有权重的叠加
- 继承样式的权重值为0
- 行内样式优先级最高
- 权重值相同时，就近原则
- 定义了!important命令，被赋予最大的优先级