css字体、文本样式属性

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

一、字体样式属性

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

1、字体设置(font-family)

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

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

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

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

注意

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

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

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

2、字号大小(font-size)

p {font-size:15px;}

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

建议

1、网页一般使用14px以上的字体大小字体大小

2、尽量使用双数，因为单数情况下ie6等老式浏览器可能会出bug

3、字体粗细(font-weight)

 p {font-weight:bold;}

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

属性值

bold：字体加粗 ( 700：等于bold，如果还想更粗就加大数值)

normal：字体正常  ( 400：等于normal，如果还想更细就减小数值)

4、字体风格(font-style)

p {font-style:normal;}

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

属性值

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

italic：浏览器会显示斜体的字体样式。

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

5、文本颜色(color)

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

1.预定义的颜色值: 如red，green，blue等。

2.十六进制: 如#FF0000，#FF6600，#29D794等。（常用)。

3.RGB代码: 如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

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

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

基本语法

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

注意

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

2、其中不需要设置的属性可以省略（取默认值），但必须保留 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>

二、文本样式属性

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

1、行间距(line-height)

p {line-height: 15px;}

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。一般情况下，行距比字号大7.8像素左右就可以了。

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

p {text-align: center;}

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

属性值

left：左对齐（默认值）

right：右对齐

center：居中对齐

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

3、text-indent:首行缩进

p {text-indent: 2em;}

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

4、text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

5、总结

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

参考

更多的可以看w3school官方文档: w3school-CSS 教程

```
你如果愿意有所作为，就必须有始有终。(4)
```

CSS(2)---css字体、文本样式属性的更多相关文章

  1. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  2. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

  3. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  4. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  5. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  6. 重温CSS之背景、文本样式

    CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...

  7. CSS font-size字体大小样式属性

    设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...

  8. CSS 选择器、字体/文本、背景

    CSS的基本使用 直接写在标签内 <p style="color: red; font-size: 40px;">段落</p> 写在 style 标签内 & ...

  9. css中 font常用的样式属性

    今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型:    如: font-family:宋体; 2)字体大小 语法:font-size: ...

随机推荐

  1. C# 子类与父类构造函数

  2. 王晶：华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019

    演讲嘉宾 | 王晶(华为云人工智能高级算法工程师王晶) 出品 | AI科技大本营(ID:rgznai100) 近期,由 CSDN 主办的 2019 中国AI 开发者大会(AI ProCon 2019) ...

  3. shell 解析 json

    如果 想利用 shell 从 json 数据 中 解析出某个字段, 可以 利用 正则匹配, 比如 想 解析出 "spanId":"8461203268866670975& ...

  4. A*算法在最短路问题的应用及其使用举例

    1 A*算法 A*算法在人工智能中是一种典型的启发式搜索算法,启发中的估价是用估价函数表示的: 其中f(n)是节点n的估价函数,g(n)表示实际状态空间中从初始节点到n节点的实际代价,h(n)是从n到 ...

  5. 前端flex布局学习笔记

    flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...

  6. ES6，箭头函数 (=>)注意点

    函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. 不可以使用arguments对象,该对象在函数体内不存 ...

  7. 有一部分程序员还不知道Java 中的注解到底是如何工作的？

    作者:人晓 自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解. 这篇文章中, ...

  8. 基于 HTML5 WebGL 构建智能数字化城市 3D 全景

    前言 自 2011 年我国城镇化率首次突破 50% 以来,<新型城镇化发展规划>将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市.截至现今,全国 ...

  9. Linux三剑客之sed流编辑器

    一.功能说明 Sed是Stream Editor(流编辑器)缩写,是操作.过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行. 二.语法格式 Usage: sed [options] [se ...

  10. 从多核CPU Cache一致性的应用到分布式系统一致性的概念迁移

    概述 现代多核CPU的cache模型基本都跟下图1所示一样,L1 L2 cache是每个核独占的,只有L3是共享的,当多个cpu读.写同一个变量时,就需要在多个cpu的cache之间同步数据,跟分布式 ...