Head First HTML與CSS
第七章 CSS入門
CSS——掌控頁面的表現(xiàn)
CSS結(jié)構(gòu)簡介
CSS包含一些簡單的語句苔巨，稱為規(guī)則。每個規(guī)則為選擇的一些HTML元素提供樣式秃嗜。典型的規(guī)則包括一個選擇器，以及一個或多個屬性或值。如：
p???? {
??????????????? background-color:red;
}
h1??????? {
??????????????? font-family:sans-serif;
??????????????? color:gray;
}
例子中的p和h1稱為選擇器王凑，也就是選擇的元素名（注意兰绣！沒有左右尖括號）世分，花括號中的內(nèi)容為選擇器所選擇的元素將會應(yīng)用的屬性和對應(yīng)值。每個屬性聲明以一個分號作為結(jié)束缀辩，所有屬性和值都放在大括號中臭埋。選擇器的元素名可以任意指定。
那么臀玄，能不能將一個花括號中的規(guī)則同時(shí)應(yīng)用到多個元素呢瓢阴？可以。
通過使用逗號分隔元素名可以實(shí)現(xiàn)一次選擇多個元素健无，如：
p,h1???????? {
??????? color:blue;
}
CSS 添加方法
1.通過在<head></head>元素內(nèi)部荣恐，<meta>和<title>元素之后加入<style>元素來添加CSS規(guī)則。
這是應(yīng)用樣式最容易的方法累贤。但不適用于復(fù)雜的網(wǎng)站叠穆。如：
<head>
<meta charset="utf8">
<title>Head first</title>
<style>
h1 {
border-bottom:1px solid black;
}
p {
color:maroon;
}
</style>
</head>
2.通過在<head></head>元素內(nèi)部，<meta>和<title>元素之后加入<link>元素臼膏，利用type屬性鏈接到外部樣式表（CSS文件）硼被，使用相應(yīng)樣式表內(nèi)的CSS規(guī)則。
這是目前流行的常規(guī)做法渗磅。
<head>
<meta charset="utf8">
<title>Head first</title>
<link type="text/css" rel="stylesheet" href="headfirst.css">
</head>
繼承
1.很多屬性都能繼承嚷硫。例如，如果為<body>元素設(shè)置了一個可繼承的屬性始鱼，那么<body>的所有子元素（包括子元素的子元素论巍，以此類推）都會繼承這個屬性。
2.通過為你想改變的元素創(chuàng)建一個更“特定”的規(guī)則风响，能覆蓋該元素繼承的屬性嘉汰。也就是說，如果同一個元素通過一個或多個途徑被賦予了多個值状勤，將會獲得最“特定”的那一個值鞋怀。
類
可以使用class屬性將元素添加到一個類双泪，如：
<p class="greentea">xxxxx
</p>
這樣，這部分p元素（并非所有p元素）就屬于“greentea”類了密似，就會受到“greentea”類規(guī)則的影響焙矛。
而類的CSS選擇器如何寫呢？如下：
p.greentea{color:green;}——選擇greentea類中的p元素
.greentea{color:green;}——選擇greentea類中的所有元素
一個選擇器可以選擇多個類/元素残腌，那么村斟，一個元素可不可以屬于多個類呢？
答案是可以的抛猫，通過在class屬性中放入多個類名蟆盹，可以指定一個元素屬于多個類，類名之間用空格分隔闺金。如下：
<p class="greentea bluetea blacktea">xxxxxx
</p>
如果有多個選擇器選擇一個元素怎么辦逾滥？
按照特定程度最高的來。
如：
p {color:blue;}——這個規(guī)則會選擇所有原來的p元素
.greentea {color:blue;}——這個規(guī)則只會選擇屬于greentea類的元素
p.greentea {color:blue;}——這個規(guī)則只會選擇屬于greentea類的p元素
p.bluetea{color:blue;}——這個規(guī)則只會選擇屬于bluetea類的p元素
p.blacktea {color:blue;}——這個規(guī)則只會選擇屬于blacktea類的p元素
那么败匹，我們說第二個規(guī)則比第一個更“特定”
后三個規(guī)則比第二個更“特定”
后三個規(guī)則的特定程度是相同的寨昙。
那么，如果有多個特定程度相同的規(guī)則應(yīng)用于同一元素掀亩，該如何選擇舔哪？
這時(shí)需要利用樣式表文件中規(guī)則的順序來解決問題。
會使用CSS文件中最后列出的規(guī)則（最靠后的）槽棍。
如果上述五個為CSS文件中的順序捉蚤，某個p元素同時(shí)屬于以上三類，那么該p元素會應(yīng)用p.blacktea中的規(guī)則刹泄。
如何檢查某個元素是否有某項(xiàng)屬性被賦值外里？
1.首先怎爵，看CSS中有沒有某個選擇器選擇該元素特石。
如果有，而且選擇器中有規(guī)定該屬性和對應(yīng)的值鳖链，那么這就是這個元素的該屬性值姆蘸。
2.如果沒有與元素匹配的選擇器，屬性值就要依賴于繼承芙委。
查看該元素的父元素逞敷、以及父元素的父元素，以此類推灌侣，直到找到所定義的屬性推捐。
如果找到了，這就是你要的值侧啼。
3.如果都沒有牛柒，會使用瀏覽器的默認(rèn)值堪簿。
第一篇筆記，分享給大家皮壁，共同學(xué)習(xí)椭更，謝謝！
