理解CSS | 青训营笔记

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

1、CSS 概述：

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

2、CSS 语法：

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

selector {declaration1; declaration2; ... declarationN }

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性是希望设置的样式属性。每个属性有一个值。属性和值用冒号分开。

selector {property: value}

3、CSS 背景：

可以使用 background-color 属性为元素设置背景色。

例如将元素背景设置为灰色：

p {background-color: gray;}

如希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

4、CSS 边框

样式是边框最重要的一个方面，因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，将一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

5、定义多种样式

可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}

6、定义单边样式

如果要为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style]

以下这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

7、边框的宽度

可以通过border-width属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}