css知识点总结

css知识点总结

CSS知识点总结。

一、CSS简介。

1. 定义。

- CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML等标记语言）文档外观和布局的样式语言。它可以控制网页元素的样式，如颜色、字体、大小、间距、布局等。

2. 作用。

- 将内容（HTML）与表现（CSS）分离。这使得网页的维护和更新更加容易，例如，如果要改变整个网站的字体颜色，只需要修改CSS文件中的相关样式规则，而不需要逐个修改HTML页面中的每个元素。

二、CSS的基本语法。

1. 选择器（Selector）

- 元素选择器。

- 直接使用HTML元素名称作为选择器，例如`p`选择所有的`

`段落元素，`h1`选择所有的`

- 类选择器。

- 以`.`开头，后面跟着自定义的类名。例如`.my - class`可以选择所有带有`class = "my - class"`属性的元素。在HTML中可以这样使用：`

- ID选择器。 - 以`#`开头，后面跟着自定义的ID名。ID在一个HTML页面中应该是唯一的。例如`#my - id`可以选择带有`id = "my - id"`属性的元素，如`

2. 声明块（Declaration Block）

- 由一个或多个声明（Declaration）组成，每个声明包含一个属性（Property）和一个值（Value），中间用`:`分隔，声明之间用`;`分隔。例如：

p {

color: red;

font - size: 16px;

}

- 在这个例子中，`p`是选择器，`{}`内部是声明块。`color: red`和`font -

size: 16px`是两个声明，其中`color`和`font - size`是属性，`red`和`16px`是值。

三、CSS的引入方式。

1. 内联样式（Inline Style）

- 直接在HTML元素的`style`属性中定义CSS样式。例如：`

这是一个段落

2. 内部样式表（Internal Style Sheet）

- 在HTML文件的``标签内使用`.

.

- 这种方式适用于单个HTML页面的样式定义，当多个页面需要相同样式时，需要在每个页面重复定义。

3. 外部样式表（External Style Sheet）

- 创建一个独立的`.css`文件，例如`styles.css`，在其中定义CSS样式：

p {

color: yellow;

font - size: 10px;

}

- 然后在HTML文件的``标签中使用``标签引用这个外部CSS文件：

html.

.

.

. - 这种方式便于样式的复用和维护，是大型项目中常用的样式管理方式。

四、CSS的常用属性。

1. 文本属性。

- `color`：设置文本颜色，可以使用颜色名称（如`red`、`blue`等）、十六进制值（如`#FF0000`表示红色）、RGB值（如`rgb(255, 0, 0)`表示红色）等。

- `font - family`：设置字体家族，例如`font - family: Arial, sans -

serif;`表示优先使用Arial字体，如果系统没有Arial字体，则使用无衬线字体（sans - serif）。

- `font - size`：设置字体大小，可以使用像素（px）、百分比（%）、em（相对于父元素字体大小）等单位。

- `text - align`：设置文本的水平对齐方式，有`left`（左对齐）、`right`（右对齐）、`center`（居中对齐）、`justify`（两端对齐）等选项。

2. 背景属性。

- `background - color`：设置元素的背景颜色，使用方式与`color`属性类似。

- `background - image`：设置元素的背景图像，例如`background - image:

url('image.jpg');`，其中`url('image.jpg')`指定了背景图像的路径。

- `background - repeat`：设置背景图像的重复方式，有`repeat`（默认，水平和垂直方向都重复）、`repeat - x`（仅水平方向重复）、`repeat - y`（仅垂直方向重复）、`no - repeat`（不重复）等选项。

3. 盒模型相关属性。

- `width`和`height`：设置元素的宽度和高度。可以使用绝对单位（如px）或相对单位（如%）。 - `padding`：内边距，用于设置元素内容与边框之间的距离。可以分别设置上、右、下、左内边距，如`padding: 10px 20px 10px 20px;`（上10px、右20px、下10px、左20px），也可以使用`padding - top`、`padding - right`、`padding -

bottom`、`padding - left`单独设置。

- `margin`：外边距，用于设置元素与相邻元素之间的距离。用法与`padding`类似，可以分别设置四个方向的外边距，也可以使用`margin - top`等单独设置。

- `border`：边框，可以设置边框的宽度、样式和颜色。例如`border: 1px

solid black;`表示1像素宽的黑色实线边框。边框也可以分别设置上、右、下、左边框，如`border - top: 2px dashed red;`（2像素宽的红色虚线顶部边框）。

五、CSS布局。

1. 文档流（Normal Flow）

- 是HTML元素在页面中的默认布局方式。在文档流中，块级元素（如`

`等）会垂直排列，每个块级元素占据一行；内联元素（如``、``等）会水平排列，在一行内显示，当一行排不下时会自动换行。

2. 浮动（Floating）

- 使用`float`属性可以使元素脱离文档流并向左或向右浮动。例如`float:

left;`会使元素向左浮动。浮动元素会影响周围元素的布局，通常用于实现多列布局。但是使用浮动布局时，需要注意清除浮动，以避免布局混乱。可以使用`clear`属性（如`clear: both;`）来清除浮动。

3. 定位（Positioning）

- 静态定位（Static）：这是元素的默认定位方式，元素按照文档流进行布局。

- 相对定位（Relative）：使用`position: relative;`可以使元素相对于其在文档流中的原始位置进行定位。可以通过`top`、`right`、`bottom`、`left`属性来调整元素的位置。 - 绝对定位（Absolute）：使用`position: absolute;`会使元素脱离文档流，相对于最近的已定位祖先元素（如果没有已定位的祖先元素，则相对于``元素）进行定位。同样可以使用`top`、`right`、`bottom`、`left`属性来调整位置。

- 固定定位（Fixed）：使用`position: fixed;`会使元素脱离文档流，相对于浏览器窗口进行定位。元素的位置不会随着页面滚动而改变，常用于创建固定在页面顶部或底部的导航栏等。

六、CSS的继承性和层叠性。

1. 继承性（Inheritance）

- 某些CSS属性会被后代元素继承。例如，在``元素上设置`font -

family`属性，那么``元素内的所有子元素（如``、``等）都会继承这个字体家族属性，除非子元素自己重新定义了该属性。一般文本相关的属性（如`color`、`font - size`等）具有继承性。

`、`

2. 层叠性（Cascading）

- 当多个CSS规则应用于同一个元素时，会根据一定的规则来确定最终的样式。这些规则包括选择器的优先级、样式声明的顺序等。

- 选择器优先级：ID选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。例如，如果一个元素同时被一个ID选择器和一个元素选择器定义了`color`属性，那么ID选择器定义的颜色将被应用。

- 样式声明顺序：如果两个选择器具有相同的优先级，那么后定义的样式将覆盖先定义的样式。例如：

p {

color: red;

} p {

color: blue;

}

- 在这个例子中，`

`元素的颜色将是蓝色，因为后定义的`color: blue`覆盖了先定义的`color: red`。

七、CSS3的新特性。

1. 圆角（Border - Radius）

- 使用`border - radius`属性可以创建圆角元素。例如`border - radius:

5px;`可以使元素的四个角都变成半径为5像素的圆角。也可以分别设置每个角的圆角半径，如`border - top - left - radius: 10px;`只设置左上角的圆角半径。

2. 阴影（Box - Shadow和Text - Shadow）

- 盒阴影（Box - Shadow）：使用`box - shadow`属性可以为元素添加阴影效果。例如`box - shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);`表示水平偏移2像素、垂直偏移2像素、模糊半径为5像素、颜色为半透明黑色（`rgba`表示带有透明度的RGB颜色）的阴影。

- 文本阴影（Text - Shadow）：使用`text - shadow`属性可以为文本添加阴影效果。例如`text - shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);`。

3. 渐变（Gradients）

- 线性渐变（Linear Gradients）：可以使用`background - image: linear -

gradient(to right, red, blue);`创建一个从左到右（`to right`）由红色到蓝色的线性渐变背景。