1.css的樣式設(shè)置
1.背景
1.背景重復(fù)
background-repeat:no-repeat|repeat-x|repeat-y
background-repeat: no-repeat;
2.背景位置
background-position-x:橫坐標(biāo)方向的位置
background-position-y:縱坐標(biāo)方向的位置
傳參 top,right,bottom,left,center
3.背景初步簡(jiǎn)寫
background-position: x y;
background-position: center center;
4.背景簡(jiǎn)寫
background:color image repeat position
5.背景的吸附
background-attachment:scroll|fixed;
6.背景大小
background-size:x y;
x -->width
y -->height
cover -->會(huì)覆蓋整個(gè)div 特點(diǎn):只能以大覆小
2.文本
1.文本顏色
red -->純色
#ff2d51
rgb()
2.文本對(duì)齊
text-align:left|center|right
3.文本修飾
text-decoration:none|underline|overline|line-through
4.文本縮進(jìn)
text-indent
5.文本轉(zhuǎn)換
text-transfomr:uppercase|lowercase|capitalize
3.字體
1.最小的字體
不要小于12px
font-size字體大小
2.字體樣式
font-style:normal|italic
3.字體的權(quán)重
font-weight:bold|bolder|lighter
100-900
4.鏈接
link -->沒有訪問的鏈接
visited -->已經(jīng)訪問過的鏈接
hover -->鼠標(biāo)移入到鏈接上的狀態(tài)
active -->鼠標(biāo)點(diǎn)擊的那一刻
tip:同時(shí)使用鏈接的這幾種狀態(tài),順序不打亂
1.png
5.列表
1.列表樣式
list-style:none;
2.列表樣式類型
list-style-type:disc|circle|square
3.列表樣式圖片
list-style-image
6.表格
1.表格的簡(jiǎn)單模式和關(guān)鍵樣式
關(guān)鍵樣式：border-collapse: collapse;
如
<style>
table,th,td{
width:500px;
border:1px solid #333;
}
table{
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<!-- tr table row -->
<tr><th>商城</th><th>手機(jī)</th></tr>
</thead>
<tbody>
<!-- table data -->
<tr><td>JD</td><td>蘋果</td></tr>
<tr><td>Tmall</td><td>小米</td></tr>
<tr><td>蘇寧</td><td>華為</td></tr>
</tbody>
</table>
</body>
2.png
2.跨越行row的表格
誰要跨越給誰rowspan
如
<style>
table,td{
border: 1px solid #333;
}
table{
text-align: center;
border-collapse: collapse;
width:500px;
line-height: 50px;
}
</style>
</head>
<body>
<table>
<tr><td rowspan="3">商城</td><td>鞋子</td> <td>衣服</td></tr>
<tr> <td>手機(jī)</td><td>錢包</td></tr>
<tr> <td>拖鞋</td><td>Tshirt</td></tr>
</table>
</body>
3.png
3.跨越列的表格
誰跨越列就給誰colspan
如
<style>
table{
width:500px;
line-height: 50px;
border-collapse: collapse;
text-align: center;
}
table,td{
border:1px solid #333;
}
</style>
</head>
<body>
<table>
<tr><td colspan="2">商場(chǎng)</td></tr>
<tr><td>手機(jī)</td><td>衣服</td></tr>
<tr><td>鞋子</td><td>pen</td></tr>
<tr><td>服裝</td><td>瓶子</td></tr>
</table>
</body>
4.png
6.輪廓
1.div輪廓
width:100px;
height:100px;
background:#ff2d51;
outline: 10px solid #44cef6;
5.png
2.input
默認(rèn)情況
6.png
設(shè)置
input{outline: none;}
7.png
7.設(shè)置元素的透明度
opacity設(shè)置元素的透明度
如
div{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
}
8.樣式的繼承
僅僅發(fā)生在塊級(jí)元素之間
1. 子元素不設(shè)置寬度,它會(huì)繼承父元素的寬度
如
<style>
.parent{
width:200px;
height:200px;
background:red;
}
.child{
height:100px;
background:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
8.png
2.父元素不設(shè)置height,它會(huì)獲取子元素的height
如
<style>
.parent{
width:200px;
background:red;
}
.child{
width:100px;
height:100px;
background:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
9.png
3.文本和字體相關(guān)屬性都是可以繼承的
如
<style>
body{
text-align: center;
color:red;
text-decoration: underline;
font-size: 30px;
}
ul{
list-style: none;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<p>hello world</p>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div>
hello
<p>world</p>
</div>
</body>
10.png
