zoukankan      html  css  js  c++  java
  • [置顶] CSS+DIV总结

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

     

    学习了一周CSS+DIV,总结如下:


     

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


           本视频主要包括CSS的基本语法与概念:设置文字、图片、背景、表格和菜单等网页元素的方法,以及CSS滤镜的使用。还有一些扩展知识:CSSJavaScriptCSSXMLCSSAjax的综合应用。后面还有几个大例子,通过大例子深刻理解了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高:高技术和长时间决定了高成本。

  • 相关阅读:
    链队列的初始化,建立,插入,查找,删除。
    顺序队列的初始化,建立,插入,查找,删除。
    顺序栈的初始化,建立,插入,查找,删除。
    双链表的初始化,建立,插入,查找,删除。
    MT6737 Android N 平台 Audio系统学习----录音到播放录音流程分析
    内核Alsa之pcm
    platform_set_drvdata 和 platform_get_drvdata
    linux 中mmap的用法
    src源dst目标
    复旦软件工程专业课
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3201199.html
Copyright © 2011-2022 走看看