05-DIV+CSS-引入

最新推荐文章于 2021-12-20 20:42:58 发布

forwardNow

最新推荐文章于 2021-12-20 20:42:58 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： DIV+CSS 引入

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/14090125

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

div+css 引入
- div+css简介
- 为什么需要div+css
div+css 的介绍

0. 下载

Cascading Style Sheet 2.0 中文手册_.chm

1 div+css 是什么

- div 元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.
- css 是Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言.
- div+css 是网站标准(或称"web标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.
- 简单理解div+css
div是用于存放内容(文字,图片,元素)的容器
css是用于指定放在div中的内容如何显示,内容的位置和外观.

2 好处

① html文件减少大量的table等元素,即简洁
② 内容和样式分离, 即样式可以复用.(样式:大小颜色背景位置等)
③ 搜索引擎对简洁的网页代码敏感.
(SEO,Search Engine Optimization 搜索引擎优化 )
④ 节约带宽

3 为什么需要div+css

1) 网页设计的三个时期-- table, table+css, div+css

① table网页设计 : 内容和样式(外观和布局)混合
② table+css网页设计: table布局,css指定外观
③ div+css网页设计: div放内容,css指定样式(外观和布局).
内容和样式彻底分离

2) div+css 的优势

① 符合w3c标准
② 搜索引擎更友好
③ 样式的调整更方便.
内容和样式的分离,是页面和样式的调整变得更加方便.
④ css的极大优势表现在简洁的代码,节约带宽,页面简洁
⑤ 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性.

4 示例

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <!-- 
    <link rel="stylesheet" type="text/css" href="">
    -->
</head>
<style type="text/css">
    /*类选择器 */
    .tbStyle {
        /*大小*/
        width:  300px; 
        height: 200px;
        /*边框*/
        border: 1px solid red;
        /*与浏览器的边距*/
        margin-left: 200px; 
        margin-top: 100px;
    }

    /*父子选择器*/
    .tbStyle table {
        width: 280px;
        height: 180px;
        border: 1px solid blue;
    }
    .tbStyle table td {
        border: 1px solid black;
        /*内容居中*/
        text-align: center;
    }

</style>
<body>
    <div class="tbStyle">
        <table>
            <tr><td>11</td><td>12</td><td>13</td></tr>
            <tr><td>21</td><td>22</td><td>23</td></tr>
            <tr><td>31</td><td>32</td><td>33</td></tr>
            <tr><td>41</td><td>42</td><td>43</td></tr>
        </table>
    </div>
</body>
</html>