一. CSS書(shū)寫(xiě)格式
1.行內(nèi)樣式
可以直接將CSS代碼寫(xiě)到開(kāi)始標(biāo)簽當(dāng)中;
2.內(nèi)嵌樣式
可以在一對(duì)head標(biāo)簽當(dāng)中寫(xiě)上一對(duì)style標(biāo)簽,然后在style標(biāo)簽中編寫(xiě)CSS代碼;
3.外鏈樣式 ---- 企業(yè)開(kāi)發(fā)中一般使用外鏈樣式
可以單獨(dú)新建一個(gè).css的文件,把CSS代碼寫(xiě)到這個(gè)文件中,然后通過(guò)link標(biāo)簽把這個(gè)文件和.html文件關(guān)聯(lián)起來(lái);
4.導(dǎo)入樣式
可以單獨(dú)新建一個(gè).css的文件,把CSS代碼寫(xiě)到這個(gè)文件中,然后通過(guò)@import把這個(gè)文件和.html文件關(guān)聯(lián)起來(lái)
外聯(lián)樣式和導(dǎo)入樣式的區(qū)別
1.外鏈樣式是通過(guò)link標(biāo)簽關(guān)聯(lián) , 而導(dǎo)入樣式是通過(guò)@import關(guān)聯(lián) , 而@import是CSS2.1推出的,所以有兼容問(wèn)題;
2.外鏈樣式在顯示界面的時(shí)候,會(huì)先加載CSS樣式,再加載結(jié)構(gòu),所以用戶看到界面時(shí)一定已經(jīng)設(shè)置了樣式 ; (用戶看到的界面很漂亮)
導(dǎo)入樣式在顯示界面時(shí),會(huì)先加載結(jié)構(gòu),再加載樣式,所以用戶看到界面的時(shí)候,不一定已經(jīng)設(shè)置了樣式 ; (先丑,后面才會(huì)變好看)
二. 編寫(xiě)網(wǎng)站要做的事情
1.編寫(xiě)網(wǎng)站要做的第一件事情
創(chuàng)建站點(diǎn)文件夾, 并且創(chuàng)建一些子文件夾和子文件
注意點(diǎn):
創(chuàng)建站點(diǎn)文件夾可以是中文
但是站點(diǎn)文件夾下面的子文件夾和子文件不能出現(xiàn)中文
2.重置所有默認(rèn)的樣式和設(shè)置一些全局樣式, 并且將設(shè)置樣式的css文件和對(duì)應(yīng)的界面關(guān)聯(lián)起來(lái)
三. 如果圖片的寬度大于父元素的寬度 , 設(shè)置圖片居中
注意點(diǎn):
1.如果圖片的寬度大于父元素的寬度, 不能使用margin: 0 auto;或者text-align: center;讓圖片居中
2.如果圖片的寬度大于父元素的寬度, 可以使用定位流讓圖片居中
但是定位流的弊端也比較明顯. 1.需要寫(xiě)三行代碼 2.必須知道圖片寬度
3.如果圖片的寬度大于父元素的寬度, 也可以使用<a>奇淫技巧</a>
margin: 0 -100%;
注意點(diǎn): 父元素必須設(shè)置text-align: center;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 500px;
height: 500px;
margin: 0 auto;
border: 5px solid red;
box-sizing: border-box;
text-align: center; // 圖片的寬度大于父元素的寬度 設(shè)置圖片居中 (第二步)
}
.son{
margin: 0 -100%; // 圖片的寬度大于父元素的寬度 設(shè)置圖片居中 (第一步)
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>
五.設(shè)置透明色
transparent 透明的
border: 2px solid transparent;/*設(shè)置邊框:透明*/
六. opacity: 0; 透明度
作用: 設(shè)置元素的透明度, 特點(diǎn):子元素也會(huì)跟著透明;
