html5+css3学习（三）之CSS文本相关、颜色、列表、长度

html5+css3学习（三）之CSS文本相关、颜色、列表、长度

文本标签

1、em表示语气上强调（强调部分内容），在浏览器上用斜体显示
strong表示强调的内容，使用粗体显示

<em></em>
<strong></strong>

2、
i标签中的内容以斜体显示
b标签中的内容会以加粗显示
如果不是着重内容而是单纯的加粗或斜体则使用b和i标签

<i></i>
<b></b>

3、
用small来表示一些细则中的一类内容，如：合同中的小子，以及版权声明

<small></small>

4、
网页中的所有加书名号的内容使用<cite></cite>标签
5、引用
短引用：<q></q>浏览器默认加上“”
长引用：块级引用<blockquote></blockquote>，独占一行
6、右上角上标显示

2<sup>2<sup>

右下角下标显示

H<sub>2</sub>O

7、删除内容，会给内容添加删除线

<del></del>

8、插入的内容

<ins></ins>

9、保留格式标签，空格和换行不会被吞，域格式标签

<pre></pre>
<!--代码标签，二者一起使用-->
<code></code>

列表

1、无序列表
ul和li都是块元素

创建列表
<ul></ul>
在列表中创建列表项
<li></li>

去掉项目符号

ul{
    list-style:none;
}

2、有序列表
type:指定序号类型
默认值为1 使用数字表示
a/A 使用字母
i/I 使用罗马数字
使用<ol></ol>来代替<ul>
3、定义列表：用来对一些词汇或内容进行定义
下拉菜单有时会使用
dt:被定义内容
dd:对定义的描述

<dl>
    <dt>武松</dt>
    <dd>打虎英雄</dd>
    <dd>打死西门庆</dd>
</dl>

长度单位

1、像素px
100px表示100个像素点，不同显示器像素点大小不同，像素点越小，效果越清晰
2、百分比%
长度单位也可以设置为百分比形式，浏览器将会根据父元素的样式来计算该值（占父元素长度、宽度的比例），使用百分比的好处是，当父元素的属性发生变化时，子元素也会按照比例发生改变，一般创建自适应页面经常使用百分比作为单位
3、em
em它是相对于当前元素的字体大小来计算的，1em=1font-size，使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关的样式时，经常会使用em

颜色

1、使用RGB表示
0%表示0,100%表示255

rgb(169，119，110)
rgb(0%，100%，0%)

2、使用十六进制表示，颜色（0~255）用十六进制表示就是从00~ff，两两重复可以简写
00表示没有ff表示最大

#红色绿色蓝色

文字

//设置文字颜色
color:
//统一设置文字样式，中间以空格隔开，并且没有顺序要求，但是文字大小和字体必须写，而且字体必须是最后一个，大小在倒数第二个
font:
//设置文字大小，浏览器默认16px
font-size:
//设置字体，可以指定多个字体，用逗号分隔，最后一个可以用分类中的字体兜底
font-family:
//文本对齐，left,right,center,justify（两端对齐，通过调整空格大小来保证两端对齐）
text-align:
//设置英文字母大小写
text-transform：
//设置文本修饰，上划线，下划线，中间线，去除超链接下划线，将这个属性设置为none
text-decoration:
//首行缩进，一般首行缩进两字符用2em
text-indent
//设置字体间距
letter-spacing
//设置单词间距，设置词与词之间空格的大小
word-spacing
//设置字体倾斜效果
font-style:
//设置字体加粗效果
font-weight:

字体的五个分类：指定时浏览器会自动调整使用具体哪个字体
衬线字体：serif
非衬线字体：sans-serif
等宽字体：monospace
草书字体：cursive
虚幻字体: fantasy

行高

行间距通过行高来设置，行高越大，行间距越大，默认文字在行高中垂直居中
行间距=行高-字体大小
对于单行文本，将行高设置与父元素高度一致，这样可以使单行文本在父元素中垂直居中

//1、使用像素表示大小 2、使用百分比 3、数值（倍数相对于字体）
line-height:
//在font中可以设置行高，不设置会采用默认值，注意解析顺序，后面会将前面覆盖
font:30px/行高值 "宋体"