HTML学习（III）

本篇是关于css语法的性质、排版、盒模型等内容。

css性质：

1.继承：样式不仅应用于某个特定html标签元素，而且应用于其后代，如

<p>

。但有一些css样式是不具有继承性的，如

border:1px solid red;

。

2.权值的影响。

3.层叠：当两个样式权值相同时，后面的样式会覆盖前面的样式。

4.重要：为某些样式设置具有最高权值，如

p{color:red!important;}

。

css排版：

1.文字的字体、字号、颜色：如

body{font-family:"Microsoft Yahei";
font-size:12px;color:#666；}

（注意不要设置不常用的字体，因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体）

2.文字的粗体、斜体、下划线、删除线：

body{font-weight:bold;
font-style:italic;
text-decoration:underline;
text-decoration:line-through;}

3.段落的缩进：

p{text-indent:2em;}

为缩进两个文字大小（2em）。

4.段落的行高（行间距）：

p{line-height:1.5em;}

为1.5倍行高。

5.网页设置中的文字间隔或者字母间隔：

(1)文字、字母间的间隔：

h1{letter-spacing:50px;}

(2)英文单词间的间隔：

h1{word-spacing:50px;}

6.段落的对齐：居中、居右或居左。如

h1{text-align:center;}

css盒模型：

1.css元素：分为块状(级)元素、内联元素(又叫行内元素)(inline)和内联块状元素。

(1)块
9cb2
状(级)元素：【独占一行】每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。

（可通过

a{display:block;}

将元素设置为块级元素）

常用的块状元素有：

<div>

、

<p>

、

<h1>

-

<h6>

、

<ol>

、

<ul>

、

<dl>

、

<table>

、

<address>

、

<blockquote>

、

<form>

。

(2)内联元素：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

（可通过

a{display:inline;}

将元素设置为内联元素）

常用的内联元素有：

<a>

、

<span>

、

<br>

、

<i>

、

<em>

、

<strong>

、

<label>

、

<q>

、

<var>

、

<cite>

、

<code>

。

(3)内联块状元素：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

（可通过

a{display:inline-block;}

将元素设置为内联元素）

常用的内联块状元素有：

<img>

、

<input>

。

2.盒模型=网页布局的基石

包括盒子中的内容（文字、图片、标签元素，content）、边框（border）、内边距（padding）、外边距（边界）（盒子与另一个盒子模型之间的距离，margin），边框、内边距与外边距都有四个方向，如padding-left、padding-right、padding-top、padding-bottom。

3.盒子模型的边框：有粗细、样式和颜色三个属性。

div{
border-width:2px;
border-style:solid;
border-color:red;
}

以上代码可简写为：

div{border-width:2px solid red;}

【边框属性值设置中，这三个必须全部设置，否则边框无法显示。】

若要单独设置下边框，则：

div{border-bottom:2px solid red;}

(1)border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

(2)border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

(3)border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

4.盒子模型的宽高：css内定义的宽（width）和高（height），指的是填充以里的内容范围。



5.盒子模型的填充（内边距）：分为上、右、下、左(顺时针)，如

div{padding:20px 10px 15px 30px;}

。

以上代码写的是四个属性值，若写的是三个属性值，则第一个值是上，第二个值是左右，第三个值是下；若写的是两个，则第一个值是上下，第二个值是左右；若写的是一个值，则四个方向是相同的。

6.盒子模型的边界（外边距，margin）：元素与其它元素之间的距离，分为上、右、下、左。（同填充）

如

div{margin:20px 10px 15px 30px;}

。

附：



这一部分的css语法内容先到这里，基础部分的内容就差css的布局和样式设置啦~撒花~