前端基础入门之CSS 语法与选择器、样式继承与其他概念

Young丶

已于 2022-06-29 08:54:56 修改

阅读量9.1k

点赞数

分类专栏：零基础入门前端文章标签：前端 css css3

于 2022-06-21 21:22:45 首次发布

本文链接：https://blog.csdn.net/agonie201218/article/details/125213021

版权

零基础入门前端专栏收录该内容

35 篇文章 7 订阅

订阅专栏

文章目录

CSS 语法与选择器
样式继承与其他概念

CSS 语法与选择器

1. CSS 简介

层叠样式表

网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS 用来设置网页中元素的样式

使用 CSS 来修改元素样式的方式大致可以分为 3 种

内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

内部样式表

将样式编写到head中的style标签里然后通过 css 的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
p{
    color:green;
    font-size:50px;
}
</style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

外部样式表

可以将 css 样式编写到一个外部的 CSS 文件中，然后通过link标签来引入外部的 CSS 文件

<link rel="stylesheet" href="./style.css" />

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用

将样式编写到外部的 CSS 文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

2. CSS 基本语法

注释

css 中的注释

只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 */

/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/

我们对比下其他几种前端语言的注释

html 中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾

<!-- html中的单行注释 -->

<!-- 
html中的多行注释
html中的多行注释
html中的多行注释
-->

JS(JavaScript)和 JQuery 中的注释

单行注释使用//。多行注释使用/*和*/包裹，以结尾

/* JS(JavaScript)和JQuery中的单行注释*/

/*
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
*/

基本语法

选择器声明块

选择器

通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成，声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾

h1 {
  color: green;
}

3. CSS 选择器

通配选择器（Universal selector）

作用：选中页面中的所有元素
语法：*
例子：*{}

* {
  color: red;
}

元素选择器（Type selector）

也叫类型选择器、标签选择器

作用：根据标签名来选中指定的元素
语法：elementname{}
例子：p{} h1{} div{}

p {
  color: red;
}

h1 {
  color: green;
}

类选择器（Class selector）

作用：根据元素的 class 属性值选中一组元素
语法：.classname
例子：.blue{}

.blue {
  color: blue;
}
.size {
  font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class

可以重复使用，
可以通过class属性来为元素分组，
可以同时为一个元素指定多个class属性

<p class="blue size">类选择器（Class selector）</p>

ID 选择器（ID selector）

作用：根据元素的id属性值选中一个元素
语法：#idname{}
例子：#box{} #red{}

#red {
  color: red;
}

属性选择器（Attribute selector）

作用：根据元素的属性值选中一组元素
语法 1：[属性名] 选择含有指定属性的元素
语法 2：[属性名=属性值] 选择含有指定属性和属性值的元素
语法 3：[属性名^=属性值] 选择属性值以指定值开头的元素
语法 4：[属性名$=属性值] 选择属性值以指定值结尾的元素
语法 5：[属性名*=属性值] 选择属性值中含有某值的元素
例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}

p[title] {
  color: orange;
}
p[title="e"] {
  color: orange;
}
p[title^="e"] {
  color: orange;
}
p[title$="e"] {
  color: orange;
}
p[title*="e"] {
  color: orange;
}

4. 复合选择器（且）

交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red {
  font-size: 30px;
}

.a.b.c {
  color: blue;
}

并集选择器（选择器分组）（或者）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
例子：#b1,.p1,h1,span,div.red{}

h1,
span {
  color: green;
}

5. 关系选择器

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
例子：A > B

div.box > p > span {
  color: orange;
}

后代元素选择器（Descendant combinator）

作用：选中指定元素内的指定后代元素
语法：祖先后代
例子：A B

div span {
  color: skyblue;
}

兄弟元素选择器（Sibling combinator）

作用：选择下一个兄弟
语法：前一个 + 下一个 前一个 + 下一组
例子 1：A1 + A2（Adjacent sibling combinator）
例子 2： A1 ~ An（General sibling combinator）

p + span {
  color: red;
}

p ~ span {
  color: red;
}

6. 伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用:开头

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第 n 个子元素
- n：第 n 个，n 的范围 0 到正无穷
- 2n 或 even：选中偶数位的元素
- 2n+1 或 odd：选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序的

:first-of-type 同类型中的第一个子元素
:last-of-type 同类型中的最后一个子元素
:nth-of-type() 选中同类型中的第 n 个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

:not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul > li {
  color: black;
}

/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
  color: yellow;
}

/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
  color: green;
}

/* ul下第一个li，红色 */
ul > li:first-child {
  color: red;
}

