1.層疊樣式表
層疊樣式表：Cascading Style Sheet :CSS
主要用于標(biāo)簽的樣式修飾：修飾內(nèi)容自脯、位置剃盾、顏色等等
操作過程中狮惜，主要注意如下環(huán)節(jié)
（1）css的基本語法
（2）css代碼的位置
（3）css選擇器
（4）常見樣式
1.1CSS基本語法
語法：
樣式名稱：樣式的值
如：
color:red 內(nèi)容中文本的顏色：紅色
background-color:orange 某個標(biāo)簽的背景顏色：橙色
font-size:22px 標(biāo)簽中文本字體的大杏胛小：22像素
font-family:"宋體" 標(biāo)簽中文本的字體：宋體
1.2CSS代碼的位置
在一個標(biāo)準(zhǔn)網(wǎng)頁中，CSS代碼的位置一般有三個位置
（1）標(biāo)簽style屬性中康二；用于修飾當(dāng)前標(biāo)簽
<input type="text" style="width:120px;height:30px;"/>
(2) 當(dāng)前網(wǎng)頁中碳胳，將樣式包含在一對<style></style>標(biāo)簽中【入門推薦】
<style>
/修飾當(dāng)前網(wǎng)頁中所有input標(biāo)簽，寬度120像素沫勿，高度30像素/
input{width:120px;height:30px;}
</style>
(3)外部CSS文件中專門用于定義CSS樣式，引入到當(dāng)前網(wǎng)頁中使用【正式開發(fā)推薦】
index.css 樣式表文件
index.html 網(wǎng)頁文件
網(wǎng)頁文件中味混，通過<link ref="stylesheet" href="index.css">標(biāo)簽將一個樣式表文件引入當(dāng)前網(wǎng)頁中操作
1.標(biāo)簽內(nèi)嵌樣式【不推薦】
2.頁面內(nèi)嵌樣式【少量樣式使用該方式操作】
3.外部樣式【大量樣式操作店家推薦】
1.3CSS選擇器
選擇器：CSS代碼中产雹，用于選擇/選中標(biāo)簽的語法
修飾標(biāo)簽的樣式：首先要選中某個/多個標(biāo)簽
常見CSS選擇器：
選擇器名稱 描述
*{樣式} 選中當(dāng)前網(wǎng)頁中所有標(biāo)簽
#id id選擇器，選中網(wǎng)頁中id屬性為之定點桿值得某個標(biāo)簽翁锡，只能選中一個標(biāo)簽【規(guī)范】
蔓挖。class class選擇器：選中網(wǎng)頁中class屬性為指定值的多個標(biāo)簽；任意標(biāo)簽的class可以重復(fù)
tag 標(biāo)簽選擇器：使用標(biāo)簽名稱馆衔，直接選中當(dāng)前網(wǎng)頁中所有的該名稱的標(biāo)簽
selector > selector2 子類選擇器：字標(biāo)簽選擇器 瘟判，選中selector選擇器選中的標(biāo)簽中，直接子標(biāo)簽selector選中的標(biāo)簽
selector selector2 包含選擇器角溃，選中selector選中你的標(biāo)簽中拷获，所有的selector2選中的標(biāo)簽
selector：nth-of-type（num） 序號選擇器|序列選擇器，選中第幾個標(biāo)簽
2常見樣式
2.1內(nèi)容修飾樣式
（1）——字體樣式
<style>
字體 font-family:"楷體减细。匆瓜。。未蝌。"
顏色 color：顏色代碼
字號 font-size：12px
加粗 p{font-weight:bolder;}
斜體 li:nth-of-type(2){font-style:italic;}
</style>
實例如下
（2）——背景樣式
<style>
ch1{width:200px;height:200px;
背景顏色 background-color: 顏色代碼
背景圖片 background-image:url("圖片的相對路徑")
背景位置 background-position： 寬度驮吱，高度；
邊框 border:solid 2px red;
圓角邊框 border-radius：5px 邊框圓化五個像素 border-radius：50%萧吠； 圓形邊框的設(shè)置
邊框顏色 border：solid 2px 顏色代碼
邊框粗細(xì) border：solid 你想要的線條粗細(xì)px 顏色代碼
字體居中： text-align：center左冬；
溢出標(biāo)簽的內(nèi)容：隱藏 overflow：hidden；
</style>
實際案例:
2.2定位樣式
標(biāo)簽寬度
標(biāo)簽高度
<style>
/*任意標(biāo)簽纸型，包含默認(rèn)的邊距*/
/*這樣默認(rèn)的邊距拇砰，會影響網(wǎng)頁元素的定位九昧，一般都會置空。*/
*{margin：0毕匀；
padding：0铸鹰；
}
</style>
頁面窗口中離窗口左邊的距離——外邊距
頁面窗口中離窗口頂部的距離——外邊距
margin-left：220px； #左邊距
margin-top：20px皂岔； #上邊距
標(biāo)簽內(nèi)容和標(biāo)簽之間的留白距離——內(nèi)邊距
padding-left：50px蹋笼；
padding-top：20px；
元素/標(biāo)簽一旦定位：說明元素可以設(shè)置寬度和高度躁垛，對標(biāo)簽就需要進(jìn)一步的標(biāo)簽分類：
行標(biāo)簽：標(biāo)簽前后不換行剖毯，標(biāo)簽不能設(shè)置寬度和高度
行內(nèi)塊標(biāo)簽，標(biāo)簽前后不換行教馆，標(biāo)簽可以設(shè)置寬度和高度
塊標(biāo)簽：標(biāo)簽前后自動換行逊谋，標(biāo)簽可以設(shè)置寬度和高度
實際操作過程中，對于標(biāo)簽的控制土铺，通常使用樣式進(jìn)行處理：display<br/>
display:inline; 表示修飾的標(biāo)簽為行標(biāo)簽
diaplay:inline-block; 表示修飾的標(biāo)簽為行內(nèi)塊標(biāo)簽<br/>
display:block; 表示修飾的標(biāo)簽為塊標(biāo)簽
標(biāo)簽元素的定位：樣
式：position
四種定位方式：
默認(rèn)：position：static
相對于父元素左上角的坐標(biāo)進(jìn)行定位
margin-left:0;
margin-top:0
相對：position：relative
當(dāng)前元素相對瀏覽器|父元素定位;所有的子元素相對自己定位
【margin定位】
絕對：position：absolute
默認(rèn)情況下~父元素左上角顯示 left：0胶滋；top：0；父元素默認(rèn)定位悲敷，當(dāng)前元素相對于瀏覽器進(jìn)行定位
top：0究恤；
left：0；
固定：position：fixed
position:fixed;
一種獨立的定位方式【top|left定位】 相對于瀏覽器固定位置
width:200px;
height:500px;
top:200px;
background-color:darkblue;
margin-left:1200px;
color:white;
所謂的定位：就是確定哪里是（0,0）原點
案例
2.3C3動畫
語法：
通過關(guān)鍵詞@keyframes自定義動畫前后效果
案例：
2.4動畫變換
語法
主要通過transfrom完成元素標(biāo)簽的變化
