CSS3知识点归纳

### CSS3知识点归纳 #### 文字样式 - **规定文字样式的属性** - `font-style`: 控制文字是否以斜体形式展示。 - 取值：`normal`（正常），`italic`（斜体）。 - 快捷键示例：`fs`用于设置`font-style: italic;`；`fsn`用于设置`font-style: normal;`。 - **规定文字粗细的属性** - `font-weight`: 控制文字的粗细程度。 - 单词取值：`bold`（加粗），`bolder`（更粗），`lighter`（更细）。 - 数字取值：100至900之间的整百数字。 - 快捷键示例：`fw`用于设置`font-weight: ;`；`fwb`用于设置`font-weight: bold;`；`fwbr`用于设置`font-weight: bolder;`。 - **规定文字大小的属性** - `font-size`: 设置文字大小。 - 常见单位：`px`（像素）。 - 必须指定单位（如`30px`）。 - 快捷键示例：`fz`用于设置`font-size: ;`；`fz30`用于设置`font-size: 30px;`。 - **规定文字字体的属性** - `font-family`: 指定文字所使用的字体。 - 如果字体名含有空格，则需要使用双引号或单引号包围字体名。 - 设置的字体必须是用户的系统已安装的字体。 - 快捷键示例：`ff`用于设置`font-family: ;`。 - **解决字体不存在的问题** - 使用多个字体名作为备选项，当首选字体不存在时，浏览器会尝试使用下一个备选字体。 - 示例：`font-family: "首选字体", "备选字体1", "备选字体2", ...` - **中文与英文分别设置字体** - 中文字体通常包含英文字符的支持，但英文字体通常不支持中文字符。 - 若要为界面中的英文单独设置字体，应确保该字体支持英文字符，且不会被用于中文内容。 #### 文本装饰 - **文本装饰的属性** - `text-decoration`: 控制文本的下划线、删除线等装饰效果。 - 取值：`none`（无装饰）、`underline`（下划线）、`overline`（上划线）、`line-through`（删除线）。 - **文本水平对齐的属性** - `text-align`: 设置文本的水平对齐方式。 - 取值：`left`（左对齐）、`right`（右对齐）、`center`（居中对齐）、`justify`（两端对齐）。 - **文本缩进的属性** - `text-indent`: 设置首行文本的缩进量。 - 示例：`text-indent: 2em;`表示首行缩进两个当前字体大小的宽度。 - **文本字体颜色** - `color`: 设置文本的颜色。 - 可使用颜色名称、十六进制值、RGB、RGBA、HSL、HSLA等多种格式。 #### 选择器 - **标签选择器** - 选择HTML文档中的特定标签，如`<p>`、`<div>`等。 - **ID选择器** - 通过`#id`的形式选择具有指定ID属性的元素。 - **类选择器（class）** - 通过`.classname`的形式选择具有指定类名的元素。 - **后代选择器** - 选择指定元素的后代元素，如`#container p`选择`#container`内的所有`<p>`标签。 - **子元素选择器** - 仅选择指定元素的直接子元素，如`#container > p`只选择`#container`的直接子元素`<p>`。 - **交集选择器** - 选择同时拥有两个类名的元素，如`.class1.class2`。 - **并集选择器** - 同时选择多个选择器匹配的元素，如`h1, h2, .class`。 - **兄弟选择器** - **相邻兄弟选择器**（CSS2推出）：选择紧跟在另一个元素后的元素，如`h1 + p`。 - **通用兄弟选择器**（CSS3推出）：选择位于另一个元素之后的所有兄弟元素，如`h1 ~ p`。 - **序选择器** - 选择符合特定位置条件的元素，如`:nth-child(n)`、`:nth-of-type(n)`。 - **属性选择器** - 选择具有特定属性的元素，如`[type="submit"]`选择`type`属性值为`submit`的元素。 - 支持更复杂的属性值匹配，如`[title^="hello"]`选择`title`属性值以`hello`开头的元素。 - **通配符选择器** - 选择页面上的所有元素，如`*`。 #### CSS三大特性 - **继承性** - 子元素会继承父元素的部分样式，如字体大小、颜色等。 - **层叠性** - 当多个规则应用于同一个元素时，它们会发生“层叠”，即某些规则会覆盖其他规则。 - **优先级** - 不同的选择器有不同的优先级，决定了样式应用的顺序。 - ID选择器 > 类选择器 > 标签选择器 > 通用选择器。 - 特定性较高的选择器将覆盖特定性较低的选择器。 - **Important（提升元素优先级为最高）** - 在样式声明的末尾添加`!important`可以提升该声明的优先级，使其覆盖其他声明。 - 示例：`color: red !important;` - **权重问题** - 权重计算决定哪些规则最终生效。 - 不同类型的选择器具有不同的权重值。 #### CSS标签分类 - CSS中的标签大致可以分为块级元素和内联元素两大类。 - **块级元素**（如`<div>`、`<p>`）默认占据一行空间。 - **内联元素**（如`<span>`、`<a>`）与其他元素在同一行显示，不独占空间。 #### 背景 - **背景图片** - `background-image`: 设置背景图像。 - 示例：`background-image: url('image.jpg');` - **背景平铺** - `background-repeat`: 控制背景图像是否重复显示。 - 取值：`repeat`（默认，横向和纵向重复）、`no-repeat`（不重复）、`repeat-x`（横向重复）、`repeat-y`（纵向重复）。 - **背景定位** - `background-position`: 控制背景图像的位置。 - 可以使用百分比、长度单位或关键词（如`top center`）进行定位。 - **背景缩写** - 将多个背景相关的属性合并成一行代码。 - 示例：`background: url('image.jpg') no-repeat center top / cover;` - **CSS精灵图** - 一种技术，通过将多个小图合成一张大图，并使用背景定位来显示不同部分，从而减少HTTP请求次数，提高网页加载速度。 #### 边框 - **外边框属性** - `border`: 设置元素的边框。 - 示例：`border: 1px solid #000;` - 可以单独设置每个边的边框，如`border-top`、`border-bottom`等。 - **内边距** - `padding`: 设置元素内部边缘与内容之间的距离。 - 示例：`padding: 10px;` - **外边距** - `margin`: 设置元素外部边缘与其他元素之间的距离。 - 示例：`margin: 20px;` - **盒子模型** - 包括内容区域、内边距、边框和外边距四个部分。 - **盒子模型四大属性**：`content`（内容区域）、`padding`（内边距）、`border`（边框）、`margin`（外边距）。 - **盒子box-sizing属性**：控制元素的总宽度和总高度如何计算。 - `content-box`（默认）：元素的宽度和高度包括内容区域和内边距。 - `border-box`：元素的宽度和高度包括内容区域、内边距和边框。 - **盒子居中和内容居中** - 居中元素本身：通过设置`margin: auto`实现水平居中。 - 居中文本内容：使用`text-align: center`。 - **行高（line-height）** - 控制行内元素的垂直间距。 - 示例：`line-height: 1.5;` #### 网页布局方式 - **标准流(文档流/普通流)排版方式** - 元素按照自然顺序排列。 - 块级元素自上而下依次排列，内联元素在同一行内排列。 - **浮动流排版方式** - 元素可以通过`float`属性实现浮动布局。 - 示例：`float: left;`使元素向左浮动。 - **定位流排版方式** - 通过`position`属性实现精确位置控制。 - **相对定位**：相对于其正常位置进行偏移。 - 示例：`position: relative; left: 20px;` - **绝对定位**：相对于最近的非static定位祖先元素进行定位。 - 示例：`position: absolute; top: 10px; left: 20px;` - **固定定位**：相对于视口进行定位，即使页面滚动也保持不变。 - 示例：`position: fixed; bottom: 0; right: 0;` - **静态定位**：默认定位方式，不使用任何定位属性。 - **z-index属性**：控制元素的堆叠顺序。 - 示例：`z-index: 1;`使元素在堆叠顺序中处于较上层。 #### 过渡模块 - **a标签的伪类选择器** - 如`:hover`、`:active`等，用于定义不同状态下的样式。 - **过渡模块（过渡动画效果）** - `transition`: 控制元素从一种样式到另一种样式的过渡效果。 - 示例：`transition: background-color 0.5s ease-in-out;` #### 2D转换模块 - **转换类型（transform）** - 支持多种转换操作，如`translate`、`scale`、`rotate`等。 - **形变中心点（transform-origin）** - 控制转换操作的参考点。 - 示例：`transform-origin: top left;` - **旋转轴向（rotate）** - `rotate`: 按指定角度旋转元素。 - 示例：`transform: rotate(45deg);` - **透视属性（perspective）** - 创建3D效果时使用，定义元素的透视深度。 - 示例：`perspective: 500px;` - **盒子阴影（box-shadow）** - `box-shadow`: 为元素添加阴影效果。 - 示例：`box-shadow: 5px 5px 10px #ccc;` #### 动画模块 - **过渡和动画之间的异同** - 过渡是自动的，当元素的状态发生改变时触发。 - 动画则需要明确地定义关键帧，通过`@keyframes`规则定义。 - **创建步骤** - 定义关键帧动画规则：`@keyframes myAnimation { from { transform: translateX(0); } to { transform: translateX(100px); } }` - 应用动画到元素上：`animation: myAnimation 2s infinite;` - **动画属性** - `animation`: 综合设置动画的各种参数。 - 示例：`animation: myAnimation 2s linear infinite;` #### 3D转换模块 - **正方体** - 利用3D转换和透视属性制作立体的正方体效果。 - **长方体** - 类似于正方体，但形状不同。 #### 背景图片属性 - 此部分主要介绍了与背景图片相关的CSS属性，包括但不限于背景图像、平铺方式、位置以及缩写语法等。 - 这些属性允许开发者精细地控制背景图像的显示方式，为网页设计增添更多视觉效果。 以上内容是对CSS3知识点的一个全面梳理，涉及了文字样式、文本装饰、选择器、背景、边框、盒子模型、网页布局、过渡与动画等多个方面，旨在帮助读者更好地理解和掌握CSS3的核心概念和技术要点。