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. poj 2001 Shortest Prefixes(字典树)

    题目链接:http://poj.org/problem?id=2001 思路分析: 在Trie结点中添加数据域childNum,表示以该字符串为前缀的字符数目: 在创建结点时,路径上的所有除叶子节点以 ...

  2. Shortest Prefixes（trie树唯一标识）

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15948   Accepted: 688 ...

  3. poj1077 Eight【爆搜+Hash（脸题-_-b）】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4298840.html   ---by 墨染之樱花 题目链接:http://poj.org/pr ...

  4. 说说Xcode4中xib绑定的原理

    最开始的是时候始终没有弄明白xib文件中的绑定关系.经过一周的开发体验终于有一些理解与收获. Xib文件就是MVC模式中的View这个层的界面显示布局的信息.即类似Asp.net的aspx文件或者ja ...

  5. VC++实现生成右键菜单及添加图标

    用VC++实现弹出菜单比较简单,这里介绍其中的一种来实现一个鼠标右键弹出菜单,效果如下图所示: 步骤: 一.新建一个基于对话框的MFC应用程序-----PopMenu 二.添加一个菜单资源------ ...

  6. Node.js学习笔记3（快速入门）

           一.开始使用Node.js编程           1.hello world           好了,让我们开始实现第一个 Node.js 程序吧.打开你常用的文本编辑器,在其中输入 ...

  7. java-StringTokenizer类

    StringTokenizer类别可以通过某个字符或者多个字符作为分界符,来将字符串划分为多个标记(token). package com.example.helloworld; import jav ...

  8. gdb调试相关

    GDB调试及其调试脚本的使用返回脚本百事通一.GDB调试 1.1. GDB 概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像VC.BCB等 ...

  9. cpu有哪些架构

    原文:http://blog.csdn.net/wyzxg/article/details/5027738 author:skatetime:2009/12/17 这几天在下载RPM包的时候,总会看见 ...

  10. hibernate 数据关联多对多 4.1

    多对多,必须有一张关系表来维持关系 数据库student,teacher student_teacher 三张表 但是在pojo中只需要建立student和teacher两个类,除非关系表也代表某种业 ...