一. CSS書寫格式
1.行內樣式
可以直接將CSS代碼寫到開始標簽當中;
2.內嵌樣式
可以在一對head標簽當中寫上一對style標簽,然后在style標簽中編寫CSS代碼;
3.外鏈樣式 ---- 企業開發中一般使用外鏈樣式
可以單獨新建一個.css的文件,把CSS代碼寫到這個文件中,然后通過link標簽把這個文件和.html文件關聯起來;
4.導入樣式
可以單獨新建一個.css的文件,把CSS代碼寫到這個文件中,然后通過@import把這個文件和.html文件關聯起來
外聯樣式和導入樣式的區別
1.外鏈樣式是通過link標簽關聯 , 而導入樣式是通過@import關聯 , 而@import是CSS2.1推出的,所以有兼容問題;
2.外鏈樣式在顯示界面的時候,會先加載CSS樣式,再加載結構,所以用戶看到界面時一定已經設置了樣式 ; (用戶看到的界面很漂亮)
導入樣式在顯示界面時,會先加載結構,再加載樣式,所以用戶看到界面的時候,不一定已經設置了樣式 ; (先丑,后面才會變好看)
二. 編寫網站要做的事情
1.編寫網站要做的第一件事情
創建站點文件夾, 并且創建一些子文件夾和子文件
注意點:
創建站點文件夾可以是中文
但是站點文件夾下面的子文件夾和子文件不能出現中文
2.重置所有默認的樣式和設置一些全局樣式, 并且將設置樣式的css文件和對應的界面關聯起來
三. 如果圖片的寬度大于父元素的寬度 , 設置圖片居中
注意點:
1.如果圖片的寬度大于父元素的寬度, 不能使用margin: 0 auto;或者text-align: center;讓圖片居中
2.如果圖片的寬度大于父元素的寬度, 可以使用定位流讓圖片居中
但是定位流的弊端也比較明顯. 1.需要寫三行代碼 2.必須知道圖片寬度
3.如果圖片的寬度大于父元素的寬度, 也可以使用<a>奇淫技巧</a>
margin: 0 -100%;
注意點: 父元素必須設置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; // 圖片的寬度大于父元素的寬度 設置圖片居中 (第二步)
}
.son{
margin: 0 -100%; // 圖片的寬度大于父元素的寬度 設置圖片居中 (第一步)
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>
五.設置透明色
transparent 透明的
border: 2px solid transparent;/*設置邊框:透明*/
六. opacity: 0; 透明度
作用: 設置元素的透明度, 特點:子元素也會跟著透明;
