HTML在Web飞速发展的过程中起着重要作用，有着重要地位。HTML初衷是为了表达标签（<p>、<table>）的内容信息。同时文档布局由浏览器来完成，不使用任何格式的标签。慢慢地IE不断将新的HTML标签和属性添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点越来越困难。所以为了解决这个问题，创造出了HTML之外的样式即CSS层叠样式表。

 

学习了一周CSS+DIV，总结如下：


       本视频主要讲的是用CSS+DIV进行网页布局。前半部分是一些基础的css样式，后面的是一些例子，根据例子来理解CSS+DIV的布局。把每一块都写成div，然后用CSS控制其样式进行美化布局效果，着重实际操作。


       本视频主要包括CSS的基本语法与概念：设置文字、图片、背景、表格和菜单等网页元素的方法，以及CSS滤镜的使用。还有一些扩展知识：CSS与JavaScript、CSS与XML、CSS与Ajax的综合应用。后面还有几个大例子，通过大例子深刻理解了CSS+DIV布局。把一块内容放在一个DIV中，然后对其标签的id,class的样式在CSS中进行设置。保持了HTML代码和CSS代码的分离。


那么HTML中引入CSS的三种方式如下：

1、行内样式

<body> 

<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p> 

<p style="color:#000000; font-style:italic;">正文内容2</p> 

<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p> 

</body>

在行内直接写样式，很简单的对某个元素单独定义样式。


2、内嵌式

<head> 

<title>页面标题</title> 

<style type="text/css"> 

<!-- 

p{ 

color:#FF00FF; 

text-decoration:underline; 

font-weight:bold; 

font-size:25px; 

} 

--> 

</style> 

</head>

      有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!--注释 -->）隐藏内容而不让它显示。


3、链入外部样式表

<link href="1.css" type="text/css" rel="stylesheet">


4、导入内部样式

<head> 

<style type="text/css"> 

<!-- 

@import url(1.css); 

--> 

</style> 

</head>

导入外部样式表存在于内部样式表中。必须在样式表开始部分，在其他内部样式表上面。

总结：学习CSS+DIV重在理解和操作。还需要多练习。不论哪门语言都有其优缺点。

Div+CSS的优点：

1、减少页面的加载时间

    页面体积变小，浏览速度变快。

2、易于修改

     HTML页面和CSS代码是分开的，将网页的内容和表现形式分离。修改设计时只需要改一下样式即可，不会打破页面中其他样式的布局，这种特点是table不具备的。

3、保持视觉的一致性，强大的字体和排版能力

      把样式都放在CSS文件中，避免了不同区域或页面的效果偏差。

4、有利于搜索引擎爬虫：一般而言相同页面html文件table布局字节大于DIV+CSS布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。

    

缺点：

1、开发技术高：要兼容各浏览器以及版本浏览器要求较高。

2、开发时间长：比表格定位复杂的多，很容易出现问题。

3、开发成本相对table高：高技术和长时间决定了高成本。

[置顶] CSS+DIV总结的更多相关文章

  1. [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

  2. [置顶] CSS语言精粹

    本文主要是对CSS中一些比较重要的高级部分作了一些整理,这些内容也许不是经常使用,但是都很强大.本文将长期更新. 边框 CSS2.1 规定:元素的背景是内容.内边距和边框区的背景.设置背景颜色时是没有 ...

  3. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 自定义置顶TOP按钮

    简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...

  5. js之滚动置顶效果

    0.js获取高度 ? 1 2 3 4 5 6 document.all   // 只有ie认识   document.body.clientHeight              // 文档的高,屏幕 ...

  6. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  8. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  9. css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

随机推荐

  1. 如何用python抓取js生成的数据 - SegmentFault

    如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...

  2. CCPC A(模拟)

    Secrete Master Plan Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Othe ...

  3. c 输入两个数，第一个数决定一个nXn的矩阵，第二个数决定从1开始赋值，赋值的上限 (MD花了半天时间,思路不对害死人)

    输入两个数,第一个数决定一个nXn的矩阵,第二个数决定从1开始赋值,赋值的上限 比如: 输入: 输出: 输入: 输出: #include<stdio.h> int main(void) { ...

  4. JavaScript中cookie的路径(path)和域(domain)

    cookie虽然是由一个网页所创建,但并不只是创建cookie的网页才能读 取该cookie.在默认情况下,与创建cookie的网页在同一目录或子目录下的所有网页都可以读取该cookie.但如果在这个 ...

  5. 伪静态 apache重写

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面 下面我详细说说它的使用方法 A.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查 ...

  6. JavaSE学习总结第23天_多线程1

      23.01  多线程程序的引入 如果一个程序只有一个执行流程,所以这样的程序就是单线程程序. 如果一个程序有多条执行流程,那么,该程序就是多线程程序. 23.02  进程概述及多进程的意义 要想说 ...

  7. 解决gerber-Failed to Match All Shapes for PCB问题

    有效解决在Protel 99se导gerber时提示gerber-Failed to Match All Shapes for PCB出错问题如图 这种问题很好解决,打开这个窗口 操作方法如下图Emb ...

  8. 用PHP编写Hadoop的MapReduce程序

    用PHP编写Hadoop的MapReduce程序     Hadoop流 虽然Hadoop是用Java写的,但是Hadoop提供了Hadoop流,Hadoop流提供一个API, 允许用户使用任何语言编 ...

  9. 一入python深似海--浅拷贝与深拷贝

    python中有一个模块copy,deepcopy函数用于深拷贝,copy函数用于浅拷贝. 要理解浅拷贝,必须先弄清楚python中的引用. 引用 Python中一切都是对象,变量中存放的是对象的引用 ...

  10. ceph源码之一

    转自于:http://blog.csdn.net/changtao381/article/details/8698935 一.概述: 其结构如下:在src 里, 网络通信:  msg  里面 包括了网 ...