css 初識

• css 通常稱為css樣式或?qū)盈B樣式表（級聯(lián)樣式），主要用于設(shè)置html頁面中的文本內(nèi)容（字體杠愧，大小，對齊方式）圖片（寬高邊框樣式編距等）以及版面的布局等外觀樣式逞壁。
• css以html 為基礎(chǔ)流济，提供了豐富的功能锐锣，如字體顏色、背景的控制及整體排版等袭灯，還可以針對不公的瀏覽器設(shè)置不同的樣式

css樣式規(guī)則

• 使用html 時刺下，需要尊從一定的規(guī)范

  
  
  DD7A2F0D-1FAD-442E-AC57-2E01C512886A.png
  
  

  如圖樣式中
  1 . 選擇器用于制定css演示作用的html對象，花括號內(nèi)時該對象設(shè)置的具體樣式稽荧。
  2 屬性和屬性值之間以鍵值對的形式出現(xiàn)
  3 屬性是指定的對象設(shè)置的樣式屬性，例如大小工腋、文本顏色等姨丈。
  4 屬性和屬性之間用英文： 鏈接
  5 多個鍵值對之間用英文；隔開

css字體樣式屬性

• font-size 屬性用于設(shè)置字號擅腰，該屬性的值可以使用相對長度單位蟋恬，也可以使用絕對長度單位。其中相對長度單位比較常用趁冈，推薦使用像素px歼争，絕對長度使用較少

  
  
  font-size.png

font-family：字體

font-faimily 屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體渗勘、微軟雅黑沐绒、黑體等。
使用技巧

1. 現(xiàn)在網(wǎng)頁中普遍使用14px+
   2 盡量使用偶數(shù)的數(shù)字符號旺坠。ie6等老式瀏覽器支持奇數(shù)會有bug
   3 各種字體之間必須使用英文狀態(tài)下的逗號隔開
   4 中文字體需要加英文狀態(tài)下的引號乔遮，英文字體一般不需要加引號。當需要設(shè)置英文時取刃，英文字體名必須位于中文字體之前
   5 如果字體中包括空格蹋肮、#、$ 等符號璧疗，則字體必須加英文狀態(tài)下的單引號或雙引號坯辩，例如：font-faimily：“times new Roman”
   例如：font-family：“宋體” font-family：“微軟雅黑”

css Unicode字體

• 在css 中設(shè)置字體名稱，直接寫中文是可以的崩侠。但是在文件編碼（gb2312漆魔、UTF-8等）不匹配時會產(chǎn)生亂碼的錯誤。xp 系統(tǒng)不支持類似微軟雅黑的中文啦膜。
  1 方案一：你可以使用英文來替代有送。比如font-faimily：”Microsoft Yahei“
  2 方案二： 你可以使用Unicode 編碼來寫字體名稱可以避免這些錯誤。使用Unicode 寫中文字體名稱僧家，瀏覽器時可以正確解析font-family ：”雀摘、5FAE\8F6f\96C5\9ED1“
  推薦使用方案二

  
  
  字體對應表.png

font-weight：字體粗細

字體加粗除了b strong 標簽之外，可以使用css 來實現(xiàn)八拱，但是css沒有語意阵赠。
font-weidth 屬性用于定義字體的粗細涯塔，其可用的屬性：normal。bolod清蚀、bolder匕荸、lighter、100-900（100的整數(shù)倍） 推薦使用數(shù)字

font-style

• 設(shè)置檢索文本的演示

字體傾斜除了用i 和em之外枷邪，可用使用css 來實現(xiàn)榛搔，但是css 沒有語意
fong-style 屬性用于定義字體風格，例如設(shè)置斜體东揣、傾斜或正常字體
normal 指定正常的樣式
italic： 讓字體斜體
oblique：瀏覽器會顯示傾斜的字體樣式践惑。
技巧：
批示我們很少給字體加斜體，反而謝歡給系統(tǒng)提標簽（em i）該成普通樣式

字體綜合設(shè)定

