引入与分类
参考:样式与link标签。如
<head>
<title>test---html</title>
<meta charset="utf-8" />
<!--引入外部样式表,定义了p标签的样式-->
<link rel="stylesheet" type="text/css" href="./test.css">
<style type="text/css">
span{font-size: 50px;color: green}
</style>
</head>
<body>
<p>这是外部样式表</p>
<span>这是内部样式表</span>
<p style="font-size:60px;color:blue">这是内联样式</p>
</body>
在上面的代码中,通过三种方式分别引进了样式。通过link引进的称为外部样式表,通过<style>标签声明的称为内部样式表,直接在标签内部通过style属性声明的称为内联样式。这三咱样式的优先级依次增大,即:内联样式会覆盖内部样式表,内部样式表会覆盖掉外部样式表,外部样式表会覆盖掉浏览器自带的默认样式表。
不同的css之间可以通过@import url()的形式导入。如@import url(test1.css);
语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。其中选择器指的就是要改变样式的html标签,声明就是要改变的属性和该属性的值。每一条声明都是用冒号进行赋值,不同的声明之间需要用分号分隔开(虽然最后一条声明不需要加上分号,但最好还是加上),并且将所有的声明用一个{}括起来。如
声明
声明的值是不需要加引号的,但如果声明的某个值由多个单词组成,就需要给这个值加上引号。如果声明的值是多个,这些值之间用逗号隔开。如
p{font-size: 40px;
</span>color: red;
/*由两个值构成,中间用逗号隔开;第二个值由多个单词组成,所以用引号引起来*/
font-family: Times,"Times New Roman";
}
在上面的样式中,最后一条声明的值是多个,中间使用逗号进行分隔;并且第二个值是由多个单词组成的,所以需要使用引号。
声明也是可以分组的,如上面的p标签,完成可以拆分成三个样式(一个样式中只有一条声明)。注意,对声明分组,一定要在各个声明的最后使用分号。
选择器
选择器就是要改变样式的html标签。
元素选择器
就是以html的标签做为选择器。它会匹配该文档该标签的所有实例 。因此,也可以为xml文档中的标签设置样式。如
<style type="text/css">
test{color:yellow;}
</style>
<body>
<test>imyaxml</test>
</body>
分组
可以将选择器进行分组,这样多个选择器可以使用同一条声明,只需要将不同的选择器用逗号分开即可。如
h1,h2,h3,h4,h5,h6 {
color: green;
}
在分组选择器中有一类很特殊的选择器:通配符选择器。该选择器可以与文档中的任何元素匹配。这个选择器等同于列出文档中所有的标签的一个分组选择器,并用*代表所有的标签。如
* {color:red;}
继承
在css规则中,子标签从父标签继承属性,如果子标签不想使用父标签的样式,那么需要给子标签重新添加样式。如
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
类选择器
基础
<head>
<title>test---html</title>
<meta charset="utf-8" />
<style type="text/css">
.test{font-size: 50px;color: rgb(180,23,78);}
</style>
</head>
<body>
<p class="test">imyaxml</p>
<p>mfdafa</p>
</body>
结合元素选择器
多类选择器
id选择器
属性选择器
简单选择
<style type="text/css">
img[alt]{border: 5px solid red;}
</style>
</head>
<body>
<img src="./bg.png" alt="test"/><img src="./bg.png" />
</body>
该选择器只对第一个img标签有用,对第二个无效。因为第二个img标签并没有设置alt属性。如果想根据多个标签进行选择,只需要在后面跟上别的属性即可。如img[alt][width],这个选择器不会选择只定义了alt属性的标签。
根据属性值选择
<style type="text/css">
img[alt="test---html"]{border: 5px solid red;}
</style>
</head>
<body>
<img src="./bg.png" alt="test---html" />
<img src="./bg.png" alt="test--html">
</body>
上面的选择器只对第一个img标签有用,对第二个无效,因为第二个img标签的alt属性值不是test---html不满足属性选择器。
部分属性值选择
<style type="text/css">
img[class~="test"]{border: 5px solid red;}
</style>
</head>
<body>
<img src="./bg.png" class="test demo ha" />
<img src="./bg.png" class="demo" />
</body>
上述选择器会作用于第一个标签,不会作用于第二个标签。因为第一个标签的class属性值含有test词,而第二个没有。
匹配规则
第三种指的是:属性值列表中必须包含有指定的value,而不是包含以value开头的词。如
<style type="text/css">
h1[alt~="normal"]{color: red;font-size: 60px}
</style>
</head>
<body>
<h1 alt="normal fadf">span下的em标签</h1>
<h1 alt="normal1 fadf">span下的em标签</h1>
这个属性选择器可以选择第一个,但不能选择第二个。因为第二个h1标签的alt属性值并不包含normal单词。
第四个只会匹配以value-开头的属性值(将属性值当作整个单词)或者属性值为value的标签。如
<style type="text/css">
h1[alt|="normal"]{color: red;font-size: 60px}
</style>
</head>
<body>
<h1 alt="normal- demo">span下的em标签</h1>
<h1 alt="normal">fdaf</h1>
<h1 alt="normala">span下的em标签</h1>
</body>
上述的选择器只会匹配前两个标签,不会匹配最后一个标签。
其中后三者可按如下理解
不管属性值是词列表还是单个单词,前后是否有空格,在^$*时,都按一整个单词(空格也算)匹配。如[class^="test"]是可以匹配class属性值为"test- demo ---haha"的标签的,但无法匹配" test"标签。
后代选择器
将父标签与后代标签通过空格连接组成的选择器。具体可以理解为:在父标签下的某个后代标签才会被选择,否则不会被选择。如h1 em{color:red;}只会作用于h1标签下的em标签,并不会作用于p标签下的em标签。
后代标签与父标签的层级间隔可以无限。
可以和其它选择器结合使用,如
h1[alt^="normal"] em{color: red;}
它表示alt属性值以normal开头的h1标签下的em标签才会被选中,其余的都不会被选中。
子元素选择器
类似于后代选择器,但子元素选择器只能选择做为某标签子标签的标签,并且用>进行连接。如
h1>em{color: red;}
它表示做为h1的子标签的em标签才会被选中。
相邻兄弟选择器
两标签具有相同的父标签,并且两标签相邻,且标签出现的顺序和样式中定义的顺序一致,第二个标签才会被选中。如
p + h1 {margin-top:50px;}
它会作用于<p>This is paragraph.</p>
<h1>This is a heading.</h1>
但如果将样式改写成h1+p,那么不会作用于下面的代码。
伪类选择器
所谓的伪类就是一个状态,比如鼠标悬停,已点击过等。类似于android中的selector。格式为
selector : pseudo-class {property: value}
常用的伪类如下:
最常用的就是:hover,鼠标悬停时的状态。如:
h1:hover{color: red;font-size: 60px}
active:鼠标点上去尚未放开时的状态,该状态一般不写。hover:鼠标放上去,但未点击时的状态;visited:已经访问过的状态。写这几种状态时,一定要按lvha顺序进行操作,其中a:link可以简写成a。
优先级
总体来说,谁的范围越精确,最后的结果就按哪个选择器进行。因此,类选择器比元素选择器的优先级高,即使元素选择器是后代选择器,兄弟选择器,子元素选择器。而属性选择器又比类选择器优先级高,但id选择器比属性选择器优先级高(因为id是唯一的,而属性可以不唯一)。如果说
关系如下:
元素选择器 < 类选择器 < 属性选择器 < id选择器