CSS學習筆記

時間 2019-11-20

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

派生選擇器容許你根據文檔的上下文關係來肯定某個標籤的樣式。經過合理地使用派生選擇器，咱們可使 HTML 代碼變得更加整潔。css

比方說，你但願列表中的 strong 元素變爲斜體字，而不是一般的粗體字，能夠這樣定義一個派生選擇器：html

 {
    font-style: italic;
    font-weight: normal;
  }

請注意標記爲 <strong> 的藍色代碼的上下文關係：api

<p><strong>我是粗體字，不是斜體字，由於我不在列表當中，因此這個規則對我不起做用</strong></p>

<ol>我是斜體字。這是由於 strong 元素位於 li 元素內。<li>我是正常的字體。</li>
</ol>

在上面的例子中，只有 li 元素中的 strong 元素的樣式爲斜體字，無需爲 strong 元素定義特別的 class 或 id，代碼更加簡潔。瀏覽器

<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>ide

<body>
<h1>能夠應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />字體

<h1>沒法應用樣式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>
this

若是您但願背景色從元素中的文本向外少有延伸，只需增長一些內邊距：url

p {background-color: gray; padding: 20px;}

百分數值

百分數值的表現方式更爲複雜。假設你但願用百分數值將圖像在其元素中居中，這很容易：spa

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;    
  }

這會致使圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述爲 50% 50% 的點（中心點）與元素中描述爲 50% 50% 的點（中心點）對齊。ssr

若是圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。若是圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

注意百分比對兩個元素都有效!!!!!!!!!!!!!!!!

使用負值

text-indent 還能夠設置爲負值。利用這種技術，能夠實現不少有趣的效果，好比「懸掛縮進」，即第一行懸掛在元素中餘下部分的左邊：

p {text-indent: -5em;}

不過在爲 text-indent 設置負值時要小心，若是對一個段落設置了負值，那麼首行的某些文本可能會超出瀏覽器窗口的左邊界。爲了不出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可使用全部長度單位，包括百分比值。

百分數要相對於縮進元素父元素的寬度。換句話說，若是將縮進值設置爲 20%，所影響元素的第一行會縮進其父元素寬度的 20%。

在下例中，縮進值是父元素的 20%，即 100 個像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

justify

最後一個水平對齊屬性是 justify。

在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。

字符轉換

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none
uppercase
lowercase
capitalize

默認值 none 對文本不作任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換爲全大寫和全小寫字符。最後，capitalize 只對每一個單詞的首字母大寫。

做爲一個屬性，text-transform 可能可有可無，不過若是您忽然決定把全部 h1 元素變爲大寫，這個屬性就頗有用。沒必要單獨地修改全部 h1 元素的內容，只需使用 text-transform 爲你完成這個修改：

h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素自己。其次，若是您之後決定將全部大小寫再切換爲原來的大小寫，能夠更容易地完成修改。

若是兩個不一樣的裝飾都與同一元素匹配，勝出規則的值會徹底取代另外一個值。請考慮如下的規則：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

對於給定的規則，全部 class 爲 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，由於 text-decoration 值會替換而不是累積起來。

值 pre-wrap 和 pre-line

CSS2.1 引入了值 pre-wrap 和 pre-line，這在之前版本的 CSS 中是沒有的。這些值的做用是容許創做人員更好地控制空白符處理。

若是元素的 white-space 設置爲 pre-wrap，那麼該元素中的文本會保留空白符序列，可是文本行會正常地換行。若是設置爲這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中同樣合併空白符序列，但保留換行符。

連接的四種狀態：

a:link - 普通的、未被訪問的連接
a:visited - 用戶已訪問的連接
a:hover - 鼠標指針位於連接的上方
a:active - 連接被點擊的時刻

實例

