css

用户1223725238332
117 阅读8分钟

（⼀）CSS的结构

1、语法

选择器/选择符 { 样式/声明} ===>> 选择器 {属性1:属性值1；属性2:属性值2；……；}

选择器/选择符：要⽤样式修饰的对象，包括各类标签

样式/声明：需要修改为的样⼦，结构为 属性：属性值

2、CSS代码的三种使⽤⽅式

不论那种⽅式，都应该先创建需要修饰的对象，再来书写CSS 代码

1）内部样式表（⼀般⽤于案例解说，⼩⽹站）a. 位置：css代码写在html⽂档中head标签中

css代码写在 head 标签中的 title 标签的后⾯

 需要再创建⼀个style标签，然后只能将css代码书写在style标签内

    问题： 为什么要写在head标签内？

    答：因为若把css代码写在最后⾯，当⽹络不太好时，会先把html的内容显⽰出来，⽽css代码还

没解析完，此时的⻚⾯就会很丑，影响⽤⼾体验，不利于⽤⼾优化

2）外部样式表（⼤型⽹站的构建⼀般使⽤该⽅法，将css代码与html代码分隔开来）

 位置：css代码写在css⽂件中

 新建⼀个⽂件，命名规则与HTML⼀样，不过后缀为 .css

在css⽂件⾥，直接书写css代码，不⽤再添加 style 标签，另外，在css⽂件中，只可以书写

CSS代码

 书写完毕css代码之后，打开 html⽂档，使⽤ link 标签引⽤css代码描述的样式

<link rel="stylesheet" href=" 此处填写css代码的路径地址 ">

例如： <link rel="stylesheet" href="./04-外部css代码.css" />

【注意】：rel="stylesheet" 不可删除，删了会出错

3）内联样式表 （很少使⽤）

位置：css代码写在需要修饰的属性标签内部

格式    <标签名 style="css代码">……</标签名>

例如：<p style="width: 100px;height: 100px;">我是段落</p>

4）三种⽅式的权重

内联样式表的权重最⾼

外部与内部样式表的权重相等，哪个代码在下⾯就使⽤哪个样式

（因为代码的执⾏是从上到下，从左到右，下⾯的代码会覆盖上⾯的代码）

3、CSS选择器（

1）标签选择器⸺选中某⼀类标签进⾏修饰
        格式： 标签名 {属性1：属性值1；属性2：属性值2；……；}
        
2）class选择器
        选中某⼀类标签中的某⼀个或某⼏个标签进⾏修饰

3）步骤

    先给需要修饰的标签设置class名字 <标签名 class="class名字">
    再使⽤ .class名字 来定位该标签并设置样式 .class {css代码}

4）注意
 class名字的设置

 1、可以⽤ 连字符 - 下划线 _ 英⽂字⺟开头

 2、不能以数字开头 如：class="1div"

 3、不能有中⽂和特殊字符 如：class="中国{"

 4、若命名时有多个单词，单词之间的连接只可以⽤ - _ ，或者就直接⽤驼峰命名法，      如：userName

 5、命名最好带有语义 如：div class="box1"

 6、⼀般命名越⻓越好，当代码⾮常多时，⼀⽅⾯，不会让⾃⼰的代码之间有冲突，另⼀⽅⾯，
     当需要与别⼈的代码进⾏整合时，不会与别⼈的代码命名之间有冲突

4. 引⽤class名字要在css代码中

1）格式：

html代码中

css代码中（

2） id选择器⸺同 class标签作⽤

1.先给需要命名的标签设置id名，命名规则与class命名相同 <标签名 id="id名">

2.在css代码区域使⽤ #id名字 来定位标签 #id名字 {}

3.与class选择器的不同之处

    class选择器中⼀个属性可以有多个class名 如：<p class="text1 style1">

    但是id选择器中每个属性只能由⼀个ID名字


3）通配符选择器⸺选中⻚⾯中所有的标签进⾏修饰

1.在CSS代码区域，直接输⼊ * { css 代码}

2.因为影响范围太⼤，所以⼀般很少⽤

3.⼀般⽤于去除内外边距

4）群组选择器⸺选中⼀组标签进⾏修饰

格式：选择器1，选择器2，选择器3 {} 选择器之间⽤逗号进⾏连接

5）后代选择器⸺选中处于嵌套关系中的某⼀标签进⾏修饰1）格式：选择器1 选择器2 选择器3 {} 选择器之间⽤空格进⾏连接

⸺注意：后⾯的选择器必须为前⾯的选择器的后代，即后⾯的选择器处于前⾯选择器的嵌套

之中，且样式会作⽤到最后⼀个选择器⾝上，如上⾯的选择器3，⽽前⾯的选择器就只是限制范围

5.后代选择器与群组选择器的配合

