1.2 CSS字体属性、文本属性与引入方式

最新推荐文章于 2022-12-08 20:28:51 发布

Sweet_pin

最新推荐文章于 2022-12-08 20:28:51 发布

阅读量291

点赞数 2

分类专栏：前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_42874319/article/details/115680776

版权

前端学习笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

文章目录

3. CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）*

3.1 字体系列

CSS使用 font-family 属性定义文本的字体系列

p { 
    font-family:"微软雅黑";
}
div {
    font-family: Arial, "Microsoft Yahei", "微软雅黑"; <!-- 各个字体之间英文逗号分隔-->
}

尽量使用系统默认自带字体，最常见的字体：body{font-family: ‘Microsoft Yahei’, tahoma, arial, ‘Horagino Sans GB’;}

3.2 字体大小

CSS使用 font-size属性定义字体大小

p {
    font-size: 20px;
}

px(像素)大小是我们网页的最常用的单位，谷歌浏览器默认文字大小为16px
不同浏览器可能默认字体大小不一致，所以尽量给明确的大小，不要使用默认值
可以给body指定整个页面文字的大小，但是标题标签比较特殊，需要单独指定文字大小

3.3 字体粗细

CSS使用 font-weight 属性定设置字体粗细

.bold {
    /* font-weight: bold; */  		/* normal(正常，400)，bold（加粗,700） */
    font-weight: 700;              /* 实际开发中，提倡使用数字表示加粗或变细（100-900），注意不跟单位！！ */
}
h2 {
    /*font-weight: normal;*/       
    font-weight: 400;         /* 标题一般需要单独指定，而不使用body */
}

3.4 文字样式

CSS使用 font-style 属性设置文本的风格

p {
    font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

注意：平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体

3.5 字体复合属性

复合属性可以把以上文字样式综合来写，这样可以更节约代码

body {
	/*font: font-style font-weight font-size/line-height font-family;   各个属性空格隔开，不能够调换顺序（倾斜。加粗，大小，字体）*/
    font: italic 700 16px 'Microsoft yahei';
}

注意：不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用

4. CSS文本属性

CSS Text (文本) 属性可定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

color属性用于定于文本的颜色

div {
    color: red;
}

颜色表示	属性值
预定义的颜色值	red、green、blue、pink。。。
十六进制（开发中最常用）	#FF0000、#FF6600、#29D794
RGB代码	rgb(255, 0, 0)或 rgb(100%, 0%, 0%)

4.2 对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {
	text-align: center;    /*本质是让盒子里的文字水平居中对齐 */
    text-align: right;
    text-align: left;   /*左对齐，默认值*/
}

4.3 装饰文本

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline;
}
a {
    text-decoration: none;  /*常用来取消链接a自带的下划线*/
}

属性值	描述
none	默认，没有装饰线（最常用）
underline	下划线，链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（几乎不用）

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
    text-indent: 10px;
}

通过设置该属性，所有元素的第一行都会缩进一个给定的长度，甚至该长度可以为负值

p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）的一个文字的大小，如果当前元素没有设置大小，就会按照父元素的一个文字大小

4.5 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
    line-height: 26px; /*字体默认16px，则上下间距各为5px*/
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkZO9RBk-1618323117595)(C:\Users\lp\AppData\Roaming\Typora\typora-user-images\image-20210413214026899.png)]$

5. CSS引入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

5.1 内部样式表

内部样式表是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中

<style>
    div {
        color: red;
    }
</style>

<style>标签理论上可以放到html文档中任意位置，但一般都会放到文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有完全实现结构和样式完全分离，通常练习时比较常用

5.2 行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式

<div style="color:red;"> 123 </div>

style其实是标签的属性，在双引号中间设置样式，不推荐大量使用

5.3 外部样式表

样式表单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用，实际开发中最常用，适合样式比较多的情况

引入外部样式表分为两步：

新建一个后缀名为.css的CSS文件，把所有CSS代码放到此文件中
在html页面中，使用<link>标签引入这个文件
```
<link rel="stylesheet" href="css文件路径">
```

5.4 CSS样式总结

CSS文件引入到HTML文件中使用，实际开发中最常用，适合样式比较多的情况

引入外部样式表分为两步：

新建一个后缀名为.css的CSS文件，把所有CSS代码放到此文件中
在html页面中，使用<link>标签引入这个文件
```
<link rel="stylesheet" href="css文件路径">
```

5.4 CSS样式总结

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nachrhm9-1618323117597)(C:\Users\lp\AppData\Roaming\Typora\typora-user-images\image-20210413220857225.png)]$

Sweet_pin

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
1.2 CSS字体属性、文本属性与引入方式

3. CSS字体属性CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）*3.1 字体系列CSS使用 font-family 属性定义文本的字体系列p { font-family:"微软雅黑";}div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; }尽量使用系统默认自带字体，最常见的字体：body{font-family: ‘Microso
复制链接

扫一扫