精通css 01 选择器
1。id和类名
使用id标识页面上的单独元素，id必须是唯一的（一个id只能应用于页面上的一个元素）。同一个类名可以使用在页面上任意数量的元素，用于标识内容的类型或相似的条目。
书写类名与id时，需要区分大小写即便css本身是不区分大小写！
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <h3 class="newsHead">新闻标题</h3> <p class="newsText">新闻概述</p> <p class="newsText"><a href="#" mce_href="#" class="newsLink">新闻详情</a></p> <!-- 以上可以修改为,删除了不必要的类，简化了代码，可以通过css选择器与样式寻找具体目标 --> <div class="news"> <h3>新闻标题</h3> <p>新闻概述</p> <p><a href="#" mce_href="#">新闻详情</a></p> </div> </body> </html>
2。div与span
div代表divison，提供文档分割、区域的方法。为了将不必要的标记减少到最少！当然，html默认标签同样能够实现div的效果，如:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <div id="mainNav"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <!-- 同样可以简写为 --> <ul id="mainNav"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
3。文档类型、DOCTYPE切换和浏览器模式
DTD（文档类型定义）是一组机器可读的规则，定义了xml或(x)Html的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">可以使用W3C检验其来检查(x)Html是否有效。
浏览器模式：标准模式和怪异模式
DOCTYPE切换：浏览器根据DOCTYPE是否村子啊以及使用DTD来选择用户的浏览模式，如：DOCTYPE不存在或形式错误，浏览器将使用怪异模式。很多情况下，使用页面来实现xml功能，如：WML，那么需要在DTD定义后加入xml定义<?xml version="1.0" encoding="UTF-8"?>
4。为样式找到目标
在css中，使用selector选择器。
5。常用选择器
最常用的选择类型是类型选择器、后代选择器、id选择器和类选择器。
类型选择器用来寻找特定类型的元素，比如段落，标题，只需指定希望应用央视的元素名称。可以理解为元素选择器或者简单选择器
如：
p{color:red;}
a{text-decoration:underline;}
h1{fon-weight:bold;}
后代选择器可以用来存照特定元素或元素组的后代。
如：li a {text-decoration:none;} 表示li元素中的所有子元素中的a元素属性text-decoration为none。
id选择器：以#+id表示。
类选择器：以.+类名类表。
如：#intro {font-weight:bold;} --> id="intro"
.dateposted {color:green;} --> class="dateposted"
6。 伪类选择器：
有时候希望根据文档结构之外的其他条件元素应用样式，如表单元素或链接状态，这需要伪类选择器来完成。
如：
a:like{color:blue;}
a:visited{color:green;}
tr:hover{backgroun-color:red;}
input:focus{backgroun-color:red;}
7。通用选择器
通用选择器类似通配符，匹配所有可用元素。
如： *{padding:0;margin:0} 规则,删除每个元素上默认的浏览器填充空白边框。
8。高级选择器
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce:style type="text/css"><!-- #mainNav > li {background: url(folder.png)no-repeat left top;font-size: 32;} #mainNav > li *{background: url(folder.png)no-repeat left top;font-size: 32;} --></mce:style><style type="text/css" mce_bogus="1"> #mainNav > li {background: url(folder.png)no-repeat left top;font-size: 32;} #mainNav > li *{background: url(folder.png)no-repeat left top;font-size: 32;} </style> </head> <body> <ul id="mainNav"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul> </body> </html>
9。属性选择器：
属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此可以实现某些非常有意思和强大的效果。比如，当鼠标停留在具有title属性的元素上时，浏览器会显示一个工具提示：
<abbr title="Cascading style sheets">CSS</abbr>
可以修改为：
abbr[title]:{border-bottom: 1px dotted #999;}
abbr[title]:horver{cursor: help;}
10。层叠和特殊性
可能又2个或更多的规则寻找同一元素，css通过一个层叠（cascade）的过程处理这种冲突。层叠采用以下重要次序：
!important 的用户样式
!important 的作者样式
作者样式
用户样式
特殊性：为了计算规则的特殊性，每种选择器被分配一个数字值。然后将规则的每个选择器的值加在一起，计算出规则的特殊性。4个分成等级：a、b、c、d。具体参阅其他文档。
设置form中元素宽度为30em，但是search却为15em。
form{width:30em;}
form#search{width:15em;}
11。在主题标签上添加类或id
如，在body标签上加入对应的id或class，其意义是方面覆盖其子类的属性。
12。继承
不同于层叠。比如主体元素的字号为14，那么页面上的所有内容继承该字号
p,div,h1,h2,ul,ol,dl{color:red}简写为boby{color:red;}
13。使用样式
<link href="css/basic.css" mce_href="css/basic.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"><!-- @import url("css/basic.css"); --></mce:style><style type="text/css" mce_bogus="1"> @import url("css/basic.css"); </style>
template.html -> basic.css ->{layout.css;type.css;color.css}
basic.css使用@import url("xxx.css");
14。使用/**/进行css代码注释