理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天。 主要内容是初步了解CSS概念和基本语法。

(一) 了解什么是CSS

网页分成三个部分：

• Javascript（行为）
• CCS（样式）
• HTML（内容）

CSS——层叠样式表，用于定义页面元素的格式，如：

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

(二) 在页面中使用CSS

• 外链法（最佳👍）

将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。 实现了内容和样式的分离。

• 嵌入法：

将样式编写到head中style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式。

• 内联法：

在标签中通过style属性来设置元素的样式。（不需要选择器）。

三种代码展示：

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
    li{ margin:0; list-style: none; }
    p { margin: lem 0; }
</style>

<!-- 内联 -->
<p style="margin:lem 0">Example Content</p>

(三) CSS是如何工作的

• 选择器 —— 选中页面的某些元素
  • 通配选择器： * 匹配所有。
  • 标签选择器：根据标签如h1,p等选择对应的元素。
  • id选择器：根据元素id属性值选中一个元素（id唯一性）,e.g,id="logo" #logo{}。
  • 类选择器：根据元素的 class 属性值选中一组元素，,e.g,input class="error" .error{}。
  • 属性选择器：根据属性的特定值选择元素（属性值可以进行运算符匹配）。

* 伪类：不基于标签和属性来定位元素。分为状态伪类和结构性伪类。

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

声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以 : 连接，以 ; 结尾。

(四) 学习总结

CSS旨在提供用户体验感良好的交互界面，其实无需太多复杂的样式，重在功能内容。这也是前端学习的重要原则之一。