CSS基础教程之尺寸、字体及文本属性

CSS（层叠样式表）是用于控制网页外观和布局的关键技术，在CSS中，尺寸、字体及文本属性是基础且重要的部分，它们直接影响着网页内容的展示效果，以下是对这些属性的详细解析：

一、尺寸属性

1、宽度与高度：通过width和height属性设置元素的宽度和高度。div { width: 300px; height: 200px; }将一个<div>元素的宽度设置为300像素，高度设置为200像素。

2、百分比：使用百分比可以创建响应式设计，使元素根据父容器的大小进行调整。div { width: 50%; }将<div>元素的宽度设置为其父容器宽度的一半。

3、最大宽度与最大高度：max-width和max-height属性用于设置元素的最大宽度和高度，防止内容溢出或变形。img { max-width: 100%; }确保图片不会超过其父容器的宽度。

4、最小宽度与最小高度：min-width和min-height属性用于设置元素的最小宽度和高度，保证元素在缩小窗口时不会变得过小。div { min-width: 200px; }确保<div>元素的宽度至少为200像素。

二、字体属性

1、字体系列：font-family属性用于设置文本的字体系列，可以指定多个字体名作为回退系统，以确保在不同设备上都能正确显示。p { font-family: Arial, sans-serif; }将段落文本的字体设置为Arial，如果Arial不可用，则回退到sans-serif字体。

2、字体大小：font-size属性用于设置文本的大小，可以使用像素（px）、em、rem等单位。h1 { font-size: 40px; }1的字体大小设置为40像素。

3、字体粗细：font-weight属性用于设置文本的粗细程度，可以取值为normal（正常）、bold（加粗）或具体的数值（如100到900）。p { font-weight: bold; }将段落文本加粗显示。

4、字体样式：font-style属性用于设置文本的样式，如正常（normal）、斜体（italic）等。i { font-style: italic; }将斜体文本显示为斜体。

5、行高：line-height属性用于设置多行文本的行间距，可以设置为具体的数值（如像素或em）或当前标签font-size属性值的倍数。p { line-height: 1.5; }将段落文本的行高设置为字体大小的1.5倍。

6、复合属性：font复合属性可以集成多个字体相关的属性，以简写的形式把多个属性汇总起来。div { font: italic 700 30px/2 "楷体"; }同时设置了字体样式、粗细、大小、行高和字体系列。

三、文本属性

1、文本缩进：text-indent属性用于设置首行的缩进距离，可以使用像素（px）或em作为单位。p { text-indent: 2em; }将段落文本的首行缩进两个字符的宽度。

2、文本对齐方式：text-align属性用于设置文本的水平对齐方式，可以取值为left（左对齐）、center（居中对齐）、right（右对齐）等。div { text-align: center; }将<div>元素内的文本居中对齐。

3、文本修饰线：text-decoration属性用于设置文本的修饰线，如无（none）、下划线（underline）、上划线（overline）、删除线（line-through）等。a { text-decoration: none; }去除链接文本的下划线。

4、文字颜色：color属性用于设置文本的颜色，可以使用预定义的颜色名称、十六进制色值、RGB、RGBA等格式。p { color: red; }将段落文本的颜色设置为红色。

CSS中的尺寸、字体及文本属性是网页设计的基础，它们共同决定了网页内容的展示效果，通过熟练掌握这些属性的使用，可以创建出美观、易读且响应式的网页界面。