CSS基础知识学习(含实例).ppt

最近优先原则 …… head style type=“text/css” #content { text-align:left; } .title { text-align: center; } /style /head body div id=“content” p class=“title”敬业 博学 求实 创新/p /div /body …… 例： 四、CSS 选择器 4. 后代选择器（ Descendant Selectors ） selector1 selector2 { property: value } 说明：选择所有被 selector1 包含的 selector2。 例： #content p { text-indent: 2em; } 四、CSS 选择器 5. 类选择器（ Class Selectors ） .className { property: value; } 使用类选择器需要两个步骤： 标识类； 定义类。 四、CSS 选择器 5. 类选择器（ Class Selectors ） 例： head title散文诗 /title /head body h2《秋夜》/h2 p鲁迅/p p在我的后园，可以看见墙外有两株树，……/p /body h2 class=“center”《秋夜》/h2 p鲁迅/p h2 class=“center”《秋夜》/h2 p class=“center” 鲁迅/p style type=text/css .center { text-align: center; } /style /head body h2 class=“center”《秋夜》/h2 p class=“center” 鲁迅/p p在我的后园，可以看见墙外有两株树，……/p /body style type=text/css .center { text-align: center; } h2.center { color: #0000FF; } /style /head body h2 class=“center”《秋夜》/h2 p class=“center” 鲁迅/p p在我的后园，可以看见墙外有两株树，……/p /body 四、CSS 选择器 7. 伪类（ Pseudo-Classes Selectors ） selector : pseudo-class { property: value } 例： a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #FF0000; text-decoration: underline; } a:active { color: #FF0000; text-decoration: underline; } 注意：一定要按照 link，visited，hover，actived 的顺序书写。 四、CSS 选择器 6. 群选择器（ Group Selectors ） selector1，selector2，selector3 { property: value; } 说明：当多个选择符设置相同样式时，可以将选择符合并为一组。 例： h2, h3 { margin: 1em 0; } td, th { border: solid 1px #000000; padding: 5px; } 小结： CSS 常用选择器的类型： 通配选择器（*） 类型选择器（ body p li h1 h2 h3 ） ID 选择器（ #header #navigation #maincontent ） 后代选择器（ #header p #navigation ul #footer p ） 类选择器（ .center .fltrt ） 伪类（ a:link a:visited a:hover a:active ） 群选择器（ p, li p, h2, h3 ） 五、CSS 的继承性 继承性是指：如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素。 常用的具有继承性的属性： font-family font-size font-style line-height