文本 · 标准教案

## 文本 ### 文本的颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定： * 十六进制值 - 如:＃FF0000。 * 一个RGB值-如:RGB\(255,0,0\)。 * 颜色的名称 - 如:red。 ```css body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} ``` ### 文本的水平对齐方式文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐. 当`text-align`设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 ![](https://box.kancloud.cn/18b4a26c64e806a684fe2064a178debf_711x270.png) ```html <style> p { text-align: justify; } </style> <body> <p>Be careful to perform the actions in the correct sequence.</p> </body> ``` ### 文本修饰 `text-decoration`属性一般用于删除链接的下划线。 |值| 描述| |---|---| |none |默认。定义标准的文本。| |underline |定义文本下的一条线。| |overline |定义文本上的一条线。| |line-through |定义穿过文本下的一条线。| |blink |定义闪烁的文本。| |inherit |规定应该从父元素继承 text-decoration 属性的值。| ```html <style> a { text-decoration:none; } </style> <body> <a href="#">百度</a> </body> ``` ### 文本转换文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。 ```html <style> .uppercase { text-transform:uppercase; } .lowercase { text-transform:lowercase; } /* 首字母大写 */ .capitalize { text-transform:capitalize; } </style> <body> <p class="uppercase">Hello,World!</p> <p class="lowercase">Hello,World!</p> <p class="capitalize">hello,world!</p> </body> ``` ### 文本缩进 `text-indent`属性控制**首行文本**的缩进。属性值可以是固定值（包括负数），也可是百分比。 > 注意em单位一般代表网页中一个字符的大小。 ```html <style> p { text-indent:2em; } </style> <p> 南通青鸟教育集团成立于2006年2月，学校秉承“学习改变命运、实训提升实力”的理念，以就业为导向，强势发展校企合作、定向培养，借助南通和长三角地区软件和服务外包兴旺发达的产业优势，累计为南通、上海、南京等城市培养和输送专业人才6000余人。 </p> ``` ### 字符间距和字间距 * letter-spacing属性控制字符的间距。属性值可以是正负数。 * word-spacing属性控制字间距。我们在这里设置CODING COFFEE的产品页和首页。 ```css p{ word-spacing: 5px; letter-spacing: 5px; } ``` ### 行间距 `line-height`属性控制行间距（简称行高）。 ```html <style> p{ word-spacing: 5px; letter-spacing: 5px; line-height: 20px; } </style> <p>A smooth, mild blend of coffees from Mexico A smooth, mild blend of coffees from MexicoA smooth, mild blend of coffees from MexicoA smooth, mild blend of coffees from Mexico</p> ``` ### 元素的垂直对齐方式 `vertical-align`属性控制元素垂直对齐方式。 **vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。** > 也就是垂直居中是运用在行内元素的。 |值|描述| |---|---| |baseline| 默认。元素放置在父元素的基线上。| |sub |垂直对齐文本的下标。| |super |垂直对齐文本的上标。| |top |把元素的顶端与行中最高元素的顶端对齐| |text-top |把元素的顶端与父元素字体的顶端对齐| |middle| 把此元素放置在父元素的中部。| |bottom |把元素的顶端与行中最低的元素的顶端对齐。| |text-bottom| 把元素的底端与父元素字体的底端对齐。| |inherit |规定应该从父元素继承 vertical-align 属性的值。 |