CSS(2)---css字体、文本样式属性
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字体、文本样式属性的更多相关文章
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- HTML和CSS前端教程03-CSS文本样式
目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性？
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- 重温CSS之背景、文本样式
CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...
- CSS font-size字体大小样式属性
设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...
- CSS 选择器、字体/文本、背景
CSS的基本使用 直接写在标签内 <p style="color: red; font-size: 40px;">段落</p> 写在 style 标签内 & ...
- css中 font常用的样式属性
今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型: 如: font-family:宋体; 2)字体大小 语法:font-size: ...
随机推荐
- Spring IOC容器装配Bean_基于注解配置方式
bean的实例化 1.导入jar包(必不可少的) 2.实例化bean applicationContext.xml(xml的写法) <bean id="userDao" cl ...
- 《Windows内核安全与驱动开发》 2.3 重要的数据结构
<Windows内核安全与驱动开发>阅读笔记 -- 索引目录 <Windows内核安全与驱动开发> 2.3 重要的数据结构 一.驱动对象 Windows内核采用__的编程方式 ...
- 宝塔面板的数据库连接本地Navicat Premium
把宝塔面板的数据库连接本地Navicat Premium,这样就方便操作了.下面我教大家如何实现. 第一步:在阿里云的安全组添加安全规则,配置安全组放开3306端口 第二步:打开宝塔设置数据库的权限, ...
- k 近邻算法解决字体反爬手段｜效果非常好
字体反爬,是一种利用 CSS 特性和浏览器渲染规则实现的反爬虫手段.其高明之处在于,就算借助(Selenium 套件.Puppeteer 和 Splash)等渲染工具也无法拿到真实的文字内容. 这种反 ...
- 一条数据的HBase之旅，简明HBase入门教程3：适用场景
[摘要] 这篇文章继HBase数据模型之后,介绍HBase的适用场景,以及与一些关键场景有关的周边技术生态,最后给出了本文的示例数据 华为云上的NoSQL数据库服务CloudTable,基于Apach ...
- mininet（二）简单的路由实验
mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 在网上找了 好几个代码都是不能直接复现成功,这里把自己实现成功的代码给大家演示一下. 实验的 ...
- Python学习笔记—自动化部署【新手必学】
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:唯恋殊雨 目录 pexpect fabric pexpect P ...
- IP地址的配置
1.右击 网上邻居 → 属性 2.右击 本地连接 → 属性 3.选择Internet协议(TCP/IP) → 属性 配置如下, 默认网关始终是网段的第一个地址 4.打开cmd → 输入 ipconfi ...
- 1篇文章搞清楚8种JVM内存溢出（OOM）的原因和解决方法
前言 撸Java的同学,多多少少会碰到内存溢出(OOM)的场景,但造成OOM的原因却是多种多样. 堆溢出 这种场景最为常见,报错信息: java.lang.OutOfMemoryError: Java ...
- PyTorch-网络的创建，预训练模型的加载
本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...