CSS属性：字体属性和文本属性

本文重要内容

• CSS的单位
• 字体属性
• 文本属性
• 定位属性：position、float、overflow等

CSS的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。

CSS中的单位是必须要写的，因为它没有默认单位。

绝对单位

1 in =2.54 cm =25.4 mm =72 pt =6 pc 。

各种单位的含义：

• in：英寸Inches (1 英寸 = 2.54 厘米)
• cm：厘米Centimeters
• mm：毫米Millimeters
• pt：点Points，或者叫英镑 (1点 = 1/72英寸)
• pc：皮卡Picas (1 皮卡 = 12 点)

相对单位

• px：像素Pixels (1px = 1/96英寸)
• em：相对于元素的字体大小（font-size）。如果未设置字体大小，1em 等于父元素的字体大小。
• rem：相对于根元素（html元素）的字体大小。
• %：相对于父元素的百分比。
• vw：视口宽度的1%。
• vh：视口高度的1%。
• vmin：视口宽度或高度中较小值的1%。
• vmax：视口宽度或高度中较大值的1%。

颜色的表示方法

• 英语单词：red、green、blue、yellow等
• rgb表示法：rgb(255, 0, 0)、rgb(0, 255, 0)、rgb(0, 0, 255)等
• 十六进制表示法：#FF0000、#00FF00、#0000FF等
• rgba表示法：rgba(255, 0, 0, 0.5)，最后一个参数表示透明度，取值范围是0~1

字体属性

CSS字体属性

属性	描述	CSS版本
font	在一个声明中设置所有字体属性	1
font-family	规定文本的字体系列	1
font-size	规定文本的字体尺寸	1
font-style	规定文本的字体样式	1
font-variant	规定文本的字体变体	1
font-weight	规定字体的粗细	1

font-family属性

font-family属性用于设置字体。网页中常用的字体有：微软雅黑、宋体、黑体等。

p {
    font-family: "微软雅黑", "宋体";
}

上方代码表示：首选微软雅黑，如果用户电脑没有安装微软雅黑，则使用宋体。

font-size属性

font-size属性用于设置字体大小。

p {
    font-size: 20px;
}

font-weight属性

font-weight属性用于设置字体粗细。常用取值：

• normal：正常（默认值）
• bold：加粗
• 100~900：100、200、300、400、500、600、700、800、900（400 等同于 normal，700 等同于 bold）

p {
    font-weight: bold;
}

font-style属性

font-style属性用于设置字体风格。常用取值：

• normal：正常（默认值）
• italic：斜体
• oblique：倾斜

p {
    font-style: italic;
}

font综合属性

font属性用于在一个声明中设置所有字体属性。

语法格式：

选择器 {
    font: font-style font-variant font-weight font-size/line-height font-family;
}

举例：

p {
    font: italic bold 20px/1.5 "微软雅黑", "宋体";
}

注意：

• 使用font属性时，必须按上面的顺序写，不能更换顺序。
• 其中font-size和font-family是必须的，其他的可以省略。

文本属性

CSS文本属性

属性	描述	CSS版本
color	设置文本颜色	1
direction	规定文本的方向	2
letter-spacing	设置字符间距	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1
text-decoration	规定添加到文本的装饰效果	1
text-indent	规定文本块首行的缩进	1
text-shadow	规定添加到文本的阴影效果	3
text-transform	控制文本的大小写	1
unicode-bidi	设置文本的方向	2
vertical-align	设置元素的垂直对齐方式	1
white-space	规定如何处理元素中的空白	1
word-spacing	设置单词间距	1

color属性

color属性用于设置文本颜色。

p {
    color: red;
}

line-height属性

line-height属性用于设置行高（行间距）。

p {
    line-height: 1.5;  /* 表示行高是字体大小的1.5倍 */
}

行高可以这样理解：一行文本的高度。

text-align属性

text-align属性用于设置文本的水平对齐方式。常用取值：

• left：左对齐（默认值）
• right：右对齐
• center：居中对齐
• justify：两端对齐

p {
    text-align: center;
}

text-indent属性

text-indent属性用于设置首行文本的缩进。

p {
    text-indent: 2em;  /* 缩进2个字符 */
}

text-decoration属性

text-decoration属性用于设置文本的装饰线。常用取值：

• none：无装饰线（默认值）
• underline：下划线
• overline：上划线
• line-through：删除线

p {
    text-decoration: underline;
}

letter-spacing属性

letter-spacing属性用于设置字符间距。

p {
    letter-spacing: 2px;
}

word-spacing属性

word-spacing属性用于设置单词间距。

p {
    word-spacing: 10px;
}

定位属性

CSS中的定位属性包括position、float、overflow等，这些属性用于控制元素在页面中的位置和显示方式。

position属性

position属性用于指定一个元素在文档中的定位方式。常用取值：

• static：默认值，按照正常文档流进行排列
• relative：相对定位，相对于元素的正常位置进行定位
• absolute：绝对定位，相对于最近的已定位的祖先元素进行定位
• fixed：固定定位，相对于浏览器窗口进行定位

div {
    position: absolute;
    top: 100px;
    left: 100px;
}

float属性

float属性用于指定一个元素应沿其容器的左侧或右侧放置。常用取值：

• none：默认值，元素不浮动
• left：元素向左浮动
• right：元素向右浮动

img {
    float: left;
    margin-right: 10px;
}

overflow属性

overflow属性用于控制内容溢出元素框时的行为。常用取值：

• visible：默认值，内容不会被修剪，会呈现在元素框之外
• hidden：内容会被修剪，并且其余内容是不可见的
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

div {
    width: 200px;
    height: 200px;
    overflow: auto;
}

总结

本文介绍了CSS中的单位、字体属性、文本属性和定位属性。这些属性是CSS中最基础、最常用的属性，掌握这些属性对于网页布局和美化至关重要。

在实际开发中，我们需要根据设计需求灵活运用这些属性，以实现各种各样的页面效果。同时，也需要注意浏览器兼容性问题，确保网页在不同浏览器中都能正常显示。