筆記
CSS
一划提、css簡述
1夫壁、css是什么 屑迂？ 有什么作用
? HTML--頁面結(jié)構(gòu)赚瘦，人的面部
CSS--美化頁面，給人化妝
2亡脑、css：層疊樣式表
層疊：一層一層疊加的
樣式表：存儲樣式的地方叮盘，多個樣式
給一個人的面部化妝：畫口紅厢汹，畫眼影课舍，打粉底
HTML標(biāo)簽? ? ? ? ? ? ? ? ? ?樣式1? ? ?樣式2? ? ?樣式3
css通常稱為css樣式或疊層樣式表塌西，主要用途設(shè)置HTML頁面中的文本內(nèi)容（字體蜗顽、大小、對齊方式等）雨让、圖片的外形（寬高、邊框樣式忿等、邊距等）栖忠、一級版面的布局等外觀顯示樣式
CSS可以使用HTML頁面更加好看，css+div布局更加靈活贸街，更容易繪制出用戶需要的結(jié)構(gòu)
3庵寞、css作用：修飾HTML頁面，更豐富多彩地展示超文本信息
二薛匪、CSS入門案例
1捐川、創(chuàng)建一個HTML文件
? ? ? ? ? ? ? <> 015.CSS簡述.html
2、在HTML上創(chuàng)建一個字體標(biāo)簽
<font size="7">現(xiàn)在的年輕人 錢沒賺幾個 犒勞自己的理由卻賊多
</font><br>
3逸尖、字體標(biāo)簽中新增一個style屬性古沥，并修改style屬性值
<font style ="font-size:120px;">現(xiàn)在的年輕人 錢沒賺幾個 犒勞自己的理由卻賊多</font><br>
三、為什么使用CSS代替HTML屬性設(shè)置樣式
? ? ? ? ? ?因?yàn)镠TML屬性在單獨(dú)使用時有一定的局限性娇跟，所以要配置css樣式代碼才可以展示更為豐富的效果
四岩齿、CSS的代碼規(guī)范
1、放置規(guī)范
? ? ? ?（1）在<style>標(biāo)簽內(nèi)容體中書寫css樣式的代碼? ? ? ?
? ? ? ? ? ? ? ?<style>標(biāo)簽放置在<head>標(biāo)簽中
2苞俘、格式規(guī)范
選擇器名稱{屬性名：屬性值盹沈；屬性名：屬性值；......}
選擇器：即指定css樣式作用在哪些HTML標(biāo)簽上
3吃谣、代碼規(guī)范
屬性名和屬性值之間是鍵值對關(guān)系
屬性名和屬性值之間用：連接乞封，最后;結(jié)尾
? ? 例如：font-size: 120px;
如果一個屬性名有多個值，多個值使用空格隔開
例如：border: 5px solid red;? ?（border設(shè)置邊框的）
CSS注釋： /* 注釋內(nèi)容*/? 等同于java的注釋
五岗憋、CSS選擇器
1肃晚、基本選擇器
? 元素選擇器
? ?HTML標(biāo)簽又叫HTML元素
元素選擇器：即以HTML標(biāo)簽名作為選擇器名稱
作用：選擇css樣式代碼，作用于對應(yīng)標(biāo)簽簽名的標(biāo)簽上
格式：標(biāo)簽名{/*CSS樣式代碼*/}
適用范圍：適用于將相同樣式作用在多個同名標(biāo)簽上
（2）id選擇器
每個HTML標(biāo)簽都有一個id屬性仔戈，id的屬性值必須在本頁面是唯一的
id選擇器： 即以HTML的id的屬性值作為選擇器名稱
作用：選擇css樣式代碼陷揪，作用于某個規(guī)定id值得HTML標(biāo)簽上
格式：#id值?{/*CSS樣式代碼*/}
適用范圍：適用于將樣式作用于具有某個id的標(biāo)簽上（更有針對性）
注意： 必須手動保證id值在本頁面唯一（如果不唯一，或具有共同樣式杂穷，但js會出問題）
（3）類選擇器
每個HTML標(biāo)簽都有一個class屬性悍缠，class屬性值即為類名
類選擇器：即以HTML的類名（class屬性）作為選擇器名稱
作用：選擇css樣式格式化代碼作用于相對類名的HTML標(biāo)簽上
格式：.類名?{/*CSS樣式代碼*/}
適用范圍：適用于將樣式一次作用在相同類名的標(biāo)簽上（即使標(biāo)簽名不同也可以）
2、基本選擇器的組合方式
層級關(guān)系（后代選擇器）
標(biāo)簽和標(biāo)簽之間有層級關(guān)系耐量，例如<html>標(biāo)簽的子標(biāo)簽為<body>標(biāo)簽
我們可以對基本選擇器進(jìn)行組合飞蚓，表現(xiàn)出層級關(guān)系，從而更加針對性地把樣式作用于某些標(biāo)簽上
格式：選擇器1 選擇器2 .......{/*CSS樣式代碼*/}
表示選擇器1下邊的選擇器2....
六廊蜒、邊框?qū)傩?/p>
所有的HTML標(biāo)簽都有邊框趴拧，默認(rèn)邊框不可見
border設(shè)置邊框的樣式
格式： 寬度 樣式 顏色溅漾；
例如 vorder： 1px solid red; 表示1像素粗的實(shí)線的洪澤邊框
線條樣式：solid實(shí)線、none無邊框著榴、double雙線邊框
width 用于設(shè)置標(biāo)簽的寬度
height 用于設(shè)置標(biāo)簽的高度
background-color 設(shè)置標(biāo)簽的背景顏色
背景顏色設(shè)置的兩種主流方式：
1添履、英文單詞： red? blue? yellow
2、顏色代碼 ： 格式 #紅祿藍(lán) 每一個顏色用涼粉16進(jìn)制位數(shù)表示
例如 ff1100? 紅色顏色最重脑又，綠色其次暮胧，藍(lán)色幾乎沒有
七、布局
float
? ? 通常默認(rèn)的排版方式问麸，將頁面中的元素從上到下一一羅列往衷，二實(shí)際開發(fā)中，需要左右暗示進(jìn)行排版严卖，就需要使用浮動屬性
?格式：選擇器{float：屬性值;}
常用屬性值：
none：元素不浮動（默認(rèn)值）
left：元素向左浮動
right：元素向右浮動
注意：因?yàn)樵卦O(shè)置浮動屬性后席舍，會脫離原有文檔流，從而會影響其他元素的樣式哮笆，
所設(shè)置浮動以后来颤，頁面模式需要重新調(diào)整
八、轉(zhuǎn)換
display
? 塊元素：獨(dú)占一行稠肘，常見 h1? p? div? ul li........
行內(nèi)元素（內(nèi)聯(lián)元素）：只占自身大小脚曾，自動換行span a input ..........
display屬性可以使得元素在行內(nèi)元素和塊元素之間相互轉(zhuǎn)換
格式：選擇器{display：屬性值；}
常用的屬性值：
block：塊元素
inline：行內(nèi)元素
inline-block:行內(nèi)塊元素启具，既可以設(shè)置寬高本讥，又不會獨(dú)占一行
<img src=" " alt=" " />
none：元素將被隱藏，不會顯示鲁冯，也不占用頁面的空間
visbility
? hidden隱藏
? 隱藏的元素雖然不顯示拷沸，但是它的位置會依然保持
九、字體
font-size 用于設(shè)置字體的大小
color：用于設(shè)置字體的顏色
十薯演、CSS盒子模型
什么是盒子模型
? ? ? ? ?所有HTML元素：我們都可以看成一個四邊形撞芍，即一個盒子
? ? ? ? ?用CSS來設(shè)置元素盒子的內(nèi)邊距，邊框跨扮，外邊距的樣式的方式序无，稱為盒模型邊框
2、邊框：
border：HTML元素盒子的框體
四個屬性：
broder-top：上邊框
broder-right：有邊框
broder-bottom：下邊框
broder-left：左邊框
通用設(shè)置（簡寫）一次性設(shè)置上下左右邊框樣式
border:1px solid red; 1像素的實(shí)線紅色邊框
3衡创、內(nèi)邊距
? ? ? ? ? padding：HTML元素里的內(nèi)容體到HTML元素邊框的距離
? ? ? ? 四個屬性：
? ? ? ? ? ? ? ? ? ? ? ? ?padding-top： 上內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? padding-fight：右內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? ? padding-bottom：下內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-left：左內(nèi)邊距
通用設(shè)置（簡寫）一次性設(shè)置上下左右邊框樣式
padding： 10px帝嗡；
4、外邊距
margin：HTML元素邊框到其他HTML元素邊框的距離
四個屬性：
? margin-top： 上外邊距
margin-fight：右外邊距
margin-bottom：下外邊距
margin-left：左外邊距
通用設(shè)置（簡寫）一次性設(shè)置上下左右外邊距距離
margin： 10px璃氢；
十一哟玷、CSS和HTML的結(jié)合方式
內(nèi)部樣式
? ? 行內(nèi)樣式：通過標(biāo)簽的style屬性來設(shè)置元素的樣式
格式： <html 標(biāo)簽 style="css樣式代碼"/>
適用環(huán)境：更加針對性修改某個標(biāo)簽的效果
<style></style>標(biāo)簽方式：當(dāng)某些樣式在頁面中被多個標(biāo)簽重復(fù)使用，同意寫入到style標(biāo)簽中
格式：<style>css樣式代碼</style>
使用環(huán)境：適合頁面中進(jìn)行樣式復(fù)用
外部樣式
<link/>鏈入式： .css為擴(kuò)展名的外部樣式表文件中一也，通過</link>引入
格式：<link rel="stylesheet" type="text/css" href="css文件路徑"/>
rel="stylesheet" ：固定值巢寡，表示樣式表
type="text/css" ：固定值喉脖，表示CSS類型
href="css文件路徑" ： 表示CSS文件位置
使用范圍：不同頁面進(jìn)行樣式復(fù)用
作業(yè)
1 palte? ?2? ?bento? ?3? ?#fancy? ?4? ?place apple? ?5? ?#fancy pickle 6? .small
