【HTML5学习笔记】20：CSS文本样式下

来源：互联网发布：乱世佳人电影结局知乎编辑：程序博客网时间：2024/06/07 03:15

本节学习CSS中通过文本样式的设置，来更改样式以及文本的方位等。
样式和方位表

文本样式
主要分为三种：文本装饰、英文大小写装换、文本阴影。

text-decoration用来给文本加线条。
①underline下划线。②overline上划线。③line-through删除线。④none取消划线。

text-transform用来设置英文大小写。
①uppercase全大写。②lowercase全小写。③capitalize单词首字母大写(注意单词间要有空格才能保证被识别)。④none将已转换的恢复。

text-shadow用来设置文本阴影。
格式text-shadow: 5px 5px 3px red;即水平偏移、垂直偏移、模糊值、阴影颜色。

文本控制
对一组文本进行访问、形态进行控制的样式。

text-align设置文本对齐方式。
①left靠左。②right靠右。③cente居中。④justify两端对齐。⑤start让文本处于开始的边界。⑥end让文本处于结束的边界。

white-space处理空白排版方式。
①normal空白符被压缩(成1个)，文本自动换行。②nowrap空白符被压缩，文本不换行。③pre空白符被保留，遇到回车才换行。④pre-line空白符被压缩，文本会在排满或遇回车才换行。⑤pre-wrap空白符被保留，文本会在排满或遇回车才换行。

letter-spacing设置文本之间的间距。
①直接给长度。②normal默认间距。

word-spacing设置英文单词之间的间距。
①直接给长度。②normal默认间距。

line-height设置段落行高。
①长度。②数字(即数字*100%)。③百分比。④normal恢复默认。

word-wrap让过长的单词断开。
①break-word断开单词。②normal恢复默认。

text-indent设置文本首行的缩进值。
①长度。②normal恢复默认。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS文本样式 下</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <p>这是html5,HTML5,这是html5,HTML5,这是html5,HTML5,这是                          html5,HTML5,这是                                          html5,HTML5</p>    <a href="http://www.baidu.com">百度</a>    <br>    <b>The word hydraulicaptionationalibraryogapplicationeveresearcahydraulicaptionationalibraryogapplicationeveresearcahydraulicaptionationalibraryogapplicationeveresearca is created by lzh.</b></body></html>

@charset "utf-8";p{    font-size: 50px;    background: silver;    /*text-decoration: underline;*/    text-decoration: overline;    /*text-decoration: line-through;*/    /*text-transform: uppercase;*/    /*text-transform: lowercase;*/    text-transform: capitalize;    text-shadow: 5px 5px 3px red;    /*text-align: left;    text-align: right;*/    /*text-align: center;*/    text-align: justify;    /*text-align: start;    text-align: end;*/    /*white-space: nowrap;*/    /*white-space: pre;*/    /*white-space: pre-line;*/    white-space: pre-wrap;    letter-spacing: 5px;    word-spacing: 15px;    line-height: 150%;    text-indent: 90px;}a{    text-decoration: none;}b{    font-size: 50px;    word-wrap: break-word;}

运行结果：

阅读全文

0 0

【HTML5学习笔记】20：CSS文本样式 下

【HTML5学习笔记】20：CSS文本样式下