CSS-基礎語法
CSS
全稱Casading Style Sheets，層疊樣式表，控制HTML標籤的樣式，在美化網頁中起到非常重要的作用。
CSS編寫格式是鍵值形式的，比如
color: red;
冒號:左邊的是屬性名，冒號:右邊的是屬性值.
①CSS中書寫形式
1.行內樣式(內聯樣式) 直接在標籤的style屬性中書寫
<body style= “color:red;”>
案例:
<div style="color: blue; font-size: 28px; background-color: aliceblue"> <p style="color: red; border: 5px solid paleturquoise">我是段落</p> </div>
2.頁內樣式：在本網頁的style標籤中書寫
<style> body { color: red; } </style>
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS頁內樣式</title> <style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style> </head> <body> <div>我是容器標籤</div> <p>我是段落標籤</p> </body> </html>
3.外部樣式：在單獨的CSS檔案中書寫，然後在網頁中用link標籤引入
<!--引入外部樣式--> <link rel="stylesheet" href="./css/index.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS外部樣式</title> <!--引入外部樣式--> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div>我是容器</div> <p>我是段落</p> </body> </html>
②CSS定義樣式表
1>直接使用html標籤定義選擇器
<style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style>
2>class定義：類名選擇器,定義是以"."開始，.p{color: red}，子類選擇器 .baby text{color: blue;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS選擇器</title> <style> .container { color: red; font-size: 28px; border: 4px solid yellow; } </style> </head> <body> <div class="container">我是容器標籤</div> </body> </html>
3>id定義：id選擇器，定義是以"#"開始的，且只能出現一次。#p{color: blue;}
4>選擇器優先順序問題
(1). ID>Class>HTML ;
(2).同級時選擇離元素最近的一個執行#p{color:red} #p{colod:#f60}執行顏色為#f60的.
(3). z-index 提高優先順序
5>組合選擇器：同時控制多個元素，多個元素之間用"，"隔開。
<!--組合選擇器--> h1,h2,h3,.bb { font-size: 20px; color: red; }
6>偽元素選擇器
(1) a:link 正常連線的樣式 (2).a:hover 滑鼠放上去的樣式
(3) a:active :選擇連結時的樣式 (4).a:visited 已經訪問過的連結的樣式
<style type="text/css"> a:link { color: red; } a:hover { color: green; } a:active { color: yellow; } a:visited { color: lightgray; } </style>
CSS規律
1.就近原則：如果對同一個標籤設定了不同的樣式，該標籤會找最近的樣式
2.疊加原則：同時匯入頁內樣式和外部樣式，頁內樣式不設定字型大小和顏色，該標籤會使用外部樣式。
③CSS常見屬性：
1.顏色屬性
<!--color屬性定義文字的顏色--> <!--1.英文單詞color:green; --> <!--2.十六進位制顏色值：color:#ff6600 簡寫式#f60--> <!--3. RGB顏色--> <!--紅綠藍RGB顏色，每個取值0~255：color:rgb(255,255,255)--> <!--RGBA 顏色，帶透明度：color : rgba (255,255,255,1)--> <!-- 紅色:color: rgb(255,0,0) --> <!--綠色:color: rgb(0,255,0) --> <!--藍色:color: rgb(0,0,255) --> <!--白色:color: rgb(255,255,255)--> <!-- 黑色:color: rgb(0,0,0) -->
2.字型屬性
1.font-size 字型大小
px:設定一個固定的值；%父元素的百分比；smaller 比父元素更小；larger 比父元素更大；inherit [ɪnˈherɪt] ：繼承父元素的
比如body設定字型20px ,那麼子元素h1設定100% 是按照body 的百分比.
2.font-family 定義字型:font-family : 微軟雅黑，serif;可以使用”,”隔開,可以確保當字型不存在的時候直接使用下一個
3.font-weight 字型加粗 normal :預設值 bold 粗 、bolder 更粗 、lighter、更細;normal = 400,bold = 700,100,200,300~900
4.font-style 字型樣式 ： normal:正常，標準 italic[ɪˈtælɪk]:斜體; oblique[əˈbli:k] 傾斜; inherit：繼承 <em>預設會增加一個斜體
5.font-variant[ˈveəriənt] 變體 小型大寫字母顯示文字 :normal :標準; inherit:繼承;small-caps ：小型大寫字母顯示文字 小寫變大寫
3.背景屬性
1.背景顏色：background-color
2.背景圖片：background-image
3.背景展示方式：background-repeat : repeat :重複平鋪滿 repeat-x ： 向x軸重複 repeat-y ： 向y軸重複 no-repeat : 不重複
4.背景位置：background-position : 橫向：(left,center,right) 縱向(top , center , bottom) ;還可以用數值來表示位置
簡寫方式：background: 背景顏色 url(影象) 重複 位置 ; background: #60 url(img/bg.jpg) no-repeat top center.
4.文字屬性
1.text-align 橫向排列 left ,center ,right
2.line-height 文字行高 : ①%基於字型大小的百分比行高②數值 來設定固定值
3.text-ident 首行縮排 % 父元素的百分比；px固定值，預設0; inherit 繼承
4.letter-spacing : 字元間距 normal 預設; length 具體數值;inherit 繼承
5.word-spacing : 單詞間距 normal 預設; px 具體數值;inherit 繼承
6.direction :文字方向 : ltr 從左到右，預設值; rtl 從右到左 ; inherit 繼承
7.text-transform : 文字大小寫 : none 預設 capitalize :每個單詞以大寫字母開頭；uppercase 定義僅有大寫字母 ; lowercase 定義僅有小寫字母 inherit 繼承父元素的text-transform .
5.邊框屬性
簡寫：border : solid 2px #f60;
1.邊框風格：border-style
單獨定義某一方向的邊框樣式。
border-bottom-style 下邊邊框樣式
border-top-style 上邊邊框樣式
border-left-style 左邊邊框樣式
border-right-style 右邊邊框樣式
邊框風格樣式的屬性值：
① none 無邊框 ②solid 直線邊框 ③dashed 虛線邊框④dotted 點狀邊框 ⑤double 雙線邊框 ⑥groove 凸槽邊框⑦ridge 壟狀邊框 ⑧inset inset 邊框 ⑨outset outset 邊框 10.inherit 繼承
2.邊框寬度：
border-width 屬性值： ①thin 細邊框 ②medium 中等邊框 ③thick 粗邊框④px固定值⑤inherit繼承
3.邊框顏色：border-color 屬性值的四種情況：
一個值：border : (上、下、左、右)；
兩個值：border : (上下) (左右); border-color: green red;上下為綠，左右為紅
三個值：border : (上) (左、右) (下); border-color: green red yellow; 上邊為綠色；下邊為黃色；左右為紅色
四個值：border : (上) (右) (下) (左);border-color: green red yellow darkcyan;上邊為綠色；右邊為紅色；下邊為黃色；左為青色
簡寫：border : solid 2px #f60;
6.列表屬性
1.list-style-type 標記的型別
none ：無標記;
disc預設，標記是實心圓;
circle 標記是空心圓 ;
square 標記是實心方塊;
decimal 標記是數字[ˈdesɪml]；
其他
decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
2.list-style-position 標記的位置 :
inside列表專案標記放置在文字以內，且環繞文字根據標記對齊。
outside預設值。保持標記位於文字的左側。列表專案標記放置在文字以外，且環繞文字不根據標記對齊。
inherit規定應該從父元素繼承 list-style-position 屬性的值。
3.list-style-image 設定影象列表標記 : URL 影象的路徑；none 預設，無圖形被顯示 ; inherit 繼承
4.list-style :簡寫方式 list-style : square inside url(‘i/arrow.jpg’);
CSS規律
1.就近原則：如果對同一個標籤設定了不同的樣式，該標籤會找最近的樣式
2.疊加原則