通配符选择器
如果希望所有的元素都符合某一种样式，可以使用通配符选择器。
* {margin： 0;padding： 0}
*(表示所有的元素)
可以让所有html元素的外边框和内边距都默认为0，有时特别有用。
不同的浏览器对不同的左边距和上边距的指定大小是不一样的
一般网页设计师把被内边距和上边距清零，这样就可以避免不同浏览器因边距不同导致打开网页后布局混乱。
这样我们就可以通配符
Margin外边距：定义元素周围的空间。
Padding内边距：元素边框与元素内容之间的空白。
css11-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css11-1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="./css11-1.css">
</head>
<body>
<p>北京，你好！</p>
<span class="style1" id="special_new">新闻1</span>
<span class="style1" >新闻2</span>
<span class="style1 style4">新闻3</span>
<span class="style1" >新闻4</span>
<span class="style1" >新闻5</span><br/><br/>
<span id="style2" >这是一则<span>非常重要</span>的新闻</span>
</body>
</html>
css11-1.css
/*style1是 类选择器*/
.style1 {
font-weight: bold;
font-size: 20px;
background-color:pink;
color:black;
}
/*style2是 id选择器 id 属性只能在每个 HTML 文档中出现一次*/
#style2 {
font-size:30px;
background-color:silver;
color:black;
}
#special_new {
font-style:italic;
color:red;
}
.style4 {
font-style:italic;
text-decoration: underline;
}
/*父子选择器*/
#style2 span{
font-style:italic;
color:red;
}
/*html选择器（CSS 属性选择器） 选择器的名字必须为html元素的名称 */
body {
color:orange;
}
/*使用通配符选择器，对外边距和内边距清0, 也可以明确指定*/
* {
/*margin:0px;*/
/*方法一
margin-top: 10px;
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
*/
/*方法二： 上 右 下 左*/
/*如果margin给出四个值则表示 上 右 下 左
如果给出三个值：上-左右-下 （第二个值用于左右）
*/
margin:0px 0px 0px 0px;
/*padding 的规范和margin一样*/
padding :0px;
}
显示效果：
通配符选择器：
/*使用通配符选择器，对外边距和内边距清0, 也可明确指定*/
*{
/*margin:0px;*/
/*方法一
margin-top: 10px;
margin-left:10px;
margin-right:0px;
margin-bottom:0px;
*/
/*方法二： 上 右 下 左*/
/*如果margin给出四个值则表示 上 右 下 左
如果给出三个值：上-左右-下
*/
margin:10px 0px 0px 10px;
/*padding 的规范和margin一样*/
padding :0px;
}
①父子选择器
需求：
<span id="style2">这是一则<span>非常重要</span>的新闻</span></br>
My.css添加一个父子选择器
/*父子选择器*/
#style2 span{
font-style:italic;
color:red;
}
注意：
①子选择器标签是html可以识别的标记
②父子选择器可以有多级
③父子选择器可以适用 类选择器，id选择器。
希望新闻三 下划线，同时斜体
一个元素可以用id和class选择器同时修饰。
元素修饰不冲突时会相安无事，发生冲突时以id选择器为准。
新闻一变为斜体，红色
<span class="style1" id="special_news">新闻一</span>
#special_new {
font-style:italic;
color:red;
}
希望新闻三 下划线，同时斜体
思路：
（1）可以给新闻三配置id选择器
（2）再指定一个class类选择器选择器
一个元素可以同时有class类选择器、id选择器来修饰如果发生冲突时以id选择器的优先级大于class类选择器
一个元素最多只可以有一个id选择器，但是可以有多个类选择器
<span class="style1 style4">新闻三</span>
My.css:
.style4{
font-style:italic;
text-decoration: underline;
}
Html中如何使用class选择器：
①在引用多个 class选择器的时候，用空格隔开
②当class选择器发生冲突时，以在css文件中最后出现的class选择器样式为准。
总结：
当一个元素被 id选择器，类选择器，html选择器，通配符选择器同时限定时，优先级是：
id选择器 > 类选择器 > html选择器 >通配符选择
在css文件中，如果有多个类/id选择器他们都有相同的部分，我们可以把相同的css样式放在一起。
案例说明：
案例：my.css
/*招生广告*/
.ad_stu{
Width:136px;
Height:136px;
Background-color:#FC7E8C;
Margin:5px 0 0 5px;
Float: left;
}
/*广告二*/
.ad_2{
Background-color:#7F574;
Height:196px;
Width:457px;
Float: left;
Margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
Background-color:#7CF574;
Width:152px;
Height:196px;
Margin:5px 0 0 6px;
Float: left;
}
在有些css中我们可以多个class选择器或者id选择器，html选择器，共同的部分提出，这样的好处，可以简化css文件。
上面的my.css文件可以写成：
案例：my.css
/*招生广告*/
.ad_stu{
Width : 136px;
Background-color: #FC7E8C;
Margin :5px 0 0 5px;
}
/*广告二*/
.ad_2{
Background-color:#7CF574;
Width:457px;
Margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
Background-color:#7CF574;
Width:152px;
Margin:5px 0 0 6px;
}
.ad_stu, .ad_2, ad_house{
Height: 196px;
Float: left;
}