Div+css初学者必知

Div+css初学者必知
 
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。 XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技 术，而是采用DIV+CSS的方式实现各种定位。
  CSS—层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。 
  1,在HTML文档中加入CSS 

  样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。 

  2,外部样式表： 

  样式定义放在一个单独的文件中，例：新建一个后辍为CSS的样式定义。    元素{ 属性color:值red；} 在head段使用<link>标记， 
  引用语法：<link rel=”stylesheet” type=”text/css” href=”样式表URL” /> 
  3,嵌入式样式表： 
  <style>元素段必须出现在head段内，有一个开始和结束标记，并且可以有多个<style>段 
  语法格式： <style type=”text/css”>    „样式定义„    </style> 
  在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：    <style type=”txet/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 {属性：值；} 

  10,选择器的优先级 

  1， ID选择器；2，类选择器；    3，元素选择器；4；通配符选择器。