table>te7>td7{$$$} 按table實(shí)現(xiàn)生成多行
css語法
1.嵌入html標(biāo)記里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*<body>
background-color:red
</body>*/
</style>
</head>
<body style="background-color:lightblue;">
</body>
</html>
2.包含到head中style里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="test1.css">
<style type="text/css">
/*<body>
background-color:red
</body>*/
</style>
</head>
<body>
</body>
</html>
3.獨(dú)立的css文件
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
**<link rel="stylesheet" href="test1.css">**
<style type="text/css">
</style>
</head>
<body >
</body>
</html>
css
div{
}
css常用屬性
background-color: lightpink;
color: red;
font-size: 36px;
width: 50%;
height: 300px;
font-family 設(shè)置字體
font-size 設(shè)置文本大小
font-weight 設(shè)置文本寬度
line-height 設(shè)置行高
text-decoration 設(shè)置文本效果，下劃線/underline、上劃線/overline、刪除線/line-through、閃爍效果/
blink、none等letter-spacing 設(shè)置字符間距
word-spacing 設(shè)置單詞間距
Color 設(shè)置顏色
text-align 設(shè)置文本對(duì)其方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="test1.css">
<style type="text/css">
div{
background-color: pink;
colorred:red;
font-size:36px;
width:50%;
height:300px;
}
</style>
</head>
<body >
<div>
我和我的祖國(guó)!!!
</div>
</body>
</html>
背景設(shè)置
background-color 設(shè)置背景顏色
background-image 設(shè)置背景圖片
background-repeat 設(shè)置平鋪方式 no-repeat|repeat-x|repeat-y
background-position 設(shè)置背景圖片的位置/right top/center...... /50% 50%
background-size 設(shè)置背景的大小 100% 100%
background-clip 設(shè)置背景的裁切 border-box
背景拓展 ---漸變色
線性漸變
background-image:linear-gradient(90deg,green,red);
/兼容谷歌/
background-image:-webkit-linear-gradient(to top,green,red);
/兼容火狐/
background-image:-moz-linear-gradient(to bottom,green,red);
/兼容opera/
background-image:-moz-linear-gradient(to bottom,green,red);
/兼容ie/
background-image:-ms-linear-gradient(to bottom,green,red);
徑向漸變：
background-image:radial-gradient(read,yellow,green,blue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*徑向漸變*/
div{
width:500px;
height:500px;
background-image: radial-gradient(red, yellow, green,blue);
background-image:-webkit-radial-gradient(red,yellow,green,blue)
background-image:-moz-radial-gradient(red,yellow,green,blue)
background-image:-o-radial-gradient(red,yellow,green,blue)
background-image:-ms-radial-gradient(red,yellow,green,blue)
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
圓角邊的設(shè)置
border-top-left-radius: 10%;
border-top-right-radius:20%;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 50%;
---------復(fù)合屬性
border-radius: 10% 20% 30% 50%;
盒子模型
盒子大小=width/height +padding(內(nèi)邊距)+border+margin
元素定位屬性
position 設(shè)置定位方式，absolute，static等
z-index 設(shè)置Z軸方向排列順序
top 設(shè)置距頂端距離
left 設(shè)置距左邊距離
right 設(shè)置距右邊距離
bottom 設(shè)置下端距離
