html5学习笔记 —— 二、文本类网页设计

html5 中常用的文本标签

css的字体样式属性用于定义文本的字体系列、大小、风格等、***css常用自体样式属性***如下表：

font 属性用于对字体样式进行综合设置，字体合写语法如下：

css3@font-face规则
—font-face是css3 的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体。
—@font-face 规则的语法格式如下：

**YourWebFontName:**自定义的字体名称，最好使用下载的默认字体（x我爱在回来的字体叫什么字体，这里就填什么字体名）
source：此值指的是自定义的字体的存放路径，可以是相对路径，也可以是绝对路径。
**format:**此值指的是自定义的字体格式，主要用来帮助浏览器识别，其值中要有一下几种类型：truetype、opentype、truetype-aat、embedded-opentype、svg等；

css文本外观属性

—css的文本外观属性用于设计颜色、字间距、字母间距、水平对齐、文本装饰、阴影等。

1.color (文本颜色）：

• red,green ,blue :预定义的颜色值
• ff0000,#ff6600,@29d672:十六进制颜色值，也是最常用定义颜色的方式
• rgba(255,0,0,0.5): r:红色值 ；g :绿色值; b:蓝色值, rgb的取值可以试试正整数也可以是百分数：a:透明度，取值0~1之间。

2.letter-spacing：字间距用于定义字符与字符间的空白

• normal:normal为默认值
• 0.5em
• 30px
  -注：其属性值可为不同单位的数值，允许使用负值

3.word-spacing（单词间距） 用于增加或减少单词见得空白（即字间隔）

• normal:normal为默认值
• 0.5em
• 30px
  -注：其属性值可为不同单位的数值，允许使用负值

4.line-height（行间距） 用于定义行与行之间的距离

• 5px
• 3em
• 150%
• 属性值的单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素

5.text-transform(英文文本转换)

• none:不转换（默认值）
• capitalize:首字母大写
• uppercase：全部字符转换为大写
• lowercase:全部字符转换为小写

6.text-decoration(文本装饰)

• none:没有装饰（默认值）
• underline:设置文本下划线
• overline：设置文本上划线
• line-through:设置文本删除线

7.text-align（水平对齐方式）

• left：左对齐（默认值）
• right：右对齐
• center：居中对齐

8.text-indent(首行缩进)

• 2em
• 50px
• 30%
• 用于设置首行文本缩进，其属性值可谓不同单位的数值、em字符宽度的倍数、或相对于浏览器宽口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

9.white-space(空白符处理）

• normal:常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行
• pre 预格式化，按文档的书写格式保留空格、空行原样显示。
• nowrap:合并所有空白符为一个空白符，强制文本不能换行，除非遇到换行标记
  .内容超出元素的边界也不换行。若超出浏览器的页面则会自动增加滚动条。

10.text-overflow(标示对象溢出文本）

• clip:修剪溢出文本，不显示省略标记“…”
• ellipsis：用省略标记"…"标示被修剪文本，省略标记插入的位置是最后一个字符。需要结合overflow:hidden使用

text-shadow为文本添加阴影效果

css层叠性、继承性和重要性

CSS层叠性
就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，示例代码如下:

css的继承性
其实CSS中的某些样式是具有继承性的，它允许样式不仅应用于某个特定HTML标签，而且应用于其后代。CSS继承性的示例代码如下所示:

<style>
p{color:pink;}
</style>
<p>小红是一个<span>胆小如 鼠</span>的女孩。</p>

p标签设置为粉色，“胆小如鼠”四个字也为粉色的原因是

标签的颜色设置被它的后代标签继承了。

css重要性
在某个样式设置后面添加！important 代表该样式具有最高权值，！imortant 要写在分号“；”的前面。
示例代码：

<style>
p{color:red !important;}
p{color:green;}
</style>
<p>小红是一个胆小如虎的女孩</p>

注：“小红是一个胆小如虎的女孩”应显示为红色

css优先级

1.样式优先级

• CSS优先级即是指CSS样式在浏览器中被解析的权重不同。

• 多重样式( Multiple Styles) :如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下所示:

• 
  2.选择器的优先级

• css选择器的优先级如下所示。

• 

web字体图标

应用步骤：
1.在页面引入font-awesome.min.css文件
2.为页面元素添加相应的class，例如“”,会在页面显示如下图所示的图标

3.每个图标都有对应的class，可到 https://fontawesome.dashgame.com/ 查看相关的图标

链接属性

• 在实际开发中连接有四种状态，具体如下：
• 1.a: link:超链接的初始状态。
• 2.a:hover：把鼠标放上去时悬停的状态。
• 3.a:active：鼠标点击时
• 4.a:visited：是访问过后的状态
  改变超链接的示例代码如下：

/*对全站有链接的文字颜色样式为color:#33;并无下划线*/
a{color:#333;text-decoration:none; }
/*对鼠标放到超链接上文字颜色样式变为color:#CC3300 并文字链接加下划线text decoration:underline;*/
a:hover {color:#CC3300;text-decoration:underline;}