與html相比，Css支持更豐富的文檔外觀，Css可以為任何元素的文本和背景設置顏色；允許在任何元素外圍設置邊框；允許改變文本的大小，裝飾（如下划線），間隔，甚至可以確定是否顯示文本。
什么是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
CSS就是控制頁面布局和樣式
HTML 結構層 負責從 語義的角度搭建頁面結構
CSS 樣式層 負責從 審美的角度美化頁
JavaScript 行為層 負責從 交互的角度提升用戶體驗
語法結構：
選擇器{屬性:值;屬性:值;…….}
選擇器：選擇誰
參數說明：屬性和屬性值之間用冒號(:)隔開，定義多個屬性時，屬性之間用英文輸入法下的分號;隔開。
選擇器： 實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。
-選擇器分類：
基礎選擇器
標簽選擇器
類選擇器
ID選擇器
：復合選中器
2復合選擇器
3屬性選擇器
-
類選擇器
a) .自定義類名{屬性：值；…… 屬性：值；}
- ID選擇器
a) #自定義ID名｛屬性：值；…… 屬性：值；｝
通配符選擇器
a) *｛屬性：值；······ 屬性：值；｝
b) 選擇頁面所有標簽元素。給所有標簽相同的樣式
c) 不推薦使用
l 復合選擇器：兩個或者兩個以上的基礎選擇器通過不同方式連接在一起
- 交集選擇器
a) 標簽+類（id）選擇器｛屬性：值；｝
b) 既要滿足標簽選擇器，又要滿足類（id）選擇器
- 后代選擇器（重點）
a) 選擇器+空格+選擇器+···+選擇器+空格+選擇器｛屬性：值｝
b) 無限制隔代，選擇器可自用組合
- 子帶選擇器
a) 選擇器>選擇器｛屬性：值；｝
b) 選擇直接子代，不選擇子代以后的
- 並集選擇器
a) 選擇器，選擇器，選擇器…｛屬性：值；｝
如何編寫CSS樣式?
內嵌（嵌入，內部）樣式，head標簽中添加style標簽。
在head標簽中添加style標簽。
<head>
<style> p {color:red;}</style>
</head>
標簽選擇器其實就是html代碼中的標簽
Html中標簽:<html>、<body>、<h1>、<p>、<img>等等
CSS簡單屬性
width：設置寬度，單位px像素
height：高度
color：前景色，也就是文字的顏色
background-color：背景色。
font-size:字體的大小。
<style type="text/css">
p{ background-color:red;} ; 設置北京曬（shai）
h1{color：green ；} 設置標題篩
span{font-size：14px ；} 設置span標簽的文本為14像素
類選擇器（class）
什么是類？
物以類聚，人以群分。比如：我們都是牛人！
黃種人、白種人、歐洲人、亞洲人
所有的鴨子、所有的貓、
類選擇器，是對HTML標簽中class屬性進行選擇。CSS類選擇器的選擇符是 “.“類選擇器在css樣式編碼中是最常用到的。
類選擇器語法格式:
使用方法：
第一步：使用合適的標簽把要修飾的內容標記起來，如下：
<span>Web開發</span>
第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：
<span class="one">Web開發</span>
第三步：設置類選器css樣式，如下：
.one{color:red;}
一個標簽可以有多個類選擇器的值，不同的值用空格分開，如：
<div class="one yellow leftStyle">此處為標簽內的文字</div>
這樣我們可以將多個樣式用到同一個標簽中
頁面布局常見命名規范
l良好的代碼：重用、有序、精簡
頭 / head 內容 / content 尾/footer
導航/nav 側欄/sidebar 標志/logo
廣告/banner 頁面主題/main 內容/content
命名： 不能用數字開頭。在名稱內部可以出現特殊符號 例如：下划線_
a) 一個標簽可以調用多個類選擇器
b) 多個標簽可以共用一個選擇器
c) 類命名規則
- 不能用純數字，不能以數字開頭
- 不能實用特殊符號，和特殊符號開頭，除 “_” 外
- 不建議使用漢字來定義類名
-
不推薦使用屬性和屬性值來做類名
ID 選擇器
語法格式： id選擇器 以“#” 來定義：
#header { color:red; font -size: 25px}
通配符選擇器
使 用“ *”號表示，是所有選擇器中作用的范圍最廣范的， 可以匹配頁面中所有的元素：
* { 屬性1：屬性值1 ; 屬性2：屬性值2; ... }
*{font-size:18px }
CSS復合選擇器 - 標簽指定式
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的：
1 標簽指定選擇器（即... 又...）
標簽指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器 或 id 選擇器，兩個選擇器中間不能有空格 例：h3.special 或 p#one
后代選擇器（包含選擇器)
后代選擇器用來選擇元素或者元素組的后代，其寫法就是把外層標記寫前邊，內層的標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代；
后代選擇器首選要滿足包含（嵌套）關系。
父集元素在前邊，子集元素在后邊。
特點：無限制隔代。
只要能代表標簽，標簽、類選擇器、ID選擇器自由組合。
◆子代選擇器
選擇器>選擇器{屬性:值;}
選中直接下一代元素。
並集選擇器
並集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。
3：屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type=text][id="3"]{ width: 300px; height: 300px; background: #aaa; } input[type=text][class="4"]{ width: 300px; height: 300px; background: #faa }
</style>
</head>
<body>
<input type="text" class="4">
<input type="radio">
<input type="text" id="3" >
</body>
</html>
與復合選擇器相似，必須滿足所有條件才生效
文本元素
CSS 相關的屬性：
Text-alignift / center/ right文字劇中格式
Font-style Normal默認/ italic斜體 / 字體風格
Font-weight normal默認/ bold 粗體/100px 字體加粗
Font-size 18px字體大小
Font-family 微軟雅黑，宋體字體格式
Color 顏色 字體顏色
div{
Font-style : normal ;
Font-weight : 700 (值從100到900，文字粗細，不推薦用font-weight : bold ； ）
Font-size : 19px
Font-family : 宋體
Line-height : 30 ;
}
p{
text-indent: 2em; /*em是相對單位，2em即現在一個字大小的兩倍*/
}
CSS字體合寫
字體合寫語法格式：
選擇器{font：font-style font-weight font-size/line-height font-family}
Font : italic 700 16px/40px 微軟雅黑;
斜體 加粗 字體大小和行距 字體格式
必須有字體大小和字體格式（font-size font-family）必須按照順序寫
文字的表達方式
直接寫中文名稱：
Div {
Font-family : 微軟雅黑；
Font-size : 60px ;
}
寫字體的英文名稱：
Div {
Font-family ： microsoft yahei ;
Font-size : 60px ;
}
l Font
l Font：style | small-caps(小型大寫字母) | weight | size/ling-height | family
l 使用復合屬性必須按照如上的順序來寫屬性值
l 每個參數僅允許有一個值
l 忽略的屬性將使用該屬性的默認值
l Color
- RGB顯示模式color：rgb（255，255，255）；
- RGBA顯示模式 color：rgba（255，255，255，0.5）；
- A是alpha不透明度，可選值為0-1；
- 0是完全透明，1是完全不透明
l Color：#(FFFFFF)/六位十六進制數
#(FFF)/三位十六進制書
1：完全不透明
0：完全透明
l Text-decoration：字體裝飾
l Underline：下划線
l Overline：上划線
l Line-through：刪除線
l None：無裝飾
l 有href屬性的a標簽默認屬性是undeline
l 沒有文本對象的內容此屬性不起作用
l Blink：閃爍（不知道其作用是什么）
l Text-shadow：字體陰影
l Text-shadow：color | length（水平延伸距離）| length（垂直延伸距離）| opacity（模糊效果的程度，數值越大越模糊）
l Opacity不可為負值
l Length可為負值
l 可以被用於偽類:first-letter和 :first-line。
l 可以設定多組效果，方式是用逗號隔開。
l Font-variant：small-caps小型大寫字母
l Normal 正常的字體
l Text-transform：字母大小寫轉換
l None：不轉換
l Uppercase：轉換為大寫
l Lowercase：轉換為小寫
l Capitalize：首字母大寫
l Letter(word)-spacing：文字（單詞）之間的間隔
l Normal：默認間隔
l Length：數值，允許為負值，由浮點數或者單位標識組成
文本Text
l Text-lntent：首行縮進
l Length：百分比數字|由浮點數字和單位標識符組成的長度值，允許為負值。
l 在被另一個對象（如）斷開的對象內不能應用本屬性。
l Text-overflow：設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
l Clip：不顯示省略標記（…），而是簡單的裁切
l Ellipsis：當對象文本溢出時顯示 省略標記（…）
l Text-align：文本對齊
l Left/right/center/justify
l Justify：兩端對其
l Layout-flow:文本流動的方向
l Horizontal：正常的從左往右
l vertical-ideographic : 對象中的內容自上而下流入，下一行在前一行左面。
l direction：文本流動方向
l ltr | rtl | inherit ：從左往右 | 從右往左 | 繼承
l unicode-bidi: 用於同一個頁面里存在從不同方向讀進的文本顯示。與direction屬性一起使用。
l unicode-bidi : normal | bidi-override | embed
l normal : 對象不打開附加的嵌入層，對於內聯要素，隱式重排序跨對象邊界進行工作
l embed : 對象打開附加的嵌入層，direction屬性的值指定嵌入層，在對象內部進行隱式重排序
l bidi-override : 嚴格按照direction屬性的值重排序。忽略隱式雙向運算規則
- direction: rtl;
- unicode-bidi:bidi-override;
l 以上代碼可實現，漢字從右往左流動
l Work-break：文本換行
l word-break : normal | break-all | keep-all
l normal：正常換行
l break-all：允許非亞洲語言文本行的任意字內斷開
l keep-all：對於中文，韓文，日文，不允許字斷開
l write-space：對象對空格的處理
l white-space : normal | pre | nowrap
l normal：默認處理方式，多個合成一個
l pre：按照代碼內輸入的輸出，用等寬字體顯示預先格式化的文本。不合並字間的空白距離和進行兩端對齊。
l nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象
l 所有的text標簽
- text-indent text-overflow vertical-align text-align layout-flow writing-mode direction unicode-bidi word-break line-break white-space word-wrap text-autospace
- text-kashida-space text-justify ruby-align ruby-position ruby-overhang
- ime-mode
- layout-grid layout-grid-char layout-grid-char-spacing layout-grid-line
- layout-grid-mode layout-grid-type
Unicode字體編碼/
在瀏覽器中按F12
第一步 ：F12
第二步 ：找到console
第三布 ：輸入escape(“宋體”) 注意字符
