css的基本排版与元素分类简述

1.css文字基本排版

以下代码默认都写在< style type=”text/css”> < /style>

/*字体例子*/
body{font-damily:"Monaco Blod"}

/*字号、颜色例子*/
.name{font-size:10px;color:red;}
/*颜色也可以"#"+"数字"表示*/

/*粗体例子*/
span{font-weight:blod;}

/*斜体例子*/
a{font-style:italic;}

/*下划线例子*/
span{text-decoration:underline;}

/*删除线例子*/
span{text-decoration:line-through;}

/*缩进例子*/
p{text-indent:2em;}
/*2em：缩进文字大小2倍*/

/*行高(行间距)例子*/
P{line-height:2em;}

/*字距：*/
/*中文字距例子*/
{letter-spacing:50px;}
/*英文字距例子*/
{word-spacing:50px;}

/*对齐例子*/
div{text-align:center;}

2.css基本元素分类与特点
1)块状元素

< div>、< p>、< h1>…< h6>、< ol>、< ul>、< dl>
< table>、< address>、< blockquote>、< form>

/*可以把元素设置为块状元素*/
/*a为内联元素转换为块状元素*/
a{display: block;}

1.每个块状元素都从新的一行开始，并且其后的元素也是另起一行
2.元素的高度、宽度、行高以及顶和底边距都可以设置
3.元素宽度在不设置的情况下，是它父容器的100%，除非设置一个宽度

2)内联元素(行内元素)

< a>、< span>、< br>、< i>、< em>、< strong>
< label>、< q>、< var>、< cite>、< code>

/*可以把块状元素转换为内联元素*/
div{display: inline;}

1.和其他元素都在一行上
2.元素的高度、宽度及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或图片的宽度，不可改变

3)内联块状元素

< img>、< input>

/*内联块状元素同时具备内联元素、块状元素的特点*/
/*代码为{display:inline-block;}*/

1.和其他都在一行上
2.元素的高度、宽度、行高以及顶部和底边距都可以设置