了解CSS | 青训营笔记

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

CSS是什么？

CSS（全称：Cascading Style Sheets）层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS语法

1. 基本结构

2. 在页面中使用CSS

插入样式表的方法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

（1）外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;} 
p {margin-left:20px;} 
body {background-image:url("/images/back40.gif");}

(2)内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:

<head> 
    <style> 
        hr {color:sienna;} 
        p {margin-left:20px;} 
        body {background-image:url("images/back40.gif");} 
    </style> 
</head>

(3) 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px"> 这是一个段落。</p>

3. 选择器

找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

按照标签名、类名或id

按照属性

按照DOM树中的位置

(1) 通用选择器（*）选择页面上的所有的 HTML 元素。
* {
  text-align: center;
  color: blue;
}
(2) 标签选择器根据标签名称来选择 HTML 元素。
p {
 text-align: center;
 color: red;
}
（3）id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
#para1 {
 text-align: center;
 color: red;
}
(4) 类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
.center {
  text-align: center;
  color: red;
}
(5) 属性选择器为带有特定属性的 HTML 元素设置样式可以设置带有特定属性或属性值的 HTML 元素的样式。

[attribute] 选择器用于选取带有指定属性的元素。下例选择所有带有 target 属性的 <a> 元素；
a[target] {
  background-color: yellow;
}
[attribute="value"] 选择器用于选取带有指定属性和值的元素。下例选取所有带有 target="_blank" 属性的 <a> 元素：
a[target="_blank"] { 
  background-color: yellow;
}
[attribute~="value"] 选择器选取属性值包含指定词的元素。下例选取 title 属性包含 "flower" 单词的所有元素：
[title~="flower"] {
  border: 5px solid yellow;
}

4. 伪类

伪类用于定义元素的特殊状态。例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

5. 组合选择符

6. 颜色

CSS的颜色可以通过以下方法指定：

十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称

7. 字体

（1）字体的选择很重要

选择正确的字体会对网站的用户体验产生巨大影响。

正确的字体可以为您的品牌创造强有力的形象。

使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。

（2）通用字体族

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。

无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。

等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。

草书字体（Cursive）- 模仿了人类的笔迹。

幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

（3） font 属性

font-family 属性

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

有两种类型的字体系列名称：

family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。

generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

注意： 每个值用逗号分开。

注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

font-size 属性

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本

不允许用户在所有浏览器中改变文本大小

确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小

允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

8. 文本

(1) line-height 属性

line-height 属性用于指定行之间的间距

normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

(2) text-align属性

text-align属性指定元素文本的水平对齐方式

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

(3) word-spacing属性

word-spacing属性增加或减少字与字之间的空白。

normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。

(4) letter-spacing 属性

letter-spacing 属性增加或减少字符间的空白（字符间距）

normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

(5) text-indent 属性

text-indent 属性规定文本块中首行文本的缩进。

length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

(6) text-decoration 属性

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写：

text-decoration-line

text-decoration-color

text-decoration-style

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

(7) white-space属性

white-space属性指定元素内的空白怎样处理。
normal 默认。空白会被浏览器忽略。
pre
空白会被浏览器保留。其行为方式类似 HTML 中的
 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

课后总结

第二堂课真的是干货爆棚了！！！足足两个半小时讲解CSS，虽然给10个小时也讲不完（因为CSS知识点

真的太多了orz），但是真的学到了很多也很前沿的东西！本节课最难的部分是属性的介绍，太多单词要记住了~（梦回高中英语课）下节课继续加油~~

了解CSS | 青训营笔记

了解CSS | 青训营笔记

CSS是什么？

CSS语法

1. 基本结构

2. 在页面中使用CSS

（1）外部样式表

(2)内部样式表

(3) 内联样式

3. 选择器

4. 伪类

5. 组合选择符

6. 颜色

7. 字体

（1） 字体的选择很重要

（2） 通用字体族

（3） font 属性

font-family 属性

font-size 属性

8. 文本

(1) line-height 属性

(2) text-align属性

(3) word-spacing属性

(4) letter-spacing 属性

(5) text-indent 属性

(6) text-decoration 属性

(7) white-space属性

课后总结

（1）字体的选择很重要

（2）通用字体族