CSS 入門簡介

時間 2019-12-07

標籤 css 入門簡介欄目 CSS 简体版

原文原文鏈接

1、CSS簡介及引用

一、CSS 概述

CSS漢譯爲層疊樣式表，是用於控制網頁樣式。css

二、如何使用樣式

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

1.外部樣式表spa

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

內部樣式表code

<head>
   <style type="text/css">
       body {background-color: red}
       p {margin-left: 20px}
   </style>
   </head>

內聯樣式文檔

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

三、css樣式表的優先級

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

2、CSS 基礎語法

一、CSS 語法

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

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器：一般是須要改變樣式的 HTML 元素。
聲明：使用花括號來包圍聲明。it

提示：若是要定義不止一個聲明，則須要用分號將每一個聲明分開。
p {text-align:center; color:red;}

二、記得寫引號

提示：若是值爲若干單詞，則要給值加引號：
p {font-family: "sans serif";}class

3、css選擇器

一、標籤選擇器（h1）

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

二、通配符選擇器（*）

語法：*{屬性：屬性值;} , 含義就是全部元素；表示該樣式適用全部網頁元素基礎

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

三、羣組選擇器（h1,h2,h3）

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

四、派生選擇器:

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

後代選擇器（空格）

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) 不容許出現標籤名（不是硬性規定，是有工做經驗的表現）
六、類選擇器（ . ）
類選擇器以一個點號顯示：
.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; }