css基础-文字排版

最新推荐文章于 2022-09-13 09:39:31 发布

叶炀

最新推荐文章于 2022-09-13 09:39:31 发布

阅读量570

点赞数

分类专栏：学习记录-html/css 文章标签： css 字体

本文链接：https://blog.csdn.net/yeyang123_fy/article/details/41874435

版权

学习记录-html/css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、字体

body{font-family:"宋体";}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
body{font-family:"Microsoft Yahei";}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

</body>
</html>

2、文字颜色、大小

body{font-size:12px;color:#666;}

3、粗体

p span{font-weight:bold;}

4、斜体

p a{font-style:italic;}

5、下划线

p a{text-decoration:underline;}

6、删除线

.oldPrice{text-decoration:line-through;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>删除样式</title>
<style type="text/css">
.oldPrice{text-decoration:line-through;}
</style>
</head>
<body>
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 
</body>
</html>

7、缩进

p{text-indent:2em;}   /*2em为文字两倍大小*/

8、行间距

p{line-height:1.5em;}

9、字间距、字母间距

h1{
    letter-spacing:50px;
}

h1{
    word-spacing:50px;   /*设置英文间距*/
}

10、块状居中对齐（也可居左或居右）

h1{
    text-align:center;
}

叶炀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录