CSS入门

CSS,全称为Cascading Style Sheets，层叠样式表。是用来为网页添加样式的代码。

CSS工作原理：

图1

CSS的引入方式

外部样式表：

1.通过 引入 CSS。



（rel=relationship stlyesheet:样式表 href=Hypertext Reference超链接）

2.通过 @import 引入样式，只能放入 css 中引用： 分号不能省

@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);

内部样式表：

内联样式：（不推荐）

CSS 很

@charset有什么作用：

告诉浏览器使用什么字符集去解码。

id 选择器和 class 选择器分别的使用场景

• id选择器因其在文档中必须是唯一的且一个标签只能绑定一个id，相当于一个身份证，故通常用于较大区块，多用于父级；
• class选择器称为类选择器，一个 CSS 类可以应用到多个不同的元素，相当于一个特征，一个元素也可以应用多个不同的 CSS 类。

常见的CSS选择器：

元素选择器 Element Selectors

p { color: red; }

ID 选择器 ID Selectors

通知：明天放假

#notification { font-size: 24px; }

类选择器 Class Selectors

• 起床


• 刷牙


• 洗脸

.first { font-weight: bold; }
.done { text-decoration: line-through; }

通用选择器 Universal Selector

* { box-sizing: border-box; }

.flex-container * { flex-basis: 100%; }
*号代表所有元素

属性选择器 Attribute Selectors

[attr]

[attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

[disabled] { cursor: not-allowed; }
[attr=val]

[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。

[data-color="gray"] { color: #ccc; }

伪类 Pseudo-classes：

• a:link {....;} 选中元素当中的链接

• a:visited {....;} 仅选中访问过的链接，这个样式可能被其他与链接相关的伪类覆盖

• a:hover {....;} 鼠标悬置

• a:active {....;} 匹配被用户激活的元素

• li:first-child { ... }

• li:last-child { ... }

• .box p:nth-child(num) {....}

• .box p:nth-of-type(num){....}

伪元素 Pseudo-elements:

::first-line 将样式只应用于一个块状元素的首行
::first-letter 选中一整块文字第一行的第一个字母
::before/::after 在元素之前／之后插入内容，必须要有content属性

组合选择器：

A, B

A, B 选中选中所有A和B

A B

A B 选中所有A的后代B。

A > B

A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

A + B

A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。

A ~ B

A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。

练习：下面组合选择器分别是什么意思？

1. .item+p {color: red} class="item"元素下相邻的第一个p元素为红色
2. .item~p {color: yellow} class="item"元素下相邻的数个p元素为黄色
3. .item p {color: blue} class="item"元素下所有p元素为蓝色
4. p.item {color: blue} p元素下所有class="item"元素为蓝色
5. .item>p{color: blue} class="item"元素下的所有直接子元素p为蓝色