CSS 属性详解

CSS 属性是 CSS 的核心组成部分，它们定义了元素的外观和行为。掌握常用的 CSS 属性对于创建美观、功能完善的网页至关重要。

CSS 属性的分类

CSS 属性可以分为以下几个主要类别：

1. 文本属性

控制文本的显示方式，包括字体、颜色、对齐等。

2. 背景属性

控制元素的背景，包括颜色、图片、位置等。

3. 边框属性

控制元素的边框，包括宽度、样式、颜色等。

4. 盒模型属性

控制元素的盒模型，包括内边距、边框、外边距等。

5. 尺寸属性

控制元素的宽度和高度。

6. 显示属性

控制元素的显示方式。

7. 定位属性

控制元素的位置。

8. 浮动属性

控制元素的浮动。

9. 列表属性

控制列表的显示方式。

10. 表格属性

控制表格的显示方式。

文本属性

文本属性用于控制文本的显示方式。

字体属性

/* 字体系列 */
font-family: Arial, sans-serif;
font-family: 'Microsoft YaHei', 'SimHei', sans-serif;

/* 字体大小 */
font-size: 16px;
font-size: 1.2em;
font-size: 120%;

/* 字体粗细 */
font-weight: normal;
font-weight: bold;
font-weight: 400;
font-weight: 700;

/* 字体样式 */
font-style: normal;
font-style: italic;
font-style: oblique;

/* 字体变体 */
font-variant: normal;
font-variant: small-caps;

/* 字体简写 */
font: italic bold 16px/1.5 Arial, sans-serif;

文本颜色

/* 文本颜色 */
color: #333;
color: rgb(51, 51, 51);
color: rgba(51, 51, 51, 0.8);
color: hsl(0, 0%, 20%);
color: red;

文本对齐

/* 文本对齐 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

/* 文本对齐最后一行 */
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

文本装饰

/* 文本装饰线 */
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

/* 文本装饰样式 */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;

/* 文本装饰颜色 */
text-decoration-color: red;

/* 文本装饰简写 */
text-decoration: underline dotted red;

文本转换

/* 文本转换 */
text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

行高

/* 行高 */
line-height: 1.5;
line-height: 1.6;
line-height: 2;
line-height: 24px;
line-height: normal;

字间距和词间距

/* 字间距 */
letter-spacing: normal;
letter-spacing: 1px;
letter-spacing: 0.1em;

/* 词间距 */
word-spacing: normal;
word-spacing: 5px;
word-spacing: 0.2em;

文本缩进

/* 首行缩进 */
text-indent: 2em;
text-indent: 30px;
text-indent: 10%;

文本阴影

/* 文本阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
text-shadow: none;

文本溢出

/* 文本溢出 */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: string("...");

/* 配合使用 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

文本换行

/* 文本换行 */
word-wrap: normal;
word-wrap: break-word;

/* 单词换行 */
word-break: normal;
word-break: break-all;
word-break: keep-all;

/* 文本换行 */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

背景属性

背景属性用于控制元素的背景。

背景颜色

/* 背景颜色 */
background-color: #fff;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.9);
background-color: transparent;
background-color: white;

背景图片

/* 背景图片 */
background-image: url('background.jpg');
background-image: url('data:image/png;base64,...');
background-image: linear-gradient(to right, red, blue);
background-image: radial-gradient(circle, red, blue);
background-image: none;

背景重复

/* 背景重复 */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

背景位置

/* 背景位置 */
background-position: top left;
background-position: center center;
background-position: bottom right;
background-position: 50% 50%;
background-position: 10px 20px;

背景大小

/* 背景大小 */
background-size: auto;
background-size: cover;
background-size: contain;
background-size: 100% 100%;
background-size: 50% auto;

背景固定

/* 背景固定 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

背景简写

/* 背景简写 */
background: #fff url('background.jpg') no-repeat center center fixed;
background: linear-gradient(to right, red, blue);
background: rgba(255, 255, 255, 0.9);

背景裁剪

/* 背景裁剪 */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

背景原点

/* 背景原点 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

边框属性

边框属性用于控制元素的边框。

边框宽度

/* 边框宽度 */
border-width: 1px;
border-width: 2px;
border-width: medium;
border-width: thick;
border-width: thin;

/* 单边边框宽度 */
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 2px;

边框样式

/* 边框样式 */
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;

/* 单边边框样式 */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

边框颜色

/* 边框颜色 */
border-color: #333;
border-color: rgb(51, 51, 51);
border-color: rgba(51, 51, 51, 0.8);
border-color: transparent;

