"前端学习的产物，css的笔记"
在前端开发中，CSS（层叠样式表）是不可或缺的一部分，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现。CSS不仅控制着网页的布局，还负责文本、颜色、背景、边距、边框等多种视觉效果。本笔记主要涵盖了CSS的基础知识，包括样式表的引入方式、颜色设置、盒模型以及居中对齐等核心概念。
1. CSS的引入方式：
- **外部样式表**：这是最常见的使用方式，将CSS代码写入单独的`.css`文件中，然后通过`<link>`标签在HTML文件中引用，如`<link rel="stylesheet" href="styles.css">`。这种方式便于代码管理和维护，同时可以实现多个页面共享样式。
- **内部样式表**：将CSS代码置于HTML文档的`<head>`部分的`<style>`标签内，只对当前页面生效，适用于小规模或特定页面的样式调整。
- **内联样式**：直接在HTML元素的`style`属性中写入CSS，如`<div style="color:red;">文本</div>`，这种方式灵活性最高，但不推荐大量使用，因为不利于代码复用和维护。
2. 颜色设置：
- CSS中的颜色可以通过颜色名称（如`red`、`green`）、十六进制值（如`#FF0000`、`#00FF00`）、RGB（`rgb(255, 0, 0)`）、RGBA（带有透明度，如`rgba(255, 0, 0, 0.5)`）或HSL（色相、饱和度、亮度，如`hsl(0, 100%, 50%)`）等方式来定义。例如，将文字颜色设为红色，背景颜色设为绿色，字体大小设为16像素，正常字重，无衬线字体，且首字母大写：
```css
color: red;
background-color: green;
font-size: 16px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: uppercase;
```
3. 盒模型：
- **标准盒模型**：宽度和高度只包含内容区域，不包括边框和内填充。在CSS3中，默认采用标准盒模型，可以用`box-sizing`属性设置为`content-box`来保持一致性。例如：
```css
div {
box-sizing: content-box;
width: 100px; /* 包含内容的宽度 */
padding: 10px; /* 内填充 */
border: 1px solid black; /* 边框 */
}
```
- **怪异盒模型**：宽度和高度包含了内容、内填充和边框。在IE5及更早版本的浏览器中默认采用，现代浏览器可以通过`box-sizing`属性设置为`border-box`来模拟。例如：
```css
div {
box-sizing: border-box;
width: 100px; /* 包含内容、内填充和边框的总宽度 */
padding: 10px;
border: 1px solid black;
}
```
4. 居中对齐：
- `text-align`属性用于设置文本内容的水平对齐，将`text-align`设为`center`可以使文本在容器内居中显示：
```css
div {
text-align: center;
}
```
- 对于块级元素的水平居中，可以使用`margin: auto`，但这需要元素的宽度是固定的。例如：
```css
div {
width: 200px;
margin: 0 auto;
}
```
- 垂直居中通常较为复杂，可以使用Flexbox或Grid布局来实现，或者对于单行文本，可以结合`line-height`和`vertical-align`。
这些只是CSS基础的冰山一角，随着学习深入，还会涉及选择器、布局模式、响应式设计、过渡和动画、自定义属性（CSS变量）等更多内容。持续学习和实践，你将能掌握这个强大的样式语言，打造出富有表现力和功能性的网页。
我的内容管理
展开
