資訊專欄INFORMATION COLUMN
摘要：屬性只能在每個文檔中出現(xiàn)一次選擇器和派生選擇器在現(xiàn)代布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器元素也可以基于它們的類而被選擇屬性選擇器可以為擁有指定屬性的元素設(shè)置樣式，而不僅限于和屬性。
博客主要記錄學習的筆記，如有錯誤，歡迎指出
來源：http://www.w3school.com.cn/
CSS 指層疊樣式表 (Cascading Style Sheets)?
解決內(nèi)容與表現(xiàn)分離的問題
多個樣式定義可層疊為一
層疊次序一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
瀏覽器缺省設(shè)置
外部樣式表
內(nèi)部樣式表（位于
標簽內(nèi)部）內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
CSS基礎(chǔ)語法 CSS語法CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }?
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
?CSS 語法
除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
p { color: #ff0000; }
為了節(jié)約字節(jié)，我們可以使用 CSS 的縮寫形式：
p { color: #f00; }
我們還可以通過兩種方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
?
請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說，當尺寸為 0 像素時，0 之后不需要使用 px 單位，因為 0 就是 0，無論單位是什么。
如果值為若干單詞，則要給值加引號：
?p {font-family: "sans serif";}?
?
多重聲明應(yīng)當在每個生命后邊加上;，同時每行只寫一個聲明增加可讀性
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小寫
增加空格以便美觀
css不會區(qū)分大小寫，但是與HTML有關(guān)的id class需要大小寫
CSS高級語法 選擇器的分組被分組的選擇器就可以分享相同的聲明。
用逗號將需要分組的選擇器分開?。
h1,h2,h3,h4,h5,h6 {
color: green;
}
?
繼承及其問題子元素從父元素繼承屬性。
但是以下屬性不能被繼承（多謝一樓提醒）：
邊框?qū)傩?/p>
邊界屬性
補白屬性
背景屬性
定位屬性
布局屬性
元素寬高屬性
子元素將繼承最高級元素（在本例中是 body）所擁有的屬性
有些瀏覽器不支持繼承：IE6，Netscape4
如果不希望子類繼承，則可以創(chuàng)建一個針對 p 的特殊規(guī)則，這樣它就會擺脫父元素的規(guī)則
body {
font-family: Verdana, sans-serif;
}?
派生選擇器：通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標記更加簡潔。
就是有兩個選擇器～
li strong {
font-style: italic;
font-weight: normal;
}?
?
id選擇器 id選擇器id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 "#" 來定義。
id 屬性只能在每個 HTML 文檔中出現(xiàn)一次
#red {color:red;}
#green {color:green;}?
id 選擇器和派生選擇器
在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器。?
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}?
一個選擇器，多種用法
同派生器一樣，可以對應(yīng)id下多個選擇
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
?
CSS類選擇器 Class選擇器.center {text-align: center}
?類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
?和 id 一樣，class 也可被用作派生選擇器：?
.fancy td {
color: #f60;
background: #666;
}?
元素也可以基于它們的類而被選擇：?
td.fancy {
color: #f60;
background: #666;
}
?
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
屬性選擇器下面的例子為帶有 title 屬性的所有元素設(shè)置樣式：
[title]
{
color:red;
}
?
屬性和值選擇器下面的例子為 title="W3School" 的所有元素設(shè)置樣式：
[title=W3School]
{
border:5px solid blue;
}
?
屬性和值選擇器 - 多個值下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值：
[title~=hello] { color:red; } //所有包含helo的title屬性里 都有效
參考手冊
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
?
如何創(chuàng)建CSS 如何插入樣式表當讀到一個樣式表時，瀏覽器會根據(jù)它來格式化 HTML 文檔。插入樣式表的方法有三種：?
外部樣式表當樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 標簽鏈接到樣式表。 標簽在（文檔的）頭部：
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。?
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
.css擴展名，20px中間不能留空格！
內(nèi)部樣式表當單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用
?
內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當樣式僅需要在一個元素上應(yīng)用一次時。
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
This is a paragraph
?
多重樣式如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而內(nèi)部樣式表擁有針對 h3 選擇器的兩個屬性：
h3 {
text-align: right;
font-size: 20pt;
}
假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：
color: red; text-align: right; font-size: 20pt;
即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。
和繼承非常相似！！?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110845.html
摘要：而面向搜索引擎，就是我們要及時的使用百度谷歌遇到問題無法解決，先別急著放棄，可以去網(wǎng)絡(luò)尋找答案，你的坑大部分別人都已經(jīng)走過了，大部分都可以找到合適的解決方案。 showImg(https://segmentfault.com/img/remote/1460000019236352?w=866&h=456); 前言： ●眾多的語言，到底哪一門才是適合我的？●我們?yōu)槭裁匆獙W習Java語言呢...
摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺伯樂在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開發(fā)中換過很多開發(fā)工具，遇到bug到處求解，以及自學時到處找相關(guān)文章及教程，所以經(jīng)過這么多的風波，我總結(jié)了一些對大家有幫助的網(wǎng)站，主題也將長期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺 ...
摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺伯樂在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開發(fā)中換過很多開發(fā)工具，遇到bug到處求解，以及自學時到處找相關(guān)文章及教程，所以經(jīng)過這么多的風波，我總結(jié)了一些對大家有幫助的網(wǎng)站，主題也將長期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺 ...
摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺伯樂在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開發(fā)中換過很多開發(fā)工具，遇到bug到處求解，以及自學時到處找相關(guān)文章及教程，所以經(jīng)過這么多的風波，我總結(jié)了一些對大家有幫助的網(wǎng)站，主題也將長期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺 ...
閱讀 3551·2021-11-08 13:15
閱讀 2106·2019-08-30 14:20
閱讀 1386·2019-08-28 18:08
閱讀 977·2019-08-28 17:51
閱讀 1483·2019-08-26 18:26
閱讀 2988·2019-08-26 13:56
閱讀 1483·2019-08-26 11:46
閱讀 2586·2019-08-23 14:22
