CSS

1 CSS基础

1.1 什么是CSS

CSS: 层叠样式表, 是用于美化、渲染网页的一门语言。

使用css美化网页，可以实现将展示数据的html代码和设置样式的css代码进分离，增强了网页的展示能力。

1.2 在HTML中引入CSS

1.2.1 通过style属性设置样式

在标签上添加一个style属性可以为当前标签快速添加css样式

例如：

这种方式不推荐大量使用：(1)设置在当前标签上的样式只对当前标签起作用,代码无法复用 (2)可读性太差, 后期难以维护, 也容易造成页面结构的混乱!

1.2.2 通过style标签设置样式

在head标签内部添加一个style标签，在style标签内部可以选中元素，对元素进行样式设置。

示例：

这种方式将所有的css样式集中在一个style标签内部统一进行管理，实现了代码的复用。

1.2.3 通过link标签引入css文件

在html中

在demo.css中

这种方式是将所有的css样式集中在一个单独css文件中统一进行管理：

(1)真正实现了html代码和css代码的分离。

(2)实现了代码的复用。

推荐使用这种方式。

1.3 CSS选择器

1.3.1 元素名、标签名选择器

通过元素的名称选中指定名称的元素

格式：元素名{ css样式… }

示例：

1.3.2 类（class）选择器

可以在标签上添加一个class属性，为标签设置所属的类（组），可以通过class的值选中这一组的元素，统一设置样式

格式：.class值{ css样式… }

代码示例：

补充： 另外一个元素可以设置多个class值，多个class值中间用空格隔开，表示当前元素同时属于多个组，多个组的样式也会同时作用在当前元素上。

如果两个class设置的样式出现冲突，此时后面设置的class样式会覆盖前面设置的class样式。

1.3.3 id选择器

可以在标签上添加一个id属性，为标签设置一个独一无二的编号。

通过id可以唯一的选中当前这个元素

格式：#id值{ css样式… }

示例：

1.3.4 后代选择器

在祖先元素的内部, 匹配指定的后代元素

格式: 祖先元素选择器 后代元素选择器{ css样式 }

示例:

1.3.5 属性选择器

通过属性条件进行匹配元素

格式: 选择器[属性条件…][属性条件…]…{ css属性… }

另外, 如果属性条件有多个, 通过多个方括号设置属性条件即可:

1.4 常用属性总结

1.4.1 文本相关属性

text-align: 设置文本的水平排列方式

left(居左), right(居右), center(居中)

text-indent: 设置文本首行缩进

text-decoration: 设置文本的下划线样式

none(没有下划线) underline(有下划线)

letter-spacing: 设置字符间隔, 像素

1.4.2 字体相关属性

font-size: 设置字体大小

font-weight: 设置字体粗细

font-family: 设置字体

color: 设置字体颜色

line-height: 设置行高

1.4.3 背景相关属性

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置;

background-color: 设置背景颜色

background-image: 设置背景图片

background-repeat: 设置背景图片是否以及如何重复排列

background-position: 设置背景图片的位置

background-size: 设置背景图片的大小

1.5 htmlcss综合练习

注册页面的实现