CSS 文本格式化

最新推荐文章于 2023-01-24 15:28:22 发布

Python小子

最新推荐文章于 2023-01-24 15:28:22 发布

阅读量475

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88779377

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的文本格式化

1、字体

1 指定字体
- 属性：font-family

取值	说明
Microsoft yahei	微软雅黑
simhei	黑体
simsun	宋体

例如： font-family：“Microsoft yahei”，“Arial”，“helvetica”（从第一个到最后一个逐一匹配，如果都没有匹配上，则使用计算机默认字体）

2 字体大小
- 属性：font-size
- 取值：以 px 为单位的数值
3 字体加粗
- 属性：font-weight
- 取值：normal（正常，无加粗）

取值	说明
normal	无加粗
bold	加粗
数字	无单位，400相当于normal的效果，900相当于bold的效果

2、文本

1、文本颜色
- 属性：color
- 取值：合法的颜色值
2、文本的排列方式
- 属性：text-align

取值	说明
left	控制文本内容的水平左对齐
center	控制文本内容的水平居中对齐
right	控制文本内容的水平右对齐
justify	控制文本内容的水平两端左对齐（多行文本）

3、文字修饰
- 属性：text-decoration
- 作用：指定某元素中文字的线条修饰效果

取值	说明
none	无任何线条修饰
underline	下划线
overline	上划线
line-through	删除线

4、行高
- 属性：line-height
- 作用：指定一行文本数据所占的高度
- 特点：如果行高高于文本高度，那么文本在行高内垂直居中显示
- 取值：以px为单位的数值或无单位的数字（当前文字大小的倍数，及行间距）
5、首行文本缩进
- 属性：text-indent
- 取值：以px为单位的数值（表示缩进距离）
6、文字阴影
- 属性：text-shadow： 0 0 1px red

取值	说明
h-shadow	水平偏移距离，取值为正往右偏移，反之，做偏移（必须有）
v-shadow	垂直偏移距离，取值为正往下偏移，反之，做偏移（必须有）
blur	模糊距离，数值越大，模糊效果越强烈
color	阴影的颜色

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1,#d2{
            width: 400px;
            height: 50px;
            border: 2px solid #00cc11;
            margin: 10px 0;
            text-align:center;  /* 水平居中 */
        }
        #d1{
            font-size: 36px;
            color:orangered;
        }
        #d2{
            line-height: 50px;
            text-decoration:underline;
            text-shadow:0 0 2px grey;  /* 文字阴影 */
        }
    </style>
</head>
<body>
    <div id="d1">测试文本1</div>
    <div id="d2">测试文本2</div>
</body>

Python小子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS 文本格式化

CSS 的文本格式化1、字体    1.1 指定字体属性：font-family取值说明Microsoft yahei微软雅黑simhei黑体simsun宋体例如： font-family：“Microsoft yahei”，“Arial”，“helvetica”（从第一个到最后一个逐一匹配，如果都没有匹配...
复制链接

扫一扫