1:选择器:
1:标签选择器:标签名{css属性名:属性值;}
标签选择器选择的是该标签名所有标签,而不是单独某一个标签选择器无论嵌套关系有多深,都能找到对应的标签.
2:类选择器:标签名{css:属性:值;}
◆:谁调用谁生效,不调用,不生效. ◆:一对多,一个类选择器可以被多个标签同时调用 , ◆:多对一 ,多个类选择器可以作用到同一个标签上' '
类选择器的命名规范:不能使用纯数字或英文,不推荐使用纯英文 , 不能使用特殊符号 , _和-作为连接符使用.
3:id选择器:ID属性值{css属性名:属性值;}
具有唯一性 ,谁调用,谁生效 . 一个标签只能使用一次id选择器 , 一个标签可以同时调用类选择器和ID选择器.
◆:所有标签上都有ID属性 ,id属性值类似与身份证号码 ,在一个页面是唯一的 ,不可重复的! 一个标签上只能有一个ID属性;一个ID选择器只能选中一个标签 .
4:配符选择器:
*代表所有 ,选择页面的标签设置相同的样式, 不用调用. 开发中使用极少 ,只会在特殊情况下才会用到,常用于去除标签默认的margin和padding
5:字体
6:背景:分为背景颜色 , 背景图片 ,平铺与位置 ,background连写
7:文本修饰:text-decoration
8: 后代选择器:
后代选择器 ,是为了选择父元素里面的子元素 ◆:父元素在前 , 子元素在后 ,用空格连在一起 ,◆:只要能代表 父元素子元素 ,可以是任意选择器等的组合 .
9:子代选择器:
选择父元素 的直接下一级(亲儿子) 父元素在前 , 亲儿子在后 ,用>号连在一起
10:[◆并集选择器:多个选择器通过逗号连在一起 ,设置相同的样式 ,注意:并集选择器 最后一个不严加逗号.] [◆:交集选择器: 标签 + 类 (ID) 选择器 满足2个条件 , 同时调用了后边的类(ID) 选择器] [◆:hover 伪类选择器 鼠标悬停到标签上的状态]
11:元素的显示模式:
[◆:块元素 ;div p h1-h6 ui ol dl dt dd form header nav artice footer 独占一行, 块元素不设置宽度的时候 默认父元素的宽度 ,不设置高度的时候 ,默认高度为0 , 内容撑开高度 ,可以设置宽高]
[◆:行内元素: a, span , strong , b ,em ,i ,deel , s i , ins , u ,一行可以显示多个, 内容撑开宽高 , 代码换行生成缝隙 , 行内元素不能设置宽高]
[◆:行内块元素: img , input , textarea , button , select , 一行可以设置多个 可以设置宽高,代码换行自动生成缝隙 ]
12:圆角边框: 让四个盒子变得圆润 ,增加页面细节, 提升用户观感体验, [属性名: border-radius] 常见取值: 数值 + px ,百分比
取值规划:从左上角开始赋值 ,然后顺时针赋值, 没有赋值的看对角 ! [border-radius:左上角 , 右上角 , 右下角 , 左下角]以左上角起顺时针的方向 .
13:文字阴影:阴影可以增加设置 , 每组阴影取值之间以逗号隔开 , 属性名:box-shadow
14:盒子阴影: 属性名:text-shadow
15:定位:设置偏移值, 分为两个方向 ,水平和垂直方向一个使用即可 ,选取的原侧一半就近原则,
静态定位:默认值,就是之前认识的标准流, 不能通过方位属性进行移动, 之后说的定位不包括静态定位, 一般指 :相对,绝对,固定.
相对定位:自恋性定位,相对于自己之前的位置进行移动, 特点:需要配合方位属性实现移动,默认相对于浏览器可视取域进行移动 在页面中不占位置,
绝对定位:拼爹型定位,相对于静态定位的父元素进行定位移动 , 需要配合全方位属性实现移动,
默认相对于浏览器可视区域进行移动,
在页面中不占位置→已经脱标
16:清除浮动的方法:
1:直接给父元素高度 , 优点:简单粗暴 ,方便 , 缺点:有些布局中不能固定父元素高度,
2:额外标签法:在浮动的对象的父元素里面最后添加一个块元素 给添加的块级元素设置clear.botth
3:单伪元素类似于额外标签法 ,用css创建一个为标签,用伪元素替代额外标签法
4:双伪元素: 优点:项目中使用,直接给标签加类即可清除浮动
5:给父元素设置overflow:hidden:直接给父元素设置 overflow : hidden 优点:方便
6:扩展:——直接给受影响的盒子设置clear:both;
17:css特性:
1:继承性:
◆:特性:子元素有默认继承父元素样式的特点(仅限文本类的属性)
控制文字的属性都能继承,不是控制文字的都不能继承
◆:可以继承的常见属性(文字控制属性都可以继承)
◆:相同的选择器才会有层叠性
2:层叠性:
◆:给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效样式(样式冲突—则会覆盖)
给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上(样式不冲突—则叠加)
◆:注意点:
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
3:优先级:
4:权重叠加计算: