初步理解与使用CSS | 青训营笔记

XCZJust
109 阅读5分钟

理解与使用CSS | 青训营笔记

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

e680df17467575967b5d7ce32dacdd7ec35b4d7010b1d7-ppjdMf_fw658.webp

CSS是什么

前面我们知道，HTML定义网页的结构，为了使网页有更丰富更优美的视觉表现，就需要CSS来大开手脚了。CSS用来定义页面元素的样式，比如设置字体颜色，字体大小和样式，设置结构块的位置和大小，添加动画效果等。

CSS如何工作

这里放出个流程图：

2.1.png

解释一下，DOM是文档对象模型（Document Object Model）的缩写。 是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 2.2.png
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

引用自CSDN博主「骆晨辉」的原创文章:blog.csdn.net/luochenhui2…

这里看出，网页在生成的过程中，会将HTML文件和CSS文件加入到相应的DOM树中，再生成我们所能看到的页面。

CSS初窥

下面给出示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css初体验</title>
    <style>
        p {
            color: darkorange;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>有点意识</p>
</body>
</html>

运行结果：

2.3.png

有点意思哈。代码中CSS样式的引用方式是内部映射表（嵌入），引入方式有很多，下面会讲到。

CSS的使用方式

使用CSS有多种方式，下面会简单的列举一下：

2.4.png

外部样式表（外链）

在外部有一个CSS文件，专门用于写选择器设置HTML组件的样式，与HTML文件分开，方便维护，开发中多使用这类方法。

内部样式表（嵌入）

在HTML文件中定义样式，在head标签中的style标签中设置选择器。

行内样式表（内联）

在html中的组件标签中的style属性定义该组件的样式。

选择器

选择器的作用是选择HTML页面中的元素（组件），给它们设置样式。有多种方式选择元素（组件）。下面简单列举：

通配选择器

2.5.png 为所有的HTML元素（标签）设置统一的样式，用于全局样式定义。

标签选择器

2.6.png 为一种标签设置样式，HTML文件中的所有目标标签都会相应作出改变。

类选择器

2.8.png 类是HTML标签的一个属性，可为class设置一个值，类选择器可以选择某个类名并为其设置样式，类名可重复出现，不同组件可设置同一类名。选择器的声明方法是 . + 类名

ID选择器

2.7.png 与类选择器的唯一不同是，类可出现多次，id全局只能唯一出现一次，选择器的声明方法是 # + id名。

属性选择器

指定某一目标属性进行修改。

复合选择器之伪类选择器

下面列举focus和链接的伪类选择器

2.9.png

2.10.png

伪类选择器用来描述一个元素的特殊状态！比如第一个元素、某个元素的子元素、鼠标点击的元素。使用方法是标签名 + 动作名，中间用冒号 : 连接。

复合选择器之子选择器

2.11.png

只选择目标的一级子元素（组件）进行修改，一级以上都不修改，保持原状。连接方式是用 > 连接。

复合选择器之后代选择器

修改所有符合条件的元素（组件），不管其在第几层。 2.12.png

关于复合选择器的声明，下面列出具体使用：

2.13.png

CSS的三大特性

层叠性

给相同选择器设置相同的样式，样式会覆盖，以解决冲突问题。

2.15.png

上面可以看到，紫色覆盖了橙色，而不会出现报错或者其他情况。

继承性

子标签会继承父标签的某些样式（当在style中设定样式的时候）。

text，font，line，color等这些属性可以继承。

子元素没有设置行高时会继承父标签的行高属性。

2.16.png

上面可以看到，当给div标签设置样式的时候，p标签也继承了div的样式。

优先级

2.14.png

CSS优先级顺序由轻到重依次为：继承或* < 元素选择器（标签选择器）< 类或伪类选择器（class）< id选择器 < 行内样式 style=“” < ！important。 下面为示例：

2.17.png

上面示例中，虽说先定义了div的样式，且优先级大，但在这里p标签包含于div，继承关系就一文不值，就自动被忽略了。

优先级还有优先级叠加的问题，可以看上面的优先级表，再根据选择器的声明去判断优先级的权重。权重的计算是简单的叠加。对于多选择器及复杂选择器声明的情况，可根据四级权重相应叠加并分析比较，再得出结果。

总结

CSS内容很多，很杂，但理解CSS并不难，多用多想便可掌握。后面会尽量写更加细致的CSS使用文章，本篇仅简单提及及介绍。本菜鸡写得不好，还请各位大佬多指点。

avatar
文章
阅读
粉丝