溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
好程序員web 前端培訓分享 HTMLCSS 學習之 CSS 基礎， CSS(cascading style sheet) 漢譯為層疊樣式表 , 是用于控制網頁樣式 WEB 標準中的表現標準語言 , 在網頁中主要對網頁信息的顯示進行控制。 目前推薦遵循的是W3C 發布的 CSS3.0 版本； 用來表現HTML 或者 XHTML 等樣式文件的計算機語言。 1998 年 5 月 21 日由 w3C 正式推出的 css2.0
HTML + CSS ， 彌補html 語言的不足 縮減頁面代碼，提高訪問速度; 代碼減少，頁面文件就會小，占用網絡帶寬就少，客戶端打開速度就快，用戶體驗就會更好 結構清晰，有利于seo 優化 有利于搜索引擎優化 縮短改版時間 對網站的重構有很好的支持
CSS 語法 ， CSS 語法由兩部分組成：選擇符、聲明。 聲明包括：屬性和屬性值 選擇符 { 屬性 : 屬性值 ; 屬性 : 屬性值 } 選擇符說明：CSS 選擇符（選擇器） 選擇符表示要定義樣式的對象( 標簽名字 ) ，可以是元素本身，也可以是一類元素或者制定名稱的元素 , 簡單來說就是給對應的元素起個名稱。 1 ）每個 CSS 樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值； 2 ）屬性必須放在花括號中，屬性與屬性值用冒號連接。 3 ）每條聲明用分號結束。 4 ）當一個屬性有多個屬性值的時候，屬性值與屬性值不分先后順序 , 用空格隔開。 5 ）在書寫樣式過程中，空格、換行等操作不影響屬性顯示。
語法： <style type="text/css"> css語句 </style> 注：使用style標記創建樣式時，最好將該標記寫在<head></head>;
(1) 語法： <link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" /> 說明： 使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。 rel：用于定義文檔關聯，表示關聯樣式表； type：定義文檔類型； (2)、導入外部樣式表 <style type="text/css"> @import url("目標文件的路徑及文件名全稱"); </style> 說明：@和import之間沒有空格 url和小括號之間也沒有空格；括號內部加引號，必須結尾以分號結束；
差別1： 老祖宗的差別：link屬于XHTML標簽，而@import完全是CSS提供的一種方式。 link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS。 差別2： 加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。 差別3： 兼容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只在IE5以上的才能識別，而link標簽無此問題。 差別4： 使用dom控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的.
<標簽 style="屬性1:值1;屬性2:值2; ……"></標簽>
1）內聯樣式表的優先級別最高 2）內部樣式表與外部樣式表的優先級和書寫的順序有關，后書寫的優先級別高。 3）同在一個樣式表中的優先級和書寫的順序也有關，后書寫的優先級別高。(被覆蓋的只是相同屬性的樣式)
CSS基本選擇符：
類型選擇符、id選擇符、class選擇符(類選擇符) Css選擇符分類 ：
類型選擇符（標記選擇器） 類選擇符 （class選擇符） ID選擇符 （id選擇器） 偽類選擇器 通配符（*）設置全局屬性 群組選擇符（集合選擇器） 包含選擇符（后代選擇器） 屬性選擇符 偽對象選擇符
類型選擇符是根據html語言中的標記來直接定義 語法： 標簽名稱 {屬性：屬性值；} a)類型選擇符就是以文檔對象html中的標簽作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。 b)所有的頁面元素都可以作為選擇符; 用法： （1）如果想改變某個元素的默認樣式時，可以使用類型選擇符；（如：改變一個p段落樣式） （2）當統一文檔某個元素的顯示效果時，可以使用類型選擇符；（如：改變文檔所有p段落樣式）
語法 ： .class名{屬性：屬性值;} 用法： class選擇符更適合定義一類樣式； (1)當我們使用類選擇符時，應先為每個元素定義一個類名稱， (2)類選擇符的語法格式： 如：<div></div> .top{屬性:屬性值;}
語法： <標簽 id=“名”></標簽> #id名{屬性：屬性值;} （1）可以給每個元素使用id選擇符，但id是元素的唯一標識符，不可出現重復的id名； 如：<div id="top"></div> （2）id選擇符的語法格式是“#”加上自定義的id名 如：#box{width:300px; height:300px;} （3）起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字) 如：div標記 （4）一個id名稱只能在文檔中出現一次，因為id是唯一的 （5）最大的用處：創建網頁的外圍結構。(唯一性、起名字不能使用關鍵字)
a:link {color: red;} /* 未訪問的鏈接狀態 */ a:visited {color: green;} /* 已訪問的鏈接狀態 */ a:hover {color: blue;} /* 鼠標滑過鏈接狀態 */ a:active {color: yellow;} /* 鼠標按下去時的狀態 / 說明： 1）當這4個超鏈接偽類選擇符聯合使用時，應注意他們的順序，正常順序為： a，a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效； 2）為了簡化代碼，可以把偽類選擇符中相同 的聲明提出來放在a選擇符中； 例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態都相同，只有鼠標劃過變化顏色
語法：*{屬性：屬性值;} 說明：通配選擇符的寫法是“*”，其含義就是所有標簽； 表示該樣式適用所有網頁元素； 用法：常用來重置樣式。 例：*{margin:0;padding:0;}
語法：選擇符1，……，選擇符5 {屬性：屬性值;} 說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合并為一組。 實例：.top, #nav, p{width:100px;}
語法：選擇符1(父) 選擇符2（后代）{屬性：屬性值;} 選擇符父級 選擇符子級{屬性：屬性值;} 說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2; 實例： div ul li{height:200px;}
css中用四位數字表示權重， 權重的表達方式如：0，0，0，0； 權重規則：HTML標簽(類型選擇符)的權重是1，class的權重是10，id的權重是100。 類型選擇符的權重為0001 class選擇符的權重為0010 id選擇符的權重為0100 屬性選擇符的權重為0010 偽類選擇符的權重為0010 偽元素（對象）選擇符的權重為0001 包含選擇符的權重：為包含選擇符的權重之和 內聯樣式的權重為1000 繼承樣式的權重為0000 群組集合選擇符權重為他本身 注：如果權重相同時，則執行后寫的樣式；
css層疊指的是樣式的優先級，當產生沖突時以優先級高的為準。 1. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記 ） 2. id選擇符>（偽）類選擇符>元素選擇符 3. 權重相同時取后面定義的樣式
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
