韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
你好，北京!
非常重要的新闻
[mycss9.css]选择器
/*.style1就是类选择器*/ .style1{
font-weight: bold; font-size:20px;
background-color: pink; color:black; }
#special_new{
font-style: italic; color:red; }
/*#style2就是ID选择器*/ #style2{
font-size: 30px;
background-color: silver; color:black;
注：笔记中所有示例，均通过测试!
31 / 199
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
}
/*父子选择器*/ #style2 span{
font-style:italic; color:red; }
/*html的选择器*/ body{
color:orange; }
/*使用通配符选择器，对外边距和内边距清零*/ *{
margin: 0; padding: 0; }
------------------------------------------------------------------------------- 选择器深入探讨
3、一个元素最多有一个id选择器，但是可以有多个类选择器 注意：当一个元素被多个类选择器修饰时，它们用空格隔开
[css10.html] 一个id选择器与多个类选择器同时使用示例
你好，北京!
32 / 199
注：笔记中所有示例，均通过测试!
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
非常重要的新闻
[mycss10.css]选择器
/*.style1就是类选择器*/ .style1{
font-weight: bold; font-size:20px;
background-color: pink; color:black; }
.style2{
font-style:italic;
text-decoration:underline; }
#special_new{
font-style: italic; color:red; }
/*#style2就是ID选择器*/ #style2{
font-size: 30px;
background-color: silver; color:black; }
/*父子选择器*/ #style2 span{
font-style:italic; color:red; }
/*html的选择器*/ body{
color:orange; }
注：笔记中所有示例，均通过测试!
33 / 199
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
/*使用通配符选择器，对外边距和内边距清零*/ *{
margin: 0; padding: 0; }
特别注意：
1、在引用多个类class选择器的时候，用空格隔开； 2、多个类选择器在同一个html标签上使用时，如发生冲突会以在css文件中类选择器的先后顺序来指定，写在后面的会被系统认定为可使用的。而不是在html文件引入选择器的顺序为使用准则。
选择器深入探讨
4、当一个元素被id选择器、类选择器、html选择器同时限定时，优先级是： id选择器>类选择器>html选择器>通配符选择器
选择器深入探讨
5、在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。 案例说明： 案例：my.css /*招生广告*/ .ad_stu{
width: 136px; height: 196px;
background-color: #FC7E8C; margin: 5px 0 0 5px; float: left; }
/*广告2*/ .ad_2{
backgroud: #7CF574; height: 196px; width: 457px; float: left;
margin: 5px 0 0 6px; }
/*房地产广告*/ .ad_house{
background:#7CF574; height: 196px; width: 152px;
34 / 199
注：笔记中所有示例，均通过测试!
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
float: left;
margin: 5px 0 0 6px; }
在有些css中，我们可以把多个类class选择器或id选择器或html选择器中共同的部分提取出来，定在一起，这样可以简化css文件，从而达到减少带宽的目地。
上面的my.css文件可以写成： 案例：my.css /*招生广告*/ .ad_stu{
width: 136px;
background-color: #FC7E8C; margin: 5px 0 0 5px; }
/*广告2*/ .ad_2{
background: #7CF574; width: 457px;
margin: 5px 0 0 6px; }
/*房地产广告*/ .ad_house{
background: #7CF574; width: 152px;
margin: 5px 0 0 6px; }
.ad_stu,.ad_2,.ad_house{ height: 196px; float: left; }
注意：将共同的部分以用原类选择器名或原id选择器名或html选择器名以,(逗)号隔开,将共同部分写在{}中，即可达到通用的目地。
35 / 199
注：笔记中所有示例，均通过测试!