字体

字体作为网页最常用元素，可以使用font设置字体大小、粗细、类型等等，总结常用样式设置如下：

属性	设置类型	注意
font-size	字体大小	单位常用`px`
font-family	字体族	字体风格视开发需求而定
font-weight	字体粗细	`normal/400`正常，`bold/700`加粗，数字没有单位
font-style	字体样式	`normal`正常，`italic`倾斜
font	字体符合属性	有顺序；`font-size`和`font-family`必须写,其他可缺省

字体族
- 可以用中文和英文名称，多个单词名称的需要加引号包裹：font-family: 宋体,'Microsoft Yahei';
- 多个名称之间以,隔开，浏览器会从前向后寻找是否有安装过的字体，若都没有则会使用默认字体
- 开发时常常为body设置常用字体，body { font-family: 'Microsoft Yahei', tahoma, Arial, 'Hiragino Sans GB';}
复合属性书写简洁，节约代码
- 顺序为font: font-style font-weight font-size/line-height font-family
- 各个属性以空格隔开，其中line-height表示行高，没有可以不写

文本

文本设置包括颜色、行间距、缩进等等，常用属性如下：

属性	设置内容	注意
color	颜色	三种设置方式：1.预定义颜色，如`color: red`;2.rgb,如`color: rgb(255,0,0)`;3.十六进制，如`color: #fff`,开发时常用十六进制，通过颜色选择器吸取颜色值
text-align	文本对齐方式	`center`居中对齐；`left`靠左对齐；`right`靠右对齐
text-indent	首行缩进	单位常用`em`表示相对当前字体大小，常用`text-indent: 2em`表示首行缩进2字符
text-decoration	文本修饰	`underline`下划线,`none`去掉下划线,`line-through`删除线
line-height	行间距	行间距由字体大小+上/下间距组成，更改行高本质上是修改上下间距，并且上/下间距一样

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>my dream</title><style>h3,p {font: normal 400 16px/30px 'Microsoft Yahei';color: aquamarine;text-align: center;}</style>
</head><body><h3>My dream</h3><p>作曲 : Andy Love <br>作词 : 王海涛/张靓颖 <br>疯狂的世界<br>迎着痛 把眼中 所有梦<br>都交给时间<br>想飞 就用心地去飞<br>谁不经历狼狈<br>我想我会 忽略失望的灰<br>拥抱遗憾的美<br>我的梦说别停留等待<br>就让光芒折射泪湿的瞳孔<br>映出心中最想拥有的彩虹<br>带我奔向那片有你的天空<br>因为你 是我的梦<br></p>
</body></html>

css基础-3-文本样式相关推荐

HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS的长度单位字体样式属性 font-size font-family font-weight font-style fon ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式颜色 color rgb(颜色) R ...
4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
【CSS】设置文本样式
大家好,我是翼同学! 目录 1️⃣前言 2️⃣文本样式
CSS 基础：文本和字体(4)思维导图
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
CSS基础之背景样式
目录前言: 一:颜色背景二:图片背景三:致我们前言: 当我们在网上浏览各种好看的页面时,网页的背景样式往往是吸引我们眼球的重要因素,有用颜色作为背景图的,也有用图片作背景图的.那么怎样利用CS ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...

css基础-3-文本样式

文章目录

字体

文本

css基础-3-文本样式相关推荐

最新文章

热门文章