<!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>
<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>
扫一扫
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