/* 单边边框颜色 */
border-top-color: #333;
border-right-color: #666;
border-bottom-color: #999;
border-left-color: #ccc;

边框简写

/* 边框简写 */
border: 1px solid #333;
border: 2px dashed #666;
border: none;

/* 单边边框简写 */
border-top: 1px solid #333;
border-right: 2px dashed #666;
border-bottom: 1px solid #999;
border-left: 2px dashed #ccc;

圆角边框

/* 圆角边框 */
border-radius: 4px;
border-radius: 8px;
border-radius: 50%;

/* 单个角的圆角 */
border-top-left-radius: 4px;
border-top-right-radius: 8px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 16px;

/* 简写 */
border-radius: 4px 8px 12px 16px;
border-radius: 4px 8px;
border-radius: 4px / 8px;

轮廓

/* 轮廓 */
outline: none;
outline: 2px solid #007bff;
outline: 2px dashed #007bff;
outline-offset: 2px;
outline-width: 2px;
outline-style: solid;
outline-color: #007bff;

盒模型属性

盒模型属性控制元素的盒模型，包括内边距、边框和外边距。

内边距

/* 内边距 */
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;

/* 单边内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

外边距

/* 外边距 */
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;

/* 单边外边距 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* 自动外边距 */
margin: 0 auto;

盒模型大小

/* 盒模型大小 */
box-sizing: content-box;  /* 标准盒模型 */
box-sizing: border-box;   /* IE 盒模型 */

尺寸属性

尺寸属性用于控制元素的宽度和高度。

宽度和高度

/* 宽度 */
width: 100px;
width: 50%;
width: auto;
width: 100%;
width: max-content;
width: min-content;

/* 高度 */
height: 100px;
height: 50%;
height: auto;
height: 100vh;
height: 100%;

最大和最小尺寸

/* 最大宽度 */
max-width: 1200px;
max-width: 100%;
max-width: none;

/* 最小宽度 */
min-width: 300px;
min-width: 100%;

/* 最大高度 */
max-height: 500px;
max-height: 100vh;
max-height: none;

/* 最小高度 */
min-height: 100px;
min-height: 100vh;

显示属性

显示属性用于控制元素的显示方式。

display 属性

/* display 属性 */
display: block;
display: inline;
display: inline-block;
display: none;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: list-item;
display: table;
display: table-cell;
display: table-row;

visibility 属性

/* visibility 属性 */
visibility: visible;
visibility: hidden;
visibility: collapse;

定位属性

定位属性用于控制元素的位置。

position 属性

/* position 属性 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

定位偏移

/* 定位偏移 */
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

z-index 属性

/* z-index 属性 */
z-index: 1;
z-index: 100;
z-index: -1;
z-index: auto;

浮动属性

浮动属性用于控制元素的浮动。

float 属性

/* float 属性 */
float: left;
float: right;
float: none;

clear 属性

/* clear 属性 */
clear: left;
clear: right;
clear: both;
clear: none;

列表属性

列表属性用于控制列表的显示方式。

列表样式类型

/* 列表样式类型 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: none;

列表样式位置

/* 列表样式位置 */
list-style-position: inside;
list-style-position: outside;

列表样式图片

/* 列表样式图片 */
list-style-image: url('bullet.png');
list-style-image: none;

列表样式简写

/* 列表样式简写 */
list-style: disc inside;
list-style: url('bullet.png') outside;
list-style: none;

表格属性

表格属性用于控制表格的显示方式。

边框合并

/* 边框合并 */
border-collapse: collapse;
border-collapse: separate;

边框间距

/* 边框间距 */
border-spacing: 0;
border-spacing: 5px 10px;

表格标题位置

/* 表格标题位置 */
caption-side: top;
caption-side: bottom;

空单元格处理

/* 空单元格处理 */
empty-cells: show;
empty-cells: hide;

总结

CSS 属性是控制网页外观的核心工具，掌握常用的 CSS 属性对于创建美观的网页至关重要：

1. 文本属性：控制文本的字体、颜色、对齐等
2. 背景属性：控制元素的背景颜色和图片
3. 边框属性：控制元素的边框样式和圆角
4. 盒模型属性：控制元素的内边距、边框和外边距
5. 尺寸属性：控制元素的宽度和高度
6. 显示属性：控制元素的显示方式
7. 定位属性：控制元素的位置
8. 浮动属性：控制元素的浮动
9. 列表属性：控制列表的显示方式
10. 表格属性：控制表格的显示方式

记住以下几点：

• 理解每个属性的作用和取值
• 使用简写属性提高代码效率
• 注意属性的兼容性
• 合理使用属性创建精美的网页
• 参考文档学习更多高级属性