層疊樣式表 cascading style sheets
1. 字體
自定義字體：將 .ttf 字體文件 保存在 font 目錄下。 使用 @font-face 指定字體的名字和路徑，注意只能寫在外部，不能寫在選擇器裏面
<style type="text/css">
@font-face {
font-family: "gadugi";
src: url("font/gadugi.ttf");
}
.box1{
font: 40px "gadugi";
}
</style>
這裏要注意的是，如果使用 iconfont 直接生成的話，前面要加 iconfont
<i class="iconfont icon-shanchu"></i>
如果使用 icoMoon生成的話，可以不寫iconfont
<i class="icon-shanchu"></i>
原因在於：選擇器，前者使用：
.iconfont{
font-family: "iconfont" !important;
}
.icon-shanchu:before{
content: "\e625";
}
後者使用：[class^="icon-"] 類名以icon- 開頭的所有元素，[class*=" icon-"] 類名包含 icon- (前面有個空格)的所有元素，地址
[class^="icon-"],[class*=" icon-"]{
font-family: "iconfont" !important;
}
.icon-shanchu:before{
content: "\e625";
}
2. 透明：
之前是使用 rgb(0,0,0); 現在使用 rgba(0,0,0,1); 第4位表示透明度，取值範圍 0~1
background-color: rgba(0,0,0,0.5);
可以直接使用 opacity: 0.5; 設置透明度，取值範圍也是 0~1
學到一招，F12控制檯時，按shift，鼠標點擊 rgba()能夠切換爲 #fffff 格式
3.文字陰影。 第二個是 x 軸偏移量，第三個是y軸偏移量， 第4個是 陰影的length(默認爲0，越大則陰影越模糊)
text-shadow: pink 10px 10px 100px;
這裏的顏色當然可以使用 rgba(), rgb()
text-shadow: rgba(0,0,0,0.5) 10px 10px 100px;
設置背景的大小：
background: url("1.png") no-repeat fixed;
background-size: 100% 100%;
背景模糊：
filter: blur(10px);
==========================================================================================
這個主講人講的太爛了，換一個黑馬的視頻學習： 地址( • ̀ω•́ )✧這老師講的既詳細又有趣
1. css命名規範： 不要使用下劃線 _ ，儘量使用 中劃線 -
頭部： header 內容： content/container 尾部： footer 導航： nav 子導航: subnav 側欄: sidebar
欄目: column 頁面外圍控制整體佈局寬度: wrapper 登錄條: loginbar 標誌: logo 題目 title
廣告: banner 頁面主體：main 熱點: hot 新聞: news 下載：download 標籤 tab 提示信息: msq
菜單: menu 子菜單: submenu 搜索: search 友情鏈接: friendlink 版權: copyright 滾動 scroll 小技巧tips
2. 一般網頁不用純黑色,用淡灰色: #3c3c3c
body{
color: #3c3c3c;
font-size: 16px;
}
href 和 src 的區別: 地址
<link rel="stylesheet" href="1.css"/>
<script src="1.js"></script>
display: block;
display: inline;
display: inline-block;
background-size: 50% 50%; 會導致圖片失真. 最好只寫一個, 這樣會自動匹配,圖片不會失真 background-size: 50%;
用的最多的是 cover
background: gray url(image/1.png) no-repeat;
background-size: cover;
多背景 的情況: 使用逗號, 記住 要在 最後一組 定義 background-color;
background: url(image/1.png) no-repeat left top,
url(image/2.png) no-repeat right bottom gray;
3. 凹凸效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background-color: #ccc;
}
div{
color: #ccc;
font: 700 80px "微軟雅黑";
}
div.ao{
text-shadow: 1px 1px #000, -1px -1px #fff;
}
div.tu{
text-shadow: -1px -1px #000, 1px 1px #fff;
}
</style>
</head>
<body>
<div class="ao">凹的文字</div>
<div class="tu">凸的文字</div>
</body>
</html>
這裏 font: 700 80px "微軟雅黑"; 其中 fonr-weight 爲400的話相當於 noraml, 爲700相當於 bold
4. 經常使用這種方式進行網頁佈局:
.header{
width: 960px;
margin: 0 auto;
}
清除元素默認內外邊距
* {
margin: 0;
padding: 0;
}
行內元素(display: inline; ) 是沒有上下外邊距 和 上下內邊距的, 只 可以設置 左右 內/外邊距。
垂直方向的外邊距會合並, margin-top 和 margin-bottom
如果是父子元素, 父元素的margin-top 將從 子元素的margin-top和父元素的margin-top中選出一個最大的值
<head>
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color: #bfa;
margin-top: 30px;
}
.son{
width: 100px;
height: 100px;
background-color: #fba;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<hr/>
</body>
這裏 可以看出, 本意是 son 要與 father 拉開60px 的距離, 結果變成 兩個一起 向下拉了60px距離.
解決這種問題: 可以給 father 添加 1px 的 border
border: 1px solid white;
或者給 father 添加 1px 的 內邊距
padding: 1px;
或者給 father 添加 (開啓BFC)
overflow: hidden;
padding 不影響 盒子寬度的情況: 沒有設置 width; 就不會被撐開. 或者繼承了父元素的寬度(默認和父親一樣寬),但自己沒有明確設置寬度,也不會被撐開
參照視頻寫了個[搜索趣圖]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.searchPis{
width: 250px;
height: 380px;
border: 2px solid rgb(236,239,242);
border-top: 4px solid #ff8400;
margin: 100px;
}
.searchPis h3{
height: 35px;
line-height: 35px;
font-size: 16px;
font-weight: normal;
padding-left: 8px;
border-bottom: 2px solid rgb(236,239,242);
}
.searchPis img{
margin: 8px 0 0 8px;
}
.searchPis ul li{
margin-left: 8px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: url("dot.png") left center no-repeat;
background-size: 5px 5px;
}
.searchPis li a {
margin-left: 14px;
text-decoration: none;
color: #484848;
}
</style>
</head>
<body>
<div class="searchPis">
<h3>搜索趣圖</h3>
<img src="4.gif" width="234px" height="234px" alt=""/>
<ul>
<li><a href="#">皮卡丘，快使出十萬伏特！！</a></li>
<li><a href="#">去吧，皮卡丘，就決定是你了！！</a></li>
<li><a href="#">皮卡，皮卡皮卡丘~</a></li>
</ul>
</div>
</body>
</html>
結果:
5. 使用的方便程度: width > padding > margin
box-sizing: content-box; 以前的盒模型, 設置了 width, 再設置 padding 或 border, 盒子總寬度會被撐開
box-sizing: border-box; 新的盒模型,設置了 width, 就是固定大小,不會被 padding或border給撐開
box-shadow
浮動 float ---> 目的是 讓多個塊級元素在一行顯示.
那使用 display: inline-block; 不是也可以嗎? 存在的缺點是中間存在空格
, 你要寫成 <div></div><div></div> 而不能寫成 <div></div> <div></div> (書寫代碼時要寫在一行,不能換行,不能有空格)
通常做法是 給 要浮動的子元素 添加一個將它包起來的 父元素,這樣就不會影響之後的佈局.
清除浮動的方式一: (這裏 content 加了個點, 因爲 firefox7.0版本前會生成空格)
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
清除浮動的方式二: 小米商城中的寫法:
.clearfix{
*zoom:1
}
.clearfix:before,
.clearfix:after
content:" ";
display:table
}
.clearfix:after {
clear:both
}
