文章目录

前言
一、字体样式
- 大小
- 粗细
- 是否倾斜
- 字体类型
- 拓展：层叠性
- 字体font相关属性的连写
二、文本样式
- 文本缩进
- 文本水平对齐方式
- 文本修饰
- 行高

前言

字体和文本样式

一、字体样式

大小

属性名：font-size
取值：数字+px
注意点：谷歌浏览器默认文字大小是16px；单位需要设置，否则无效
实践：

这样是浏览器默认的文字大小

注意写单位！！！

粗细

属性名：font-weight
取值：
通常使用纯数字的方法
注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无变化；实际开发中以：正常、加粗两种取值使用最多。
实践：

是否倾斜

属性名：font-style
取值：正常（normal）；倾斜（italic）
实践：
加入css后

字体类型

属性名：font-family
取值：具体字体1，具体字体2，具体字体3…（逗号用英文的逗号）
注意点：
1.可以写具体字体（微软雅黑、黑体、楷体、宋体等）；也可以写字体系列（sans-serif无衬线字体、serif衬线字体等）
2.因为很多电脑并没有下载所有字体，所有在搜索完第一个字体后，如果没有就用下一种字体，所以最好再最后加一个字体系列用于保底
实践：
现在是安卓系统默认的字体，微软雅黑。把他变为宋体

在电脑中，更多使用的也是微软雅黑，因为微软雅黑看起来更规整。
网络中常用的字体：

拓展：层叠性

问题：一个标签设置相同样式，会显示哪一个
结果：如果设置相同属性，写在最下面的样式会生效
小贴士：因为css是层叠样式表，就是叠加的意思，样式可以一层一层的层叠覆盖
实践：

字体font相关属性的连写

属性名：font（复合属性）
（还会有这种复合属性的方式出现的）
取值：font：style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值，后两个不可以省略
注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
（具体原因就是层叠性）
实践：

二、文本样式

文本缩进

属性名：text-indent
取值：1.数字+px
2.数字+em（更推荐使用这个因为1em=当前标签的font-size的大小）
实践：
1.px版本

但通常都是首行缩进两个字，那么两个字是多少px呢，因为网页默认，一个字是16px，所以用32px

2.em版本
上面的那个太繁琐了，因为你要设置缩进还需要知道字体大小，那么用em就更方便一些

文本水平对齐方式

属性名：text-align
取值：
实践：

只需要记住居中和居右的写法即可，因为默认的就是居左
水平居中方法总结 text-align：center
能让哪些元素水平居中
1.文本
2.span标签（无语义的布局标签）、a标签（超链接）
3.input标签（表单）、img标签（图片）
关于图片的居中实践：注意其标签选择器的标签名要写哪个
注意点：如果需要让想要的元素居中，该标签是要给其最外面的标签（父元素）设置，比如图片最外面的标签是body

文本修饰

属性名：text-decoration
取值：
注意点：开发中会使none来清除超链接的下划线（a标签）
实践：

在网页中更常见的是下划线和无修饰线

行高

作用：控制一行的上下行间距
属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）
行高的范围是什么：
应用：1、让单行文本垂直居中可以设置line-height：文字父元素高度
2.网页精准布局时，会设置

line-height：1

可以取消上下行间距

行高可以和font连写的注意点：

font：style weight size/line-height family；

实践：

对比：

CSS基础-03-字体和文本样式相关推荐

CSS基础之字体、文本的基础设置
CSS基础之字体.文本的基础设置一.font字体常用属性: 1.文字大小:font-size,单位px一定要加,默认16号. 2.文字粗细:font-weight,取值范围为100-900,属性取值 ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
CSS基础：基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式基础认知学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
css笔记一-CSS简介、基础选择器、字体和文本样式
一一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则写在哪里? css写 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
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 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式颜色 color rgb(颜色) R ...

CSS基础-03-字体和文本样式

文章目录

前言

一、字体样式

大小

粗细

是否倾斜

字体类型

拓展：层叠性

字体font相关属性的连写

二、文本样式

文本缩进

文本水平对齐方式

文本修饰

行高

CSS基础-03-字体和文本样式相关推荐

最新文章

热门文章