CSS基础知识|青训营笔记

CSS的定义

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）用于美化HTML页面。通过使用CSS样式设置页面格式，可将页面的内容与表现形式分离。

---

CSS的基本使用

<style>
    选择器 {
        属性名1: 属性值1;
        属性名2: 属性值2;
    }
</style>

---

CSS的引入方式

CSS的引入方式分为三种，分别是：外链、嵌入、内联。

1. 外链

<link rel="stylesheet" href="xxxxxx.css">

2. 嵌入

<style>
    html {
        width: 100px;
        height: 100px;
        color: yellow;
    }
</style>

3. 内联

<div style="color: red">This is a example.</p>

 推荐使用外链方式引入CSS，可将页面的内容与表现形式分离

---

CSS的基本原理

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

• （1）浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
• （2）浏览器显示 DOM 的内容。

---

CSS选择器

选择器能够帮助我们找到需要修饰的标签或者元素

常见的选择器类型有：

通配选择器

<!-- 作用于所有元素 -->
* {
  margin: 0;
  padding: 0;
}

元素选择器

<!-- 作用于元素名相同的元素 -->
div {
    width: 50px;
    height: 50px
}

ID选择器

<!-- 作用于对应ID名的元素 -->
#id {
    width: 50px;
    height: 50px
}

id在页面中必须是唯一的

类选择器

<!-- 作用于类名相同的元素 -->
.class {
    width: 50px;
    height: 50px
}

属性选择器

<!-- 存在 href 属性并且属性值以"example"开头的a元素 -->
a[href^="example"] {
  color: red;
}

<!-- 存在 href 属性并且属性值结尾是".com"的a元素 -->
a[href$=".com"] {
  color: green;
}

伪类选择器

伪类需要与 CSS 中的选择器结合使用，语法格式如下：

selector:pseudo-class {
    property: value;
}

其中 selector 为选择器名称，pseudo-class 为伪类的名称。

常见的伪类：

1. 动态伪类

• :link、:active、:visited、:hover

2. ul元素状态伪类

• :enabled、disabled

3. 结构伪类

• :first-child、:last-child、nth-child() 等等