CSS样式代码大全

### CSS样式代码详解 #### 一、背景样式 Background **1. `background-attachment`**：此属性定义了背景图像是否固定或者随着页面滚动而滚动。 - **取值**： - `scroll`：背景图像随页面滚动（默认值）。 - `fixed`：背景图像固定不动。 **2. `background-color`**：用于设置元素的背景颜色。 - **示例**：`background-color: red;` **3. `background-image`**：用于设置元素的背景图像。 - **示例**：`background-image: url('image.jpg');` **4. `background-position`**：用于设置背景图像的位置。 - **取值**： - 可以使用百分比或长度单位来精确指定位置。 - 示例：`background-position: 50% 50%;` 或 `background-position: 10px 20px;` **5. `background-repeat`**：用于控制背景图像是否重复显示以及如何重复。 - **取值**： - `repeat`：水平和垂直方向都重复（默认值）。 - `no-repeat`：不重复。 - `repeat-x`：只在水平方向重复。 - `repeat-y`：只在垂直方向重复。 #### 二、字体样式 Font **1. `font-family`**：设置字体系列。 - **示例**：`font-family: 'Arial', sans-serif;` - 使用时，建议列出几种字体，以防浏览器无法识别首选字体。 **2. `font-size`**：设置字体大小。 - **示例**：`font-size: 16px;` **3. `font-size-adjust`**：为字体设定一个比例值，用于调整字体的高宽比，以保持一致的外观。 - **示例**：`font-size-adjust: .58;` **4. `font-stretch`**：设置字体的宽度。 - **取值**： - `normal`：正常宽度。 - `wider`：更宽。 - `narrower`：更窄。 **5. `font-style`**：设置字体样式，如斜体等。 - **取值**： - `normal`：常规字体。 - `italic`：斜体。 - `oblique`：倾斜。 **6. `font-variant`**：控制字体的变体形式。 - **取值**： - `normal`：常规字体。 - `small-caps`：小大写。 **7. `font-weight`**：设置字体粗细。 - **取值**： - `normal`：常规粗细。 - `bold`：加粗。 - `bolder`：更粗。 - `lighter`：更细。 - 数值：100~900，表示不同的粗细程度。 #### 三、边距 Margin **1. `margin-top` / `margin-bottom` / `margin-left` / `margin-right`**：分别设置元素上、下、左、右边距。 - **示例**：`margin-top: 10px;` - 边距可以设置为像素、百分比或其他长度单位。 #### 四、内边距 Padding **1. `padding-top` / `padding-bottom` / `padding-left` / `padding-right`**：分别设置元素上、下、左、右边框内的空白区域。 - **示例**：`padding-top: 10px;` - 内边距同样可以设置为像素、百分比或其他长度单位。 #### 五、列表 List **1. `list-style-image`**：用于将图像设置为列表项目标记。 - **示例**：`list-style-image: url('bullet.png');` **2. `list-style-position`**：设置列表项标记相对于项目的定位。 - **取值**： - `inside`：列表项标记位于列表文本内。 - `outside`：列表项标记位于列表文本外（默认值）。 **3. `list-style-type`**：设置列表项标记类型。 - **取值**： - `disc`：实心圆点。 - `circle`：空心圆圈。 - `square`：方块。 - 更多类型可参考文档。 #### 六、生成内容 Generated Content **1. `content:before` / `content:after`**：在元素内容之前或之后插入内容。 - **示例**：`::before { content: 'Example'; }` **2. `counter-increment`**：用于增加或减少计数器的值。 - **示例**：`counter-increment: chapter;` **3. `counter-reset`**：用于初始化计数器的值。 - **示例**：`counter-reset: section;` #### 七、尺寸 Dimension **1. `height` / `width`**：设置元素的高度和宽度。 - **示例**：`width: 100px;` **2. `min-height` / `min-width`**：设置元素最小高度和最小宽度。 - **示例**：`min-width: 200px;` **3. `max-height` / `max-width`**：设置元素最大高度和最大宽度。 - **示例**：`max-height: 400px;` #### 八、定位 Positioning **1. `position`**：设置元素的定位类型。 - **取值**： - `static`：默认值，无定位。 - `relative`：相对定位。 - `absolute`：绝对定位。 - `fixed`：固定定位。 - `sticky`：粘性定位。 **2. `top` / `bottom` / `left` / `right`**：用于配合`position`属性设置元素的具体位置。 - **示例**：`top: 20px;` **3. `z-index`**：设置元素的堆叠顺序。 - **示例**：`z-index: 1;` **4. `overflow`**：当元素内容溢出其区域时如何处理。 - **取值**： - `visible`：默认值，溢出的内容会显示出来。 - `hidden`：溢出的内容会被裁剪。 - `auto`：浏览器自动选择适当的行为。 - `scroll`：始终显示滚动条。 **5. `visibility`**：设置元素的可见性。 - **取值**： - `visible`：元素可见。 - `hidden`：元素不可见但保留空间。 - `collapse`：仅适用于表格单元格，隐藏单元格并释放其空间。 **6. `clear`**：清除浮动元素的影响。 - **取值**： - `none`：不进行清除。 - `left`：左侧不允许有浮动元素。 - `right`：右侧不允许有浮动元素。 - `both`：左右两侧都不允许有浮动元素。 **7. `float`**：使元素浮动。 - **取值**： - `left`：向左浮动。 - `right`：向右浮动。 - `none`：不浮动（默认值）。 #### 九、打印样式 Print **1. `orphans`**：设置段落开头至少有多少行不能单独出现在一页的末尾。 - **示例**：`orphans: 3;` **2. `widows`**：设置段落结尾至少有多少行不能单独出现在一页的开头。 - **示例**：`widows: 2;` **3. `page-break-after` / `page-break-before` / `page-break-inside`**：控制页面断开位置。 - **示例**：`page-break-after: always;` #### 十、表格 Table **1. `border-collapse`**：设置表格边框是否合并为单一的边框还是每个单元格分开。 - **取值**： - `separate`：边框分离。 - `collapse`：边框合并（默认值）。 **2. `border-spacing`**：设置相邻单元格之间的间距。 - **示例**：`border-spacing: 5px;` **3. `caption-side`**：设置表格标题的位置。 - **取值**： - `top`：顶部。 - `bottom`：底部。 **4. `empty-cells`**：设置是否显示空单元格。 - **取值**： - `show`：显示空单元格。 - `hide`：隐藏空单元格。 **5. `table-layout`**：设置表格列宽的计算方式。 - **取值**： - `auto`：根据内容自动计算（默认值）。 - `fixed`：使用固定列宽。 #### 十一、伪类 Pseudo-classes **1. `:active`**：当前被激活的元素。 - **示例**：`a:active { color: red; }` **2. `:focus`**：当前获取焦点的元素。 - **示例**：`input:focus { border-color: blue; }` **3. `:hover`**：鼠标悬停在元素之上时的状态。 - **示例**：`p:hover { background-color: yellow; }` **4. `:link`**：未访问过的链接。 - **示例**：`a:link { color: green; }` **5. `:visited`**：已访问过的链接。 - **示例**：`a:visited { color: purple; }` **6. `:first-child`**：父元素中的第一个子元素。 - **示例**：`li:first-child { font-weight: bold; }` **7. `:lang()`**：匹配具有特定语言属性的元素。 - **示例**：`p:lang(es) { font-family: 'Times New Roman'; }` #### 十二、伪元素 Pseudoelements **1. `:first-letter`**：用于选择元素的第一个字母。 - **示例**：`p:first-letter { font-size: 2em; }` **2. `:first-line`**：用于选择元素的第一行。 - **示例**：`p:first-line { color: blue; }` **3. `:before` / `:after`**：在元素内容之前或之后插入内容。 - **示例**：`p::before { content: 'Start: '; }` 通过以上详尽的介绍，我们可以看出CSS提供了丰富的样式设置选项，这些选项可以帮助开发者创建出美观且功能强大的网页布局。掌握这些基础知识对于成为一名优秀的前端开发者至关重要。