您现在的位置:首页 >> 前端 >> 内容

CSS——文本格式

时间:2017/3/21 9:29:00 点击:

  核心提示:CSS文本格式文本颜色十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red文本的对齐方式text-align:left 把文本排列到左边...

CSS——文本格式

文本颜色

十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red

文本的对齐方式

text-align:

left 把文本排列到左边。默认值:由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。

文本修饰

none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。

文本转换

uppercase 所有大写 lowercase 所有小写 capitalize 首字母大写

文本缩进

text-indent:50px

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>再见二逼K</title> 
<style>

h2 {text-decoration:overline;}
h3 {text-decoration:line-through;}
h4 {text-decoration:underline;}<!--划线位置-->

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);} <!--设置文本颜色-->

p1 {text-indent:50px;} <!--设置缩进-->

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}<!--设置大小写转换-->

h5 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}<!--设置对齐格式-->

</style>
</head>

<body>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
<h4>This is heading 3</h4>

<h1>这是标题 1</h1>
<p1>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。且缩进为50px</p1>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

<h5>CSS test-aliggn 实例</h5>
<p class="date">2017年3月19日</p>
<p class="main">这只是一个段落</p>

</body>
</html>

测试结果:
CSS——文本格式

所有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            设置字间距

Tags:CS SS S— —— 
作者:网络 来源:再见二逼K