1、,Css选择器,选择器种类,常用选择器通用选择器伪类选择器伪元素选择器属性选择器,常用选择器,1. 元素选择器： Body color: black; h1 color:red;2. 群组选择器 H1,p, strong font-style: italic;3. 类选择器.fcolor color:blue;p.fcolor color:purple;,对于下列样式规则和语句，出现何种效果：,body color:brown;.fcolor color:blue;p.fcolor color:purple;strong.fcolor color:silver;（1）我是粗体字,（2） 我在段
2、落里 我是列表元素。 我是列表元素。 列表里的字是什么颜色？,Html语言标签结构：,小结： 1. 当父元素和子元素各自使用的类别选择器发生冲突时：p.fcolor color:purple;Strong.fcolor color:silver;我是粗体字适应子元素的选择器对于冲突具有较高优先级。2. 利用继承性时，要考虑html的结构层次，谁与谁平级，谁是谁的父元素。,4. 多类选择器.one.two.three例如：对某段落的要求文字蓝色，有黑色实线边框，内填充3%。,5. ID选择器#four color:brown;p#four font-style:italic; border:3p
3、x dashed green; 如果同时还使用了前面的类选择器，效果如何？ 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 ,class=one two three ,小结：Id选择器和类选择器同时出现时，id选择器的优先级较高。当id选择器和 派生选择器发生冲突时 #four color:brown; p#four color:pu
4、rple; 越“具体”的规则优先级越高。,后代选择器/派生选择器,li strong font-style: italic; font-weight: normal;- 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为 strong 元素位于 li 元素内。我是正常的字体。,id 选择器常常用于建立派生选择器。,#sidebar p font-style: italic; text-align: right; margin-top: 0.5em; 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单
5、元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者 ，不过这样的用法是非法的，因为不可以在内联元素 中嵌入 ,类别选择器的派生,class 也可被用作派生选择器：.fancy td color: #ff0000; 在上面这个例子中，类名为 fancy 的父元素（可能是一个表格或者一个 div）内部的表格单元都会受到影响。,注意：,有关后代选择器：两个元素之间的层次间隔可以是无限的。例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有 em 元素： List ite
6、m 1 List item 1-1 List item 1-3-1 List item 1-3-2,P标签中的字应该是什么颜色？, .fancy pcolor:#ffff00; CSS设计,写出适用下面规则的标签,下面的选择器与前面的用法有何不同？td.fancy color: #00ff00; 在上面的例子中，类名为 fancy 的所有表格单元将受影响。（不是所有的td）,总结下面选择器的不同功能,.fancy pcolor:#ffff00; p.fancy color:#00ff00; p, .fancycolor:#0000ff;,子选择器,在CSS2中，还规定了一种子选择器，只对直接后
7、代有影响。例如pspancolor:blue注意：在IE6中仅支持后代选择器，在IE7和Firefox中两者都被支持。,CSS的层叠特性,层叠性可以被理解为对于“冲突”的解决方案。例如：p color:green.redcolor:red.purplecolor:purple#bluecolor:blue,应用, 第一行 第二行 第三行：类别和id 第四行：行内样式和id选择 第五行:两种类别,效果,结论,类别选择器优先于标记选择器。Id选择器优先于类别选择器。行内样式优先于id选择器。同时出现两个类别，前者优先于后者,练习-使用类别选择器的派生,通用选择器,将下列代码在不同内核浏览器中浏览。
8、ul,a border: 1px solid red Home About Products Contact ,在不同浏览器的不同效果,符合web标准的浏览器中，ul标签会有默认的内边距。为解决对于不同浏览器的兼容问题，可以使用通用选择器。,去掉项目符号，将每个列表项的显示方式改为块元素，删除超链接的下划线,#nav li list-style:none; display:block; padding:3px 6px; font-size:2em; background-color:#ccc; #nav li a text-decoration:none; color:#0000FF ,使用通
9、用选择器,* margin:0; padding:0;,如果将magin改为5%,* margin:3%; padding:0;如果不希望列表项之间有空隙， 如何能消除？#nav li; margin:0;,对其它元素的影响,通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性。并且在大部分的现代浏览器中可以看出，和标签都受到了影响。,其它示例,div,form,ul,ol,li,span,pmargin:0;padding:0;border:0;img,a imgborder:0;margin:0;padding:0;h1,h2,h3,h4,h5,h6 margin
10、:0;padding:0;font-size:12px;font-weight:normal;ul,ol,li list-style:none,在HTML中使用CSS的方法,行内式内嵌式链接式导入式,行内式/内联样式,在所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，将CSS代码直接写在其中。例如： 正文段落 ,嵌入式,在对页面中各种元素的设置集中写在和之间的，对于单个页面来说，这种方式很方便。,链接式,链接式样式表使用频率最高，也最为实用。它将HTML页面本身与CSS样式风格分离为两个或多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期
11、维护都非常方便。,同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面，使得网站的风格统一，协调。格式如下：,链接式示例,首先创建.css文件：h2 color:#0000FF; p color:#FF0000; text-decoration:underline; font-weight:bold; font-size:16px; ,在网页头部加入链接信息,link 标签 - 当在文档中声明使用外接资源(比如CSS)时使用此标签 href - 指定需要加载的资源(CSS文件)的地址URI.,实例：, ,rel=stylesheet,rel是relationship的英文缩写stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思.rel=“stylesheet” 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个样式表,导入式,导入式与链接式功能基本相同。格式如下： import mystyle.css;,建议：如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，可以用导入式同时导入多个。也可是先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。,
