CSS基础|青训营笔记

BalsamPear97
215 阅读9分钟

这是我参与【第四届青训营】笔记创作活动的第二天。 以下是几个CSS领域经典面试问题，希望大家能带着问题阅读本文，欢迎在评论区讨论：
1. import和link方式导入CSS有什么区别？
2. CSS选择器有哪几种？
3. CSS的优先级？如何计算CSS的优先级数字？

CSS——Cascading Style Sheets层叠样式表

用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果
    样式规则：#box{width:100px; height:100px;}

工作原理：

CSS引入方式

在一个页面映入CSS，共有4种方式：

  • 行内样式
  • 内嵌式样式
  • 外部（链接式）样式
  • 导入样式（不常用）

一、行内样式表

1、行内样式表的位置
行内样式表的CSS是在“HTML标签的style属性”中定义的。
如: <span style="color:red">xxxx</span>
2、行内样式表优缺点
缺点:代码不简洁，不利于维护，HTML文件体积大优点：CSS样式优先级高，开发具有一定便利性
单独特殊的CSS代码写在行内无伤大雅，但是可重复利用的样式会增加整体的大小，单独写CSS出来即有利于维护，又可以缓存，减少HTTP请求数量和缩小请求文件大小的问题。 注:在实际开发中，建议使用外部样式表\color{#FF0000}{注:在实际开发中，建议使用外部样式表}

二、内部样式表

1、内部样式表位置
HTML文件<head>标签中<style>标签
2、优缺点
优点：
速度快，直接在HTML文档中读取样式
适合项目页面不多，CSS代码也不多的情况
缺点：
CSS代码在多个HTML文件中无法复用，不适合大型项目，维护困难

三、外部样式表

1、外部样式表位置
在xx.css文件中单独定义，然后在HTML文件的<head>标签对中使用<link>标签来引用。
2、引用语法
<link rel="stylesheet" type="text/css" href="文件路径"/>
3、优缺点
优点：
实现了结构层和表现层的分离，提高代码可维护性

四、导入样式（import）

1﹑语法：
@import url；
@import url list-of-media-queries；
2、位置：
可以在HTML中定义，或者在style标签、CSS文件中定义
3﹑优缺点：
（1）兼容性不好，使用@import引入CSS样式表，跟链接样式相似，但是在老版本的浏览器中（低于ie5）是不支持@import的
（2）加载时间慢，import的CSS文件需要等到所有文件下载之后才能下载。
优点：
有模块化思想，与编译配合，可以按需加载

CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
（1） 基础选择器：

  1. 标签选择器
  • 标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
  • 基本语法格式：标签名{属性1:属性值1;属性2:属性值2;}
  • 所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
    eg：使用p选择器定义HTML页面中所有段落的样式。
    p{ font-size:12px; color:#666; font-fami1y:"微软雅黑";}
  • 标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
  1. ID选择器
  • id选择器使用 '#' 进行标识，后面紧跟id名。
  • 基本语法格式：#id名{属性1:属性值1;属性2:属性值2;}
  • 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
  1. 类选择器
  • 类选择器使用 '.' 进行标识，后面紧跟类名。
  • 基本语法格式：.类名{属性1:属性值1;属性2:属性值2;}
  • 该语法中，类名即为HTML元素的class属性值，所有HTML元素都可以定义class属性
  • 类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
  1. 通配选择器
  • 如果HTML所有元素都采用同样的样式，这时，可以采用通配选择器。
  • 如清除边距样式，可以采用如下代码： *{margin:0;Padding:0;}
  1. 属性选择器
  • 根据属性选择元素

参考：CSS 选择器 (w3school.com.cn)

（2） 组合选择器
当把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，通过组合选择器，可以精确匹配界面元素。组合器是解释选择器之间关系的某种机制。
CSS 中有四种不同的组合器：

  • 后代选择器 (空格)：后代选择器匹配属于指定元素后代的所有元素。
  • 子选择器 (>)：子选择器匹配属于指定元素子元素的所有元素。
  • 相邻兄弟选择器 (+)：相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
  • 通用兄弟选择器 (~)：通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

（3） 伪类选择器
伪类用于定义元素的特殊状态。 例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

语法：selector:pseudo-class { property: value; }
（4） 伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。 例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

语法：selector::pseudo-element { property: value; }

CSS的层叠特性

有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠。 即在多处代码对同一个标签的同一个属性做了设置，产生了重叠。

当样式无冲突时

多个选择器选择同一个元素，样式并无冲突时:

.box_one{
    width:100px;height:100px;
}
.box_two{
    background:red;
}
<body>
    <div class="box_one box_two"></div>
</body>

以上代码中，样式代码并无冲突，两个选择器中的所有样式都叠加到了元素div上，div最终呈现的是一个红色的、宽高度大小为100px的容器。

当样式冲突时

样式有冲突，同一级别\color{#FF0000}{同一级别}不受优先级影响时

.box_one{
    width:100px;height:100px;
}
.box_two{
    width:200px;background:red;
}
<body>
    <div class="box_one box_two"></div>
</body>

以上代码中，在同级别时(同个元素，同是class定义选择器名称)，样式代码出现冲突，两个选择器中出现同一条width属性，则以CSS代码中最后出现的那条样式为准，div最终呈现的是一个width为200px、height为100px红色的容器。

样式有冲突，不同级别\color{#FF0000}{不同级别}受优先级(权重)的影响时：
CSS规定基本选择器的优先级从低到高排序为： 元素（标记）样式<类别（class）样式<ID样式<行内样式<!important\color{#FF0000}{元素（标记）样式<类别（class）样式<ID样式<行内样式<!important }

!important VS 行内样式

.box_one{
    width:100px !important;
    height:100px;
    background:red !important;
}
#box{
    width:200px;
}
<body>
    <div class="box_one" id="box" style="background:pink"></div>
</body>

在CSS中，!important具有最高优先级，并且可以写在任意一条有冲突样式的后面，在以上代码中，div在行内样式表设置背景色为粉色，ID样式中 width为200px；但是在class样式中，width:100px及背景色为red的后面都添加了!important，因此，最终呈现的是一个宽度为100px，高度为100px，背景色为红色的容器。

优先级加权值计算

  • 标签选择器：优先级加权值为1。
  • 伪元素或伪对象选择器：优先级加权值为1。
  • 类选择器：优先级加权值为10。
  • 属性选择器：优先级加权值为10。
  • ID选择器：优先级加权值为100。
  • 其他选择器：优先级加权值为0，如通配选择器等。

然后，以上面加权值数为起点来计算每个样式中选择器的总加权值数
计算的规则如下：

  • 统计选择器中ID选择器的个数，然后乘以100。
  • 统计选择器中类选择器、属性选择器的个数，然后乘以10。
  • 统计选择器中的标签选择器、伪元素或伪对象选择器的个数，然后乘以1。
  • 依此方法类推，最后把所有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大。
  • 对于由多个选择器组合而成的复合型选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式。

层叠性总结

优先级：
1、先后顺序（出现在后面的优先级高)
2、相对于标签的位置远近（离标签近的优先级高)
3、选择器优先级 元素（标记）样式<类别（class）样式<ID样式<行内样式<!important\color{#FF0000}{元素（标记）样式<类别（class）样式<ID样式<行内样式<!important }

面试题

  1. import和link方式导入CSS有什么区别？

（1）import兼容性不好，使用@import引入CSS样式表，跟链接样式相似，但是在老版本的浏览器中（低于ie5）是不支持@import的
（2）import加载时间慢，import的CSS文件需要等到所有文件下载之后才能下载。
3. CSS选择器有哪几种？

（1） 基础选择器：

  1. 标签选择器
  2. ID选择器
  3. 类选择器
  4. 通配选择器
  5. 属性选择器 （2） 组合选择器
    （3） 伪类选择器
    （4） 伪元素选择器
  6. CSS的优先级？如何计算CSS的优先级数字？
    例题:
1、 h3{ color : #ff7300; }    /*加权值=1分*/
2、 .f14{ font-size: 14px; }    /*加权值=10分*/
3、 #head{ width: 960px; }    /*加权值=100分*/
4、 h3 .f14{ font-weight : bold; }    /*加权值=11分*/
5、 #head h2{ border: 1px solid #ff7300}    /*加权值=101分*/
6、 div pi{ padding: 0 10px; }    /*加权值=2分*/
7、 div #head{ margin: 0 auto; }    /*加权值=101分*/
8、 #head h2 span{ f1oat : right; }    /*加权值=102分*/
9、 #head .f14 em{ float : right; }    /*加权值=111分*/
10、 #head .f14 span em{ float : right; }    /*加权值=112分*/
11、 #head div h2 .f12 span em{ color: #000; }    /*加权值=114分*/

看完文章，大家对于以上三题有了自己的答案了吗？明天我将会将答案公布在面试题板块中，欢迎大家在评论区踊跃讨论！

学无止境

avatar
文章
阅读
粉丝