CSS 笔记（一）| 青训营笔记

凉晟美景
119 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、什么是CSS？

前端三大件有HTML、CSS、JS，如果把web网页比作一个人的话，HTML是骨架，CSS是皮肤，JS是大脑。

作用：定义页面元素的样式。

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

例如：

div{
    width: 200px;
    height: 200px;
    background-color: rgb(245, 250, 245);
}

Selector(选择器){ Property(选择器):Value(属性值) }

页面中使用CSS的三种方法：

  • 外部样式表
  • 内部样式表
  • 内联样式表

外部样式表是将其他CSS文件附加到HTML中的最常用的方法，也是项目中经常用的，一个.html文件可以同时外联多个.css文件。<link>元素进行引用，例如：<link rel="stylesheet" href="styles.css">。
外部样式表提高了代码的可维护性，在开发中非常常见

内部样式表就是把css中的内容放在了<head>中的<style>的标签中，这么做适合项目并不大的情况，当然现在流行的框架开发则把部分的html、css、js放在同一个文件中，作为一个组件，能够有效提高代码复用性

内联样式表则是把每一个元素的样式放在了该元素的标签内部，这么做降低了代码的简洁性，但也有其优点，能够使得标签内的style优先级更高，在部分情况下使用。

CSS如何工作？

graph LR
加载HTML --> 解析HTML --> 创建DOM树 --> 展示页面
解析HTML --> 加载CSS --> 解析CSS --添加样式到DOM节点--> 创建DOM树

二、(Seclector)选择器

选择器的作用：

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素

各选择器

通配选择器

*{
    color: rgb(205, 255, 208);
}

可以选中页面所有元素

标签选择器

h1{
    color: rgb(205, 255, 208);
}

可以选中页面中所有该标签的元素

id选择器

#head{
    color: rgb(205, 255, 208);
}

可以选中页面中该id的元素（一般情况下id是唯一的）

类选择器

.box1 .box2{
    color: rgb(205, 255, 208);
}

可以选中页面中该类型的元素，class是标签的属性，但与id不同的是可以重复，一个元素可以指定多个class,多个class之间使用空格隔开

属性选择器

[disabled]{
    color: rgb(205, 255, 208);
}

可以选中页面中存在该属性的元素

伪类选择器

li:first-of-type{
    color: lightgreen;
}

伪类是不存在的类，用来描述一个元素的特殊状态的比如：第一个元素、被点击的元素、鼠标移入的元素。一般情况下：

  • : first-child 第一个子元素
  • : last-child 最后一个子元素
  • : nth-child(n) 选中的第n个子元素 直接写n表示0到无穷都包括； 2n或者even表示偶数位； 2n+1或者odd表示奇数

组合

有时候单独的以上的选择器还不能够满足，或者说不方便满足我们选择一些特殊的元素该怎么办？这就引出了选择器的组合。

名称语法说明实例
直接组合AB同满足A和Binput:focus
后代组合A BB是A的子孙，则选中Bnav a
亲子组合A>BB是A的子元素，则选中Bsection>p
兄弟选择A~BB在A后面，且同级，则选中Bh2~p
相邻选择A+BB在A同级的下一个，则选中Bh2+p

选择器的优先级

在前面的介绍中，使用css的方法有三种，选择器更有多种多样，包括组合方式，这时候不可避免的会出现样式冲突。

样式冲突

当我们通过不同选择器，选中相同样式，设置不同的值，此时就发生了冲突：发生样式冲突是，应用哪个样式的选择器有选择器的权重决定（优先级）。

样式优先级

内联样式>内部样式>外部样式

选择器优先级

选择器优先级
!important10000
内联样式01000
ID选择器00100
类选择器、伪类选择器、属性选择器00010
标签选择器、伪元素选择器00001
通配选择器、后代选择器、兄弟选择器00000

比较选择器的优先级时要将其相加，最后优先级最高的优先显示分组选择器单独计算。 如果优先级相同的，此时优先使用靠后的。 同时还有继承的样式，为一个元素的样式进行了设置后，也会应用到后代上，注意并不是所有样式都会被继承，比如背景相关、布局相关。而继承的样式优先级是最最低的。 值得注意的是，!important是最高优先级，但是尽量少用，会降低代码的可维护性。 同时在实际开发中通过less等css的预处理预处理器，可以写更少的代码实现更强的样式，在样式的优先级处理上更加方便。

avatar
文章
阅读
粉丝