前端成长之路:CSS字体、文本属性和引入方式

server/2024/12/15 0:01:10/
htmledit_views">

本文主要介绍CSS的字体属性和文本属性,最后再介绍CSS在HTML中的引入方式。

CSS字体属性

CSS Fonts(字体)属性能用于定义字体系列属性,包括但不限于字体大小、粗细、字体样式等。

字体系列

在CSS中使用font-family属性定义文本的字体系列(如微软雅黑、宋体之类的):

如果Arial字体(Arial 是一种常见的无衬线字体,广泛应用于各种操作系统和浏览器中。)可用,那么段落标签中的字体系列就是font-family;如果不可用,那么将从左往右依次尝试这些字体。

注意事项:

  1. font-family中可以指定多种字体,会从左往右依次尝试,直到某种字体可用为止;但是各种字体之间必须使用英文逗号进行分隔!
  2. 一般情况下,假如有空格隔开的多个单词组成的字体,该字体需要加引号:如"Microsoft Yahei",由两个单词组成,所以说要加引号。
  3. 为了保证页面在各种浏览器中的兼容性,尽量使用系统自带的字体,非特殊情况不使用花里胡哨的字体。
  4. 一些常见的字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }。

字体大小

字体的大小对于页面的展示十分的重要,在CSS中通过font-size属性定义字体大小,最常用的设置字体大小的单位是px(像素):

 

通过页面中的展示可以明显看到字体大小被设置为了100px,说明通过font-size成功修改了字体的大小。对于字体大小有几点需要注意的:

  1. 像素是定义字体大小最常用的单位。
  2. 谷歌浏览器默认的字体大小为16px,但是不同浏览器默认的字体大小可能不一致,所以说要尽量设置一个明确的字体大小值,不要使用默认字体大小。
  3. 可以通过HTML中的body标签指定整个页面的文字大小(整体布局)。

字体粗细和文字样式

字体粗细

CSS中可以通过font-weight属性指定字体的粗细,normal是font-weight的默认属性值,代表不加粗;bold属性值是加粗。还可以通过不带任何单位的数字定义字体的粗细,数字可以是100-400的任何值,400就等同于normal,700等同于bold,在实际开发中更喜欢使用数字表示粗细。

文字样式

CSS中可以通过font-style属性设置文本风格,normal是font-style的默认属性值,代表无文本风格;通过设置italic属性值可以将字体变为斜体(这和em标签的作用类似),实际开发中其实很少给文字添加斜体,反而更多的将斜体标签改为不倾斜的字体:

 这样设置以后,em标签中的文字就不是斜体了,而是标准的字体样式:

 

字体复合属性

CSS中可以使用font属性来指定字体的复合属性(包括文本风格、字体粗细、字体大小、字体系列等,多个属性都可以在font属性中指定)。但是font属性使用起来必须要十分规范:

1. 使用font属性时,必须按照font-style -> font-weight -> font-size/line-height -> font-family的顺序指定属性值,不能更改顺序,并且各个属性之间通过空格进行分隔

2.不需要设置的属性可以省略,此时会取这些属性的默认值;但是font中必须保留font-size和font-family这两个属性,否则font属性不起作用。

 成功通过font属性设置了字体的复合属性。假如font中少了font-family:

 

那么font属性就不会生效。

CSS文本属性

CSS Text(文本)属性可以定义文本的属性,比如文本的颜色、文本对齐、文本装饰、缩进和行间距等,是页面显示的非常重要的属性。

文本颜色

