天天看點
傳回

CSS快速入門（一）

CSS快速入門（一）

本文總結：什麼是CSS，文法結構，以及如何使用多種選擇器去比對标簽的内容，想快速入門看這篇就夠了👆

目錄

  • CSS快速入門
    • 簡介
    • 文法結構
    • 如何注釋
    • 引入方式
    • 選擇器
      • 選擇器清單
      • 選擇器的優先級
      • 基本選擇器
        • 标簽選擇器
        • 類選擇器
        • id選擇器
        • 通用選擇器（不重要）
      • 組合選擇器
        • 後代選擇器
        • 兒子選擇器
        • 相鄰選擇器
        • 弟弟選擇器
      • 屬性選擇器
        • 文法
        • 示例
        • 分組與嵌套
      • 僞類選擇器
        • 标準僞類索引
      • 選擇器參考表
    • 網站分享

CSS快速入門（一）

層疊樣式表 — 也就是CSS — 是你在HTML之後應該學習的第二門技術。HTML用于定義内容的結構和語義，CSS用于設計風格和布局。比如，您可以使用CSS來更改内容的字型、顔色、大小、間距，将内容分為多列，或者添加動畫及其他的裝飾效果；

通俗了解為：CSS就是為了給HTML标簽修改樣式；

文法結構： 
選擇器 {
    	屬性名1:屬性值1;
    	屬性名2:屬性值2
  }
CSS快速入門（一）

/*注釋内容*/
快捷鍵：ctrl+? (pycharm)
           

1.style内部直接編寫css代碼,平時學習、練習的時候推薦使用
2.link标簽引入外部css檔案,正式工作、實際生産環境推薦使用

CSS選擇器是CSS規則的第一部分。它是元素和其他部分組合起來告訴浏覽器哪個HTML元素應當是被選為應用規則中的CSS屬性值的方式。選擇器所選擇的元素，叫做“選擇器的對象”；

css是用來調節标簽樣式的 那為什麼需要學選擇器呢?

因為同一個頁面上有很多相似的标簽 并且這些标簽在不同的位置有不同的樣式 是以為了能夠區分 ，我們肯定先需要學習如何查找指定的标簽

CSS快速入門（一）

如果你有多個使用相同樣式的CSS選擇器，那麼這些單獨的選擇器可以被混編為一個“選擇器清單”，這樣，規則就可以應用到所有的單個選擇器上了。例如，如果我的

h1

 和

.special

 類有相同的CSS，那麼我可以把它們寫成兩個分開的規則。 
/*方式一*/
h1 {
  color: blue;
}

.special {
  color: blue;
} 

/*方式二*/
h1, .special {
  color: blue;
} 

/*如果出現文法錯誤，那麼樣式不會生效*/
/*相同修改，優先級一般最下面的生效*/

  • 相同選擇器不同導入方式
    • 選擇器系統遵循就進原則，從上往下誰離标簽更近誰說了算 
通俗了解：
比如兩個相同的選擇器都要修改p标簽，最下面那個，或者離p标簽更近的選擇器生效；
如果p标簽自己使用style參數，那麼p标簽自己設定的參數生效；
  • 不同選擇器不遵循就近原則>>>:優先級
    • 行内選擇器 > id選擇器 > 類選擇器 > 标簽選擇器

通過标簽名直接查找 
/*查找所有的div标簽*/
  	div {  
            color: red;
        }

類選擇器的關鍵符号為

.

 句點符号，是通過class值查找标簽； 
/*查找所有含有c1樣式類的标簽*/
  	.c1 {
            color: red;
        }

id選擇器關鍵符号位

#

 警号，通過id值查找标簽； 
/*查找id為d1的标簽*/
  	#d1 {
            color: orange;
        }

修改body内所有的标簽； 
/*body内所有的标簽*/
    * {
      color: darkgray;
    }

為了區分嵌套标簽之間的關系，我們發明了一種稱呼，如下： 
<div>
<p>
<span></span>
</p>
</div>
/*
span是p的兒子 是div的孫子也可以說是div的後代
p是div的兒子也是div後代 是span的父親
div是p的父親是span的爺爺 也可以說是他們的祖先
*/

特征符号是

空格

 
/*查找div内部所有的後代span*/
	div span {  
            color: red;
        }

特征是

>

 大于号 
/*查找div内部所有的兒子span*/
	div > span { 
            color: greenyellow;
        }

特征為

+

 加号，這個查找的是同級别下面緊挨着的第一個span 
/*查找同級别下面緊挨着的第一個span(不能有其他标簽間隔)*/
	div + span {  
            color: pink;
        }

~

 
/*查找同級别下面所有的span(不需要緊挨着)*/
	div ~ span {  
            color: deeppink;
        }