font 屬性用對字體樣式進行綜合設(shè)置嘶卧，器語法點如下
選擇器{font :font-style font-weight font-size/line-height font -faimily;}
使用font屬性時尔觉，必須按上面語法格式中的順序書寫，不能更換順序芥吟，各個屬性以空格隔開
注意： 其中不需要設(shè)置的屬性可以省略侦铜，但必須保留font-size和font-family 屬性，否則font 屬性將不器作用

選擇器（重點）

要將csss演示應用于特定的HTML 元素钟鸵，首先需要找到該目標元素钉稍。在css中，執(zhí)行這一任務(wù)的演示規(guī)則部分被稱為選擇器

標簽選擇器（元素選擇器）

標簽選擇器是指用HTML標簽稱作為選擇器携添，按標簽名稱分類嫁盲，微頁面中某一類標簽制定統(tǒng)一的css樣式。

  p {
        color: red;
    }

類選擇器

類選擇器用 . 來進行表示烈掠，后面緊跟類名
. 類名{ 屬性1：屬性值1羞秤；屬性2：屬性值2；}
標簽調(diào)用時用 class = ”類名“即可

 .minren { //申明類樣式
        color: red;
    }
<div class="minren">名人</div>//引用類演示 class 單詞類型的意思

類選擇器最大的優(yōu)點是可以為元素隊形定義單獨或者相同的樣式
類樣式命名技巧:
1 長名稱或詞組可以使用就橫線來為選擇器命名
2 不建議使用-下劃線來命名css 選擇器
3 不要單純數(shù)字左敌、中文等命名瘾蛋，盡量使用英文字母來表示。

id選擇器

格式 #名字 {樣式一：值一矫限；樣式二：值二}

     # minren { //申明類樣式
        color: red;
    }
<div id="minren">名人</div>

類選擇器和id選擇器的區(qū)別
W3C 標準規(guī)定哺哼，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)叼风，但是允許相同的名字class
類選擇器（class）好比人的名字取董，是可以多次重復使用的
id 選擇器 好比人的身份證，不能重復使用无宿。只能使用一次

通配符選擇器

• 通配符選擇器茵汰，他是所有選擇器中范圍最廣的一個，能匹配所有元素

  • {
    color: read;
    }
    這樣html 所有的顏色就是紅色了

偽類選擇器

首先孽鸡，這也是一個選擇器蹂午，偽類選擇器用于向一些選擇器添加特殊的效果栏豺。比如給鏈接添加特殊的此傲骨，比如可以選擇第一個豆胸，第n個元素瘾英。
為了和我們逛才學過的類徐昂周期曲表橄浓，可選擇器是一個點。比如 .demo{} 而偽類選擇器就是 ：link{}
鏈接偽類選擇器：

• ：link // 訪問的鏈接

• ：visited 已訪問的鏈接

• ：hover 鼠標移動到鏈接上

• ：active 選定的鏈接
  注意些的時候党晋，他們的順序精良不要顛倒 安好lvha 的順序添谊，love hate 記憶法蒸绩。

       a:link {
        font-size: 15px;
        color: gray;
        mso-font-width: 700px;
    }
    a:visited{
  
      font-size: 15px;
        color: orange;
        mso-font-width: 700px;
    }
    a:hover{
        color: red;
    }
     a:active{
        color: green;
    }
   <a href="www.baidu.com" >百度</a>
  

結(jié)構(gòu)（位置）偽類選擇器（css3）

• ：fist-child ： 選取屬于其父類的首個子元素的制定選擇器

• ：last-child ：選取屬于其父類的最后一個元素制動的選擇器

• ：nth-child（n）： 匹配屬于其父元素的第N個子元素秸架，不論元素的類型

• ：nth-last-child（n）：選擇器匹配屬于其元素的第N個字元素的每個運輸唯沮，不論元素的類型，從最后一個子元素開始計數(shù)忿檩。 n可以是數(shù)字、關(guān)鍵詞或公式爆阶。

    li:first-child{
        color: red;
    }
    li:last-child{
        color: green;
    }
    li:nth-child(5){
        color: gray;
    }
     li:nth-child(even){ 所有的偶數(shù) 或者也可以寫2n 0 2 4 6 8 燥透， 3n  0 3 6 9
        color: gray;
    }
    li:nth-child(odd){ 所有的奇數(shù)
        color: gray;
    }
     li:nth-last-child(even){ 從后往前數(shù)偶數(shù)，也可以 2n 3n
        color: azure ;
    }
    li:nth-last-child(2){
        color: azure ;
    }
   <ol>
      <li>第一個孩子</li>
      <li>第二個孩子</li>
      <li>第三個孩子</li>
      <li>第四個孩子</li>
      <li>第五個孩子</li>
      <li>第六個孩子</li>
      <li>第七個孩子</li>
  

