table>te7>td7{$$$} 按table实现生成多行
css语法
1.嵌入html标记里
<!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.独立的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 设置字体
font-size 设置文本大小
font-weight 设置文本宽度
line-height 设置行高
text-decoration 设置文本效果，下划线/underline、上划线/overline、删除线/line-through、闪烁效果/
blink、none等letter-spacing 设置字符间距
word-spacing 设置单词间距
Color 设置颜色
text-align 设置文本对其方式
<!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>
我和我的祖国!!!
</div>
</body>
</html>
背景设置
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置平铺方式 no-repeat|repeat-x|repeat-y
background-position 设置背景图片的位置/right top/center...... /50% 50%
background-size 设置背景的大小 100% 100%
background-clip 设置背景的裁切 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>
圆角边的设置
border-top-left-radius: 10%;
border-top-right-radius:20%;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 50%;
---------复合属性
border-radius: 10% 20% 30% 50%;
盒子模型
盒子大小=width/height +padding(内边距)+border+margin
元素定位属性
position 设置定位方式，absolute，static等
z-index 设置Z轴方向排列顺序
top 设置距顶端距离
left 设置距左边距离
right 设置距右边距离
bottom 设置下端距离
