css基础-3-文本样式

最新推荐文章于 2022-11-21 21:46:56 发布

Neptuneyut

最新推荐文章于 2022-11-21 21:46:56 发布

阅读量149

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/qq_42491125/article/details/106250725

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

字体
文本

字体

字体作为网页最常用元素，可以使用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>

在这里插入图片描述

Neptuneyut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础-3-文本样式

文章目录字体文本字体字体作为网页最常用元素，可以使用font设置字体大小、粗细、类型等等，总结常用样式设置如下：属性设置类型注意font-size字体大小单位常用pxfont-family字体族字体风格视开发需求而定font-weight字体粗细normal/400正常，bold/700加粗，数字没有单位font-style字体样式normal正常，italic倾斜font字体符合属性有顺序；font-size和font-family必
复制链接

扫一扫