CSS文本样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wangxin1029/article/details/103016022

单位

em 相对于 父元素
rem 相对于页面根元素，及html元素

文本标签

	<p>段落标签 块级</p>
    <span>正常文本标签 行内</span>
    <b>加粗 是bold的简写</b>
    <i>斜体</i>
    25<sup>2</sup>
    25<sub>2</sub>
    <u>下划线</u>

效果图：
分别对应以上文本标签

字体

添加到CSS样式里面

font-size ——> 字号大小（值：px，em，rem）
font-weight ——> 字体粗细（值：bolder【加粗】，100-1500【范围】）
font-style ——> 字体风格（值： normal【默认】，italic【斜体】）
font-family ——> 字体（值：各种字体【如：微软雅黑】）
text-shadow ——> 字体阴影（左右上下清晰度颜色【5px 3px 2px red】）

<style>
    p{
        font-size: 25px;
        font-weight: bolder;
        font-style: italic;
        font-family: '微软雅黑';
    }
</style>
<body>
    <p>改变字体的样式</p>
</body>

效果图：
改字体的样式

补充：
font-family的一些值：
1、网页字体样式华文黑体：STHeiti
2、网页字体样式华文楷体：STKaiti
3、网页字体样式华文宋体：STSong
4、网页字体样式华文仿宋：STFangsong
5、网页字体样式黑体：SimHei
6、网页字体样式宋体：SimSun
7、网页字体样式新宋体：NSimSun
8、网页字体样式仿宋：FangSong
9、网页字体样式楷体：KaiTi
10、网页字体样式仿宋_GB2312：FangSong_GB2312
11、网页字体样式楷体_GB2312：KaiTi_GB2312
12、网页字体样式微软正黑体：Microsoft JhengHei
13、网页字体样式微软雅黑体：Microsoft YaHei
14、网页字体样式隶书：LiSu
15、网页字体样式幼圆：YouYuan
16、网页字体样式华文细黑：STXihei
17、网页字体样式华文楷体：STKaiti
18、网页字体样式华文宋体：STSong
19、网页字体样式华文中宋：STZhongsong
20、网页字体样式华文仿宋：STFangsong
21、网页字体样式方正舒体：FZShuTi
22、网页字体样式方正姚体：FZYaoti
23、网页字体样式华文彩云：STCaiyun
24、网页字体样式华文琥珀：STHupo
25、网页字体样式华文隶书：STLiti
26、网页字体样式华文行楷：STXingkai
27、网页字体样式华文新魏：STXinwei

文本

在css样式中添加，所给值为一般常用值，并非所有

line-height ——> 行间距（值： XXpx；一般与宽同值为垂直居中）
text-align ——> 水平对齐（值： left，center，right)
word-spacing ——> 字间距（值： XXpx）
text-indent ——> 首行缩进（值： 2em）
letter-spacing ——> 字母缩进（值： 1px）

<style>
	/* 给他一个盒子，以限定大小 */
    div{
        width: 350px;
        height: 250px;
        border: 1px solid red;
    }
    p{
        line-height: 250px;
        text-align: center;
        word-spacing: 5px;
        text-indent: 2em;
        letter-spacing: 3px;
    }
</style>
<body>
    <div>    
        <p>我是文本样式内容,wangxin</p>
    </div>   
</body>

效果图：
文本样式

文本装饰

text-decoration 文本装饰

属性值

none
underline 下划线
overline 上划线
line-through 贯穿线

<style>
    .p1{
        text-decoration: none;
    }
    .p2{
        text-decoration: underline;
    }
    .p3{
        text-decoration: overline;
    }
    .p4{
        text-decoration: line-through;
    }
</style>
<body>
    <p class="p1">我是文本装饰</p>
    <p class="p2">我是文本装饰</p>
    <p class="p3">我是文本装饰</p>
    <p class="p4">我是文本装饰</p>
</body>

效果图：
文本装饰

文本方向

direction 设置文本的方向

属性值

ltr 从左至右
rtl 从右至左

<style>
    .p1{
        direction: ltr;
    }
    .p2{
        direction: rtl;
    }
</style>
<body>
      <p class="p1">我是文本方向，从左至右</p>
      <p class="p2">我是文本方向，从右至左</p>
</body>