CSS Fonts(字体用于定义系列，大小，粗细，和文字样式（如斜体）
字体款式：
CSS使用font-family属性定义文本的字体系列。
举例：
<head>
<style>
p{//将p段落的字体设置为微软雅黑
font-family: "微软雅黑";
}
div{//将div中的文字设置为黑体
font-family: "黑体";
}
</style>
</head>
<body >
<p>你好Java</p>
<div>hello，C++</div>
<div>hello,java</div>
</body>
显示如下：
注意：
各种字体之间必须使用英文状态下的逗号隔开。
一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示，使用多个字体开始，当第一个字体没有下载时，使用第二个以此类推
最常见的几个字体：body[font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';]
字体大小：
CSS使用font-size属性定义字体大小。
举例：
<head>
<style>
p{
font-size:50px ;
}
</style>
</head>
<body >
<p>你好Java</p>
</body>
显示如下：
注意：
px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小一致，一般情况下，都需要设置一个值，而不使用默认值。
可以给body指定整个页面文字的大小
字体的粗细：
CSS使用font-weight来设置文字的粗细。
举例：
<head>
<style>
.bold{
font-weight: bold;
}
.number{
font-weight: 700px;
}
.normal{
font-weight: normal;
}
.number1{
font-weight: 400px;
}
</style>
</head>
<body >
<h1 class="normal">你好Python</h1>
<h1 class="number1">你好C++</h1>
<p class="number">你好web</p>
<p class="bold">你好Java</p>
</body>
显示如下：
**
注意
文字的加粗和默认值可以通过normal/400[默认]或者bold/700[加粗],注意这两种方式都是可以的，且400/700后面无单位
文字样式：
CSS使用font-style属性设置文本的风格。
normal：默认值—浏览器会显示标准的字体样式 font-style：normal
italic:浏览器会显示斜体的字体样式
举例：
<head>
<style>
p{
font-style: italic;
}
em{//em为斜体标签，常见的斜体标签有em/i
font-style: normal;
}
</style>
</head>
<body >
<p>你好web</p>
<em>你好Java</em>
</body>
显示如下：
注：平时很少将文字设置为倾斜字体，通常都是将倾斜的字体设置为正常字体
字体复合属性：
方式1设置字体的属性：
p{
font-style:italic;
font-family: "微软雅黑";
font-size: 20px;
font-weight: 700;
}
方式2设置字体的属性：
p{
font: font-style font-weight font-size font-family ;
font: italic 700 20px "微软雅黑";
}
以上所述的这两种方式都可以实现对字体设置同样的样式，但是在代码量上，第二种方式明显要简洁一些，而第二种方式就是我们要介绍的字体复合属性：
语法规范：
使用font的复合属性时，必须根据下面语法规范中的顺序进行书写，不能更改顺序，并且各个属性之间需要使用空格隔开
body{
font: font-style font-weight font-size font-family ;
}
不需要设置的属性可以省略（即为系统给定的默认值），但是必须保留font-size和font-family属性，否则font的复合属性是无法生效的
字体属性总结：
文本属性：
CSS Text（文本）属性可以定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
文本颜色：
color属性用于定义文本的颜色
举例：
设置p标签中的文本颜色为绿色：
p{
color: green;
}
对齐文本：
text-align属性用于设置元素内文本内容的水平对齐方式
举例：
将div标记中的文字居中对齐：
div{
text-align:center;
}
text-align："center";//居中对齐
text-align:"left";//左对齐
text-align:"right";//右对齐
通常情况下，如果我们为设置文本的对齐方式，系统会默认的左对齐
装饰文本：
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线
div{
text-decoration:underline;//添加下划线
text-decoration:overline;//添加上划线
text-decoration:line-through;//添加删除线
text-decoration:none;//默认，没有装饰线
}
此外由于我们之前所学的超链接是自带下划线的，因此我们常常使用text-decoration:none;在<a>标签中用来去除超链接自带的下划线
文本缩进：
text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进.
方式1：
举例：
将div中的文字首行缩进10px，缩进的数值也可以为负值
div{
text-indent：10px;
}
显示效果如下：
通过显示效果我们会发现，它缩进的举例并不是我们常用的两个字符，因此，通过具体的数值来设置缩进的方法，我们一般情况下不使用。
方式2：
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
举例：
将div中的文字首行缩进当前文字大小的两个字符
div{
text-indent：2em;
}
显示如下：
行间距：
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。
p{
line-height:20px;
}
设置行间距为10px:
设置行间距为100px:
CSS文本属性总结：
CSS的三种样式表：
按照CSS样式书写的位置（或者引入的方式）
CSS样式表可以分为三大类：1：行内样式（行内式）2：内部样式表（嵌入式）3：外部样式表（链接式）
内部样式表：
内部样式表（内嵌样式表）：通过此种方式，可以方便控制当前整个页面中元素样式设置
举例：
<head>
<style type="text/css">
div{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>hello，world</div>
<div>hello,web</div>
</body>
<style>标签理论上可以放在html文档的任何地方，但一般会放在文档的<head>标签中，代码结构清晰，但是并没有实现代码和样式完全分离，使用内部样式表设定CSS，通常也被称为嵌入式引入。
行内样式表：
行内样式表（内嵌样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单的样式
<div style="color:red;font-size:12px">hello，world</div>
style其实就是标签的属性，在双引号中间，写法要符合CSS规范，可以控制当前的标签设置样式
但是由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以我们并不推荐这样大量使用，只有对当前元素添加简单样式的时候，可以考虑这种行内样式，它通常也被称为行内式引入
外部样式表：
实际开发中都是使用外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到html页面中使用。
引入外部样式表分为两步：
1：新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件。
2：在html页面中，使用<link>标签引入这个文件
举例：
课堂练习.html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>课堂练习</title>
<link rel="stylesheet" href="样式.css"/>
</head>
<body>
<div>hello,web</div>
</body>
样式.css:
div{
color: yellow;
font-family: "微软雅黑";
}
注意：.css文件书写完成之后一定要保存！！！否则样式将无法显示
使用外部样式表设定CSS，通常也被称为外链式或链接式引入
CSS引入方式总结：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/81419.html
