CSS Text(文本)
2019-04-26 本文已影响0人
maskerII
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Text(文本)</title>
<style>
body{color: red;}
h1{color: yellow; text-align: center;text-decoration: overline}
h2{text-decoration: line-through;}
h3{text-decoration: underline;}
p.ex{color: blue;}
p.date{text-align: right;}
p.main{text-align: justify;}
p.indent{text-indent: 50px;}
a{text-decoration: none;}
p.letterspacing1{letter-spacing: 2px;}
p.letterspacing2{letter-spacing: -3px;}
p.lineh1{line-height: 70%;}
p.lineh2{line-height: 200%;}
p.ex1{direction: rtl;}
p.wordspacing1{word-spacing: 30px;}
p.whitespace1{white-space: nowrap;}
h4.textshadow1{text-shadow: 2px 2px #000000;}
img.top1{vertical-align: text-top;}
img.bottom1{vertical-align: text-bottom;}
</style>
</head>
<body>
<h1>CSS color 实例</h1>
<p>这是一个普通的段落。请注意，本文是红色的。页面中定义了默认的文本颜色选择器</p>
<p class="ex">这是个类为‘ex’的段落。这个文本是蓝色的</p>
<h1>CSS text-align 实例</h1>
<p class="date">2019年4月16号</p>
<p class="main">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，
我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，
但是，这也不可能。当我现在躺在床上，行将就木时，
我突然意识到：如果一开始我仅仅去改变我自己，
然后，我可能改变我的家庭；在家人的帮助和鼓励下，
我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</p>
<p><b>注意：</b>重置浏览器窗口大小查看 "justify" 是如何工作的</p>
<h1>CSS 文本修饰</h1>
<p>链接到：<a href="http://www.baidu.com">百度</a></p>
<h2>文本修饰1</h2>
<h3>文本修饰2</h3>
<h1>CSS 文本缩进</h1>
<p class="indent">文本缩进</p>
<h1>Demo1 字符间的空间</h1>
<p class="letterspacing1">This is heading 1</p>
<p class="letterspacing2">This is heading 2</p>
<h1>Demo2 行间距</h1>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>
<p class="lineh1">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>
<p class="lineh2">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>
<h1>Demo3 元素的文本方向</h1>
<p>默认书写方向是从左到右</p>
<p class="ex1">这段文本的书写方向是从右到左</p>
<h1>Demo4 增加单词之间的空白空间</h1>
<p class="wordspacing1">This is some text, This is some text</p>
<h1>Demo5 在元素内禁用文字环绕</h1>
<p class="whitespace1">
在元素内禁止文字环绕，在元素内禁止文字环绕，
在元素内禁止文字环绕，在元素内禁止文字环绕，
在元素内禁止文字环绕，在元素内禁止文字环绕，
在元素内禁止文字环绕，在元素内禁止文字环绕。</p>
<h1>Demo6 垂直对齐图像</h1>
<p>一个<img src="http://www.runoob.com/images/logo.png" alt="runoob" width="336" height="69">默认对齐样式</p>
<p>另一个<img class="top1" src="http://www.runoob.com/images/logo.png" alt="runoob" width="336" height="69">top对齐样式</p>
<p>还有一个<img class="bottom1" src="http://www.runoob.com/images/logo.png" alt="runoob" width="336" height="69">bottom对齐样式</p>
<h1>Demo7 文本阴影</h1>
<h4 class="textshadow1">文本阴影效果</h4>
<p><b>注意：</b> Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性</p>
</body>
</html>
<!--
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
实例
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
-->
<!--
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
实例
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
-->
<!--
本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
实例
a {text-decoration:none;}
也可以这样装饰文字：
实例
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
-->
<!--
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
实例
p {text-indent:50px;}
-->
<!--
所有CSS文本属性。
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
-->
<!--
letter-spacing 与 word-spacing：
h1{
letter-spacing:30px;
}
...
<h1>letter spacing</h1>
letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。
如果想设置英文单词之间的间距，可以使用 word-spacing 来实现。
如下代码：
h1{
word-spacing:30px;
}
...
<h1>word spacing</h1>
汉字的间隔调节也是用 letter-spacing 来实现的。
因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。
-->
