韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
在html文件中如果要引用id选择器，则<元素 id=\选择器名称\内容
------------------------------------------------------------------------------- html选择器 基本语法： html元素名称{ 属性名:属性值; }
[css5.html]html选择器示例
你好，北京!
[mycss5.css]html选择器 /*.style1就是类选择器*/ .style1{
font-weight: bold; font-size:20px;
background-color: pink; color:black;
注：笔记中所有示例，均通过测试!
26 / 199
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
}
/*#style2就是ID选择器*/ #style2{
font-size: 30px;
background-color: silver; color:black; }
/*html的选择器*/ body{
color:orange; }
------------------------------------------------------------------------------- [css6.html]html选择器综合示例
[mycss6.css]html选择器 a:link{
color:black;
text-decoration: none; }
a:hover {
text-decoration: underline; }
a:visited { color:blue; }
27 / 199
注：笔记中所有示例，均通过测试!
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
------------------------------------------------------------------------------- 通配符选择器
如果希望所有的元素都符合某一种样式，可以使用通配符选择器 *{
margin:0;padding:0 }
可以让所有html元素的外边距和内边距都默认为0，有时特别有用。
[css7.html]通配符选择器示例
[mycss7.css]通配符选择器 /*.style1就是类选择器*/ .style1{
font-weight: bold; font-size:20px;
background-color: pink; }
/*#style2就是ID选择器*/ #style2{
font-size: 30px;
注：笔记中所有示例，均通过测试!
28 / 199
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
background-color: silver; }
/*使用通配符选择器，对外边距和内边距清零*/ *{
/*margin: 0;*/
margin:10px 0px 0px 10px;/*上、右、下、左*/ /*margin:10px 0px 0px /*上下、右、左*/*/
padding: 0; /*padding规范和margin规范是一样的*/ }
------------------------------------------------------------------------------- 选择器深入探讨 1、父子选择器
[css8.html]父子选择器示例
你好，北京!
非常重要的新闻
[css8.css]父子选择器 /*.style1就是类选择器*/
29 / 199
注：笔记中所有示例，均通过测试!
韩顺平J2EE视频教程第二版
《轻松搞定网页设计html+css+javascript》全42讲笔记
.style1{
font-weight: bold; font-size:20px;
background-color: pink; color:black; }
/*#style2就是ID选择器*/ #style2{
font-size: 30px;
background-color: silver; color:black; }
/*父子选择器*/ #style2 span{
font-style:italic; color:red; }
/*html的选择器*/ body{
color:orange; }
/*使用通配符选择器，对外边距和内边距清零*/ *{
margin: 0; padding: 0; }
注意：
1、子选择器标签是html可以识别的标签； 2、父子选择器可以有多层级；
3、父子选择器适用于id选择器和类(class)选择器。
------------------------------------------------------------------------------- 选择器深入探讨
2、一个元素可以同时有id选择器和类选择器 要考虑优先级：id大于类选择器
[css9.html]id与类选择器复用示例
30 / 199
注：笔记中所有示例，均通过测试!