CSS 屬性選擇器通過已經存在的屬性名或屬性值比對元素;

  • [attr]

     表示帶有以 attr 命名的屬性的元素。

  • [attr=value]

     表示帶有以 attr 命名的屬性，且屬性值為 value 的元素。

  • [attr~=value]

     表示帶有以 attr 命名的屬性的元素，并且該屬性是一個以空格作為分隔的值清單，其中至少有一個值為 value。

  • [attr|=value]

     表示帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為字首（"

    -

     "為連字元，Unicode 編碼為 U+002D）開頭。典型的應用場景是用來比對語言簡寫代碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。

  • [attr^=value]

     表示帶有以 attr 命名的屬性，且屬性值是以 value 開頭的元素。

  • [attr$=value]

     表示帶有以 attr 命名的屬性，且屬性值是以 value 結尾的元素。

  • [attr*=value]

     表示帶有以 attr 命名的屬性，且屬性值至少包含一個 value 值的元素。

  • [attr operator value i]

     在屬性選擇器的右方括号前添加一個用空格隔開的字母

    i

     （或

    I

     ），可以在比對屬性值時忽略大小寫（支援 ASCII 字元範圍之内的字母）。

  • [attr operator value s]

    s

    S

     ），可以在比對屬性值時區分大小寫（支援 ASCII 字元範圍之内的字母）。 

/* 存在title屬性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href屬性并且屬性值比對"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href屬性并且屬性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href屬性并且屬性值結尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class屬性并且屬性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

如果存在多個标簽需要調整為同一樣式，那麼使用分組和嵌套可以減少代碼的備援；

比對标簽之間用逗号隔開，标簽與标簽是或的關系；

并列寫可以标簽和标簽、标簽和選擇器、意思就是可以多個相同選擇器或多個不同選擇器都可以并列使用；

/*并列的情況*/
/* 多個相同選擇器并列使用*/ 
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
/*多個不同選擇器并列使用*/
div,#d1,.c1 {  /*标簽查找div id查找d1 類查找c1*/
            color: red;
        }
/*不并列的情況*/
/*不并列同樣可以使用組合選擇器*/
.c1 p {   /*查找class為c1的後代p标簽*/
            color: red;
        }
/*直接篩選*/
	div#d1 {  /*查找id為d1的div标簽*/
  	color: red;
  }
  div.c1 {  /*查找class為c1的div标簽*/
    color: red;
  }

CSS 僞類 是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀态。例如，

:hover

 可被用于在使用者将滑鼠懸停在按鈕上時改變按鈕的顔色。 

selector:pseudo-class {
  property: value;
}
           

/*滑鼠懸浮在上面*/
a:hover {  
            color: orange;
        }
/*a标簽預設的顔色會變化 第一次是藍色 後面是紫色*/


input:focus {
            background-color: red;
        }
/*我們将input框被使用者點選即将錄入資料的過程看成是focus狀态(聚焦狀态)*/

  • :active

  • :any-link

  • :blank

  • :checked

  • :current

     (en-US)

  • :default

  • :defined

  • :dir()

  • :disabled

  • :drop

  • :empty

  • :enabled

  • :first

  • :first-child

  • :first-of-type

  • :fullscreen

  • :future

  • :focus

  • :focus-visible

  • :focus-within

  • :has()

  • :host

  • :host()

  • :host-context()

  • :hover

  • :indeterminate

  • :in-range

  • :invalid

  • :is()

  • :lang()

  • :last-child

  • :last-of-type

  • :left

  • :link

  • :local-link

  • :not()

  • :nth-child()

  • :nth-col()

  • :nth-last-child()

  • :nth-last-col()

  • :nth-last-of-type()

  • :nth-of-type()

  • :only-child

  • :only-of-type

  • :optional

  • :out-of-range

  • :past

  • :placeholder-shown

  • :read-only

  • :read-write

  • :required

  • :right

  • :root

  • :scope

  • :target

  • :target-within

  • :user-invalid

  • :valid

  • :visited

  • :where()

學習CSS的教程
類型選擇器

h1 { }
通配選擇器

* { }

.box { }
ID選擇器

#unique { }
标簽屬性選擇器

a[title] { }

p:first-child { }

 		僞類
僞元素選擇器

p::first-line { }

 		僞元素

article p

 		後代運算符
子代選擇器

article > p
相鄰兄弟選擇器

h1 + p

 		相鄰兄弟
通用兄弟選擇器

h1 ~ p

 		通用兄弟

  • 元件 | Element
  • Bootstrap
  • [轉載網站](CSS選擇器 - 學習 Web 開發 | MDN (mozilla.org))
CSS快速入門
上一篇: Cookie和Session
下一篇: Django之請求生命周期及FBV/CBV模式

繼續閱讀