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. JAVA GUI学习 - JTree树结构组件学习 ***

    public class JTreeKnow extends JFrame { public JTreeKnow() { this.setBounds(300, 100, 400, 500); thi ...

  2. Sicily-1156

    一．      模仿树的的先序遍历.范围是1000个节点.用数组存储节点的信息. 二．      要注意的是,头结点是不确定的,所以在前序遍历之前要找出头结点,除了头结点的下标值出现一次之外,其他结点 ...

  3. 【数位dp】【HDU 3555】【HDU 2089】数位DP入门题

    [HDU  3555]原题直通车: 代码: // 31MS 900K 909 B G++ #include<iostream> #include<cstdio> #includ ...

  4. android程序报错“error launching activity com.android.ddmlib.shellcommandunresponsiveexception”的解决方式

    今天在调试android程序的时候,因为是NDK开发,要先编译.so库再打包下载到android模拟器,所以花费的时间比較长.控制台就会报例如以下错误: error launching activit ...

  5. VCS引起的oracle数据库异常重新启动一例

    1. 环境描写叙述 操作系统版本号:SUSE Linux Enterprise Server 10 sp2 (x86_64) 数据库版本号:Oracle 11.1.0.7.16 VCS版本号:5.1 ...

  6. CSDN Markdown简明教程3-表格和公式

    0. 文件夹 文件夹 前言 表格 1 表格 2 表格对齐方式 公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法 深入 声明 1. 前言 Markdown是一 ...

  7. asp.net js调用后台方法

    先前网上百度了很多 ,大致都一样 但是不太详细,总是不成功,然后试了很多,把经验发给大家看看 前台js function aa() { //这里可以写你要带的参数用隐藏域放起来 __doPostBac ...

  8. iOS获取运营商信号强度

    此API是apple私有API,所以只可运用在越狱设备中,如果提交appstore,会遭遇apple的拒绝上架反馈! #import <dlfcn.h> int getSignalLeve ...

  9. Python Extension Packages下载链接

    一.http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下载后可使用pip包管理器进行安装,在命令行中输入: pip install 安装包的路径

  10. 关于Ubuntu12.04下code::blocks不能使用debug解决方法

    问题描述:   系统:ubuntu 12.04   code::blocks版本:10.05   问题现象:debug->start        之后出现:warning: GDB: Fail ...