首頁 > 開發者 > JavaScript
CSS 知識總結（一），css知識總結
一.認識CSS
1.什麼是CSS？
CSS (Cascading Style Sheet) 層疊樣式表
是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。
由於CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私人屬性，因此不同的瀏覽器可能需要不同的首碼。
| 首碼 | 瀏覽器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
2.CSS能做什嗎？
使用CSS可以有效地對頁面進行布局。
使用CSS樣式可以對頁面字型、顏色、背景和其他效果實現精確描述，同時對它們的修改和控制變得更加快捷。
CSS可以將網站上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的代碼，那麼整個網站的所有頁面都會隨之發生變動。
CSS可以支援多種裝置，比如手機、PDA、印表機、電視機、遊戲機等。
*目的：將表現與結構分離，便於後期維護。
3.CSS文法結構
CSS 文法由三部分構成:選擇符(selector)、屬性(property)和值(value)
selector {property:value;}
屬性是你想要設定的樣式屬性，每個屬性都有一個值，屬性和值用冒號 ":" 分開
每個選擇符可以有多個屬性值，之間用分號 ";" 隔開
例如：
<style type="text/css"> body {background-color:#ccc;}</style>
4.如何引入CSS？
將CSS應用到網頁中有：3種方式 （行內樣式表、內部樣式表、外部樣式表）
a.行內樣式表（位於html元素內部）
行內樣式是指將CSS樣式編碼直接寫在HTML標籤中的style屬性裡，
*注意：行內樣式不需要寫選取器。
例如：
<body style="background-color:#ccc;">
b.內部樣式表（位於<head>標籤內部）
內部樣式作為頁面中的一個單獨部分，由<style>標籤定位在<head>標籤之中。
例如：
<head> <style type="text/css"> body{ background-color:#ccc; } </style></head>
c.外部樣式表
外部樣式表是將CSS樣式代碼單獨放在一個外部檔案".css"中，再由網頁檔案".html"進行調用。
*盡量使用外部樣式表這種方式，目的是讓我們的html結構與表現形式分開
/* "style.css"代碼 */body{ background-color:#cccccc;}<!-- "index.html"代碼 --><head> <link rel="stylesheet" type="text/css" href="style.css" /></head>
5.樣式優先順序
a.寫法優先權（就近原則）
行內樣式表 > 內部樣式表 > 外部樣式表
b.選擇符優先權
選擇符的比較（從低到高）:
萬用字元"*"
類型選擇符"標籤名為選擇符名稱的"
子選擇符">"
包含選擇符
class選擇符
屬性選擇符
id選擇符
行內樣式
!important[慎用]
6.樣式繼承
HTML中的標籤會繼承部分父標籤的樣式。
比如 body { color:red;} ，那麼body中的所有標籤及標籤下的所有子標籤的文本都將變成紅色。
*!important的用法
在兩個相同類型的css樣式定義中，優先執行後面一個
例如：
p{font-size:15px; font-size:20px;}
這種情況下，執行"font-size:20px;" 。
但是可以通過!important文法,提升某一句樣式表的重要性,使及優先執先 !important標註的語句
例如：
p{font-size:15px!important; font-size:20px;}
這時，執行"font-size:15px" 。
7.CSS代碼注釋（快速鍵：Ctrl+/）
例如：
/* 頭部樣式開始 */#header{ background:#ccc;}/* 頭部樣式結束 */
CSS代碼注釋可以協助我們對自己寫的CSS樣式進行說明，如說明某段CSS代碼是什麼地方、功能、樣式等說明，以便我們以後維護具有一看即懂的方便性；
同時在團隊開發的時候合理適當的註解有利於團隊看懂css樣式對應html的位置，以便順利快速開發網頁。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
