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. 利用相关的Aware接口

    Struts 2提供了Aware接口.Aware为"感知"的意思,实现了相关Aware接口的Action能够感知相应的资源.Struts在实例化一个Action实例时,如果发现它实 ...

  2. 【转载】Java策略消除if else

    策略(Strategy)模式:又名Policy,它的用意是定义一组算法,把它们一个个封装起来,并且使他们可以相互替换.策略模式可以独立于使用他们的客户端而变化.GOF策略模式静态结构类图如下: 通过上 ...

  3. ansible笔记

    ansible 资料 ansible 配置 ansible inventory配置文件 ansible模块 http://www.cnblogs.com/iois/p/6216936.html ans ...

  4. 使用R进行相关性分析

    基于R进行相关性分析 一.相关性矩阵计算: [1] 加载数据: >data = read.csv("231-6057_2016-04-05-ZX_WD_2.csv",head ...

  5. Python学习之路——迭代器、生成器、算法基础、正则

    一.迭代器: 迭代器是访问集合元素的一种方式. 迭代器对象是从集合的第一个元素开始访问,直到所有的元素被访问完结束. 迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退. 另外,迭代 ...

  6. 细说UI线程和Windows消息队列（经典）

    在Windows应用程序中,窗体是由一种称为“UI线程(User Interface Thread)”的特殊类型的线程创建的. 首先,UI线程是一种“线程”,所以它具有一个线程应该具有的所有特征,比如 ...

  7. Phonegap-----Media

    Everything in the code: <!DOCTYPE html> <html> <head> <title>Media Example&l ...

  8. 乐视(letv)网tkey破解

    乐视网tkey算法频繁变动,怎样才干获得她算法的源代码,以不变应万变? 本文仅仅用于技术交流.提醒各位尊重站点版权,请勿用于其他用途,否则后果自负! 使用软件 Adobe Flash Builder ...

  9. veridata实验例（5）在更改主键列值，update操作将被分成两个语句

    veridata实验例(5)更改主键列值,update操作将被分成两个语句 续接"veridata实验举例(4)验证veridata查找出updata.delete操作导致的不同步现象&qu ...

  10. Javascript 学习 笔记一

    1.操作 HTML 元素        如需从 JavaScript 訪问某个 HTML 元素,您能够使用 document.getElementById(id) 方法.        请使用 &qu ...