知識點
- CSS樣式表的書寫位置
- 內嵌式
- 外鏈式
- 行內樣式表
- 標簽分類
- 塊元素
- 行內元素
- 行內塊元素
- 塊元素喳逛、行內元素
- CSS三大特性
- 鏈接偽類
- 背景屬性
CSS樣式表的書寫位置
- 內嵌式寫法
<head>
<style type=”text/css”>
樣式表寫法
</style>
</head>
- 外鏈式寫法
寫在head里
<link rel=”stylesheet” href=”1.css”>
- 行內樣式表
寫在標簽上
<h1 style="font-size:30px; color:red">霸氣威武</h1>
三種寫法特點:
★ 內嵌式寫法瞧捌，樣式只作用于當前文件，沒有真正實現(xiàn)結構表現(xiàn)分離。
★ 外鏈式寫法姐呐，作用范圍是當前站點殿怜，誰調用誰生效，范圍廣曙砂，真正實現(xiàn)結構表現(xiàn)分離头谜。
★ 行內樣式表，作用范圍僅限于當前標簽鸠澈，范圍小柱告，結構表現(xiàn)混在一起。 （不推薦使用）
標簽分類(顯示方式)
塊元素
- 特點:
★ 獨占一行
★ 可以設置寬高
★ 嵌套（包含）下笑陈，子塊元素寬度（沒有定義情況下）和父塊元素寬度默認一致际度。 - 典型代表
divh1~h6pulli
行內元素
特點：
★ 在一行上顯示
★ 不能直接設置寬高
★ 元素的寬和高就是內容撐開的寬高。
- 典型代表：
spanastrongemdelins
行內塊元素(內聯(lián)元素)
- 特點：
★ 在一行上顯示
★ 可以設置寬高 - 典型代表
inputimg
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width: 300px;
vertical-align: top;
}
input{
width: 300px;
height: 200px;
background-color: #ffff00;
}
</style>
</head>
<body>
<input type="text" name="myname"/>
</body>
</html>
塊元素涵妥、行內元素轉換
- 塊元素轉行內元素
display:inline;
塊元素被轉為行內元素就不再具有塊元素的特性乖菱，而具有行內元素的所有特性
- 行內元素轉塊元素
display:block;
- 塊元素或行內元素轉行內塊元素
display:inline-block;
css三大特性
層疊型
當多個樣式作用于同一個（同一類）標簽時，樣式發(fā)生了沖突妹笆，總是執(zhí)行后邊的代碼(后邊代碼層疊前邊的代碼)块请。和標簽調用選擇器的順序沒有關系。
繼承性
-
繼承性發(fā)生的前提是包含（嵌套關系）
★ 文字顏色可以繼承
★ 文字大小可以繼承
★ 字體可以繼續(xù)
★ 字體粗細可以繼承
★ 文字風格可以繼承
★ 行高可以繼承總結：文字的所有屬性都可以繼承拳缠。
特殊情況：
h系列不能繼承文字大小墩新。(實質上是繼承了，h1默認的文字大小是2em,如果繼承過來的文字大小為60窟坐，則h1的文字大小變?yōu)?60*)
a標簽不能繼承文字顏色海渊。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.father{
color: red;
font-size: 50px;
font-family: 宋體;
font-weight: 700;
font-style: italic;
line-height: 20px;
}*/
.box{
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<!-- <div class="father">
<p>14威武</p>
</div> -->
<div class="box">
<h1>威武</h1>
<h2>nihaoh2</h2>
<h3>nihaoh2</h3>
<a href="#">你好</a>
<p>你好</p>
</div>
</body>
</html>
優(yōu)先級
默認樣式<標簽選擇器<類選擇器<id選擇器<行內樣式<!important
0 1 10 100 1000 100以上
注意：數(shù)字知識描述權重的大概，并不是精確的哲鸳。
- 優(yōu)先級特點
★ 繼承的權重為0
★ 權重會疊加
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color: red !important;
}
.box{
color: green;
}
#con{
color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box" id="con" style="font-size:100px;color:blue;">nihao</div>
</body>
</html>
權重疊加：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p.son{/* 權重疊加： 1+10=11 */
color: yellow;
}
p{
color: red;
}
.son{
color: blue;
}
.father .son{/*權重疊加：10+10=10臣疑；*/
color: green;
font-size: 50px;
}
.father #baby{/*權重疊加：10+100=110；*/
color: orange;
font-size: 70px;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="baby">web威武</p>
</div>
</body>
</html>
鏈接偽類
a:link{屬性:值;} a{屬性:值}效果是一樣的徙菠。
a:link{屬性:值;} 鏈接默認狀態(tài)
a:visited{屬性:值;} 鏈接訪問之后的狀態(tài)
a:hover{屬性:值;} 鼠標放到鏈接上顯示的狀態(tài)
a:active{屬性:值;} 鏈接激活的狀態(tài)
：focus{屬性:值讯沈；} 獲取焦點
注意：如果四個鏈接偽類都使用，必須按順序書寫婿奔。
導航條案例
案例效果圖
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
text-align: center;
height: 60px;
background-color: #aaa;
}
a{
display: inline-block;
width: 100px;
height: 100%;
line-height: 60px;/*垂直方向要居中必須添加此屬性*/
vertical-align: center;
text-decoration: none;
font-weight: 700;
}
a:hover{
background-color: #eee;
text-decoration: underline;
}
.public{
color: #f14400;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="public">天貓</a>
<a href="#" class="public">聚劃算</a>
<a href="#" class="public">超市</a>
<a href="#" class="public">頭條</a>
<a href="#">阿里旅游</a>
<a href="#">電器城</a>
<a href="#">淘搶購</a>
<a href="#">蘇寧易購</a>
<a href="#">智能生活</a>
</div>
</body>
</html>
背景效果
background-color背景顏色background-image背景圖片Background-repeatrepeat(默認) | no-repeat | repeat-x | repeat-y 背景平鋪repeat：默認值缺狠，水平和垂直方向都平鋪
no-repeat：水平和垂直方向都不平鋪
repeat-x：只有水平方向平鋪
repeat-y：只有垂直方向平鋪
當同時有兩個屬性：repeat-x|repeat-y;相當于默認值repeat,水平和垂直方向都平鋪。
Background-positionleft | right | center | top | bottom 背景定位當只寫水平方位的時候萍摊，垂直方位居中
background-position: right;
當`background-position: right;`時
- 當只寫垂直方位的時候挤茄，水平方位居中：
background-position: top;
當`background-position: top;`時
- 當寫兩個值的時候，順序無要求
background-position: right bottom;
background-position: bottom right;
上面的效果是一樣的
- 寫2個具體值的時候冰木，第一個值代表水平方向穷劈，第二個值代表垂直方向笼恰。
background-position: 200px 50px;
當`background-position: 200px 50px;`時
-
Background-attachment背景是否滾動scroll | fixed
scroll:是指當標簽滾動的時候，被跟著滾動直到消失
當div滾動的時候歇终，圖片也跟著向上走了
fixed:是指當標簽滾動的時候社证，背景不會跟著標簽滾動。
div已經(jīng)滾動了，但是背景圖片的位置沒有動
注意：
當background-position: center; background-attachment: fixed;，此時的背景圖不再是基于div的居中了菲茬，而是基于瀏覽器的body的居中奠衔，所以這個時候如果div變小，背景圖片可能會看不見。
當background-position: center; background-attachment: scroll;，這個時候才是基于div的居中，無論div的多大崖飘，都在div的中間。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
/*無論是設置背景顏色還是背景圖片都必須有高度杈女，否則沒有效果*/
height: 400px;
background-color: #999;
background-image: url('1.png');
background-repeat:no-repeat; /* repeat-x|repeat-y;這樣相當于：repeat */
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box">
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
......
<!--- 多復制幾個p標簽朱浴，讓瀏覽器出現(xiàn)滾動條，測試background-attachment: fixed|scroll屬性 ---->
</div>
</body>
</html>
- 背景屬性連寫
background: red url('1.png') repeat-x top fixed;
注意：
1.連寫的時候沒有順序要求
2.url('1.png')不能省略达椰，其他都可以省略
練習
-
搜索框的案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
width: 470px;
height: 30px;
background: white url('search.jpg') no-repeat 440px center scroll;
}
</style>
</head>
<body>
<input type="text" name="mytext" placeholder="請輸入關鍵字">
</body>
</html>
-
帶圖標的列表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
list-style-type: none;
background: white url('li.gif') no-repeat left center scroll;
text-indent: 1.5em;
}
</style>
</head>
<body>
<ul>
<li><a href="#">大明星:姜潮魔性拜年道晚安</a></li>
<li><a href="#">軟萌正太徐浩演繹《小幸運》</a></li>
<li><a href="#">漫威絕逼好看的電影鏡頭合集</a></li>
<li><a href="#">從沒見過這么搞笑的祖孫組合</a></li>
<li><a href="#">史上最容易挨揍的自助餐吃法</a></li>
</ul>
</body>
</html>
- 購物車
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
background:url('110.png');
width: 67px;
height: 32px;
}
a:hover{
background: url('110.png') bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
購物車練習
- 五彩導航
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
width: 120px;
height: 58px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
a.one{
background:url('images/bg1.png');
}
a.one:hover{
background:url('images/bg2.png');
}
a.two{
background:url('images/bg4.png');
}
a.two:hover{
background:url('images/bg3.png');
}
a.three{
background:url('images/bg5.png');
}
a.three:hover{
background:url('images/bg6.png');
}
a.four{
background:url('images/bg7.png');
}
a.four:hover{
background:url('images/bg3.png');
}
</style>
</head>
<body>
<a href="#" class="one">五彩導航</a>
<a href="#" class="two">五彩導航</a>
<a href="#" class="three">五彩導航</a>
<a href="#" class="four">五彩導航</a>
</body>
</html>
五彩導航
