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可以理解为对应不同的浏览器去进行适配


HTML - H5新增元素与CSS基本样式_第1张图片
CSS HACK.png

你可能感兴趣的:(HTML - H5新增元素与CSS基本样式)