css文本样式

最新推荐文章于 2024-07-18 20:18:47 发布

不等风不等雨

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量100

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/m0_47752112/article/details/112756995

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.字符间距letter-spacing属性

基本语法

letter-spacing：normal |  长度单位

语法说明
word-spacing属性主要针对英文单词。letter-spacing属性对中文、英文字符串均起作用。

2.行距line-height属性

基本语法

line-height：normal  |  百分比或数字

3.首行缩进text-indent属性

基本语法

text-indent：长度单位	|百分比单位

例如：text-indent：2em;表示首行缩进两个字符。

4.字符装饰text-decoration属性

该属性主要是用来完成文字加上划线、下划线、删除线等效果。

基本语法

text-decoration：none |	underline	|overline	|line-through

5.英文大小写转换text-transform属性

基本语法

text-transform：capitalize	|upercase	|lowercase	|none

语法说明
capitalize将没一个单词的第一个字母转换成大写，其余不转换。
upercase转换成大写。
lowercase转换成小写。

6.水平对齐text-align属性

基本语法

text-align：left	|right	|center	|justify

语法说明
justify表示两端对齐。

7.垂直对齐vertical-align属性

vertical-align属性设置垂直对齐方式。

基本语法

vertical-align：top	|middle	|bottom	|text-top	|text-bottom

语法说明
top把元素的顶端与行中最高元素的顶端对齐。
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低元素的顶端对齐。
text-top把元素的顶端与父元素字体的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
为了更好的理解，简单的实例如下：

css部分代码：

<head>
<style type="text/css">
     #img1{vertical-align:text-top;}
     #img2{vertical-align: middle;}
     #img3{vertical-align: text-bottom;}
     #div1{text-align: left;}
     #div2{text-align: center;}
     #div3{text-align: right;}
 </style>
 </head>

HTML部分代码：

<body>
    <div id="div1">
 水平居左，图像居于顶部，这是一幅<img id="img1" src="images\product_04.jpg" width="100" height="50">位于段落中的图像
    </div>   
 <br>
    <div id="div2">
 水平居中，图像居于顶部，这是一幅<img id="img2" src="images\product_04.jpg" width="100" height="50">位于段落中的图像
    </div>
 <br>
    <div id="div3">
 水平居右，图像居于顶部，这是一幅<img id="img3" src="images\product_04.jpg" width="100" height="50">位于段落中的图像
    </div>
 <br>
</body>