CSS(层叠样式表,Cascading Style Sheets)是一种用于控制网页外观和布局的语言。它与HTML(超文本标记语言)一起使用,HTML负责定义网页的内容和结构,而CSS则负责定义网页的样式,如颜色、字体、布局等。
### CSS的基本概念
1. **选择器(Selector)**:
选择器用于选择要应用样式的HTML元素。常见的选择器有:
- 标签选择器:直接使用HTML标签名称。例如:`p` 选择所有段落。
- 类选择器:使用点号加类名。例如:`.class-name` 选择具有该类名的元素。
- ID选择器:使用井号加ID名。例如:`#id-name` 选择具有该ID的元素。
2. **属性(Property)和属性值(Value)**:
每个CSS规则由属性和属性值对组成,用于定义具体的样式。例如:
```css
p {
color: red; /* 设置文本颜色为红色 */
font-size: 16px; /* 设置字体大小为16像素 */
}
```
3. **层叠(Cascading)**:
CSS具有层叠性,即多个样式可以叠加在一起,后定义的样式可以覆盖先定义的样式。层叠规则的优先级如下:
- 重要性:带有`!important`标记的样式优先级最高。
- 特异性:选择器的特异性越高,优先级越高。
- 来源顺序:在同一个样式表中,后定义的样式会覆盖先定义的样式。
### CSS的使用方法
1. **内联样式(Inline Styles)**:
将CSS直接写在HTML元素的`style`属性中。适用于简单的样式或临时修改。
```html
<p style="color: red; font-size: 16px;">这是一个段落。</p>
```
2. **内部样式表(Internal Stylesheet)**:
将CSS写在HTML文档的`<style>`标签中,通常位于`<head>`部分。适用于单个页面的样式控制。
```html
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
```
3. **外部样式表(External Stylesheet)**:
将CSS写在单独的`.css`文件中,通过HTML文档中的`<link>`标签进行引用。适用于多个页面共享同一套样式。
```html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
```
### 一些常用的CSS属性
1. **颜色和背景**:
```css
color: blue; /* 文本颜色 */
background-color: yellow; /* 背景颜色 */
background-image: url('image.jpg'); /* 背景图片 */
```
2. **字体**:
```css
font-family: Arial, sans-serif; /* 字体家族 */
font-size: 14px; /* 字体大小 */
font-weight: bold; /* 字体粗细 */
```
3. **文本样式**:
```css
text-align: center; /* 文本对齐 */
text-decoration: underline; /* 文本装饰 */
line-height: 1.5; /* 行高 */
```
4. **盒子模型**:
```css
width: 100px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid black; /* 边框 */
```
5. **布局**:
```css
display: block; /* 块级元素 */
display: inline; /* 行内元素 */
float: left; /* 浮动 */
position: absolute; /* 绝对定位 */
```