CSS学习（一）

一、CSS 简介

CSS（层叠样式表）是一种用于网页如何呈现的样式表语言。它可以用来控制网页中的字体、颜色、布局等。CSS 是一种独立于 HTML 的语言，它可以单独使用，也可以与 HTML 结合使用。

二、CSS 选择器

CSS 选择器用于选择需要应用样式的 HTML 元素。CSS 选择器有很多种，最常用的包括：

• 标签选择器：用于选择指定的 HTML 标签。例如，<h1> 选择器将选择所有 <h1> 标签。
• 类选择器：用于选择具有指定类的 HTML 元素。例如，.header 选择器将选择所有具有 header 类的 HTML 元素。
• ID 选择器：用于选择具有指定 ID 的 HTML 元素。例如，#main 选择器将选择具有 main ID 的 HTML 元素。
• 通用选择器：用于选择所有 HTML 元素。例如，* 选择器将选择所有 HTML 元素。

三、CSS 属性

CSS 属性用于设置 HTML 元素的样式。CSS 属性有很多种，最常用的包括：

• 颜色属性：用于设置 HTML 元素的颜色。例如，color 属性可以设置文本的颜色。
• 字体属性：用于设置 HTML 元素的字体。例如，font-family 属性可以设置文本的字体。
• 大小属性：用于设置 HTML 元素的大小。例如，width 属性可以设置元素的宽度，height 属性可以设置元素的高度。
• 布局属性：用于设置 HTML 元素的布局。例如，position 属性可以设置元素的位置，display 属性可以设置元素的显示方式。
• 边框属性：用于设置 HTML 元素的边框。例如，border-color 属性可以设置边框的颜色，border-width 属性可以设置边框的宽度。
• 背景属性：用于设置 HTML 元素的背景。例如，background-color 属性可以设置背景颜色，background-image 属性可以设置背景图片。

四、CSS 布局

CSS 布局用于控制网页中元素的位置和大小。CSS 布局有很多种，最常用的包括：

• 浮动布局：浮动布局是一种简单的布局方式，它允许元素在页面中自由移动。
• 定位布局：定位布局是一种更复杂的布局方式，它允许元素在页面中精确定位。
• 弹性布局：弹性布局是一种新的布局方式，它可以使元素在页面中根据窗口的大小自动调整大小。

五、CSS 颜色

CSS 颜色用于设置 HTML 元素的颜色。CSS 颜色可以是预定义的颜色，也可以是自定义的颜色。预定义的颜色包括：

• 黑色：black
• 白色：white
• 红色：red
• 绿色：green
• 蓝色：blue

自定义颜色可以使用 RGB 颜色值或十六进制颜色值来指定。RGB 颜色值由三个数字组成，分别表示红色、绿色和蓝色的值。十六进制颜色值由六个数字组成，表示颜色的红、绿、蓝三个通道的值。

六、CSS 字体

CSS 字体用于设置 HTML 元素的字体。CSS 字体可以是预定义的字体，也可以是自定义的字体。预定义的字体包括：

• Arial
• Helvetica
• Times New Roman
• Courier New

自定义字体可以从网络上下载，然后在 CSS 文件中引用。

七、CSS 边框

CSS 边框用于设置 HTML 元素的边框。CSS 边框可以是实线、虚线或双线。还可以设置边框的颜色、宽度和样式。

八、CSS 背景

CSS 背景用于设置 HTML 元素的背景。CSS 背景可以是颜色、图片或渐变。还可以设置背景的位置、重复方式和大小。

九、CSS 动画

CSS 动画用于在 HTML 元素上创建动画效果。CSS 动画可以是渐隐渐现、移动或旋转。还可以设置动画的持续时间、延迟时间和循环次数。

十、CSS 媒体查询

CSS 媒体查询用于根据不同的媒体类型设置不同的样式。例如，可以针对不同的设备屏幕尺寸设置不同的样式。

十一、CSS 灵活布局

CSS 灵活布局是一种新的布局方式，它可以使元素在页面中根据窗口的大小自动调整大小。CSS 灵活布局使用百分比和 ems 来指定元素的大小，而不是使用像素。

十二、CSS 盒子模型

CSS 盒子模型是一种用于 HTML 元素的布局方式的模型。CSS 盒子模型将 HTML 元素视为一个盒子，盒子包含四个部分：内容区域、内边距、外边距和边框。

内容区域是 HTML 元素的内容部分。内边距是内容区域和边框之间的区域。外边距是边框和元素其他部分之间的区域。边框是 HTML 元素的边框。