1 样式
(1) 行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
(2) 内嵌式
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
(3) 外链式
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2 基础选择器
(1) 标签选择器
<1> ***可以选出所有相同的标签
<2> 以标签为单位单独设置属性。
<3> 定义:
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
(2) 类选择器
<1> ***可以选出1个或者多个标签
<2> 以类为单位单独设置属性。
<3> 定义（head中的style标签内）：
<style>
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
<4> 使用（body内）：
<标签 class='类名'></标签>
<5> 多个类选择器：<标签 class='类名1 类名2'></标签>
(3) id选择器
<1> ***一次只能选择器1个标签
<2> 以id为单位设置属性。
<3> 定义（head中的style标签内）：
<style>
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
<4> 使用（body内）：
<标签 id="id名"></标签>
<5> id选择器和类选择器区别：不允许有相同名字的id对象出现，但是允许相同名字的class。
(4) 通配符选择器
<1> ***选择所有的标签
<2> 直接对所有标签设置属性。
<3> 定义（head中的style标签内）：
<style>
*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
例如：
* {
margin: 0;<!--元素与元素的间距-->
<!--已为盒子设置高宽时，则盒子为设置高宽。若不设margin，margin默认为0px，内容左对齐；若margin为auto，内容会自动在设置的
高宽范围内水平居中对齐。-->
<!--未为盒子设置高宽时，则盒子默认为内容高宽，随内容高宽变化而变化。若不设margin，margin默认为0px，内容左对齐；若margin为
auto，实际上，内容仍会自动水平居中对齐，但是不会有变化。-->
padding: 0;<!--盒子边框与盒子内部元素的距离-->
}
(5) 团队约定
<1> 尽量少用通用选择器
<2> 尽量少用 ID 选择器
<3> 不使用无具体语义定义的标签选择器 div span
(6) 优先级
优先级：内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
3 复合选择器
(1) 后代选择器
.类名 标签名{}
(2) 子元素选择器
.类名>标签名{}
(3) 交集选择器
标签名.类名{}
(4) 并集选择器
.类名,标签名{}
(5) 链接伪类选择器
a:link{} /* 未访问的链接 */
a:visited{} /* 已访问的链接 */
a:hover{} /* 鼠标移动到链接上 */
a:active{} /* 选定的链接 */
写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。
4 标签显示模式（display）
(1) 块级元素(block-level)
<1> 元素排列：一行只能放一个块级元素
<2> 设置样式：可以设置宽度高度
<3> 默认宽度：容器的100%
<4> 包含：容器级可以包含任何标签
<5> 常见元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
(2) 行内元素(inline-level)
<1> 元素排列：一行可以放多个行内元素
<2> 设置样式：不可以直接设置宽度高度
<3> 默认宽度：它本身内容的宽度
<4> 包含：容纳文本或则其他行内元素
<5> 常见元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
(3) 行内块元素（inline-block）
<1> 元素排列：一行放多个行内块元素
<2> 设置样式：可以设置宽度和高度
<3> 默认宽度：它本身内容的宽度
<4> 常见元素：<img />、<input />、<td>
(4) 标签显示模式转换 display
<1> 写在选择器内
<2> 块转行内：display:inline;
<3> 行内转块：display:block;
<4> 块、行内元素转换为行内块： display:inline-block;
5 文本外观属性
(1) color:文本颜色
预定义的颜色值：red，green，blue，pink
十六进制：#FF0000，#FF6600，#29D794
RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)
(2) text-align文本水平对齐方式
<1> left：左对齐（默认值）
<2> right：右对齐
<3> center：居中对齐
(3) line-height:行间距
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%。
可以让单行文本在盒子中垂直居中对齐。即令文字的行高等于盒子的高度。
行高=上距离+内容高度+下距离，上距离=下距离。
行高=高度，文字会垂直居中。
行高大于高度，文字会偏下。
行高小于高度，文字会偏上。
(4) text-indent:首行缩进
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值.
建议使用em作为设置单位。
(5) text-decoration:文本的装饰
<1> none：默认。定义标准的文本。 取消下划线（最常用）
<2> underline：定义文本下的一条线。下划线 也是我们链接自带的（常用）
<3> overline：定义文本上的一条线。（不用）
<4> line-through： 定义穿过文本下的一条线。（不常用）
6 front总结
(1) font-size字号：我们通常用的单位是px像素，一定要跟上单位。
(2) font-family字体：实际工作中按照团队约定来写字体。
(3) font-weight字体粗细：记住加粗是700或者bold，不加粗是normal或者400记住数字不要跟单位。
<1> normal:默认值（不加粗的）
<2> bold:定义粗体（加粗的）
<3> 100~900:400等同于normal,而700等同于bold。
(4) font-style字体样式：记住倾斜是italic,不倾斜是normal,工作中我们最常用normal。
<1> normal:默认值，浏览器会显示标准的字体样式。
<2> italic:浏览器会显示斜体的字体样式。
(5) font体样式进行综合设置
<1> 选择器 { font: font-style font-weight font-size/line-height font-family;}
<2> 注意：
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以**空格**隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
7 背景(background)
(1) 背景颜色:background-color:颜色值（默认transparent）
(2) 背景图片:background-image
<1> none
<2> url()
(3) 背景平铺:background-repeat
<1> repeat:景图像在纵向和横向上平铺（默认）
<2> no-repeat:背景图像不平铺
<3> repeat-x:背景图像在横向上平铺
<4> repeat-y:背景图像在纵向平铺
(4) 背景位置：background-position（一个或两个值）
<1> length:百分数/由浮点数字和单位标识符组成的长度值
<2> position:top/center/bottom/left/center/right
(5) 背景附着:background-attachment
<1> scroll:背景图像是随对象内容滚动
<2> fixed:背景图像固定
(6) 背景简写
background: background-color background-image background-repeat background-attachment background-position;
(7) 背景透明
background: rgba(0, 0, 0, 0.3);
8 CSS 三大特性
(1) 层叠性
<1> 选择器相同，则执行层叠性
<2> 一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
<3> 样式冲突，遵循的原则是就近原则。
(2) 继承性
<1> 子标签会继承父标签的某些样式。
<2> text-、font-、line-这些元素开头的可以继承，以及color属性。
(3) 优先级
<1> 选择器不同，就会出现优先级的问题。
<2> 权重计算公式
继承或者通配符选择器 0,0,0,0
标签选择器 0,0,0,1
类选择器、伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important ∞无穷大
<3> 权重叠加
复合选择器由多个基础选择器组合而成，需要权重叠加。
如果选中了，那么以上面的公式来计权重。谁大听谁的。
如果没有选中，那么权重是0，因为继承的权重为0。
<!--数位之间没有进制：比如说0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0-->
9 盒子模型
(1) 盒子边框
<1> border-width：边框宽度px
<2> border-style：边框的样式
虚线：dashed 实线：solid 点线：dotted 无:none
<3> border-color：边框的颜色
<4> 边框综合设置
Border:border-width border-style border-color
<5> 分别指定四个边框
Border-top、Border-right、Border-bottom、Border-left
<!--使用：将以上的border置换成四个中任意一个-->
(2) 内边距
<!--内边距是在width基础上增加，而非从width内部减去-->
<1> 参数的数量不同，效果不同。
padding 30px 上、右、下、左都是30
padding 30px 10px 上下30，左右20
padding 10px 20px 30px 上10，左右20，下30
padding 10px 20px 30px 40px 顺序上、右、下、左,
<2> 分别指定四个边框
padding-top、padding-right、padding-bottom、padding-left
<3> 盒子实际大小
盒子实际大小=内容的宽度和高度+内边距+边框
<4> 内边距产生的问题
解决方法：要不改变盒子实际大小，并且添加内边距时，设置内容宽度width，让内容减去多出来的边距。
(3) 外边距
<1> margin 边距px
<2> margin-top、margin-right、margin-bottom、margin-left
<3> 外边距实现盒子居中
盒子必须制定宽度width
然后给左右的外边距都设置为auto
<!--margin:0 auto;-->
<4> 初始化
* {
margin:0;
padding:0;
}
<5> 问题
<5.1> 外边距合并
对于两个设置外边距且相邻的块元素，垂直外边距会合并，取较大的值。
解决方法：尽量只给一个盒子添加margin值
<5.2> 嵌套块元素垂直外边距合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，取较大的值。
解决方法：
为父元素定义上边框；为父元素定义上内边距；为父元素添加overflow:hidden。
<6> 盒子模型布局稳定性
按照优先使用宽度、内边框、外边距:Width>padding>margin
浙公网安备 33010602011771号