通过color属性可以定义文本的颜色,定义颜色可以使用三种不同的方式,比如:直接使用预定义的颜色值,如red、green、black等(color: red),这些预定义的颜色使用方便,但是颜色过于单一; 还可以使用颜色对应的RGB代码(color: rgb(255,0,0)或color: rgb(100%,75%,30%)); 还可以使用颜色的十六进制表示法表示(color: #FF0000,#FF6600),rgb和十六进制表示颜色,色彩丰富,色域广阔,开发中最常用的是十六进制表示法。

 

文本对齐

在CSS中使用text-align属性设置元素内文本内容对齐的方式,left表示文本内容左对齐(这是默认值);right表示文本内容右对齐;center表示文本内容居中对齐(这是布局中常用的)。

通过text-align属性设置了段落中的文本居中显示:

 

文本装饰

通过text-decoration属性可以给文本内容添加装饰,比如文本的下划线、删除线、上划线等。none是默认的属性值,表示没有装饰线;uderline是下划线;overline是上划线(几乎不会使用);line-through是删除线(这个属性值也是不常用的)。text-decoration中最重要、常用的用法是:因为超链接中的文本自带下划线,可以通过设置<a>标签中的text-decoration属性(设置为none)删除其下划线。

 

可以通过text-decoration属性删除超链接文本中自带的下划线:因为文本装饰被设置为了none。

文本缩进

在日常生活中,文章中的每一段都是需要首行缩进的,一般缩进量为两个字符。在CSS中可以使用text-indent属性来指定文本的第一行缩进,这个属性一般是用来实现段落的首行缩进。 通过设置text-indent属性,元素的第一行可以缩进指定的长度(这个长度甚至可以是负值);长度的单位可以是像素,但是使用得更多的单位是em,em是一个相对单位,1个em就是当前元素所设置的font-size的大小(假如font-size设置为100px,那么一个em的大小就是100px),若当前元素没有设置大小,那么em就是其父元素的1个文字的大小。

通过text-indent设置段落的首行缩进:

 发现成功在每一段的首行缩进了两个字符,这符合人们的日常生活习惯。

行间距

可以通过line-height属性用于设置行间的距离,这也就是平时说的行高,可以控制文字行与行之间的距离,单位一般使用像素。

 

 明显发现行与行之间的距离变宽了很多,得益于对行高的设置。

CSS引入方式

按照CSS样式表书写的位置(或者说引入的方式),CSS样式表可以分为三类:

行内样式表(行内式)

行内样式表是在HTML元素标签内部的style属性中设定CSS样式,使用十分简单,但是也十分的局限,只适用于修改简单的样式:

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

这样在一行中就可以简单的为div标签设置CSS样式了,十分的简洁,但是十分的局限与不方便:行内样式表书写十分繁琐,并且没有实现结构和样式分离的思想(HTML专注于结构),而且行内样式表只对当前标签有效,不推荐大量使用; 但是要对一个元素添加简单样式时,可以少量使用。

内部样式表(嵌入式)

内部样式表,顾名思义,就是将CSS样式表写在HTML文件的内部,其实现方式就是将所有的CSS抽取出来,放在HTML中的style标签中:

 虽然style标签理论上可以放置HTML文档中的任何一个地方,但是一般会放在(开发规范)文档的<head>标签中。通过行内样式表,可以方便的控制当前整个页面中的元素样式设置,虽然看上去代码结构清晰,但是并没有实现结构和样式分离的思想(HTML专注于结构,CSS专注于样式)。

外部样式表(链接式)

大部分的实际开发都是使用外部样式表(最推荐使用): CSS样式单独写到.CSS文件中,之后把.CSS文件引入到HTML页面中使用。引入分两步:

  1. 新建一个后缀为.html" title=css>css的CSS样式文件,在这个CSS文件中编写CSS的代码。
  2. 在HTML页面中通过<link>标签引入这个CSS文件,实现外部样式表。

link标签的rel属性是定义当前文档(HTML)和被链接文档(CSS)之间的关系,想要外部引入CSS文件,此处需要指定为"stylesheet",表示被链接的文档是一个CSS样式表文件。

href属性是定义所连接的外部文档的URL,建议使用相对路径。

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


http://www.ppmy.cn/server/150216.html

相关文章

Qt多项目管理动态库使用(QMake)

要管理大型项目和对代码可以进行复用,可以在同一项目之中创建不同的模块&#xff0c;提供调用库的形式进行调用&#xff0c;实现各模块的分块编写和处理&#xff0c;下面介绍我自己写的一个demo&#xff0c;结合之前编写的一些组件实现。一共创建了两个项目&#xff0c;一个项目…

FPGA实现GTP光口数据回环传输,基于Aurora 8b/10b编解码架构,提供2套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案 3、工程详细设计方案工程设计原理框图用户数据发送模块基于GTP高速接口的数据回环传输架构GTP IP 简介GTP 基本结构GTP 发送和接收…

安装 PostgreSQL

1.安装 PostgreSQL sudo yum install -y postgresql postgresql-serverrootlocalhost ~]# systemctl status postgresql.service ● postgresql.service - PostgreSQL database serverLoaded: loaded (/usr/lib/systemd/system/postgresql.service; disabled; vendor preset:…

VB.net进行CAD二次开发(二)与cad交互

开发过程遇到了一个问题&#xff1a;自制窗口与控件与CAD的交互。 启动类&#xff0c;调用非模式窗口 Imports Autodesk.AutoCAD.Runtime Public Class Class1 //CAD启动界面 <CommandMethod("US")> Public Sub UiStart() Dim myfrom As Form1 New…

Java版企业电子招标采购系统源业码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…

kcat - Apache Kafka producer and consumer tool

docker run --rm --namekcat --networkhost k8smaster.qfusion.irds/irds/kcat:1.7.1 -b 10.10.x.x:2187 -X security.protocolSASL_PLAINTEXT -X sasl.mechanismSCRAM-SHA-512 -X sasl.usernamekafka-6c7c3c69-admin -X sasl.passwordxxx -t bpx -L-b 后面跟的是broker ip -s…

上位机与PLC交互常见问题

1.上位机给PLC设置了移动目标位后&#xff0c;马上发送开始移动信号。发现在收到移动完成信号后&#xff0c;再读取PLC当前轴坐标时&#xff0c;发现没有走到最新设置的坐标&#xff0c;当前停止的坐标是上一次设置的坐标。 问题分析&#xff1a;是上位机和PLC交互数据时数据传…

[Power BI 可视化问题系列]-新版power bi 矩阵如何这样显示?

又是美好的一天, 今天介绍power bi 中关于的矩阵的显示调整。 在矩阵的行列值中拖入信息的时候&#xff0c;power bi的最基础显示样式 会发现这种矩阵显示看上去会比较难看&#xff0c;那么如何让他看上去优化过并且相对好看一些呢&#xff1f; power bi 对于这个问题也在新版本…