Head First HTML与CSS
第七章 CSS入门
CSS——掌控页面的表现
CSS结构简介
CSS包含一些简单的语句，称为规则。每个规则为选择的一些HTML元素提供样式。典型的规则包括一个选择器，以及一个或多个属性或值。如：
p {
background-color:red;
}
h1 {
font-family:sans-serif;
color:gray;
}
例子中的p和h1称为选择器，也就是选择的元素名（注意！没有左右尖括号），花括号中的内容为选择器所选择的元素将会应用的属性和对应值。每个属性声明以一个分号作为结束，所有属性和值都放在大括号中。选择器的元素名可以任意指定。
那么，能不能将一个花括号中的规则同时应用到多个元素呢？可以。
通过使用逗号分隔元素名可以实现一次选择多个元素，如：
p,h1 {
color:blue;
}
CSS 添加方法
1.通过在<head></head>元素内部，<meta>和<title>元素之后加入<style>元素来添加CSS规则。
这是应用样式最容易的方法。但不适用于复杂的网站。如：
<head>
<meta charset="utf8">
<title>Head first</title>
<style>
h1 {
border-bottom:1px solid black;
}
p {
color:maroon;
}
</style>
</head>
2.通过在<head></head>元素内部，<meta>和<title>元素之后加入<link>元素，利用type属性链接到外部样式表（CSS文件），使用相应样式表内的CSS规则。
这是目前流行的常规做法。
<head>
<meta charset="utf8">
<title>Head first</title>
<link type="text/css" rel="stylesheet" href="headfirst.css">
</head>
继承
1.很多属性都能继承。例如，如果为<body>元素设置了一个可继承的属性，那么<body>的所有子元素（包括子元素的子元素，以此类推）都会继承这个属性。
2.通过为你想改变的元素创建一个更“特定”的规则，能覆盖该元素继承的属性。也就是说，如果同一个元素通过一个或多个途径被赋予了多个值，将会获得最“特定”的那一个值。
类
可以使用class属性将元素添加到一个类，如：
<p class="greentea">xxxxx
</p>
这样，这部分p元素（并非所有p元素）就属于“greentea”类了，就会受到“greentea”类规则的影响。
而类的CSS选择器如何写呢？如下：
p.greentea{color:green;}——选择greentea类中的p元素
.greentea{color:green;}——选择greentea类中的所有元素
一个选择器可以选择多个类/元素，那么，一个元素可不可以属于多个类呢？
答案是可以的，通过在class属性中放入多个类名，可以指定一个元素属于多个类，类名之间用空格分隔。如下：
<p class="greentea bluetea blacktea">xxxxxx
</p>
如果有多个选择器选择一个元素怎么办？
按照特定程度最高的来。
如：
p {color:blue;}——这个规则会选择所有原来的p元素
.greentea {color:blue;}——这个规则只会选择属于greentea类的元素
p.greentea {color:blue;}——这个规则只会选择属于greentea类的p元素
p.bluetea{color:blue;}——这个规则只会选择属于bluetea类的p元素
p.blacktea {color:blue;}——这个规则只会选择属于blacktea类的p元素
那么，我们说第二个规则比第一个更“特定”
后三个规则比第二个更“特定”
后三个规则的特定程度是相同的。
那么，如果有多个特定程度相同的规则应用于同一元素，该如何选择？
这时需要利用样式表文件中规则的顺序来解决问题。
会使用CSS文件中最后列出的规则（最靠后的）。
如果上述五个为CSS文件中的顺序，某个p元素同时属于以上三类，那么该p元素会应用p.blacktea中的规则。
如何检查某个元素是否有某项属性被赋值？
1.首先，看CSS中有没有某个选择器选择该元素。
如果有，而且选择器中有规定该属性和对应的值，那么这就是这个元素的该属性值。
2.如果没有与元素匹配的选择器，属性值就要依赖于继承。
查看该元素的父元素、以及父元素的父元素，以此类推，直到找到所定义的属性。
如果找到了，这就是你要的值。
3.如果都没有，会使用浏览器的默认值。
第一篇笔记，分享给大家，共同学习，谢谢！
网友评论