1、CSS樣式
1.1、CSS背景樣式
<style>
div{
width: 200px;
height: 200px;
background-color: red;
background-image: url("image/icon1.png");
/*backgroud-repeat
背景重復(fù)*/
background-repeat:no-repeat;/*repeat repeat-x repaet-y
no-repeat*/
/*背景位置*/
background-position-x: 50px;/*top bottom left right*/
background-position-y: center;/*top bottom left right*/
/* 另外一種寫(xiě)法 background-position:x y; */
}
</style>
<body>
<div></div>
1.2、背景的簡(jiǎn)寫(xiě)
<style>
div{
width: 200px;
height: 200px;
background:red url("image/icon1.png") no-repeat center center;
/*color image repeat position*/
}
</style>
<body>
<div>
1.3、背景吸附
<style>
.banner{
height: 468px;
background: red url("image/banner.jpg") no-repeat center top;
/*background-attachment:scroll(fixed)*/
background-attachment: fixed;
/*fixed 圖片不會(huì)隨滾動(dòng)條的滾動(dòng)而滾動(dòng)*/
/*scroll 圖片隨滾動(dòng)條的滾動(dòng)而滾動(dòng)*/
}
.content{
height: 800px;
background: #44cef6;
}
</style>
<body>
<div class="banner"> </div>
<div class="content"></div>
1.4、背景大小
<style>
div{
widows: 600px;
height: 300px;
background:red url("image/banner.jpg") no-repeat center center;
/*
背景大小
background-size:x y;
x-->width
y-->height
cover-->會(huì)覆蓋整個(gè)div 特點(diǎn)：只能以大覆小*/
background-size:cover/*100% 100%；*/;
}
</style>
<body>
<div></div>
</body>
2、文本樣式
2.1、文本顏色
<style>
p{
color:red;/*rgb(244,33)*/
}
</style>
<body>
<p>hello world</p>
</body>
2.2、文本對(duì)齊的方向
body{
font-size: 16px;/*繼承性*/
}
p{
text-align: center;/*三個(gè)值：left center right*/
}
a{
text-decoration: none;/*underline overline line-though*/
}
h4{
text-indent: 20px;/*文本縮進(jìn)*/
text-transform: uppercase;/*將字母轉(zhuǎn)換成大寫(xiě)、小寫(xiě)lowercase*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 14px;/*字體大小 網(wǎng)頁(yè)設(shè)置字體不低于12px*/
font-style: italic;/*斜字體*/
font-weight: bold;/*字體的權(quán)重 加粗 bold bolder*/
}
3、關(guān)于連接
link-->沒(méi)有訪問(wèn)過(guò)的鏈接
visited-->已經(jīng)訪問(wèn)過(guò)的鏈接
hover-->鼠標(biāo)移到鏈接上的狀態(tài)
active-->鼠標(biāo)點(diǎn)擊的那一刻
tip:同時(shí)使用鏈接的這幾種狀態(tài)，順序不能打亂
a:link{
color: red;
}
a :actived{
color: yellow;
}
a:hover{
color: blue;
}
a:active{
color: green;
}
4、關(guān)于列表
<style>
/*
列表樣式
list-style:none
列表樣式類型
list-style-type:disc(實(shí)心)|circle（空心）|square（正方型）
列表樣式圖片
list-style-image
*/
ul{
/*list-style:none;*/
/*list-style-type: square;*/
list-style-image:url("image/icon1.png")
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
5、表格
<style>
table,th,td{
width: 500px;
border: 1px solid #333;
background-color: antiquewhite;
}
table{
/*關(guān)鍵樣式*/
border-collapse: collapse;/*邊框合并屬性*/
line-height: 50px
;
text-align: center;
}
tr,td{
background-color: white;
}
</style>
<body>
<table>
<!-- tr table row -->
<tr >
<td rowspan="4">商城</td><!-- rowspan跨越行 colspan跨越列-->
</tr>
<!-- table data -->
<tr><td>JD</td><td>蘋(píng)果</td></tr>
<tr><td>天貓</td><td>蘋(píng)果</td></tr>
<tr><td>淘寶</td><td>蘋(píng)果</td></tr>
</table>
</body>
6、輪廓
<style>
div{
width: 100px;
height: 100px;
background: red;
outline: 10px solid #44ecf4;
}
input{
margin-top: 80px;
outline: none;
}
</style>
<body>
<div></div>
<input type="text">
</body>
7、元素的透明度opacity
<style>
.parent{
width: 200px;
height: 200px;
background: blue;
}
.child{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;/*設(shè)置元素的透明度*/
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
8、繼承
8.1、CSS樣式的繼承
<style>
.parent{
width: 200px;
height: 200px;
background-color: red;
}
.child{
height: 100px;
background-color: blue;
}
.father{ /*特殊：父級(jí)獲取子級(jí)的高度*/
width: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;}
</style>
<body>
<!-- width 的繼承-->
<div class="parent">
<div class="child"> </div>
</div>
<br><br>
<div class="father">
<div class="son"></div>
</div>
</body>
8.2、文本和文字之間的繼承
子承父類、父類能提取子級(jí)的height、
9、表格之間的跨越
rowspan跨越行 、colspan跨越列
