html 元素的样式对象,HTML - H5新增元素与CSS基本样式

一、 HTML5新增元素

以前用div +class的方式来规划页面格式

新闻中心

郑重生命

现在可以利用 HTML5 的新元素

地址

二、基本单位

长度

px：像素

em：相对长度单位。相对于当前对象内文本的字体尺寸。比如n em 就是当前对象内文本的font-size的 px 的 n倍

rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如：n rem 相对于根类px的 n 倍。

三、块级元素和行内元素转换

块级元素---->行内元素：style="display:inline;"

我是div

行内元素---->块级元素 style="display:block;"

我是span

行内元素，但是还需要可以设置宽高，也就是说行内的块如何设置？

display: inline-block;

display其他应用：隐藏元素

我是span

注意：只有块级元素才能设置对应的 宽和高 height、width，行内元素设置之后是没有效果的。

四、 文本和字体基本样式

字体大小

font-size: 20px;

字体

font-family: "Comic Sans MS";

缩进

text-indent: 2em;

文本对齐方式

text-align: center;

文字样式(斜体)

font-style: italic;

加粗

font-weight: bold;

单词折断换行

word-wrap:break-word;

显示省略号的效果设置

overflow:hidden;/*超出的隐藏*/

white-space:nowrap;/*不让换行 直到br*/

text-overflow:ellipsis;/*...的效果(CSS3) */

五、边框背景基本样式

设置边框

//或者

.outer{

border:10px solid burlywood;

border-radius: 10px;

}

设置边框合并

table{

/*将相邻的边框合并*/

border-collapse:collapse;

}

六、表格和列表

表格

小明	第一
小王	第二

列表

有序

1. 第一
2. 第二

- 无序

• 测试1
• 测试2

七、IE独有&CSS HACK (每家浏览器都有自己的特点)

CSS HACK可以理解为对应不同的浏览器去进行适配

CSS HACK.png