CSS：（3）字体，文本属性，引入方式

最新推荐文章于 2024-07-19 14:29:49 发布

urcecilie

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量262

点赞数

文章标签： css

本文链接：https://blog.csdn.net/urcecilie/article/details/115268252

版权

CSS字体，文本属性

CSS字体属性
CSS文本属性
CSS引入方式
Chorme调试工具

CSS字体属性

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

1.字体属性

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

p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft YaHei","微软雅黑";}

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

2.字体大小

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

p {
     font-size:20px;
  }

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

3.字体粗细

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

p {
        font-weight:blod;
  }

属性值：

normal——默认值（不加粗）
blod——粗体（加粗的）
100-900——400相当于normal，700相当于blod，这个数字后不跟单位

4.文字样式

使用font-style属性设置文本的风格（我们一般很少给文字加斜体，反而给斜体标签<em> <i>变成不倾斜的字体）

p  {
      font-style:normal;
    }

属性值

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

5.字体复合属性

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

body {
          font:font-style font-weight font-size line-height font-family;
      }

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

6.字体属性总结

font-size——字号——通常用的单位是px（像素），一定要跟上单位
font-family——字体——实际工作时按照团队约定来写字体
font-weight——字体粗细——加粗（700或者blod）、不加粗（normal或者400），记住数字不要加单位
font-style——字体样式——倾斜时italic、不倾斜是normal，工作中最常用normal
font——字体连写——字体连写是有顺序的，不能随意切换位置；其中字号和字体必须同时出现

CSS文本属性

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

1.文本颜色

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

div {
         color:red;
     }

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

2.对齐文本

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

div {
       text-align:center;
    }

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

3.装饰文本

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

div {
       text-decoration:underline;
    }

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

4.文本缩进

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

div {
       text-indent:10px;
       }

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

p {
     text-indent:2em;
     }

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

5.行间距

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

p {
     line-height:26px;
     }

说明：行间距由三个部分组成

CSS引入方式

1.内部样式表

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

<style>
   div {
           color:red;
           font-size:12px;
   }
   </style>

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

2.行内样式表

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

<div style = "color:red.font-size:12px;">你好</div>

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

3.外部样式表

外部样式表也被称为外链式，链接式样式表（最常用）。适用于样式比较多的情况，核心是：样式单独写到CSS样式中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：

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

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

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

Chorme调试工具

使用调试工具

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

urcecilie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：（3）字体，文本属性，引入方式

CSS字体，文本属性CSS字体属性1.字体属性2.字体大小3.字体粗细4.文字样式5.字体复合属性6.字体属性总结CSS文本属性1.文本颜色2.对齐文本3.装饰文本4.文本缩进5.行间距CSS引入方式1.内部样式表2.行内样式表3.外部样式表Chorme调试工具CSS字体属性CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。1.字体属性CSS使用font-family属性定义文本的字体属性。p { font-family:"微软雅黑";}div {font-fam
复制链接

扫一扫