CSS 入門簡介

Twait發表於2019-01-02

一、CSS簡介及引用

1、CSS 概述

CSS漢譯為層疊樣式表,是用於控制網頁樣式。

2、如何使用樣式

當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文件進行格式化。有以下三種方式來插入樣式表:

1.外部樣式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 內部樣式表

       <head>
       <style type="text/css">
           body {background-color: red}
           p {margin-left: 20px}
       </style>
       </head>
    
  2. 內聯樣式

       <p style="color: red; margin-left: 20px">
           This is a paragraph
       </p>

3、css樣式表的優先順序

內聯樣式表的優先順序別最高
內部樣式表與外部樣式表的優先順序和書寫的順序有關,後書寫的優先順序別高。

二、CSS 基礎語法

1、CSS 語法

h1 {color:red; font-size:14px;}

CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告。
選擇器:通常是需要改變樣式的 HTML 元素。
宣告:使用花括號來包圍宣告。

提示:如果要定義不止一個宣告,則需要用分號將每個宣告分開。
p {text-align:center; color:red;}    

2、記得寫引號

提示:如果值為若干單詞,則要給值加引號:
p {font-family: “sans serif”;}

三、css選擇器

1、標籤選擇器(h1)

h1 {color:red; font-size:14px;}

2、萬用字元選擇器(*)

語法:*{屬性:屬性值;} , 含義就是所有元素;表示該樣式適用所有網頁元素

*{margin:0;color:#ff0;}

3、群組選擇器(h1,h2,h3)

    h1,h2,h3,h4,h5,h6 {
      color: green;
    }

4、派生選擇器:

依據元素在其位置的上下文關係來定義樣式:

  • 後代選擇器 (空格 )
li strong {
   color:red;
}
  • 子元素選擇器(>)
span > strong {color:blue;}
  • 相鄰兄弟選擇器(+)
如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。
例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
div h6 + p {margin-top:50px;}

<div>
    <h6>This is a heading.</h6>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>    
</div>
  • id選擇器(#)
為標有特定 id 的 HTML 元素指定特定的樣式 , id屬性只能在每個 HTML 文件中出現一次.例如:身份證號碼。
#redColor{background-color: red;}
#greenColor{background-color: green;}

<div id="redColor">我有一個id,為redColor</div>
<div id="greenColor">我有一個id,為greenColor</div>

命名規範:

1)只允許出現字母(大小寫均可,嚴格區分) 、下劃線、數字。也就是說,id=”laoHe”和 id=”laohe”不衝突。
2) 只允許以字母開頭。
3) 命名沒有長度限制,可以是 1 個字母,也可以是很多個。不過不建議太長。
4) 不允許出現標籤名(不是硬性規定,是有工作經驗的表現)
6、類選擇器( . )
類選擇器以一個點號顯示:
.goCenter{
    text-align: center;
    background-color: gray;
}
div, p, h2, 元素都有 goCenter 類。這意味著兩者都將遵守 ".goCenter " 選擇器中的規則。
<div class="goCenter">我和兄弟有一個共同的class,為goCenter</div>
<p class="goCenter">我和兄弟有一個共同的class,為goCenter</p>
<h2 class="goCenter">我和兄弟有一個共同的class,為goCenter</h2>
注意:類名的第一個字元不能使用數字!
  • 偽類選擇器( : )
CSS 偽類用於向某些選擇器新增特殊的效果。偽類,狀態是動態變化的,當一個元素達到一個特定狀態時,它可能得到一個樣式,當狀態改變時,又失去這個樣式。例如,含羞草。
1)、focus
選擇獲得焦點的 input 元素。
2):link,:visited,:hover,: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 之後,才是有效的。
  • 偽元素選擇器( : )
語法:選擇器::偽元素 / 選擇器:偽元素
偽元素是控制內容,用於對文件的一部分(偽)元素定義樣式
CSS2.1首次定義了單冒號開頭的偽元素,為了將偽元素與偽類進行嚴格區分,CSS3重新定義了雙冒號開頭的偽元素。
1):first-line、:first-letter
用於向文字的首行,首字母設定特殊樣式,該偽元素只能應用於塊級元素。
<p id="article">
細雨暱喃,打溼幾處新裳。最是無奈飛燕,春去冬不歸,似人生浮雨,飄飄蕩蕩,有似那點水浮萍,漂泊無根。曾幾何時也有過“細雨溼衣看不見,閒花落地聽無聲”的悠閒,也有過“竹杖芒鞋輕勝馬,一蓑煙雨任平生”的瀟灑。人生總是無奈之事太多,牽絆,執念,總會左右著我們涼薄的人生,常常回想,有一天我們是否能如水一般,清澈純淨,方圓隨意,如白雲一樣自由自在。
</p>

/*偽元素  之:first-line*/
#article:first-line{
    color: red;
}

/*偽元素  之:first-letter*/
#article:first-letter{
    color: blue;
}

2):first-child 
選擇元素的第一個子元素
p:first-child{
    font-size: 30px;
}
li:first-child{
    font-size: 30px;
}
<p>文中第一個P標籤</p>
<ul>
    <li>文中第一個li標籤</li>
    <li>文中第二個li標籤</li>
    <li>文中第三個li標籤</li>
</ul>
<p>文中第二個P標籤</p>

3):before
定義某一個元素第一個(虛構的)子元素的內容,通常會附帶content屬性。
語法:選擇器:before { content: value; }

4):after
定義某一元素最後一個(虛構的)子元素的內容,通常會附帶content屬性。
語法:選擇器:after { content: value; }
5)content
說明:content屬性通常與偽元素選擇器 :before 或 :after 一併使用,主要用於為該偽元素生成內容。
語法:{ content: value; }

四、CSS的註釋

CSS的註釋格式: / 註釋內容 /

相關文章