/* ul下最后一个li，黄色 */
ul > li:last-child {
  color: orange;
}

:link 未访问的链接
:visited 已访问的链接
- 由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover 鼠标悬停的链接
:active 鼠标点击的链接

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

动画2021-5-8

7. 伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
::before和::after 必须结合content属性来使用

/* 段落首字母设置大小为30px */
p::first-letter {
  font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line {
  background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection {
  background-color: green；;
}

/* div前加上内容 */
div::before {
  content: "BEFORE";
  color: red;
}

/* div后加上内容 */
div::after {
  content: "AFTER";
  color: blue;
}

动画2021-5-7

8. CSS Dinner 游戏

官方地址：CSS Diner - Where we feast on CSS Selectors!

CSS Dinner 是一个帮助初学者快速熟悉 css 各种选择器的网页游戏

样式继承与其他概念

9. 继承

样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发

利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式

注意，并不是所有的样式都会被继承：

比如背景相关的，布局相关等的这些样式都不会被继承。

不行啊,不努力就要回去继承万亿家产了。_家产_万亿_继承_不行_努力表情

我们可以再 Zeal 手册中，搜索background-color属性，可以看到一个定义的表格。其中就说明了其不可被继承性

10. 选择器的权重

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重

选择器	权重
内联样式	1, 0, 0, 0
ID 选择器	0, 1, 0, 0
类和伪类选择器	0, 0, 1, 0
元素选择器	0, 0, 0, 1
通配选择器	0, 0, 0, 0
继承的样式	没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大的数量级，类选择器再高也不会超过 ID 选择器

如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中一定要慎用！

我劝你谨慎言行弟弟

<style>
  #box1 {
    background-color: orange;
  }
  div {
    background-color: yellow;
  }
  .red {
    background-color: red;
  }
</style>

<div id="box1" class="red" style="background-color: skyblue;">选择器的权重</div>

动画2021-5-4

11. 长度单位

像素

我们先来看下某度上关于像素（pixel,缩写 px）的介绍

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。

可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在 [1] 。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。

也就是说，显示器屏幕实际上是由一个一个的小点（单位色块，即像素）构成的

问题 1：像素和分辨率有什么关系呢？

分辨率 = 水平方向像素 * 垂直方向像素

屏幕分辨率

例如，屏幕分辨率是 1920×1080，则该屏幕水平方向有 1920 个像素，垂直方向有 1080 个像素

不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位（如米/m）那样有着固定的国际标准
所以同样的像素大小在不同的设备上显示效果是不一样的，像素越小的屏幕显示的效果越清晰

图像分辨率

例如，一张图片分辨率是 300x200，则该图片在屏幕上按 1:1 缩放时，水平方向有 300 个像素，垂直方向有 200 个像素点

图片分辨率越高，1:1 缩放时面积越大
图片分辨率越低，1:1 缩放时面积越小

同一台设备像素大小是不变的，那把图片放大超过 100%时占的像素点就多了，但是图像也会变得模糊

分辨率

问题 2：屏幕实现图片放大或缩小的原理是什么呢？

其实是设备通过算法对图像进行了像素补足；
同理，把图片按小于 100%缩放时，也是通过算法将图片像素减少

百分比

也可以将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素（暂且先理解成父元素，后面会详细说）的改变而改变

em

em 是相对于元素的字体大小来计算的，1em = <self>.font-size * 10，也就说 em 值会根据元素本身的字体大小的改变而改变

rem

rem 是相对于根元素的字体大小来计算，1em = <root>.font-size * 10，也就说 em 值会根据根元素的字体大小的改变而改变

<style>
  * {
    font-size: 24px;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
  }

  .box2 {
    width: 50%;
    height: 50%;
    background-color: aqua;
  }

  .box3 {
    font-size: 20px;
    width: 10em;
    height: 10em;
    background-color: greenyellow;
  }

  .box4 {
    font-size: 20px;
    width: 10rem; /*当时用rem时，不管怎么改本元素的font-size都是不会变的。需要定义root元素的font-size才可以 */
    height: 10rem;
    background-color: red;
  }
</style>

<div class="box1">
  <div class="box2"></div>
</div>

<div class="box3"></div>

<div class="box4"></div>

12. 颜色单位

人眼能够识别多少种颜色？

正常人有三种视椎细胞，是三色视觉者（红绿蓝），总共能看到大约 100 万种颜色

男的大约 130 万女的大约 180 万

大概有经验的油漆工人辨别 1000 种左右，再高就难以分辨了。

比如红色，可以分为 50 个等级，邻近的两个等级能够别出来，说明他的眼睛辨别能力就很不错了。

过去的老工人，凭肉眼可辨别 50 种黑色，当然都要有特定的样板色做对比。

别人的人生五颜六色而我就一种颜色那就是乐色_乐色_五颜六色_人生_颜色_别人表情

我引用了网上的一些答案，也是众说纷纭。不过我的理解是

人眼能至少接收 100 多万种颜色，因人而异
但最多只能够对 1000 多种颜色做出识别，因人而异

css 中的颜色名称

我们生活中会使用各种颜色名称去描述看到的各种颜色，在 css 中当然也可以直接使用颜色名来设置颜色，比如：red、orange、yellow、blue、green 等等

小妹妹喜欢哪种颜色?(套套)_套套_种颜色_小妹妹_喜欢表情

其中有 140 种颜色名称是所有浏览器都支持的，但是有个问题，就是在 css 中直接使用颜色名非常不方便

而且世界上有无数种颜色，人眼也不能分辨出所有颜色，更不可能对每一种颜色都进行命名

而且就算能够有办法对那么多种颜色进行命名，我们也不可能一个一个的去记或去查这种对应关系。试问下，有多少人看一眼某个颜色，就能够在调色板上快速准确的定位那个颜色或者直接叫出那种颜色的名称？这显然不现实，至少现在如此

另外，那么 css 中还可以怎么调和出更多的颜色呢？

在介绍 css 的颜色单位之前，我们首先来了解下光的三原色，因为 css 的颜色单位就是按照光的三原色来调和的

发现光的色散奥妙之后，牛顿开始推论：既然白光能被分解及合成，那么这七种色光是否也可以被分解或合成。于是，纷繁的实验和不停的计算充斥着他日后的生活。

一段时间后，牛顿通过计算，得出了一个结论：七种色光中只有红、绿、蓝三种色光无法被分解，于是也就谈不到合成了。

而其他四种色光均可由这三种色光以不同比例相合而成。于是红、绿、蓝则被称为“三原色光”或“光的三原色”（注意，这有别于我们熟知的三原色“红黄蓝”）。

牛顿通过计算得出上述结论后，未能完成实验，便与世长辞。

这里再科普下光的三原色和颜料的三原色的区别

颜料三原色（CMYK）：品红、黄、青(天蓝)。色彩三原色可以混合出所有颜料的颜色，同时相加为黑色，黑白灰属于无色系。

光学三原色（RGB）：红、绿、蓝(靛蓝)。光学三原色混合后，组成显示屏显示颜色，三原色同时相加为白色，白色属于无色系（黑白灰）中的一种。

那看到这里有人会问了，css 为什么不按照颜料的三原色来调和呢？

因为道理很简单，聪明的小伙伴应该已经知道答案了。上面我们也说过，屏幕是由像素组成的，每个像素就是一个单位色块。而这个单位色块之所以能显示颜色，就是靠发光来实现的

既然光是由三种色光组成的，任何一种颜色均可以由这三种颜色调和出来的，那么为什么我们不能用三原色来表示一种颜色呢？

RGB 值

RGB 通过三原色的不同浓度来调配出不同的颜色

语法：RGB(red, green, blue)
范围：每一种颜色的范围在 0 ~ 255（0% ~ 100%）之间

RGBA

就是在 rgb 的基础上增加了一个 a 表示不透明度

1表示完全不透明
0表示完全透明
.5半透明

十六进制的 RGB 值

就是 RGB 值的十六进制写法

语法：#RRGGBB
范围：每一种颜色的范围在 00 ~ ff 之间

如果颜色两位两位重复可以进行简写，如#aabbcc => #abc

在 vscode 中，我们可以看到其会对颜色进行预览展示。并且将鼠标移至 color 处悬浮，会智能的弹出一个 rgb 调色板，方便我们进行调色

如果我们看到某种颜色，非常喜欢，~~那么在哪里才能买得到呢？~~ 怎么知道这个颜色的 rgb 值呢？

我小叮当想给你点颜色瞧瞧 - 斗图表情包精选-2017/11/29_斗图表情

我们可以直接搜索黄色，哦不是，取色器！有些录制软件也会自带取色功能，如 FastStone Capture

下载地址：FastStone Capture - Download

动画2021-5-1

Young丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础入门之CSS 语法与选择器、样式继承与其他概念

网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层总之一句话，CSS 用来设置网页中元素的样式使用 CSS 来修改元素样式的方式大致可以分为 3 种在标签内部通过属性来设置元素的样式问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）将样式编写到中的标签里然后通过 css 的选择器来选中元素并为其设置
复制链接

扫一扫