CSS的选择器(元素名选择器,id选择器和类选择器)
CSS中文名称是级联样式表,它的功能是改变HTML元素的外观,比如颜色,尺寸,位置,字体字号等。
CSS的基本规则格式如下:
在CSS规则中首先要选中待改变外观的HTML元素,这里我们选中了网页中所有h1元素。
CSS提供了很多不同的选中元素的方法,这些方法统称为选择器(selector)。在上面的例子中直接使用元素名来选中元素,这种选择器叫作元素名选择器。
选择器后面是对元素外观属性值做的改变,这些改变都要写在花括号里。
像上面的例子我们把color属性值设为blue,我们把字号(font-size)属性值设为12px(12个像素)。
注意不同属性值之间要用分号间隔。
<html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html>
上面的代码中通过<style>标签来加入CSS规则(注意:所有CSS规则必须写在<style>标签里面)。
CSS规则中把所有<p>元素的颜色(color)设为红色,把所有<p>元素里面的对齐属性(text-align)设为居中对齐。
在CSS中如果一次想选中多个不同的元素,可以在各个元素名选择器间加上逗号来间隔,例子如下,同时把<h1>,<h2>和<p>这三个元素选中后改变它们的颜色和对齐方式。
<html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
有的时候我们并不想把网页中所有的<p>元素都居中对齐并变成红色,而是想把某个<p>元素变成居中对齐并标红,这时我们就要
用到ID选择器,即通过在元素的id值前面加一个#号,例子如下:
<html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
在上面的例子中,我们给第一个<p>元素的id属性设置为"para1",在使用ID选择器选中该<p>元素时只需要在"para1"前加上一个"#"号即可。
需要注意的的是:和人的身份证号一样,网页中每个元素的id都不能相同,那么如果网页中有4个<p>元素,
我们想选中第一个和第四个,不想选第二个和第三个该怎么做呢。当然,可以给第一个和第四个各自设置一个id,然后用id选择器来选中它们。
一个更简单的办法是使用类选择器,例子如下,我们把第一个和第四个<p>元素的class属性值都设为"center", 然后我们在<style>里面通过将center前面加一个点"."来选中这两个<p>元素。
<html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <p class="center">Red and center-aligned heading</p> <p >Red and center-aligned heading</p> <p >Red and center-aligned heading</p> <p class="center">Red and center-aligned paragraph.</p> </body> </html>
我们已经学过了三个选择器,即元素名选择器,id选择器和类选择器。这三个选择器可以级联起来使用,这也是css被叫作级联样式表的原因之一。
例子如下,虽然<h1>和<p>元素的class属性都是"center",但我们在.center这个类选择器前面加上了一个p,这说明我们只想选中元素名是<p>且class值为center的元素。
<html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body> </html>