CSS文本样式

最新推荐文章于 2024-04-30 19:38:51 发布

风九儿

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量189

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_39301366/article/details/82466492

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

text-align属性
设置元素内文本的水平对齐方式
语法：text-align：left/right/center/justify分别是左对齐，右对齐，居中对齐，两端对齐
注：只对块级元素设置有效，如<p>,<div>,<body>等，text-align可以继承

vertical-align属性
设置元素内容的垂直对齐方式
语法：vertical-align：baseline/sub/super/top/text-top/middle/bottom/text-bottom/长度(px，可正可负表示上下移动)/百分比

基于文本基线上下移动
注：vertical-align对行内元素如<span>，和表格元素起作用

line-height,文字行高，可以是像素值、em、百分比，如line-height：400px 表示一行文字与上下空白共同占400像素
可以继承，不同浏览器有不同的默认行高
继承，继承的是计算值，而不是em或百分比的值

其他文本样式属性，
word-spacing 单位，px、em，设置元素内单词之间间距，正负都可以，单词的判断依据为是否有空格
letter-spacing 单位，px、em，设置元素内字母之间间距，正负都可以，作用于中文亦可生效
text-transform ：capitalize/uppercase/lowercase/none大小写转换，分别是首字母大写，大写，小写，不作处理
text-decoration：underline/overline/line-through/blink/none设置元素内文本的装饰，分别是下划线，上划线，贯穿线，闪烁效果，不做处理
可同时有以上几个不同的值，对块级元素和行内元素都生效，不能继承
应用：将链接的下滑线去掉，a{text-decoration：none;}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式应用</title>
    <style type="text/css">
        p{background-color: #ececec;height: 150px;text-align: center;line-height: 150px;font-family: "楷体";}
        .one{font-size:80px;color:#c9394a;font-weight: bold;}
        .two{font-size: 40px;color:gray;text-decoration: underline;vertical-align: 15px;letter-spacing: 5px;}
        .three{font-style: oblique;font-size: 80px;color:gray; }
    </style>
</head>
<body>
    <p><span class="one">慕课网</span>&nbsp;&nbsp;<span class="two">只学有用的</span><span class="three">!</span></p>
</body>
</html>

效果：

风九儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文本样式

text-align属性设置元素内文本的水平对齐方式语法：text-align：left/right/center/justify分别是左对齐，右对齐，居中对齐，两端对齐注：只对块级元素设置有效，如&lt;p&gt;,&lt;div&gt;,&lt;body&gt;等，text-align可以继承vertical-align属性设置元素内容的垂直对齐方式语法：vertical-ali...
复制链接

扫一扫

专栏目录