一.css中的背景樣式
1.1背景大小
width:600px;
height: 200px;
background: red
url("images/banner.jpg")
no-repeat
center
center喳整；
background-size: 100% 100%;
背景大小
background-size:x y;
x---width
y---height
cover------會(huì)覆蓋整個(gè)頁(yè)面div
特點(diǎn)-------只能以大覆蓋小
#######1.2.背景的重復(fù)和位置
width:200px;
height: 200px;
background-color: red;
background-image: url("images/icon1.png"）
background-repeat: no-repeat;
背景重復(fù)
background-repeat: no-repeat| repeat-x| repeat-y
--------不重復(fù)---------重復(fù)x軸方向-------重復(fù)y軸方向
background-position-x:center;
background-position-y:center;
背景位置
background-position-x:橫坐標(biāo)方向位置
background-position-y:縱坐標(biāo)方向位置
背景簡(jiǎn)寫 background-position:x y;
1.3.背景的簡(jiǎn)寫
div{
width:200px;
height: 200px;
background: red
url("images/icon1.png")
no-repeat
center
center匆篓；
背景簡(jiǎn)寫
background:color image repeat position
顏色 背景圖片 是否重復(fù) 背景的位置
二.文本的樣式
1.1文本的顏色
p{
color:red;
}
</style>
</head>
<body>
<p>hellow world</p>
</body>
eg：red等顏色為純色
#ff2d51等為rgb（）即此顏色的不同深淺
1.2.文本字體樣式
p{
font-size: 12px;
font-style: italic;
font-weight: lighter;
}
font-size 字體大小
font-style：normal italic
font-weight----字體的權(quán)重
font-weight:bold bolder lighter
但一般不能小于12px字體
1.3.樣式繼承
.parent{
width:200px;
height: 200px;
background: red;
}
.child{
height: 100px;
background: blue;
}
---------
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
"樣式繼承"僅僅只發(fā)生在塊元素之間
子元素不設(shè)置寬度，它會(huì)繼承父元素的寬度
.parent{
width: 200px;
background: red;
}
.child{
width:100px;
height: 100px;
background: blue;
}
也可父元素不設(shè)置height 磺送，它會(huì)獲取子元素的height
三.表格
1.1結(jié)構(gòu)
<body>
<table>
<thead>
<tr> <th>商城</th> <td>手機(jī)</td> </tr>
</thead>
<tbody>
<tr> <td>3d</td> <td>蘋果</td></tr>
</tbody>
</table>
tr------------table row 行
th------在單元格中加粗顯示-------表頭
td-------在單元格中不加粗顯示-------表單元格
<thead>-------行表頭
<tbody>-------表格數(shù)據(jù)
1.2樣式
table,th,td{
width:500px;
border:1px solid #333;
}
table{
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
“table,th,td”-------設(shè)置表格結(jié)構(gòu)單元格的寬細(xì)疗我，即橫豎線
“table”設(shè)置表格的樣式
四.其他樣式
1.1.輪廓
div{
width:100px;
height: 100px;
background: red;
outline: 10px solid #44cef6;
}
input{
margin-top: 50px;
outline: none;
}
可使“input”中邊框點(diǎn)擊不變色
1.2.鏈接
a:link{
color:red;
}
a:visited{
color:yellow;
}
a:hover{
color:green;
}
a:active{
color:blue;
}
</style>
<body>
<a >京東</a>
</body>
link-----沒(méi)有訪問(wèn)的鏈接
visited-----已經(jīng)訪問(wèn)過(guò)的鏈接
hover-------鼠標(biāo)移入到鏈接上的狀態(tài)
active------鼠標(biāo)點(diǎn)擊的那一刻
同時(shí)使用鏈接的幾種狀態(tài)垮庐，順序不能打亂
