html和css入门 （三）

文本样式

color

文本颜色

属性名	color
属性值	预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值
默认值	依赖用户代理
描述	设置文本的颜色

direction

文本方向（

属性名	direction
属性值	ltr | rtl
默认值	ltr
描述	设置文本的方向

line-height

文本行高

属性名	line-height
属性值	normal |数字 | 长度 | 百分百
默认值	normal
描述	设置文本的行高

letter-spacing

字符间距

属性名	letter-spacing
属性值	normal | 长度
默认值	normal
描述	增加或减少字符间的空白（字符间距）

• normal：默认间隔
• length：用长度值指定间隔。可以为负值。

text-align

属性名	text-align
属性值	left | right | center | justify
默认值	如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述	设置文本在水平方向上的对齐方式

• left：内容左对齐。
• center：内容居中对齐。
• right：内容右对齐。
• justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

text-indent

文本缩进

属性名	text-indent
属性值	|
默认值	0
描述	设置首行文本的缩进

length：用长度值指定文本的缩进。可以为负值。 percentage：用百分比指定文本的缩进。百分比是相对于包含块的宽度。可以为负值。

text-decoration

文本修饰

属性名	text-decoration
属性值	none | [ underline || overline || line-through || blink ]
默认值	none
描述	对文本进行修饰

• none：指定文字无装饰
• underline：指定文字的装饰是下划线
• overline：指定文字的装饰是上划线
• line-through：指定文字的装饰是贯穿线

text-transform

文本的大小写

属性名	text-transform
属性值	capitalize | uppercase | lowercase | none
默认值	none
描述	控制文本的大小写

• none：无转换
• capitalize：将每个单词的第一个字母转换成大写
• uppercase：将每个单词转换成大写
• lowercase：将每个单词转换成小写

white-space

如何处理元素内的空白

属性名	white-space
属性值	normal | pre | nowrap | pre-wrap | pre-line
默认值	normal
描述	设置如何处理元素内的空白

• normal：默认处理方式。空白会被浏览器忽略
• pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。
• nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

word-spacing

单词间距

属性名	word-spacing
属性值	normal |
默认值	normal
描述	增加或减少单词间的空白(即字间隔)

• normal：默认间隔
• length：用长度值指定间隔。可以为负值。

字体样式

• font-size，设置字体的大小，最常用的值是长度(14px)
• font-family：设置使用哪种字体，可以设置某个具体的字体，还可以设置某个字体系列的名字。
• font-style：设置字体风格，默认值为normal，italic是用来指定使用斜体版本，oblique强制将字体倾斜。
• font-variant：设置小号的大写字母，只对英文有效，作为了解内容。
• font-weight：设置字体的粗细。normal bold bolder lighter 100~900。
• font：字体属性的简写。

bolder 和 lighter 的粗细是相对于上级父元素的继承值而言的。具体情况参考下图：

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

列表

无序列表

<ul>：定义无序列表，并且只能包含<li>子元素。 <li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

 

 

 

 

 

 

    <ul>

        <li>无序列表项</li>

        <li>无序列表项</li>

        <li>无序列表项</li>

    </ul>

 

有序列表

<ol>：定义有序列表。 <li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

 

 

 

 

 

 

    <ol>

        <li>有序列表项</li>

        <li>有序列表项</li>

        <li>有序列表项</li>

    </ol>

 

定义列表

<dl>：定义列表 <dt>：定义术语 <dd>：定义描述

 

 

 

 

 

 

<dl>

    <dt>质数</dt>

    <dd>质数又称素数。一个大于1的自然数，除了1和它自身外，不能被其他自然数整除的数叫做质数。</dd>

</dl>

 

列表样式

• list-style-type：设置列表项之前的标识。
• list-style-image：设置图片为列表的标识。
• list-style-position：设置列表项标识是否属于列表项的内容，outside、inside。
• list-style：列表样式的简写。

表格

表格

元素	描述
<table>	定义表格
<caption>	定义表格标题。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元格。

 

 

 

 

 

 

    <table>

        <caption>表头</caption>

        <thead>

            <tr>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>表尾</td>

                <td>表尾</td>

                <td>表尾</td>

                <td>表尾</td>

                <td>表尾</td>

                <td>表尾</td>

            </tr>

        </tfoot>

    </table>

 

表格样式

• border-collapse：合并单元格之间的空隙，默认值是separate, collapse。
• border-spacing：控制单元格之间的空隙，只有在border-collapse: separate;有作用。
• empty-cells：是否显示空的单元格，默认值是show， hide。
• caption-side：设置表格标题的位置，默认值是top，bottom。

特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