CSS | 青训营笔记

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

一、什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，它的作用：

用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果

二、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。可以看出，CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来。为了让CSS可读性更强，建议每行只描述一个属性。

1.具体语法

1.1 样式定义方式

行内样式表（inline style sheet）

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。例如：

<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

内部样式表（internal style sheet）

定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

外部样式表（external style sheet）

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。

注释

注意不能使用//。可以使用：

/* 注释 */ 或者 

1.2 几种常用选择器

标签选择器

选择所有div标签：

div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

ID选择器

选择ID为rect-1的标签：

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

类选择器

选择所有rectangle类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

:link：链接访问前的样式

:visited：链接访问后的样式

:hover：鼠标悬停时的样式

:active：鼠标点击后长按时的样式

:focus：聚焦后的样式

位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素。

目标伪类选择器：

:target：当url指向该元素时生效。

三、课后个人总结：

CSS内容繁多且零散，适合用到的时候去MDN官方文档中查找

四、引用参考：

在官方文档中可以更多 CSS 的基础知识「 CSS 介绍」。