1.Html 和css结
构样式分离,写法上html 属性和属性值用"=“拼接。Css属性和属性值是”:"拼接
2.Css 层叠样式表
(1)Css 写法一 style内联样式表 ,在bady标签里的标签里写
(2)Css写法二 内部样式 ,在style标签里写
(3)Css写法三 外部样式表,用link 标签写(@import 另一种表达方式,不推荐使用)
3.层叠:
(1)同一个元素使用了不同的样式表,所有的样式进行叠加就是层叠。
4.冲突:
(1)同一个元素设置相同的属性会造成冲突,遵循就近原则选择属性值。
5.继承:
(1)在子父关系中,文本样式可以被继承,布局样式不可以被继承(块级元素继承父的宽,行级不可以)
6.颜色:
(1)Color background-color
(2)英语字母
(3)16进制(需要的时候查16进制颜色表)
(4)Rgb(0-255,0-255,0-255,)
(5)Rgba(0-255,0-255,0-255,0-1)a透明度
7.Hsl:色相,饱和度,亮度
8.H:0/360红色 120绿色 240 蓝色(0~360)
9.Hsla:hs1基础上加了透明
10.标签选择器
(1)全局选择器
①ul li {list-style:none}去除无序列表的点
(2)Class 选择器
①.q{background-color:}
(3)id 独一无二的
①#q{background-color:}
(4)群组选择器
①b,a{background-color:}
11.层次选择器
(1)子代选择器 (>)
①Ul>li{}
(2)后代选择器 (空格)
①ul li {list-style:none}
(3)相邻兄弟(+)向下原则
①.uu+a{background-color:}
(4)通用兄弟 (~)向下原则
①.uu>li~a
12.伪类选择器
(1)Ui 伪类 a 标签使用(如果4种效果全有顺序不能乱)
①b+a:link{background-color:}(默认状态)
②b+a:visited{background-color:}(访问过后的状态)
③b+a:hover{background-color:}(鼠标悬浮)
④b+a:active{background-color:}(鼠标按下)
(2)结构伪类
①Ul li:nth-child(3){background-color:}
②a:nth-child(找第几个就填几){background-color:}
引入外部样式表的方法Link与@inport的 区别:
【无标题】
于 2023-08-02 14:37:02 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)