HTML和CSS学习笔记第7章——开始学习CSS

返回主目录

CSS格式

选择符[, 其他选择符[, ...]]{
	属性 : 值 ;
}

子孙选择符中间用空格隔开，但总体仍只算一个选择符。

子孙选择符

当我们只希望块元素A里面的某个元素B改变颜色，但是块元素A以外的与B同种元素不改变，那么我们可以使用子孙选择符精准地控制。

div h2{
	color:black;
}
或者
#A的id号 h2{
	color:black;
}

需要注意的是，子孙选择符强调子孙，也就是说不管选中的B类元素在A中嵌套多深，都是A的子孙，都会被该规则改变样式。如果想要选择直接孩子，可以采用

#A的id > h2{
	color:black;
}

倘若想要精准选择A中的子孙的某个直接孩子，可以采用

#A的id 元素名 h2{
	color:black;
}

CSS允许重复规则。 例如

h1, h2{
	font-family: sans-serif;
	color:		 gray;
}
h1{
	border-bottom:black;
}

css使用/*、*/注释符。

CSS的继承

包含与被包含元素具备继承属性。 例如<em>、<q>被包含在<p>中，其样式会被<p>的样式影响。

但块元素的样式不会影响到内部块元素。 准确来说，当块元素的样式遇到另一个块元素时，就会失效，但内联元素不会。就像下面的例子,<a>并不会使<p>的样式失效，但<blockquote>会：

<style>
    p{
        color:blue;
    }
    
</style>
<p>
    this is a sample of <q>引用</q>.<br />
    <a href="test2/test2.html"
   title="进入test2网页"
   target="_blank"
   >点击这里访问test2</a><br/>
    this is a normal text.
    <blockquote>
        this is the first text in blockquote.<br />
        this is the second text in blockquote.<br />
        this is a try to put a <q>short quote</q> in blockquote.
    </blockquote>
    this is a normal text.
    
</p>

但如果单独再为被包含元素设定样式，则会覆盖掉继承样式。就像面向对象编程语言一样。

多网页使用同一样式

1. 将样式保存为一个css文件，文件内只需包含<style>中的内容，而不需写上<style>，因为这不是HTML文件。
2. 添加<link>到html文件。

<link type="text/css" rel="stylesheet" href="css文件名" />

使用类为同一元素分配不同的样式

p.green{
    color:green;
}

<p>this is a text</p>
<p class="green">this is a text</p>

效果：

如果想让某一类的所有元素都具有该性质，则可在css中

.green{
	color:green;
}

一个元素可以加入多个类，类名放在同一个双引号内，用空格隔开：

<p class="green blue red">this is a text</p>

问：倘若有一个元素属于多个类，同时这些类中对某个属性比如color有定义，那么该元素会遵循哪一个呢？
首先我们要确定选择符的具体性
以下语句的具体性依次增强：

p{color:black;}	/*所有<p>*/
.green{color:green;}/*所有绿色类*/
p.blue{color:blue;}/*所有绿色类的<p>*/

问： 倘若出现属于多个相等具体性的属性怎么办？
浏览器会选择最后出现的那个类。比如下面这条语句最后的结果就会显示red类的规则。

<p class="green blue red">this is a text</p>

CSS校准器

http://jigsaw.w3.org/css-validator/