注意：群组选择器中，以⼀个逗号代表各个选择器之间的分隔

⸺所以 .father .son1,.son2 代表的是 father中的son1和所有的son2

若要father中的son1、son2变为绿⾊背景，则 .father .son1,.father .son2

1）后代选择器与通配符选择器的配合

例⼦◦ 现在要让Tom中所有的标签为绿⾊

2）后代选择器与超链接的配合

例⼦

让所有字体颜⾊为红⾊ ，⼜希望⼆级标题为蓝⾊

3）⼦代选择器⸺选中处于嵌套关系中为⼦代关系的标签进⾏修饰

4）格式：选择器1>选择器2>选择器3 {} 选择器之间⽤⼤于符号连接

⸺注意：后⼀个选择器必须为上⼀个选择器的⼦代，不能是后代，即使爸爸跟⼉⼦，不能是爷爷

和孙⼦例⼦

5）应⽤场景：当⼀个⼤标签内部有多个同类标签，但我们只需要设置其中⼀个标签时

6）伪类选择器⸺修饰超链接或者设置⿏标移⼊和⿏标按下效果

7）格式（顺序不可变，前两个属性只能⽤于超链接）

    :link⸺未访问超链接时，超链接的样式

    :visited⸺访问过超链接了，超链接显⽰的样式

    :hover⸺⿏标移⼊标签时，标签显⽰的样式

    :active⸺⿏标安下标签时，标签显⽰的样式

8）例⼦：超链接

9）例⼦：其他标签4）hover与后代选择器的配合

格式：⿏标移⼊的对象 作⽤的对象 {显⽰的样式} （若是作⽤的对象是本⾝可不写）

6、CSS选择器的权重

1）各个选择器的权重如下：

！important 10000

内联样式表 1000

id选择器 100▪ class选择器 10

伪类选择器 10

标签选择器 1

通配符 0

继承的样式 0

后代选择器 权重为各个选择器的总和

⼦代选择器 权重为各个选择器的总和

群组选择器 看⾃⾝，每个选择器计算⾃⼰的权重

2）权重的作⽤

当由多个选择器针对同⼀个标签设置了不同的样式时，哪个选择器的权重最⾼，最终就会采⽤

哪个选择器设置的样式。

如同时针对p标签，id选择器设置背景颜⾊为⿊⾊，class选择器设置背景颜⾊为绿⾊，⽽内联

样式表设置为粉⾊，那么最终会采⽤的样式为粉⾊，因为内联样式表的权重时三个中最⾼的。

3）！important（四个注意事项）

!important只能加在属性后⾯，需要空格 如：（color：red !important）

每个属性后⾯只能加⼀个!important 如：（color：red !important !important 这种格式是错误的）

当两个选择器中都设置了不同的⻓宽、颜⾊时，若important只加在了颜⾊属性上，那么⻓

宽则看哪个选择器的权重⾼，就采⽤哪个选择器的⻓宽（即冲突属性看important 不冲突

属性看权重）

    不建议加给内联样式，因为这是强上加强，之后再使⽤!important改变样式就会⽐较复杂了

    若是针对同⼀个标签的同⼀个属性，都加了 !important ，此时哪个选择器的权重更⾼就显⽰谁的样式

4）后/⼦代选择器的权重叠加 （具体看 day04-02后代选择器权重）

后/⼦代选择器的权重是其中的每⼀个选择器的权重相加得来的

5）css的三⼤特征

7.继承

当嵌套关系中的⼦元素没有设置样式但⽗元素设置了样式时，⼦元素会采⽤部分⽗元素的样式。

 嵌套关系中的⼦元素可以继承⽗元素中的⽂本属性、表格属性、列表属性

 继承的权重为

 指定⼤于继承！嵌套关系中

 若⽗代设置了样式，⼦代没有设置样式，则⼦代继承⽗代的部分样式；

 若⽗代设置了样式，⼦代也设置了样式，则⼦代继采⽤⾃⼰的样式；

8.层叠

当针对同⼀个标签，多个选择器设置的样式没有冲突时，那么最后该标签呈现会是所有选择器的样式层层叠加起来的效果

9.优先级

当有多个选择器针对同⼀标签的同⼀属性进⾏样式设置时，此时有冲突，谁的权重最⾼，最终采⽤哪个选择器的样式

10.⼩技巧 设置⽤⼾代码⽚段

打开Vscode⸻ 设置⸻—⽤⼾代码⽚段⸻ 新建全局代码⽚段⽂件⸻ 将所需要

的代码粘贴进去，其中"prefix": 后⾯输⼊的就是触发代码的快捷键名字,"description":代码段描述，在

⽂件中输⼊prefix时的提⽰信息

如： "prefix": "hy"⸻⸻代表输⼊hy,按下回⻋会出现该段代码
avatar
文章
阅读
粉丝