資訊專欄INFORMATION COLUMN
摘要：一簡介及引用概述漢譯為層疊樣式表，是用于控制網頁樣式。二基礎語法語法規(guī)則由兩個主要的部分構成選擇器，以及一條或多條聲明。也就是說，和不沖突。這意味著兩者都將遵守選擇器中的規(guī)則。選擇獲得焦點的元素。
一、CSS簡介及引用 1、CSS 概述
CSS漢譯為層疊樣式表，是用于控制網頁樣式。
2、如何使用樣式當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
1.外部樣式表
內部樣式表
內聯樣式
3、css樣式表的優(yōu)先級This is a paragraph
內聯樣式表的優(yōu)先級別最高
內部樣式表與外部樣式表的優(yōu)先級和書寫的順序有關，后書寫的優(yōu)先級別高。
h1 {color:red; font-size:14px;}
CSS 規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器：通常是需要改變樣式的 HTML 元素。
聲明：使用花括號來包圍聲明。
提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。
p {text-align:center; color:red;}
2、記得寫引號
提示：如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif";}
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;}
This is a heading.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
id選擇器（#）
為標有特定 id 的 HTML 元素指定特定的樣式 , id屬性只能在每個 HTML 文檔中出現一次.例如：身份證號碼。
#redColor{background-color: red;}
#greenColor{background-color: green;}
我有一個id，為redColor
我有一個id，為greenColor
命名規(guī)范：
1）只允許出現字母（大小寫均可，嚴格區(qū)分） 、下劃線、數字。也就是說，id=”laoHe”和 id=”laohe”不沖突。
2) 只允許以字母開頭。
3) 命名沒有長度限制，可以是 1 個字母，也可以是很多個。不過不建議太長。
4) 不允許出現標簽名（不是硬性規(guī)定，是有工作經驗的表現）
6、類選擇器（ . ）
類選擇器以一個點號顯示：
.goCenter{
text-align: center;
background-color: gray;
}
div, p, h2, 元素都有 goCenter 類。這意味著兩者都將遵守 ".goCenter " 選擇器中的規(guī)則。
我和兄弟有一個共同的class，為goCenter
我和兄弟有一個共同的class，為goCenter
我和兄弟有一個共同的class，為goCenter
注意：類名的第一個字符不能使用數字！
偽類選擇器（ : ）
CSS 偽類用于向某些選擇器添加特殊的效果。偽類，狀態(tài)是動態(tài)變化的，當一個元素達到一個特定狀態(tài)時，它可能得到一個樣式，當狀態(tài)改變時，又失去這個樣式。例如，含羞草。
1）、focus
選擇獲得焦點的 input 元素。
2）:link，:visited，:hover，:active
鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標懸停狀態(tài)。
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首次定義了單冒號開頭的偽元素,為了將偽元素與偽類進行嚴格區(qū)分，CSS3重新定義了雙冒號開頭的偽元素。 1）:first-line、:first-letter 用于向文本的首行,首字母設置特殊樣式,該偽元素只能應用于塊級元素。細雨昵喃，打濕幾處新裳。最是無奈飛燕，春去冬不歸，似人生浮雨，飄飄蕩蕩，有似那點水浮萍，漂泊無根。曾幾何時也有過“細雨濕衣看不見，閑花落地聽無聲”的悠閑，也有過“竹杖芒鞋輕勝馬，一蓑煙雨任平生”的瀟灑。人生總是無奈之事太多，牽絆，執(zhí)念，總會左右著我們涼薄的人生，常常回想，有一天我們是否能如水一般，清澈純凈，方圓隨意，如白云一樣自由自在。
/*偽元素 之: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標簽
3）:before 定義某一個元素第一個（虛構的）子元素的內容，通常會附帶content屬性。 語法：選擇器:before { content: value; } 4）:after 定義某一元素最后一個（虛構的）子元素的內容，通常會附帶content屬性。 語法：選擇器:after { content: value; } 5）content 說明：content屬性通常與偽元素選擇器 :before 或 :after 一并使用，主要用于為該偽元素生成內容。 語法：{ content: value; } 四、CSS的注釋CSS的注釋格式： / 注釋內容 /
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117178.html
摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...
閱讀 983·2021-11-23 09:51
閱讀 3470·2021-11-22 12:04
閱讀 2715·2021-11-11 16:55
閱讀 2920·2019-08-30 15:55
閱讀 3221·2019-08-29 14:22
閱讀 3350·2019-08-28 18:06
閱讀 1240·2019-08-26 18:36
閱讀 2126·2019-08-26 12:08
