css（前端三要素之一）
1.介绍
作用：修饰页面的
css：层叠样式表
层叠：多个样式用于同一个元素
样式：color font-size
表：css代码，css文件
选择器 样式 布局
工作原理：加载html，然后加载css，将html和css结合，创建DOM树，浏览器显示DOM
DOM：文档对象模型，树形结构，元素、属性、文本称之为节点
2.语法
声明
属性名：属性值
css中区分大小写，对大小写比较敏感
声明块
将多个声明放在一个 {} 里面，每个声明之间使用 ；分隔
{
color:red;
font-size:12px;
}
规则
选择器 {
color:red;
}
注释：/*注释内容*/
作用：1.记录你的编程思路
2.便于后期代码的维护
空白：可以在css代码中添加一些空白（空格、回撤），提高代码的可读性
color：red;
font-size:12px;
速写形式
类似于font，background， padding， border， margin 这些都被称为速记属性。这些属性允许在一行中写多个属性值。速记属性可以节省时间，使代码整洁。
padding：1px 2px 3px 4px；
padding-top
padding-right
padding-bottom
padding-left
padding: 10px 15px 15px 5px;
等价于
padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px
margin
如何在html中使用css
1.行内样式
将样式写在元素的style属性中
<div style='color:red;font-size:22px;'>
缺点： 结构和样式没有分离
代码的复用率低
优点：优先级高
2.内联样式
将代码写在head标签中的style标签中
<style>
选择器 {
color:red,
font-size:19px;
}
</style>
缺点：代码的复用率不高
优点：结构和样式可以分离
3.外部样式
在外部定义一个后缀名为.css的文件，在head中使用link标签引入
优点：结构和样式可以分离
复用率提高
选择器 + 规则（样式）+ 布局 + 动画
3.css选择器
作用：选择元素
核心选择器
1）标签选择器
div {
规则；
规则；
...
}
选中标签为div的所有元素
2）id选择器
#id {
规则；
规则；
...
}
3) 类选择器
.class {
规则；
规则；
...
}
4）普遍选择器
*
层次选择器
后代选择器
ul li {
规则；
规则；
...
}
选中ul下面的所有li
子代选择器
.bottom > p {
规则；
规则；
...
}
选中class为bottom的直接子元素p
相邻同胞选择器
.jiangsu + li {
规则；
规则；
...
}
选中class为jiangsu这个元素的下一个兄弟元素
一般同胞选择器
.jiangsu ~ li {
规则;
规则;
...
}
选中class为江苏的所有兄弟元素
多选择器
1）逗号选择器
h1,h2,h3,.test {
规则；
规则；
...
}
选中h1、h2、h3、class为test的元素
2）组合选择器
a.baidu {
规则；
规则；
...
}
选中class为baidu的a标签
属性选择器
[atrr] 选中具有属性atrr的元素，不管属性的值为多少
[atrr=val] 选中具有atrr属性，并且值为val
[atrr ^= val] 选中具有atrr属性，并且值以val开头
[atrr $= val] 选中具有atrr属性，并且值以val结尾
[atrr *= val] 选中具有atrr属性，并且值包含valable
[atrr ~= val] 选中具有atrr属性，并且其中一个值为val
伪类选择器
子代元素相关的伪类选择器
ul:first-child {
规则；
规则；
....
}
选中ul的第一个孩子
ul:last-child {
规则；
规则；
....
}
选中ul的最后一个孩子
ul:nth-child(参数) {
规则；
规则；
....
}
参数的取值：
1.数字
2.关键字（odd=>奇数，even=>偶数）
选中参数值的孩子
元素状态相关伪类选择器
:link 未被访问的状态，a标签
:visited 已访问过的状态，a标签
:hover 鼠标悬停的状态，a标签，其他标签也可用
:active 活动的状态， a标签，其他标签也可用
:focus 聚焦的状态
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
:enabled、 :disabled 可用的表单控件、禁用的表单控件
:valid 、:invalid 通过验证的、不通过验证的
:required、:optional 必填的和选填的
:in-range 、:out-of-range 在范围内的、在范围外的
伪元素选择器
::after 选中之后的不存在的节点，可配合content属性进行内容填充
::before 选中之前的不存在的节点，可配合content属性进行内容填充
::first-letter 选中第一个文本字符
::first-line 选中第一行文本
::selection 选中用户在选择的时候的文本
4.优先级
1)权重(特性值)
Thousands
声明在元素的style属性中。特性值记为1000
Hundreds
包含在一个选择器中的所有ID选择器，特性值记为100
Tens
包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10
Ones
包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1
2)后面的样式会覆盖前面的样式
如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。
采取就近原则。
3)!important
在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。
5.继承
CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等
inherit 继承父元素的样式
initial 不继承。应用浏览器的默认样式
unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。
6.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff = #fff,#cccccc,#ff0000
rgb函数 rgb(0,0,0),rgb(0~255,0~255,0~255)
rgba函数 rgba(0~255,0~255,0~255,0~1)
长度
绝对单位
px 像素
像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位有 mm, cm, in，毫米（Millimeters），厘米（centimeters），英寸（inches）
相对单位
em 相对于当前元素的字体大小 浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div font-size：12px 1em = 12px width:10em
rem 相对于html上的字体大小 浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div html:10px 1rem = 10px 10rem = 100px
%
占父元素的百分比。例如：50%
选择器 + 样式（文本相关、字体、盒子、表格样式、列表样式）
7.文本相关的样式
文字相关的样式（可以被继承）
1）color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)
2）font-family 给文本设置字体（字体栈、字体族）
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体
monospace 等宽字体，用于代码，字体中每个字宽度相同
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体
网络字体
@font-face {
font-family: myfont;
src: url(./FZZJ-HGXSJW.TTF)
}
p {
font-family: myfont;
}
3）font-style 用于打开和关闭斜体
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体
4）font-weight 字体的粗细程度
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度（值越大字体越粗）
5）text-align 文本的排列方式
left 左对齐
center 居中
right 右对齐
6）text-transform 允许字体变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
7）text-decoration(line style color)
设置或者取消文本修饰
速写属性 line style color
text-decoration-line
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration-style
solid(实线)
wavy(波浪线)
dashed(虚线)
dotted(点状线)
double(双实线)
text-decoration-color
关键字、十六进制的值、rgb函数、rgba函数
8）text-shadow（h-shadow v-shadow blur color） 文本的阴影
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
字体图表库
iconfont
4.优先级
1)权重(特性值)
Thousands
声明在元素的style属性中。特性值记为1000
Hundreds
包含在一个选择器中的所有ID选择器，特性值记为100
Tens
包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10
Ones
包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1
2)后面的样式会覆盖前面的样式
如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。
采取就近原则。
3)!important
在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。
5.继承
CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等
inherit 继承父元素的样式
initial 不继承。应用浏览器的默认样式
unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承</title>
<style>
.main{
background-color: brown;
font-size: 30px;
}
p{
font-size: initial;
}
</style>
</head>
<body>
<div class="main">
<p>hello</p>
<p>world</p>
</div>
</body>
</html>6.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff = #fff,#cccccc,#ff0000
rgb函数 rgb(0,0,0),rgb(0~255,0~255,0~255)
rgba函数 rgba(0~255,0~255,0~255,0~1)
长度
绝对单位
px 像素
像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位有 mm, cm, in，毫米（Millimeters），厘米（centimeters），英寸（inches）
相对单位
em 相对于当前元素的字体大小 浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div font-size：12px 1em = 12px width:10em
rem 相对于html上的字体大小 浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div html:10px 1rem = 10px 10rem = 100px
%
占父元素的百分比。例如：50%
选择器 + 样式（文本相关、字体、盒子、表格样式、列表样式）
7.文本相关的样式
文字相关的样式（可以被继承）
1）color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)
2）font-family 给文本设置字体（字体栈、字体族）
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体
monospace 等宽字体，用于代码，字体中每个字宽度相同
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体
网络字体
@font-face {
font-family: myfont;
src: url(./FZZJ-HGXSJW.TTF)
}
p {
font-family: myfont;
}
3）font-style 用于打开和关闭斜体
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体
4）font-weight 字体的粗细程度
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度（值越大字体越粗）
5）text-align 文本的排列方式
left 左对齐
center 居中
right 右对齐
6）text-transform 允许字体变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
7）text-decoration(line style color)
设置或者取消文本修饰
速写属性 line style color
text-decoration-line
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration-style
solid(实线)
wavy(波浪线)
dashed(虚线)
dotted(点状线)
double(双实线)
text-decoration-color
关键字、十六进制的值、rgb函数、rgba函数
8）text-shadow（h-shadow v-shadow blur color） 文本的阴影
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
字体图表库
iconfont
列表样式
list-style [<type>][<image>][<position>]
1）list-style-type 列表的类型
none 没有类型
disc 一个实心的小黑圆圈
circle 一个空心的小圆圈
square 一个块
decimal 数字
lower-roman 小写罗马数字 i, ii, iii, iv, v…
upper-roman 大写罗马数字 I, II, III, IV, V…
decimal-leading-zero 十进制的值
2）list-style-image
none 没有图片
url（） 图片的路径
3）list-style-position
outside [默认值]显示在主块的外部
inside 显示在主块的内部
其他样式
1）cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标
pointer 手型
crosshair十字交叉
wait 等待
help 帮助
move 移动
text 文本
2）line-height 行高
给元素设置行高等于盒子的高度，那么盒子中的文本将垂直居中
一般不写绝对单位 一般写em 容易修改
3）outline 环绕边框
类似于盒子的边框，但是不占空间
outline-width 边框线的宽度
outline-style 边框线的样式
outline-color 边框线的颜色
outline-offset 边框线的偏移
4）dispaly 控制盒子的显示方式
inline 行内显示，宽高无效(行内元素)
block 块级显示，宽高有效（块级元素）
inline-block 行内显示同时宽高有效（行内块）
none 不显示，不占据屏幕空间（隐藏）
5）visibility 显示于隐藏
hidden 隐藏，占据屏幕的空间
visible 显示
6）opacity 透明度 0～1之间的值，取值为0的时候隐藏，占据屏幕空间
7）overflow 溢出部分的处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
