【学习笔记】-CSS

CSS

CSS介绍

CSS 英文全称为 Cascading Style Sheets，中文译为层叠样式表，所谓样式，就是给 HTML 文档进行外观美化，所以 CSS 是用来美化网页外观的。

相对于使用 HTML 标签表示样式，使用 CSS 表示元素的样式具有如下好处。

1．功能更加强大，具有美观的页面效果

通过定义 CSS 样式表，可以将网页制作得更加绚丽多彩。CSS 包含文本、背景、列表、超链接等各类样式，比用 HTML 控制样式功能更强大。

2．实现内容和样式的分离，能灵活改变页面外观

CSS 的核心思想之一就是要实现内容和样式的分离，提高开发效率。在实现两者分离的同时可在内容不变的情况下，通过改变 CSS 样式表，轻松实现“换肤”功能。

3．实现样式复用，方便更新和维护

采用 HTML 标签表示样式，每个标签元素都需要按要求设置样式，导致工作量大，烦琐且容易出错。而使用 CSS 样式表，相当于针对不同元素建立了一系列样式资源库，同一个网站的多个页面，同一个页面的多个元素，可以使用同一个样式表里的样式，从而显著提高设置样式的工作效率，也方便后期对页面样式统一进行更新和维护。

既然 CSS 有这么多好处，那么我们如何在 HTML 中引入样式呢？

引入样式表有三种方法：

1．外部样式表

外部样式是单独建立一个 .css 的文件来写 CSS 代码，通过 标签在 HTML 中引入该样式文件。

前面提到的 CSS 样式表具有“实现内容和样式的分离，能灵活改变页面外观”，以及“实现样式复用，方便更新和维护”的特点，在采用外部样式表插入时，体现得更加明显。所以用外部样式表插入样式的形式，在网站设计和开发中使用最为广泛。

2．内部样式表

内部样式是把 CSS 的代码用

3．行内样式

行内样式是在 HTML 的标签中用 style 属性来写样式。

行内样式将内容和样式混合了起来，失去了 CSS 样式表的灵活性和复用性，不推荐使用。

总结：样式选择优先级：内联样式>内部样式表>外部样式表。

标签选择器

标签选择器是用于给文档中的某一类标签设置统一样式的。标签选择器的关键字以标签的名字命名。

类选择器是用于给相同标签或者不同标签，定义一个 相同 class 属性，这些标签就可以共享样式了。在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 **class=“类名”**的属性（不包括点号），表示该标签使用了指定的类选择器。

id 选择器是用于给特定的 HTML 标签元素指定样式的，它是标签的唯一标识符。id 选择器与类选择器的区别在于同一个 id 名只能出现一次，而同一个 class 名可以用在多个标签上。在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号）。

后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。 在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。

群组选择器是用于同时对几个选择器进行相同的样式设置。在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。

背景样式的使用

background-color 属性

background-color 属性可以给指定标签元素设置背景色。

background-image 和 background-size 属性

background-image 属性可以把图像插入背景。

background-size 属性可以给背景图设置大小。

background-position 属性

background-position 属性，可以改变图像在背景中的位置。

background-repeat 属性

background-repeat 属性是用来设置背景图像是否平铺。

下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。

可 取 值	描 述
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

我们规定应该从父元素继承 background-repeat 属性的设置。

CSS 文本属性的使用

属 性	可 取 值	描 述
line-height	normal：取决于用户端、number：数字乘以元素的字体大小、length：指定长度用于计算高度、%：计算值是给定的百分比值乘以元素计算出的字体大小。	设置行高
text-indent	length、%	设置文本缩进
text-align	left、right、center、justify、start、end	设置对齐方式
letter-spacing	normal、length	设置字符间距
text-decoration	line、color、style、thickness	设置文本修饰
white-space	normal、pre、nowrap、pre-wrap、pre-line、break-spaces	规定如何处理空白
line-break	auto、loose、normal、strict、anywhere、unset	处理如何断开带有标点符号的文本的行

CSS 字体的使用

字体属性的使用

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属 性	可 取 值	描 述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一个声明中设置所有的字体属性
font-family	字体名称、inherit	设置字体类型
font-size	xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit	设置字体大小
font-weight	normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	设置字体粗细
font-style	normal、italic、oblique、inherit	设置字体风格

链接中的伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态	效果
a:link	普通的、未被访问的链接。
a:hover	鼠标指针位于链接的上方。
a:active	链接被单击的时刻。
a:visited	用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状 态	颜 色	背 景 色	文 本 修 饰
未访问	蓝色	无	无下画线
鼠标移到	黑色	#DDDDDD	下画线
正单击	红色	#AAAAAA	删除线
已访问	绿色	无	无下画线

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。