CSS基础知识(用例子来讲解).ppt

小结： 在网页上应用CSS的三种方法： 行内样式 （Inline Styles） 内部样式表（Embedding a Style Block） 外部样式表（Linking to a Style Sheet） 内部样式表优于行内样式。 外部样式表优于内部样式表。 CSS 样式由“选择器”和“声明”组成。 声明由“属性”和“属性值”组成。 每条声明之间用“;” 分隔。 三、CSS 基本语法 selectors { property: value; } 选择器 属性 属性值 声明 四、CSS 选择器 CSS 常用选择器的类型： 通配选择器 类型选择器 类选择器 ID 选择器 后代选择器 伪类 群选择器 四、CSS 选择器 1. 通配选择器（ Universal Selector ） * { property: value; } 例： * { padding: 0; margin: 0; } 四、CSS 选择器 2. 类型选择器（ Type Selectors ） Tag { property: value; } 例： body { font: 0.75em/1.5 宋体; background: #E0E0E0 url(images/bg.gif); } h1 { font-size: 180%; margin: 1em 0; } p { margin: 1em 0; } 四、CSS 选择器 3. ID 选择器（ ID Selectors ） ＃ID { property: value; } 例： #container { width: 760px; margin: auto; } #header { height: 120px; background: url(images/bg_header.gif) no-repeat; } #content { padding: 30px; } 四、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 选择器 4. 后代选择器（ Descendant Selectors ） selector1 selector2 { property: value } 说明：选择所有被 selector1 包含的 selector2。 例： #content p { text-indent: 2em; } 四、CSS 选择器 4. 子选择器 selector1selector2 { property: value } 说明：选择selector1的第一代元素selector2。 例： .foodli { text-indent: 2em; } 四、CSS 选择器 7. 伪类（ Pseudo-Classes Selectors ） selector : pseudo-class { property: value } 例： a:link { color: #000000; text-decoration: none