从JS到AJAX - 06 CSS概要.ppt

完！谢谢 * CSS 什么是CSS CSS是Cascading Style Sheets（层叠样式表）的缩写。 CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。 HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。 总之HTML是定义网页内容，CSS则是定义内容样式，一般的话，内容和样式分离，既可以方便维护，也可以实现代码重用。 CSS引用-行内样式表（style属性） html head title例子/title /head body style=background-color: #FF0000; p这个页面是红色的/p /body /html CSS引用-内部样式表（style元素） html head title例子/title style type=text/css body {background-color: #FF0000;} /style /head body p这个页面是红色的/p /body /html CSS引用-外部样式表（1） 外部样式表就是一个扩展名为css的文本文件。 CSS引用-外部样式表（2） html head title我的文档/title link rel=stylesheet type=text/css href= stylesheet.css / /head body /html CSS样式文件的好处 使用link这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局 例子 HTML CSS CSS选择器 CSS选择器-标记选择器 每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明中所有p标记的样式风格。 style p{ color:red; font-size:25px; } /style CSS选择器-派生选择器 派生选择器的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标记，class,id选择器等)都可以作为并集选择器的一部分。通过依据元素在其位置的上下文关系来定义样式 CSS选择器- id选择器 id选择器的使用方法与class选择器基本相同，不同之处在与id选择器只能在HTML页面中使用一次，针对行更强。 id选择器可以用于多个标记，但是一个id在一个HTML页面中最多只能赋予一个 HTML标记。 id 选择器为标有特定 id 的 HTML 元素指定特定的样式 id 选择器以 # 来定义 CSS选择器-id与派生选择器 在现代布局中，id 选择器常常用于建立派生选择器 CSS选择器- 类选择器(1) 类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合 css规范。 CSS选择器-类选择器(2) 与id选择器一样一样， class 选择器也可被用作派生选择器 CSS选择器-类选择器(3) 元素也可以基于它们的类而被选择 CSS选择器-通配符选择器 通配选择符的写法是“*”，样式应用于文档中的所有元素 例：*{font-size:12px;} 说明：页面中所有文本的字体大小为12个像素。 CSS选择器-属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 a[href][title] {color:red;} 说明：将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色 a[href=] {color: red;} 说明：将指向 Web 服务器上某个指定文档的超链接变成红色 CSS选择器-后代选择器 后代选择器（descendant selector）又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。 CSS选择器-相邻兄弟选择器 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 h1 + p {margin-top:50px;} 说明：增加紧接在 h1 元素后出现的段落的上边距 CSS选择器-伪类选择器 伪类和伪元素也是一种选择符，在页面元素中，用来定义超出结构所能标识的样式。伪类是能被支持CSS的浏览器自动识别的特殊选择符。 语法结构如下： 选择器：伪类{属性：属性值；} 例：a:hover{font-size: