CSS - 选择器和属性 ¶

CSS要通过选择器这个东西来找到HTML标签进行"装扮"一番,之前的代码

body{
	background-color:red;
}

很明显,开头有body这个词,其实就是要对body这个标签上装扮,我们以后叫做"上样式"或者"样式渲染"之类的吧

然后用一对花括号,里面包一些你没学过的代码进行body的样式渲染,而body这部分就是选择器

比如body里面有这样的HTML标签结构:

<body>
	<p>段落文字....</p>
	<a href="http://www.kkh86.com">KK的小故事</a>
</body>

那么我们试下用这样的CSS选择器来让段落文字变成蓝色,让链接变成红色吧:

p{
	color:blue;
}

a{
	color:red;
}

这里花括号前面的p和a也是选择器,反正在花括号前面的都是选择器,后面专门教你一些选择器.

另外,花括号里面包住的color:blue;这个是样式属性,其中color是样式属性的名称(用于定义文字颜色),blue是属性的值,样式样属和值之间用:号隔开,后面再加一个分号作为结束

属性可以有多个,比如

p{
	color:blue;
	font-size:18px;
}

这里就是加多了个font-size属性了,这个属性用于定义字体大小,用上这个属性后你可以看到文字放大了一些是吧

而属性的书写是比较随便的,可以不缩进,也可以写在一行

p{color:blue;font-size:18px;}

这样写都可以的,这样你终于知道为什么在属性后面要有个;号了吧?因为如果没有分号隔开的话,就会地变成

p{color:bluefont-size:18px;}

那浏览器怎么识别blue跟font是两个词呀?人家还以为bluefont就是color的值呢!所以总得需要一些符号把N个属性隔开的.规范的书写中,我们一般将每个属性都在;号后面加个空格隔开这样看着整洁点,比如 p{color:blue; font-size:18px;}

多个选择器共用样式 ¶

如果你想a标签和p标签都用红色字,只要这样写就可以

<style type="text/css">
p,a{color:red;}
</style>

用逗号隔开两个选择器写在一行就可以了

CSS代码就是由选择器和属性组成的,接下来都是学习各种选择器和样式属性,然后让网页漂亮起来!

在CSS中也可以写注释,书写格式是 /*注释内容*/,就是用/*和*/分别放在一左一右,包住中间的内容就是注释内容,比如:

body{
	/*background-color:red;注释掉这个样式,暂时不要染成红色*/
	height:400px; /*只要留下高度*/
}

注释可以写在任何地方,但是你这样写是不对的:

body{
	/*background-color:red;注释掉这个样式,暂时不要染成红色*/
	width:600px;
	height:400px; /*只要留下高度
}*/

这样的话你把下面的一半花括号都注释掉了,那要被浏览器解释的内容就不见了一半花括号啦,就会解释不成功