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

neoxyf2005

已于 2023-12-16 13:10:32 修改

阅读量464

点赞数

文章标签： css 前端

于 2023-12-15 17:49:28 首次发布

本文链接：https://blog.csdn.net/neoxyf2005/article/details/135012228

版权

本文详细介绍了CSS中的字体系列、大小、粗细、样式、复合属性，以及文本颜色、对齐、装饰、缩进、行间距等基本属性。同时讲解了内联样式表、外部样式表的使用和Chrome调试工具的技巧，包括Emmet语法和代码格式化方法。

摘要由CSDN通过智能技术生成

CSS字体属性

3.1字体系列

CSS使用font-family属性定义文本的字体系列、大小、粗细和文字样式（如斜体）。

p { font-family："微软雅黑";)

div {font-family：Arial，"Microsoft Yahei","微软雅黑"；}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body{font-family：’Microsoft Yahei'，tahoma,arial,'Hiragino Sans GB';}

3.2字体大小

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

p {

font-size: 20px;

}

排序（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

3.3字体粗细

CSS 使用font-weight属性设置文本字体的粗细。

p {

font-weight： bold;

}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400等同于normal，而700等同于bold注意这个数字后面不跟单位

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗

3.4文字样式

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

p {

font-style: normal;

}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式font-style:normal;
italic	浏览器会显示谐体的字体样式

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

3.5字体复合属性

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

body {

font: font-style font-weight font-size/line-height font-famliy;

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空隔隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不去作用

3.6字体属性总结

CSS文本属性

4.1文本颜色

color属性用固定以文本的颜色。

div {

color： red；

}

表示表示	属性值
预定义的颜色值	red,green,blue ...
十六进制	#FF0000,3FF6600,#29D794
RGB代码	rgb(255,0,0)/rgb(100%,0%)

4.2对齐文本

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

div {

text-align： center；

}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

4.3装饰文本

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

div {

text-decoration： underline；

}

属性值	描述
none	默认，没有装饰线
underline	下划线。链接a自带下划线
overline	上划线*
line-through	删除线*

4.4文本缩进

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

div {

text-indent： 10px；

}

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

p {

text-indent： 2em；

}

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

4.5行间距

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

p {

line-height： 26px；

}

4.6文本属性总结

CSS引入方式

5.2内部样式表

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

<style>

div {

color: red;

font-size: 12px

}

</style>

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定CSS。通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.3行内样式表

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

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style其实就是标签的属性
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置模式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只能对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定CSS。通常也被称为行内式引入

5.4外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

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

新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。
在HTML页面中，使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

使用外部样式表设定css，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。

5.5CSS引入方式总结

Chrome 调试工具

Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和css样式。

2.使用调试工具。

Ctrl加滚轮可以放大开发者工具代码大小。
左边是HTML元素结构，右边是css样式。
右边css样式可以改动数值(左右箭头或者直接输入)和查看颜色。
Ctrl+0复原浏览器大小。
如果点击元素发现右侧没有样式引入，极有可能是类名或者样式引入错误。
如果有样式，但是样式前面有黄色感叹号，提示这是样式属性书写错误。

1.Emmet语法

生成标签，直接输入标签名，按tab键即可，比如div然后tap键,就可以生成<div></div>。
如果想要生成多个相同标签加上*就可以了,比如 div*3就可以快速生成三个div。
如果有父子级关系的标签可以用>比如ul>li就可以了
如果用兄弟关系的标签用+就可以了，比如div+p
如果生成带有类名或者ID名字的，直接写.demo或者#two键就可以了。
如果生成的div类名是有顺序的，可以用自增符号$。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div></div>
    <table></table>
   <!--div*10-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!--ul>li-->
    <ul>
        <li></li>
    </ul>
    <!--div+p-->
    <div></div>
    <p></p>
    <!--.demo-->
    <div class="div"></div>
     <!--#banner-->
    <div id="banner"></div>
    <!--p.one-->
    <p class="one"></p>
    <!--span.gray-->
    <span class="gray"></span>
    <!--ul>li#two-->
    <ul>
        <li id="two"></li>
    </ul>
   <!--.demo$*5-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!--div{987}-->
    <div>987</div>
</body>
</html>

1.3快速格式化代码

Vscode快速格式化代码：shift+alt+f

也可以设置当我们保存页面的时候自动格式：