標籤：定義 ext 連結 插入 nbsp 移動 置中 htm 元素
CSS-基本文法/引用/文本設定
css基本文法及頁面引用css基本文法
css的定義方法是：
選取器 { 屬性:值; 屬性:值; 屬性:值;}
選取器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。程式碼範例：
div{ width:100px; height:100px; color:red }css頁面引入方法：
1、外聯式：通過link標籤，連結到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式：通過style標籤，在網頁上建立嵌入的樣式表。
<style type="text/css"> div{ width:100px; height:100px; color:red } ......</style>
3、內聯式：通過標籤的style屬性，在標籤上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......</div>
4.匯入式： 將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中。
<style type="text/css"> @import"mystyle.css"; 此處要注意.css檔案的路徑</style>css文本設定
常用的應用文本的css樣式：
color 設定文字的顏色，如： color:red;
font-size 設定文字的大小，如：font-size:12px;
font-family 設定文字的字型，如：font-family:‘微軟雅黑‘;
font-style 設定字型是否傾斜，如：font-style:‘normal‘; 設定不傾斜，font-style:‘italic‘;設定文字傾斜
font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字型大小/行高 字型；如： font:normal 12px/36px ‘微軟雅黑‘;
line-height 設定文字的行高，如：line-height:24px;
text-decoration 設定文字的底線，如：text-decoration:none; 將文字底線去掉
text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
text-align 設定文字水平對齊，如text-align:center 設定文字水平置中
css顏色值主要有三種表示方法：
1、顏色名表示，比如：red 紅色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示紅色
3、16進位數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
css選取器常用的選取器有如下幾種：
1、標籤選取器標籤選取器，此種選取器影響範圍大，建議盡量應用在層級選取器中。
舉例：
*{margin:0;padding:0} <!-- 應用於所有的標籤 -->div{color:red} <!-- 應用於div標籤 --><div>....</div> <!-- 這裡是使用，對應以上兩條樣式 --><div class="box">....</div> <!-- 對應以上兩條樣式 -->2、id選取器
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選取器。
舉例：
#box{color:red} <div id="box">....</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->3、類別選取器
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選取器。
舉例：
.red{color:red}.big{font-size:20px}.mt10{margin-top:10px} <div class="red">....</div><h1 class="red big mt10">....</h1><p class="red mt10">....</p>4、層級選取器
主要應用在選擇父元素下的子項目，或者子項目下面的子項目，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
舉例：
.box span{color:red}.box .red{color:pink}.red{color:red}<div class="box"> <span>....</span> <a href="#" class="red">....</a></div><h3 class="red">....</h3>5、組選取器
多個選取器，如果有同樣的樣式設定，可以使用組選取器。
舉例：
E,F 多元素選取器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 :div,p { color:#f00; } E F 後代元素選取器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝ E > F 子項目選取器，匹配所有E元素的子項目F :div > p { color:#f00; } E + F 毗鄰元素選取器，匹配所有緊隨E元素之後的同級元素F :div + p { color:#f00; } E ~ F 普通兄弟選取器（以破折號分隔） :.div1 ~ p{font-size: 30px; }.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>6、偽類及虛擬元素選取器：專用於控制連結的顯示效果
常用的偽類別選取器有hover，表示滑鼠懸浮在元素上時的狀態，虛擬元素選取器有before和after,它們可以通過樣式在元素中插入內容。
a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。 a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。 a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。 a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。 偽類別選取器 : 偽類指的是標籤的不同狀態: a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態 a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css代碼; }
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容 例：p:before{content:"hello";color:red;display: block;}
CSS-基本文法/引用/文本設定/選取器/
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
