目录
1.介绍
层叠样式表
层叠：多个样式可以用于同一个元素
样式：color、font-size
表：css代码、css文件
作用：修饰页面
******选择器 样式 布局
2.工作原理
加载html，然后加载css，将html和css结合，创建DOM树（文档对象类型）
浏览器显示DOM
DOM：文档对象模型，树形结构，元素、属性、文本称之为节点
3*.语法
1)声明：
属性名：属性值
css中区分大小写，对大小写比较敏感
2)声明块：
将多个声明放在一个 {} 里面，每个声明之间使用 ；分隔
选择器 {
color：red；
font-size:12px;
……
}
3)规则
选择器 {
color：red；
}
4)注释：/*注释内容*/
作用：1.记录你的编程思路
2.便于后期代码的维护
5)空白：可以在css代码中添加一些空白（空格、回车），提高代码的可读性
color：red；
font-size:12px;
6）速写形式
font
font-size
font-weight
……
padding：1px 2px 3px 4px；
padding-top
padding-left
padding-right
padding-bottom
margin
4.如何让在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标签引入
优点：结构和样式可以分离
复用率提高
选择器 + 规则（样式）+ 布局 + 动画
5.css选择器
作用：选择元素
核心选择器
1）标签选择器
div {
规则；
规则；
...
}
选中标签为div的所有元素
2）id选择器
#id {
规则；
规则；
...
}
3) 类选择器
.class {
规则；
规则；
...
}
4）普遍选择器
*
层次选择器
1）后代选择器
ul li {
规则；
规则；
...
}
选中ul下面的所有li
2）子代选择器
.bottom > p {
规则；
规则；
...
}
3）相邻同胞选择器
选中class为bottom的直接子元素p
.jiangsu + li {
规则；
规则；
...
}
选中class为江苏这个元素的下一个兄弟元素
4）一般同胞选择器
.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属性，并且值包含val
[atrr ~= val] 选中具有atrr属性，并且其中一个值为val
伪类选择器
1）子代元素相关的伪类选择器
ul:first-child {
规则；
规则；
....
}
选中ul的第一个孩子
ul:last-child {
规则；
规则；
....
}
选中ul的最后一个孩子
ul:nth-child(参数) {
规则；
规则；
....
}
参数的取值：
1.数字
2.关键字（odd=>奇数，even=>偶数）
选中参数值的孩子
2）元素状态相关的
:hover 鼠标悬停在上面时
:link 用于a标签 选中前的状态
:visited 用于a标签 访问之后的状态
伪元素选择器
::after 选中之后不存在的元素
::before 选中之前不存在的元素
6.优先级
1)权重(特性值)
2)后面的样式会覆盖前面的样式
3)!important
通过4个特性值来量化一个选择器
Thousands
声明在元素的style属性中。特性值记为1000
Hundreds
包含在一个选择器中的所有ID选择器，特性值记为100
Tens
包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10
Ones
包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1
7.继承
CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等
Inheritance
inherit 继承父元素的样式
initial 不继承。应用浏览器的默认样式
unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。
8.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff,#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 像素
相对单位
em 相对于当前元素的字体大小
div font-size：12px 1em = 12px width:10em
rem 相对于html上的字体大小
div html:10px 1rem = 10px 10rem = 100px
选择器 + 样式（文本、字体、盒子、表格、列表）
9.文本相关样式（可以被继承）
1）color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)
2）font-family 给文本设置字体（字体栈、字体族）
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体
monospace 等宽字体，用于代码，字体中每个字宽度相同
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体
网络字体
@font-face {
font-family: myfont;
src: url(./陈代明行楷简体.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)
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 颜色值
字体图标库
将icon加入到购物车，加入项目，Unicode ， 复制代码 放到style标签中
10.列表相关样式
list-style
list-style-type 列表的类型
none 没有类型
disc 一个实心的小黑圆圈
circle 一个空心的小圆圈
square 一个块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
decimal-leading-zero 十进制的值
list-style-image 自定义设置列表项标志
none 没有图片
url（） 图片的路径
list-style-position 设置列表项标志出现的位置
outside [默认值]显示在主块的外部
inside 显示在主块的内部
11.其他样式
1)cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标
pointer 手型
crosshair十字交叉
wait 等待
help 帮助
move 移动
text 文本
2)***line-height 行高
给元素设置行高等于盒子的高度，那么盒子中的文本将垂直居中
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之间的值
7）overflow 溢出部分的处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
12.盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding 内边距
padding-top
padding-right
padding-bottom
padding-left
margin 外边距
margin-top
margin-right
margin-botoom
margin-left
border 边框
border-width 为元素指定边框的宽度
关键字 thin 、medium、thick
单位 px、em
border-style 为元素指定边框样式
none 不设置
hidden 隐藏
dotted 显示一系列的点
dashed 显示一系列小线段
solid 显示一条单一的实心直线
double 显示两条实心直线
groove 边框雕刻效果(与ridge相反)
ridge 与groove相反
inset 嵌入式边界框(与outset相反)
outset 突出的边界框
border-color 为元素指定边框颜色
关键字、十六进制、rgb函数、rgba函数
border-radius 为元素指定圆角
background 为元素设置背景
background-color 为元素设置一种颜色
background-image 为元素设置一个背景图片
background-size 设置背景的大小
background-repeat 设置背景图片的重复方式,默认重复
background-origin 设定背景的起始点
background-clip 设定背景的覆盖范围
background-attachment 设置背景图片的固定点
scroll 默认值，背景图像会随着页面其余部分的滚动而移动画
fixed 背景图相对于视口固定
background-position 设置为背景图像初始位置，可以实现图片精灵
13. ****盒子模型
所有的元素都可以看作一个盒子
1)内容盒子（w3c盒子、标准盒子）
box-sizing:content-box
width = 内容的宽度
2)边框盒子（怪异盒子、IE盒子）
box-sizing:border-box
width = 内容 + padding + border
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
