一、css基础
1、css简介：层叠样式表（美化网页，布局页面）也是一种标记语言
2、css语法规范：选择器 { 样式 } 属性和属性值之间用键值对形式出现
3、css样式格式：①紧凑型 ②展开型（建议用）样式大小写：一般用小写 空格规范：属性值前面，冒号后面，选择器和大括号之间，都要有空格
4、选择器的作用：选择标签
二、基础选择器：
1、标签选择器：html标签名作为选择器 格式：标签名 { 属性 }
优点：快速为页面中同类标签统一设置样式
缺点：不能差异化设置
2、类选择器：.类名{ 属性 } <目标标签 class=“类名”>
多类名：一个标签可以指定多个类名
①、class属性中写多个类名
②、多个类名中间用空格分开
3、id选择器：#id名{ 属性 } <目标标签 id=“id名”>
口诀：样式#定义，结构id调用，只能调用一次，别人请勿使用
4、通配符选择器（选取页面中所有的标签）：* { 属性 } 不需要调用
三、css字体属性：
1、字体系列：font-family
①、各字体之间用英文状态下的逗号隔开
②、如有空格隔开的多个单词组成的字体，加引号
③、尽量使用系统默认自带字体
2、字体大小：font-size
①、不同浏览器默认字号不一致，我们尽量给一个明确值大小，不要默认大小
②、标题标签比较特殊，需要单独指定文字大小
③、后面一定要跟px
3、字体粗细：font-weight
注：建议直接用数字，后面不跟单位
4、文字样式：font-style
normal让倾斜的字体变正
5、字体的复合属性：
font：font-style font-weight font-size/line-height font-family
①、必须按顺序写，并且以空格隔开
②不需要的属性可以省略，但必须保留font-size和font-family属性
四、文本属性：
1、行间距（行高）：line-height
行高等于盒子内的高度，可以让盒子内的文本居中
2、文本缩进：text-indent
em是一个相对单位，就是当前元素一个文字的大小
3、装饰文本：text-decoration
underline下划线 overline上划线 line-through删除线 none取消<a>标签的下划线
4、文本对齐：text-align 水平对齐
text-align:center让文本居中
5、文本颜色：color
五、css的引入方式：
1、行内式（适合修改简单样式）：在元素标签内部的style属性设置css样式
2、内部样式表
<style>理论上可以放在任何地方，但一般放在<head>中，方便控制整个页面中的元素样式设置
3、嵌入样式表
①、通过<link>引入 ②、建一个后缀名为.css的文件
六、复合选择器：
1、后代选择器：可以选择父元素里面的子元素
格式：元素1空格元素2{ } 注：元素1元素2可以是任意基础选择器
2、子元素选择器：只能选择某元素的最近一级的子元素
格式：元素1>元素2{ }
3、并集选择器：可以选择多组标签，同时定义相同样式
格式：元素1，元素2 { }
4、伪类选择器：
链接伪类选择器：
a：link选择未被访问过的链接
a：visited 选择被访问过的链接
a：hover 选择鼠标经过的链接
a：active 选择的是鼠标正在按下还没有弹起的链接
注：按照LVHA的顺序进行声明 ，a是指选择器
：focus 把获得光标的input表单选取出来
七、css的元素显示模式：
元素（标签）以什么方式进行显示
1、块元素：
①、独占一行
②、宽高内外边距都可以控制
③、宽度默认是容器（父级宽度）的100%
④、是一个盒子，里面可以放行内或块级元素
注：文字类的元素内不能使用块级元素，如p、h1等文字类块级元素
2、行内元素：
①、一行可以显示多个行内元素
②、宽高不能直接设置
③、默认宽度就是它本身内容的宽度
④、行内元素只能容纳文本或其他行内元素
注：1、链接里面不能放链接2、<a>里面可以放块级元素，但是要给<a>转换一下块级模式
3、行内块元素：
同时具有块元素和行内元素的特点 例：<img/><input/><td>
①、一行可以有多个，但是他们之间会有空白缝隙
②、默认宽度就是它本身内容的宽度
③、宽高内外边距可以控制
八、css的背景：
1、背景颜色：background-color
2、背景图片：background-image
优点：与直接插入图片，背景图片更便于控制位置 注：不要忘记url（）
3、背景平铺：background-repeat
①、默认条件下背景图片是平铺的
②、 no-repeat不平铺 repeat-y上下 repeat-x左右
4、背景图片位置：background-position（改变图片位置 ）
①、参数是方位名词：两个值前后顺序无关。只指定一个方位名词，另一个默认居中
②、参数是精确单位：第一个必须是x坐标，第二个必须是y坐标
③、参数混合单位：第一个必须是x坐标，第二个必须是y坐标
5、背景图像固定：background-attachment
scroll随对象滚动 fixed背景图像固定
6、背景复合写法：没有特定的书写顺序，一般习惯约定顺序--颜色--地址--平铺--滚动--位置
7、背景色半透明：background：rgba（0，0，0 . 3）
注：1、后面的0.3是alpha透明度，取值范围在0~1之间，0.3的0可以省略写成 .3
2、背景半透明是指盒子背景半透明，盒子内容不受影响
九、css的三大特性：
1、层叠性：
样式冲突，遵循就近原则，离那个结构近就执行那个样式，样式不冲突就不会层叠
2、继承性：
子元素会继承父元素的某些样式（text-，font-，line-这些开头的以及color可以继承）
行高的继承（如1.5）：
①、行高可以不跟单位
②、如果子元素没有设置行高则会继承父元素的行高为1.5
③、此时子元素的行高是当前子元素文字大小的1.5倍
④、这样写是子元素可以根据之间的文字大小自动调整行高
3、优先级：
①、！important>行内样式 style=“”>id选择器>类选择器，伪类选择器>元素选择器>继承或通配选择器
②、权重：∞>1000>100>10>1 （按优先级排）
③、复合选择器权重会叠加，权重虽然会叠加但不会有进位问题
十、盒子模型：
1、边框（border）：
①、 border-width边框粗细 border-style边框的样式（solid实线 dashed虚线 dotted 点线） border-color 边框颜色
②、边框的复合写法：border：粗细 样式 颜色
2、表格边框：border-collapse
①、合并相邻边框
②、边框会影响盒子的大小
③、list-style：除去li前面的小点。
3、内边距（padding）：
①、可以分别设置上下左右的内边距
②、根据数值的个数，按顺时针的方式代表
③、padding也会影响盒子的大小
④、没有指定盒子的width/height的大小，则padding不会撑开相应的值
4、外边距（margin）：
①、可以分别设置上下左右的外边距
②、根据数值的个数，按顺时针的方式代表
③、margin也会影响盒子的大小
④、相邻块元素垂直外边距的合并 取两个值中较大值的外边距
⑤、嵌套外边距的塌陷：父元素有上边距，同时子元素也有上边距，取二者的的较大值
5、盒子水平居中：
①、盒子必须有宽度
②、左右的外边距设置为auto
6、圆角边框：border-radius： （可以用数值或者百分比）
7、box-shadow（盒子阴影）：
h-shadow水平 v-shadow 上下 blur 模糊距离 spread 阴影大小 color 阴影颜色 inset 内部阴影
注：盒子阴影不占用空间
8、文字阴影：text-shadow
十一、浮动（float）：
1、页面布局
①、多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
②、先用标准流父级元素上下排列，再在内部用子元素采取浮动排列左右
2、浮动特性：
①、浮动元素会脱离文本流
②、会一行内显示并且顶部对齐
③、会具有行内块元素的特性
④、任何元素都可以浮动，不管原先是什么模式化的元素，浮动后都具有行内块元素相似的特性
3、清除浮动：clear：
left（清除左侧浮动的影响）right（清除右侧浮动的影响） both（同时清除左右两侧浮动的影响）
4、四种清除浮动的方法
①、额外标签法：在最后一个浮动元素的末尾添加一个空白的新标签
优点：通俗易懂，书写方便 缺点：添加许多无意义的标签，结构化比较差 注：新添加的必须是块级元素
②、父级添加overflow 属性值：hidden、auto、scroll
优点：代码简洁 缺点：无法显示溢出部分
③、：after 伪元素
优点：没有增加标签，结构更简单 缺点：照顾低版本浏览器
④、双伪元素
优点：代码更简洁 缺点：照顾低版本浏览器
十二、Emmet语法：
1、输入div然后按tab键，直接生成<div></div>
2、输入div*n，就可以生成n个<div></div>
3、父子级关系，输入>,如ul>li就可以生成<ul><li></li></ul>
4、兄弟关系，输入+，如div+p就可以生成<div></div><p></p>
5、生成带有类名的或id名的，输入.demo 或#two 就可以
6、如果生成的div类名带有顺序，用自主符号$,如.demo$*n,就生成
7、标签后加大括号，可以在标签内输入内容
9408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
