1.背景属性设置
2.文本属性设置
3.字体属性设置
font-family：指定一个元素的字体样式【黑体 宋体...】
font-size：用于设置字体大小
font-style：指定文本的字体倾斜
a.italic---设置倾斜【正常字体】
b.oblique---设置倾斜【非正常字体】
c.normal---什么都有
italic和oblique的区别：
一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了。这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！
font-weight：设置文本的粗细
单词设置：bold lighter normal
数字：整百{100~900}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体设置</title>
<style>
#p1{font-family:"黑体";}
#p2{font-family:"黑体";font-size: 30px;}
#p3{font-family:"黑体";font-size: 30px;font-style:normal;}
#p4{font-family:"黑体";font-size: 30px;font-style:normal;font-weight:900}
</style>
</head>
<body>
<p id="p1">font-family:指定一个元素的字体样式【黑体 宋体....】</p>
<p id="p2">font-size:用于设置字体大小</p>
<p id="p3">font-style:指定文本的字体倾斜</p>
<p id="p4">font-weight：设置文本的粗细</p>
</body>
</html>
4.超链接a样式使用的是伪类
a:link{} - 正常，未访问过的链接
a:hover{} - 当用户鼠标放在链接上时
a:active{} - 链接被点击的那一刻
a:visited{} - 用户已访问过的链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接a样式</title>
<style>
/*
a:link{font-family: "黑体";font-size: 20px;}
a:hover{font-family: "黑体";font-size: 30px;color: red;}
a:active{font-family: "黑体";font-size: 40px;color: yellowgreen;}
a:visited{font-family: "黑体";font-size: 40px;color: yellow;}
*/
a:link{font-size:10px;text-decoration: none;color: black;}
a:hover{font-size:10px;text-decoration: none;color: blue;}
</style>
</head>
<body>
<h4>
a:link{} - 正常，未访问过的链接<br>
a:hover{} - 当用户鼠标放在链接上时<br>
a:active{} - 链接被点击的那一刻<br>
a:visited{} - 用户已访问过的链接<br>
</h4>
<!--<a href="#">超链接a样式</a>-->
<a href="http://news.baidu.com/">新闻</a>
</body>
</html>
5.列表属性设置
list-style-type:设置列表项标记的类型。
none【无】 disc【实心圆】 circle【空心圆】 square【实心方块】
decimal【数字】 lower-roman【小写罗马数字】upper-roman【大写罗马数字】
lower-alpha【小写英文字母】 upper-alpha【大写英文字母】
list-style-image：使用图像来替换列表项的标记
list-style-image：url('');
list-style-position:指示如何相对于对象的内容绘制列表项标记
inside---包含列表标记
outside---不包含列表标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表属性设置</title>
<style>
#test1 li{border: 2px solid red;}
#test1{
/*list-style-type:decimal;*/
width: 470px;
list-style-image:url('imgs/tubiao.JPG');
list-style-position: inside;
}
</style>
</head>
<body>
<ul id="test1">
<li>list-style-type:设置列表项标记的类型。</li>
<li>list-style-image：使用图像来替换列表项的标记</li>
<li>list-style-position:指示如何相对于对象的内容绘制列表项标记</li>
</ul>
</body>
</html>
6.表格属性设置
border属性：设置表格边框
border-collapse：属性设置表格的边框是否被折叠成一个单一的边框或隔开
width和height属性定义表格的宽度和高度
text-align属性设置水平对齐方式，向左，右，或中心
vertical-align属性设置垂直对齐方式，顶部，底部或中间
padding控制边框和表格内容之间的间距，应使用td和th元素
background-color设置背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格设置</title>
<style>
table{
width: 1000px;
height: 400px;
border-collapse:collapse;
text-align:center;
}
table,tr,td{
border:1px solid red;
vertical-align:middle;
padding:20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>border</td>
<td>表格边框</td>
<td>1px solid red</td>
<td>table,tr,td</td>
</tr>
<tr>
<td>border-collapse</td>
<td>表格的边框是否被折叠成一个单一的边框或隔开</td>
<td>collapse</td>
<td>table</td>
</tr>
<tr>
<td>width和height</td>
<td>宽度和高度</td>
<td>数字px</td>
<td>table</td>
</tr>
<tr>
<td>text-align</td>
<td>水平对齐方式</td>
<td>左 中 右</td>
<td>table,tr,td</td>
</tr>
<tr>
<td>vertical-align</td>
<td>垂直对齐方式</td>
<td>上 中 下</td>
<td>tr,td</td>
</tr>
<tr>
<td>padding</td>
<td>单元格边框与内容的间距</td>
<td>数字px</td>
<td>tr,td</td>
</tr>
</table>
</body>
</html>
7.边框属性设置
CSS边框属性允许你指定一个元素边框的粗细，样式【实线，虚线，双实线】，颜色
a.border：粗细，样式【实线，虚线，双实线】，颜色【元素的4边相同样式】
b.border-width:边框粗细 / border-style:样式 / border-color:颜色
c.border-top-width:边框粗细 / border-top-style:样式 / border-top-color:颜色
border-right-width:边框粗细 / border-right-style:样式 / border-right-color:颜色
border-bottom-width:边框粗细 / border-bottom-style:样式 / border-bottom-color:颜色
border-left-width:边框粗细 / border-left-style:样式 / border-left-color:颜色
d.border-top:粗细，样式【实线，虚线，双实线】，颜色
border-right:粗细，样式【实线，虚线，双实线】，颜色
border-bottom:粗细，样式【实线，虚线，双实线】，颜色
border-left：粗细，样式【实线，虚线，双实线】，颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框设置</title>
<style>
#h21{border:5px solid red;}
#h22{border-width: 5px;border-style: dashed;border-color: blue;}
#h23{border-top-width:5px;border-top-style:solid;border-top-color:red;
border-right-width:10px;border-right-style:dashed;border-right-color:blue;
border-bottom-width:15px;border-bottom-style:dotted;border-bottom-color:yellow;
border-left-width:20px;border-left-style:double;border-left-color:green;
}
#h24{border-top:5px solid red;
border-right:10px dashed blue;
border-bottom:15px dotted yellow;
border-left:20px double green;
}
</style>
</head>
<body>
<h2 id="h21">border：粗细，样式【实线，虚线，双实线】，颜色【元素的4边相同样式】</h2>
<h2 id="h22">
border-width:边框粗细 / border-style:样式 / border-color:颜色<br>
【元素的4边相同样式】
</h2>
<h2 id="h23">
border-top-width:边框粗细 / border-top-style:样式 / border-top-color:颜色<br>
border-right-width:边框粗细 / border-right-style:样式 / border-right-color:颜色<br>
border-bottom-width:边框粗细 / border-bottom-style:样式 / border-bottom-color:颜色<br>
border-left-width:边框粗细 / border-left-style:样式 / border-left-color:颜色
</h2>
<h2 id="h24">
border-top:粗细，样式【实线，虚线，双实线】，颜色<br>
border-right:粗细，样式【实线，虚线，双实线】，颜色<br>
border-bottom:粗细，样式【实线，虚线，双实线】，颜色<br>
border-left：粗细，样式【实线，虚线，双实线】，颜色
</h2>
</body>
</html>
CSS盒子模型
所有HTML元素可以看作盒子
外边距---元素与元素之间的距离
边框粗细---边框的薄厚
内边距-----边框与内容之间的距离
盒子的内容--当前元素的内容
计算一个元素的宽高：
元素的宽度=内容宽度+左内边距+右内边框+左边距+右边框+左外边距+右外边距
元素的高度=内容高度+上内边距+下内边框+上边距+下边框+上外边距+下外边距
8.外边距---当前元素与其他元素之间的距离
margin属性来设置外边距
a.单独改变元素的上，下，左，右外边距：
margin-top margin-right margin-bottom margin-left
b.一次改变上，下，左，右外边距
margin：数字1;[上，下，左，右外边距相等]
margin：数字1 数字2;
[数字1--上，下外边距相等]
[数字2--左，右外边距相等]
margin：数字1 数字2 数字3;
[数字1--上外边距]
[数字2--左，右外边距相等]
[数字3--下外边距]
margin：数字1 数字2 数字3 数字4;
设置外边距的数字可以是负整数。【消除元素与body之间的默认缝隙】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style>
#div1{width: 400px;
height: 400px;
background-color: red;
margin-left: 100px;
margin-top: -10px;}
img{
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div1">
<img src="imgs/avatar.png" />
</div>
</body>
</html>
9.内边距【填充】---设置的是元素内容与元素边框之间的距离
padding属性来设置内边距【填充】
a.单独改变元素的上，下，左，右内边距【填充】：
padding-top padding-right padding-bottom padding-left
b.一次改变上，下，左，右内边距【填充】
padding：数字1;[上，下，左，右内边距【填充】]
padding：数字1 数字2;
[数字1--上，下内边距【填充】相等]
[数字2--左，右内边距【填充】相等]
padding：数字1 数字2 数字3;
[数字1--上内边距【填充】]
[数字2--左，右内边距【填充】相等]
[数字3--下内边距【填充】]
padding：数字1 数字2 数字3 数字4
设置父元素的padding会撑开当前的父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内边距【填充】</title>
<style>
#div1{
width: 400px;
height: 400px;
background-color: red;
padding-left: 100px;
padding-top: 100px;
}
img{
padding-left: 100px;
padding-top: 100px;
}
ul{list-style-type: none;margin-left: -40px;}
ul li{float: left;padding-left: 30px;}
ul li a{font-size: 10px;text-decoration: none;color: black;}
a:hover{color: blue;}
</style>
</head>
<body>
<div id="div1">
<a href="https://www.baidu.com/s?wd=2022%E5%B9%B4%E5%85%A8%E5%9B%BD%E4%B8%A4%E4%BC%9A&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs">
<img src="imgs/avatar.png" />
</a>
</div>
<ul>
<li><a href="http://news.baidu.com/">新闻</a></li>
<li><a href="https://www.hao123.com/?src=from_pc">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">视频</a></li>
<li><a href="">图片</a></li>
<li><a href="">网盘</a></li>
</ul>
</body>
</html>
9.尺寸设置
width属性设置元素的宽度。
height属性设置元素的高度。
line-height 属性设置行高。
10. Display(显示) 与 Visibility（可见性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#img1{
border: 5px solid black;
display: none;
}
#img2{
border: 5px solid black;
visibility: visible;
}
</style>
</head>
<body>
<h2>Display(显示)--设置一个元素应如何显示</h2>
<h3>none--不显示</h3>
<h3>block--显示当前元素为块级元素</h3>
<img id="img1" src="imgs/avatar2.png">
<h2>Visibility--指定一个元素应可见还是隐藏</h2>
<img id="img2" src="imgs/avatar2.png">
<img id="img3" src="imgs/avatar2.png">
<h3>hidden--隐藏元素</h3>
<h3>visible--显示元素</h3>
</body>
</html>
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
