zoukankan      html  css  js  c++  java
  • 浅谈div+css页面布局

    解释:    

      DIV+CSS是Web设计标准,是一种网页布局方法。与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS。因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式。

    方法:

      在HTML文档中加入CSS。css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是网页设计者必须掌握的技术之一。

    发展:

    1.样式定义放在一个单独的文件中,例:新建一个后辍为CSS的样式定义。

    元素{ 属性color:值red;} 在head段使用<link>标记,

    引用语法:<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

    2.嵌入式样式表:

    <style>元素段必须出现在head段内,有一个开始和结束标记,并且可以有多个<style>段

    语法格式: <style type=”text/css”>

    …样式定义…

    样式

    3.在嵌入式样式表中我们可以使用@import导入一个外部样式表,例:

    <style type=”text/css”>

    @import url(外部样式表位置);

    …其它嵌入式的样式定义…

    </style>

    4.内联样式表:

    写在开始标记里面,比如你要H1变红色,

    <h1 style=”color:red;”>变为红色</h1>

    总结: 三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。

    5.样式规则:

    一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束,每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。

    选择器

    声明块

    选择一个元素

    声明{ }

    属性 : 值;

    冒号开始分号结束

    6、注释:有关的详细内容在中有详细的解释。

    7、选择器分组

    当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4 { color red;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。

    例:路径不全: #maincontent p, ul{ border-top:1pxsolid #ddd;}

    正确写法:#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}

    例:结尾多了一个逗号: .a1 p, .a1 ul,{color:red;}

    8、选择器

    元素选择器:语法格式: 元素{color: blue;}

    类选择器: 语法格式: .类名{属性: 值;}

    ID选择器:#id名 {属性 : 值;} ID名不能重复

    通配符选择器:语法格式:*{属性:值;}

    伪类选择器:

    伪类选择器可以以不同方式格式化超级链接<a>元素的四种不同状态:以下顺序依次写;(记忆方法:a Love or Hate)

    a:link 是用在未访问的链接的选择器

    a:visited 是用在已访问过的链接的选择器

    a:hover 是用在鼠标光标放在其上的链接的选择器

    a:active 是用在获得焦点(比如,被点击)的链接的选择器

    如果需要,我们可以组合这几个状态,按顺序写:

    a:link,a:visited { color :blue;}

    a:hover ,a:active { color :blue;}

    9、伪元素选择器

    标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现:

    所有浏览器支持的有两种: :first-line和 :first-letter

    例:段落的第一行:p:first-line {属性:值;}

    例:段落的第一个字母:p:first-letter {属性:值;}

    优先级:

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

    内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type),伪对象(pseudo-element)。

    使用误区:

    1、DIV+CSS的合理之处在于可以进行网页的统一设计管理,通过一个样式表,牵一发而动全身,只要修改样式表,就可以统一全站的风格,如果为一个页面单独做一个样式表,或者一个div就做一个样式表,没有全局设计观念,那么这个div+CSS的设计方式就完全没有必要,甚至成了累赘;

    2、像Table一样用DIV+CSS,无穷尽的嵌套,其效果与Table设计没有两样,并不会带来搜索引擎的优化效果,反而会增加页面的负担;

    3、推崇Div+CSS,却不考虑兼容性,TABLE设计由来已久,得到浏览器的广泛支持,所以显示效果很好,不会出现错位情况,但是DIV+CSS却在 部分浏览器中会发生页面错位的情况,因此在进行设计的时候也要考虑到不同浏览器的情况,进行更改和调试。

    作用:

    1、精简的代码,使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性,能在最短的时间内爬完整个页面,同时这样对收录质量有一定好处;

    2、提高访问速度、增加用户体验性

    使得加载速度得到很大的提高,那么用户点击页面的等待时间就越少,用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢,进而提高网站排名。

    3、div+css结构清晰,很容易被搜索引擎搜索到,天生就是适合优化seo,降低网页大小,让网页体积变得更小。注意:div+css结构清晰、精简,不意味着可以全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了<head>之上及<body>之上及之外,其它全是<div>,就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是<div><ul><li>结构的,就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍,因为曲解了“DIV+CSS”的真实含义,也许根本就不应该有这个说法,因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。

  • 相关阅读:
    数据库基础知识复习-2013.09.24
    2013.9.24 答题
    使用单向循环链表实现约瑟夫问题
    C++关于数字逆序输出的两种思路,及字符串逆序输出
    题目要求:建立一个类Str,将一个正整数转换成相应的字符串,例如整数3456转换为字符串"3456".
    将博客搬至CSDN
    Android 下载模块分析(DownloadManager和DownloadProvider)
    linux shell基础语法
    Android过滤Logcat输出
    (Java 多线程系列)Java 线程池(Executor)
  • 原文地址:https://www.cnblogs.com/lykblog/p/4491846.html
Copyright © 2011-2022 走看看