</ol>

目標偽類選擇器

：target 目標偽類選擇器：選擇器可以用于選取當前活動的目標元素

：target { // 當前被選擇的用于錨點等
 color :red;
}

外觀屬性

• color 屬性用于定義文本的顏色取值方式有三種
  1 預定義的顏色值辨图，如red 班套，green，blue等
  2 十六進制 如#ff0000
  3 RGB 代碼故河，如house可以表示rgb（255.0吱韭，0，0）
  注意：如果使用RGB 代碼的百分比顏色值鱼的，取值為0 時也不能省略百分號理盆，必須寫0%

• ling-height：行間距
  line-height 屬性用于設(shè)置行間距，就是行與行之間的距離凑阶，即字符的垂直間距猿规，遺憾稱為行高。line-height常用的屬性單位是像素px 宙橱，相對于em和百分bi%姨俩，實際工作中使用最多的是像素。

• text-align：水平對齊方式
  text-align 屬性用于設(shè)置問題本內(nèi)容的水平對齊方式师郑，相當于html中的align對齊屬性环葵。其可用屬性值如下
  left：左對齊
  right：右對齊
  center： 居中

• text-indent：首行縮進
  text -indent 屬性用于設(shè)置首行文本的縮進，其屬性值可為不同單位的數(shù)值宝冕、em字符寬度的倍數(shù)张遭、或相對于瀏覽器窗口的百分比%，允許使用負值猬仁，建議使用em作為設(shè)置單位帝璧。
  1 em 就是一個子的寬度 如果是漢字的段落先誉，1 em 就是一個漢字的寬度。

• text-spacing：字間距
  屬性用于定義字間距的烁，所謂字間距就是字符與字符之間的空白褐耳。其屬性值可為不同單位的值，允許使用負值渴庆，默認為normal铃芦。

• word-spacing：單詞間距
  word-spacing 屬性用于定義英文單詞之間的間距，對中文字符無效襟雷。和letter-spacing一樣刃滓，其屬性可為不同單位的數(shù)值，語序使用負值耸弄，正常為normal
  word-spacing 和letter-sapcing 均可對英文進行設(shè)置咧虎。不同的是letter-sapcing定義的為字木之間的間距，而word-sapcing 定義的為英文單詞之間的間距

• word -break：自動換行
  normal 使用瀏覽器默認的換行規(guī)則
  break-all 語序在單詞內(nèi)換行
  keep-all 只能在半角空殼或連體字符處理行计呈。

顏色半透明（css3）

文字顏色到了css3我們可以采用半透明額格式了員入下

 color：rgba（r,g,b,a） a是alpha 透明的意思 color （0砰诵，2，2捌显，0.3）

文字的陰影

以后我們可以給我們的文字添加陰影效果了Shadow
text-shadow 茁彭；水平位置 垂直位置 模糊距離 影音顏色

32439C73-38E0-4271-8324-2BD3AF68B345.png

text-shadow ：1px 2px 3px rgba（0，0扶歪，0理肺，0.6）
前連個參數(shù)必須寫，后面兩個參數(shù)可以省略.

5 引入css樣式表

css 可以寫到那個位置善镰？是不是一定要寫到html中妹萨？

5.1行內(nèi)樣式

是通過標簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下：

<標簽 style = "屬性1：屬性值1媳禁；屬性2 ：屬性值2眠副；">內(nèi)容</標簽>

語法中style是標簽的屬性值，實際上任何HTML標簽都擁有style 屬性竣稽，用來設(shè)置行內(nèi)樣式囱怕。其中屬性和值得書寫規(guī)范與css樣式規(guī)則相同，行內(nèi)樣式所在的標簽及嵌套在其中的子標簽起作用毫别。

