CSS(2)---css字体、文本样式属性

时间 2019-11-06

标签 css 字体文本样式属性栏目 CSS 繁體版

原文原文链接

css字体、文本样式属性

这篇主要讲CSS文本属性中的：字体样式属性 和 文本样式属性。css

1、字体样式属性

CSS 字体属性主要包括：字体设置(font-family)、字号大小(font-size)、字体粗细(font-weight)、字体风格(font-style)、字体颜色(color)。html

一、字体设置(font-family)

网页中经常使用的字体有 宋体、微软雅黑、黑体 等，例如将网页中 全部p标签的字体设置为微软雅黑，可使用以下CSS样式代码：浏览器

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

能够同时指定多个字体，中间以逗号隔开，表示若是浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。学习

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

注意字体

一、英文字体不须要加双引号，如：选择器{font-family:arial;}code

二、如字体中包含特殊符号必须用双引号括起来，如：选择器{font-family:"Microsoft yahei";}orm

三、尽可能使用系统默认字体，保证在任何用户的浏览器中都能正确显示。htm

二、字号大小(font-size)

p {font-size:15px;}

该属性的值可使用相对长度单位，也可使用绝对长度单位。较经常使用，推荐使用相对长度像素单位px。blog

建议教程

一、网页通常使用14px以上的字体大小字体大小

二、尽可能使用双数，由于单数状况下ie6等老式浏览器可能会出bug

三、字体粗细(font-weight)

p {font-weight:bold;}

字体加粗除了用 b 和 strong 标签以外，可使用CSS 来实现，可是CSS 是没有语义的。

属性值

bold：字体加粗 ( 700：等于bold，若是还想更粗就加大数值)
normal：字体正常  ( 400：等于normal，若是还想更细就减少数值)

四、字体风格(font-style)

p {font-style:normal;}

字体倾斜除了用 i 和 em 标签以外，可使用CSS 来实现，可是CSS 是没有语义的。

属性值

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。

平时咱们不多给文字加斜体，反而喜欢给斜体标签（em，i）改成普通模式。

五、文本颜色(color)

color属性用于定义文本的颜色，其取值方式有以下3种：

1.预约义的颜色值: 如red，green，blue等。
2.十六进制: 如#FF0000，#FF6600，#29D794等。（经常使用)。
3.RGB代码: 如红色能够表示为rgb(255,0,0)或rgb(100%,0%,0%)。

六、综合设置字体样式(fort)

学过了上面的几个属性以后咱们发现若是一个标签这些样式都要设置的话写起来会很繁琐，代码冗余性太强，下面咱们来学习一下简单的设置方式。

基本语法

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

注意

一、使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

二、其中不须要设置的属性能够省略（取默认值），但必须保留 font-size 和 font-family 属性，不然font属性将不起做用。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    p {
        font: italic  20px "微软雅黑";
    }
    </style>
</head>
<body>
    <p>字体连写是有顺序的</p> <!-- 字体分格倾斜 大小20px 微软雅黑 -->
</body>
</html>

2、文本样式属性

CSS外观属性包含：行间距(line-height)、水平对齐方式(text-align)、首行缩进(text-indent)、文本的装饰(text-decoration)

一、行间距(line-height)

p {line-height: 15px;}

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，通常称为行高。通常状况下，行距比字号大7.8像素左右就能够了。

二、text-align:水平对齐方式

p {text-align: center;}

text-align属性用于设置文本内容的水平对齐，至关于html中的align对齐属性。

属性值

left：左对齐（默认值）
right：右对齐
center：居中对齐

提示：这个标签只会对块级元素或表元素居中，要经过在这些元素上适当地设置左、右外边距来实现。

三、text-indent:首行缩进

p {text-indent: 2em;}

text-indent属性用于设置首行文本的缩进，1em 就是一个字的宽度若是是汉字的段落， 1em 就是一个汉字的宽度

四、text-decoration 文本的装饰

text-decoration 一般咱们用于给连接修改装饰效果

五、总结

这里针对这里所讲的作一个总结

参考

更多的能够看w3school官方文档: w3school-CSS 教程

你若是愿意有所做为，就必须善始善终。(4)