您的位置：首页 > Web前端 > CSS

css关于文本的重要属性

2015-10-12 17:45 731 查看
<!DOCTYPE html>

<html lang="zh-cn">

<html>

<head>

<meta charset="gbk">

<title>css不熟悉的属性测试</title>

<style type="text/css">

ul li{list-style:none;}

.a1{text-align:center;}

.a2{text-align:right;}

.a3{text-align:justify;} /*左右对齐*/

.b1{text-decoration:overline;}

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

.b3{text-decoration:underline;}

.c1{text-transform:uppercase;}

.c2{text-transform:lowercase;}

.c3{text-transform:capitalize;}/*首字母大写*/

.d1{text-indent:100px;} /*对指定文本第一行进行缩进*/

.e1{direction:ltr;} /*文本方向从左到右*/

.e2{direction:rtl;} /*文本方向从右到左*/

.e3{direction:inherit;}/*规定应该从父元素继承 direction 属性的值*/

.f1{letter-spacing:normal;}

.f2{letter-spacing:5px;}

.f3{letter-spacing:inherit;}/*从父元素继承间距属性*/

.g1{text-shadow:20px 20px 10px ##fff000;font-size:18px;} /*参数1、2水平和垂直阴影的位置，模糊距离和阴影颜色*/

.h1{vertical-align:text-top;}

.h2{vertical-align:middle;}

.h3{vertical-align:text-bottom;}

.i1{word-spacing:normal;}

.i2{word-spacing:10px;}

.i3{word-spacing:inherit;}/*从父元素继承间距属性*/

</style>

</head>

<body>

<h3>文本</h3>

<ul>

<li>1、文本对齐</li>

<li>

<ul class="">

<li class="a1">text-align</li>

<li class="a2">text-align</li>

<li class="a3">text-align</li>

</ul>

</li>

<li>2、文本修饰属性</li>

<li>

<ul class="">

<li class="b1">text-decoraction文本修饰属性</li>

<li class="b2">text-decoraction</li>

<li class="b3">text-decoraction</li>

<li style="text-decoration:none;">text-decoraction</li>

</ul>

</li>

<li>3、文本转换</li>

<li>

<ul class="">

<li class="c1">text-transform</li>

<li class="c2">text-transform</li>

<li class="c3">text-transform</li>

</ul>

</li>

<li>4、文本缩进</li>

<li>

<ul class="">

<li class="d1">text-indent</li>

</ul>

</li>

<li>5、文本方向</li>

<li>

<ul class="">

<li class="e1">direction</li>

<li class="e2">direction</li>

<li class="e3">direction</li>

</ul>

</li>

<li>6、设置字符间距</li>

<li>

<ul class="">

<li class="f1">letter-spacing</li>

<li class="f2">letter-spacing</li>

<li class="f3">letter-spacing</li>

</ul>

</li>

<li>7、设置文本阴影</li>

<li>

<ul class="">

<li class="g1">text-shadow（h5不再支持）</li>

</ul>

</li>

<li>8、垂直对齐方式</li>

<li>

<ul>

<li class="h1">vertical-align(h5不支持)</li>

<li class="h2">vertical-align</li>

<li class="h3">vertical-align</li>

</ul>

</li>

<li>9、设置字间距</li>

<li>

<ul class="">

<li class="i1">word-spacing haha</li>

<li class="i2">word-spacing haha</li>

<li class="i3">word-spacing haha</li>

</ul>

</li>

</ul>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航