a:link {color:#FF0000;}		a:visited {color:#00FF00;}	a:hover {color:#FF00FF;}	a:active {color:#0000FF;}

親自試一試

當爲連接的不一樣狀態設置樣式時，請按照如下次序規則：

a:hover 必須位於 a:link 和 a:visited 以後
a:active 必須位於 a:hover 以後

CSS 列表屬性容許你放置、改變列表項標誌，或者將圖像做爲列表項標誌。

CSS 列表

從某種意義上講，不是描述性的文本的任何內容均可以認爲是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的全部朋友均可以表示爲一個列表或者是列表的列表。

因爲列表如此多樣，這使得列表至關重要，因此說，CSS 中列表樣式不太豐富確實是一大憾事。

列表類型

要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標誌類型。

例如，在一個無序列表中，列表項的標誌 (marker) 是出如今各列表項旁邊的圓點。在有序列表中，標誌多是字母、數字或另外某種計數體系中的一個符號。

要修改用於列表項的標誌類型，可使用屬性 list-style-type：

ul {list-style-type : square}

上面的聲明把無序列表中的列表項標誌設置爲方塊。

列表項圖像

有時，常規的標誌是不夠的。你可能想對各標誌使用一個圖像，這能夠利用 list-style-image 屬性作到：

ul li {list-style-image : url(xxx.gif)}

只須要簡單地使用一個 url() 值，就可使用圖像做爲標誌。

列表標誌位置

CSS2.1 能夠肯定標誌出如今列表項內容以外仍是內容內部。這是利用 list-style-position 完成的。

簡寫列表樣式

爲簡單起見，能夠將以上 3 個列表樣式屬性合併爲一個方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

list-style 的值能夠按任何順序列出，並且這些值均可以忽略。只要提供了一個值，其它的就會填入其默認值。

請注意，上例中的表格具備雙線條邊框。這是因爲 table、th 以及 td 元素都有獨立的邊框。

若是須要把表格顯示爲單線條邊框，請使用 border-collapse 屬性。

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：內邊距、邊框和外邊距能夠應用於一個元素的全部邊，也能夠應用於單獨的邊。

提示：外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。

下面的規則實現的效果與上面的簡寫規則是徹底相同的：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

外邊距合併,有點意思!!!!!!!!!!!!!!

CSS定位一章沒有看,沒看明白有什麼用!!!!!!!!!!

h2, p {color:gray;}

將 h2 和 p 選擇器放在規則左邊，而後用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不一樣的選擇器。若是沒有這個逗號，那麼規則的含義將徹底不一樣。參見後代選擇器。

通配符選擇器

CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示爲一個星號（*）。該選擇器能夠與任何元素匹配，就像是一個通配符。

例如，下面的規則可使文檔中的每一個元素都爲紅色：

* {color:red;}

在規則的最後一個聲明後也加上分號是一個好習慣。在向規則增長另外一個聲明時，就沒必要擔憂忘記再插入一個分號。

簡單屬性選擇

若是但願選擇有某個屬性的元素，而不論屬性值是什麼，可使用簡單屬性選擇器。

例子 3

還能夠根據多個屬性進行選擇，只需將屬性選擇器連接在一塊兒便可。

與簡單屬性選擇器相似，能夠把多個屬性-值選擇器連接在一塊兒來選擇一個文檔。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

屬性與屬性值必須徹底匹配

請注意，這種格式要求必須與屬性值徹底匹配。

若是屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標記片斷：

<p >This paragraph is a very important warning.</p>

若是寫成 p[class="important"]，那麼這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

這時class只是被簡單的理解爲屬性
根據部分屬性值選擇
若是須要根據屬性值中的詞列表的某個詞進行選擇，則須要使用波浪號（~）。
假設您想選擇 class 屬性中包含 important 的元素，能夠用下面這個選擇器作到這一點：
p[class~="important"] {color: red;}
子串匹配屬性選擇器
下面爲您介紹一個更高級的選擇器模塊，它是 CSS2 完成以後發佈的，其中包含了更多的部分值屬性選擇器。按照規範的說法，應該稱之爲「子串匹配屬性選擇器」。
不少現代瀏覽器都支持這些選擇器，包括 IE7。
下表是對這些選擇器的簡單總結：
類型描述
[abc^="def"]    選擇 abc 屬性值以 "def" 開頭的全部元素
[abc$="def"]    選擇 abc 屬性值以 "def" 結尾的全部元素
[abc*="def"]    選擇 abc 屬性值中包含子串 "def" 的全部元素
能夠想到，這些選擇有不少用途。
舉例來講，若是但願對指向 W3School 的全部連接應用樣式，沒必要爲全部這些連接指定 class，再根據這個類編寫樣式，而只需編寫如下規則：
a[href*="w3school.com.cn"] {color: red;}

若是您不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

例如，若是您但願選擇只做爲 h1 元素子元素的 strong 元素，能夠這樣寫：

h1  strong {color:red;}

這是選的直接子元素!!!

用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器：

li + li {font-weight:bold;}

上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體。第一個列表項不受影響。

<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

<p><b>註釋：</b>必須聲明 DOCTYPE，這樣 :first-child 才能在 IE 中生效。</p>
</body>

</html>

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>:lang 僞類容許您爲不一樣的語言定義特殊的規則。在下面的例子中，在下面的例子中，:lang 類爲帶有值爲 "no" 的 lang 屬性的 q 元素定義引號的類型：</p>

<p>一些文本 <q>段落中的引用</q> 一些文本。</p>
</body>

</html>

:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。

在下面的例子中，瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

實例

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

:first-letter 僞元素

"first-letter" 僞元素用於向文本的首字母設置特殊樣式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

CSS2 - :before 僞元素

":before" 僞元素能夠在元素的內容前面插入新內容。

下面的例子在每一個 <h1> 元素前面插入一幅圖片：

h1:before
  {
  content:url(logo.gif);
  }

親自試一試

CSS2 - :after 僞元素

":after" 僞元素能夠在元素的內容以後插入新內容。

下面的例子在每一個 <h1> 元素後面插入一幅圖片：

h1:after
  {
  content:url(logo.gif);
  }

CSS 選擇器參考手冊

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute\|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
[attribute=value*]	匹配屬性值中包含指定值的每一個元素。

高級部分也沒看,不懂什麼意思

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。