笔记05 初步了解CSS |青训营

113 阅读3分钟

CSS,层叠样式表:用来定义页面的样式(设置字体/颜色/位置大小/动画效果)

  • 基础代码

h1:选择器(选中页面中的元素,并且给其定义样式)

当选择器是h1时给所有h1标签的文字定义样式

color:颜色属性(colour:white;)

属性+属性值称作一个声明,将多条声明用分号隔开放在大括号内,组成一个声明块 

1.jpg

在页面中使用CSS

①外链(推荐),将定义放在单独的文件中,使用link标签将其引入到页面中

②嵌入,将样式的代码嵌入到标签里

③内联(不推荐),把具体的样式和某一种标签绑定

2.jpg

  • CSS如何应用到样式中

3.jpg

  • 选择器

01通配选择器

*{:是匹配所有的选择器

02标签选择器

用标签选择样式

03id选择器

如果设定一段代码h1 id="logo"

那么后续直接引用“#logo{”即可

4.jpg

04类选择器

同一类的标签可以用class的选择器选中一系列的标签

5.jpg

属性选择器

根据特定的属性来选中元素

6.jpg

同样可以对属性做一些匹配,并不一定就是这个属性要定于一个确切的值

如href^="#"那么只要是“#”开头的文字都会被匹配上并且可以通过定义改变它的结构

7.jpg

  • 伪类

①状态性伪类,这种元素要处在一种特定的状态下才能够被选中,例如链接,存在被点击过的也没有被点击过的(已经被访问过的链接/鼠标移到链接上/鼠标点击链接时)

7.jpg

元素在和用户交互的时候存在不同的状态,那么在不同的状态下可以把它们设置成完全不一样的样式

②结构伪类

根据dom节点在dom树上的位置来决定是否选中这个标签

例如li:first-child是选中之前的一个标签的状态(再有排名1/2/3的情况下)

  • 组合

如果b是a元素的子孙无论如何都会选中b标签

a~b若a和b同级的标签,选中所有的a后方的b标签

8.jpg

要注意不同的语法对应的一种组合选中的方式

9.jpg

  • 选择器组

当想要同时给多个选择器定义相同的样式,可以直接用“,”来展示一整个选择器组

12.jpg

二.颜色

  • RGB

在CSS中用RGB的颜色模型来表示颜色

RGB模型通过指定每一种原色数量得多少来设定颜色

通过滑块调解颜色的比例可以获得不同的颜色

如rgb(143,172,135)是表示一种颜色,顺序表示红色绿色蓝色的值,或者直接用“#8fac87”的十六进制来表示该颜色

弊端:无法直接通过看到表达式就直接了解到是什么颜色,比如看到#8fac87我们并不知道这是什么颜色

  • 颜色hsl

色相(色轮选择)+饱和度+亮度