CSS未完

時間 2019-11-09

標籤 css 未完欄目 CSS 简体版

原文原文鏈接

CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。css

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。瀏覽器

CSS語法

CSS實例

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。字體

CSS註釋

/*這是註釋*/

註釋是代碼之母。spa

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。code

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：blog

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。繼承

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {
  background-color: red;
}

類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：token

樣式類名不要用數字開頭（有的瀏覽器不認）。文檔

標籤中的class屬性若是有多個，要用空格分隔。字符串

通用選擇器

* {
  color: white;
}

組合選擇器

後代選擇器

/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}

兒子選擇器

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}

屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
  color: green;
}

分組和嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

例如：

div, p {
  color: red;
}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。

一般，咱們會分兩行來寫，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p {
  color: red;
}

僞類選擇器

/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
  color: #0000FF
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

僞元素選擇器

first-letter

經常使用的給首字母設置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用於清除浮動。

選擇器的優先級

CSS繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先級

咱們上面學了不少的選擇器，也就是說在一個HTML頁面中有不少種方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

實際上是按照不一樣選擇器的權重來決定的，具體的選擇器權重計算方式以下圖：

除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。

萬不得已可使用!important

行內樣式 > id選擇器 > 類選擇器 > 標籤選擇器 > 通用選擇器

1. HTML、CSS基礎 {未完待續}
2. CSS-僞類選擇器（未完待續。。。）
3. javascrpit樹（未完）
4. Linux----------Jenkins（未完）
5. 反射（未完）
6. 練習（未完）
7. Bloom 未完成
8. 2048未完成
9. go：channel（未完）
10. -未完待續
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 互聯網組織的未來：剖析GitHub員工的任性之源
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

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