5.2 內(nèi)部樣式

內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部文件中娃弓，并且用style標簽定義，其語法格式如下：

<head>
<style>
選擇器{屬性1：屬性值1岛宦；屬性2：屬性值2台丛；}
</style>

語法中，style標簽一般位于head白淺中title標簽之后，也可以吧他放在html的任何地方
</head>

5.3外部樣式

鏈入式是將樣式放在一個或多個以.css 為擴展名的外部樣式表文件中挽霉，通過link標簽將外部樣式表文件鏈接到html 文檔中防嗡，其基本語法格式如下

<head>
 <link href = "css文件路徑" rel = "stylesheet"/>
</head>

注意：link 是個單表親啊哦
該語法中，link 標簽需要放在head頭部標簽中侠坎，并且必須制定link標簽的三個屬性蚁趁。
-href 定義所鏈接尾部樣式表文件的url ，可以是嫌貴路路徑也可以是絕對路徑

• type ：定義所鏈接文檔的類型实胸，在這里需要制定“text/css”他嫡，表示鏈接的外部文件為css 樣式表。
• rel ：定義當前文檔與被鏈接文檔之間的關(guān)系庐完，在這里需要制定為“stylesheet”表示被倆呢的文檔是一個樣式表文件钢属。

5.4 三種演示表總結(jié)

DECBD101-8BE0-4D3F-8EBE-F8A0E12068A1.png

6標簽顯示模式（display）

html 標簽一般分為塊標簽和行內(nèi)標簽兩種類型，他們也稱為塊元素和行內(nèi)元素

6.1 塊級元素（block-level）

每個塊元素通常會獨自占據(jù)一整行或多行门躯，可以對其設(shè)置寬度淆党、高度、對其等屬性讶凉，常用語網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建宁否。
常見的塊元素有<h1-h6> ,<p>,<div>,<ul>,<ol><li>等，其中<div>是最典型的塊元素
塊級元素的特點：
1 總是從新開始
2 高度缀遍，行高、外邊距以及內(nèi)編輯都可以控制饱须。
3 寬度默認是容器100%
4 可以容納內(nèi)聯(lián)元素和其他塊元素域醇。

6.2行內(nèi)元素（inline-level）

行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)蓉媳，一般不可以設(shè)置寬度譬挚、高度、對齊等

常見簡的行內(nèi)元素 有<a> <strong> <b><em><I><del><s><ins><u><span> 其中span 是典型的行內(nèi)元素

行內(nèi)元素的特點
1 和相鄰行內(nèi)元素在一行上
2 高酪呻、寬無效减宣，但水平的padding和margin可以設(shè)置，垂直方向的無效玩荠。
3 默認寬度就是他本身內(nèi)容的寬度漆腌。
4 行內(nèi)元素只能容納文本或者其他行內(nèi)元素 a特殊
注意：
1.只有文字才能組成段落 因此p里面不能放塊級元素，同理還有這些標簽h1-h6 dt阶冈，他們都是文字類塊級標簽闷尿，里面不能放其他塊級元素
2 . 鏈接里面不能再放鏈接

6.3塊級元素和行內(nèi)元素區(qū)別

83852E2C-445C-4746-81E0-75A853F479B0.png

6.4 行內(nèi)塊元素（inline -block）

行內(nèi)元素總有幾個特殊的標簽 imge input td ，可以對他們設(shè)置寬度和對齊屬性女坑，有些資料可能會稱為他們?yōu)樾袃?nèi)塊元素填具。
行內(nèi)塊元素的特點：
1 和相鄰內(nèi)元素（行內(nèi)塊）在一行上，但是之間會有空杯縫隙
2 默認寬度就是他本身內(nèi)容的寬度匆骗。
3 高度劳景，行高誉简、外邊距以及內(nèi)邊距都可以控制。

標簽顯示模式轉(zhuǎn)換display

塊轉(zhuǎn)行內(nèi)：display:inline;
行內(nèi)轉(zhuǎn)塊：display：block盟广；
塊闷串、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊：display：inline-block