选择器分组

在原来的基础上我们想将下面 html 文件中的文件都设置成一样的颜色,我们可以这么干: html:

<h1>php中文网</h1>
<h2>php中文网</h2>
<h3>php中文网</h3>
<h4>php中文网</h4>

css:

h1{
  color: cadetblue;
}
h2{
    color: cadetblue;
}
h3{
    color: cadetblue;
}
h4{
    color: cadetblue;
}

这样就是下面的效果图:

QQ截图20161011173832.png

但是我们一般会这样写 css:

h1,h2,h3,h4{
  color: cadetblue;
}

效果是一样的,完全没有变化:

QQ截图20161011173832.png

这样是不是减少了不少代码,这就叫做选择器的分组. 下面我们要补充的知识就是通配符*. 要想达到与前面相同的效果,还有一种方式就是,用通配符.

*{  color: cadetblue;
}

这样一来的话,如果没有特定元素的设置,都会发生颜色的转换.下面有同学就要提问了,要是我们不想全一样,其中有几个采用别的设置呢.

解决这个问题我们就只需要进行覆盖就好.如果我们想让最后一个标题变成黑灰色,那么在后面加上下面这句就好:

h4{    color: darkslategray;
}

这样的话,我们就能看见下面的效果:

QQ截图20161011174340.png

但是一般我们使用通配符的时候就是设置整个页面的那边据和外边距.就像这样

*{
    padding: 0px;
    margin: 0px;
}

继续学习

新建文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Title</title> </head> <body> <h1>php中文网</h1> <h2>php中文网</h2> <h3>php中文网</h3> <h4>php中文网</h4> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