CSS,层叠样式表:用来定义页面的样式(设置字体/颜色/位置大小/动画效果)
- 基础代码
h1:选择器(选中页面中的元素,并且给其定义样式)
当选择器是h1时给所有h1标签的文字定义样式
color:颜色属性(colour:white;)
属性+属性值称作一个声明,将多条声明用分号隔开放在大括号内,组成一个声明块
在页面中使用CSS
①外链(推荐),将定义放在单独的文件中,使用link标签将其引入到页面中
②嵌入,将样式的代码嵌入到标签里
③内联(不推荐),把具体的样式和某一种标签绑定
- CSS如何应用到样式中
- 选择器
01通配选择器
*{:是匹配所有的选择器
02标签选择器
用标签选择样式
03id选择器
如果设定一段代码h1 id="logo"
那么后续直接引用“#logo{”即可
04类选择器
同一类的标签可以用class的选择器选中一系列的标签
属性选择器
根据特定的属性来选中元素
同样可以对属性做一些匹配,并不一定就是这个属性要定于一个确切的值
如href^="#"那么只要是“#”开头的文字都会被匹配上并且可以通过定义改变它的结构
- 伪类
①状态性伪类,这种元素要处在一种特定的状态下才能够被选中,例如链接,存在被点击过的也没有被点击过的(已经被访问过的链接/鼠标移到链接上/鼠标点击链接时)
元素在和用户交互的时候存在不同的状态,那么在不同的状态下可以把它们设置成完全不一样的样式
②结构伪类
根据dom节点在dom树上的位置来决定是否选中这个标签
例如li:first-child是选中之前的一个标签的状态(再有排名1/2/3的情况下)
- 组合
如果b是a元素的子孙无论如何都会选中b标签
a~b若a和b同级的标签,选中所有的a后方的b标签
要注意不同的语法对应的一种组合选中的方式
- 选择器组
当想要同时给多个选择器定义相同的样式,可以直接用“,”来展示一整个选择器组
二.颜色
- RGB
在CSS中用RGB的颜色模型来表示颜色
RGB模型通过指定每一种原色数量得多少来设定颜色
通过滑块调解颜色的比例可以获得不同的颜色
如rgb(143,172,135)是表示一种颜色,顺序表示红色绿色蓝色的值,或者直接用“#8fac87”的十六进制来表示该颜色
弊端:无法直接通过看到表达式就直接了解到是什么颜色,比如看到#8fac87我们并不知道这是什么颜色
- 颜色hsl
色相(色轮选择)+饱和度+亮度