1.字体属性
color: 颜色单词/颜色码---设置字体颜色
font-family:具体字体的名称---指定一个元素的字体
font-size:数字px----用于设置字体大小>
font-style:normal/italic/oblique----指定文本的字体样式
一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了。
这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜
font-weight:normal （正常）/ lighter（粗） / bold（细） /整百的数字【100--900】 设置文本的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
h4{
color: gainsboro;
}
#q{
color: darksalmon;
font-size: 25px;
font-style: italic;
}
#a{
font-family: '宋体';
}
#z{
font-family: '楷体';
font-weight: 100;
}
}
</style>
<body>
</head>
<h4>测试字体颜色</h4>
<h5 id="q">测试字体大小 格式</h5>
<h5 id="a">测试字体 宋体</h5>
<h5 id="z">测试楷体 粗细</h5>
</body>
</html>
2.链接样式
四个链接状态：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
text-decoration: none;--清除链接下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接样式</title>
<style>
a:link{
color: black;
font-size: 20px;
}
a:hover{
color: blue;
font-size: 30px;
}
a:active{
color: red;
font-size: 40px;
}
a:visited{
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<a href="#">别碰我</a>
</body>
</html>
Tip:清除缓存
3.列表样式
list-style-image：url(‘’)----使用图像来替换列表项的标记
list-style-type: [disc/square/circle/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha]设置列表项标记的类型。
list-style-position:inside/outside指示如何相对于对象的内容绘制列表项标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS列表属性</title>
<style >
ul{
width:20%; /*宽*/
list-style-image: url(css/faq03.jpg);/*使用图像来替换列表项的标记*/
list-style-position: inside ; /*指示如何相对于对象的内容绘制列表项标记*/
}
ul li{
border:1px solid #000000;
}
</style>
</head>
<body>
<ul>
<li>姓名：老王</li>
<li>性别：男</li>
<li>地址：隔壁</li>
</ul>
</body>
</html>
4.CSS 表格属性
border属性：设置表格边框
border-collapse:collapse/separate属性设置表格的边框是否被折叠成一个单一的边框或隔开
width和height属性定义表格的宽度和高度
text-align属性设置水平对齐方式，向左，右，或中心
vertical-align属性设置垂直对齐方式，顶部，底部或中间
padding控制边框和表格内容之间的间距，应使用td和th元素
background-color设置背景颜色
background-image设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格样式</title>
<style >
table{
border-collapse: collapse;
width: 300px;
height: 200px;
text-align:center; /*文字居中*/
background-color: #FFFF00;/*背景颜色*/
}
table,tr,td{
border:1px solid black; /*边框粗细 样式 颜色*/
vertical-align:top; /*文字置顶*/
padding: 10px; /*内边距*/
}
</style>
</head>
<body>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>20</td>
</tr>
</table>
</body>
</html>
5.css边框属性
border:border-width粗细 border-style样式 border-color颜色。设置4边的边框样式
单独设置某一边的边框样式：border-top/border-right/border-bottom/border-left
例如:border-top：粗细 样式 颜色
设置4边边框不同的样式:
border-top-color，border-right-color，border-bottom-color，border-left-color
border-top-style，border-right-style，border-bottom-style，border-left-style
border-top-width，border-right-width，border-bottom-width，border-left-width
border-style: solid double dashed[块状虚线] dotted[点状虚线]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css边框属性</title>
<style>
#q{
width:200px;
height:200px;
border:5px solid red;
}
#a{
width:150px;
height:150px;
border-bottom:2px solid yellow;
}
#z{
width:200px;
height:100px;
border-top:3px solid yellow; /*实线*/
border-right:5px double red; /*双实线*/
border-bottom:8px dashed blue;/*方点虚线*/
border-left:10px dotted blue; /*圆点虚线*/
}
</style>
</head>
<body>
<h4>border:
border-width 粗细 <br>
border-style 样式 <br>
boeder-color 颜色 <br>
border-top 上边框<br>
border-right 右边框<br>
border-bottom 下边框<br>
border-left 左边框<br>
</h4>
<div id="q">
设置四边的样式
</div>
<div id="a">
设置某一边的样式
</div>
<div id="z">
设置四条边的样式
</div>
</body>
</html>
6.CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
width属性设置元素的宽度。
height属性设置元素的高度。
line-height 属性设置行高。
7.CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示
none--设置元素隐藏,清除当前元素所占用的物理空间
block--设置元素显示，当前元素编程块级元素
visibility属性指定一个元素应可见还是隐藏。
hidden--设置元素隐藏,不会清除当前元素所占用的物理空间
show--设置元素显示
8.css盒子模型
在html中，所有HTML元素都可以被看作为一个盒子。
被看作为盒子的HTML元素由外边距,边框,内边距,内容
计算html元素的宽度===左右外边距+左右边框+左右内边距+内容宽度
计算html元素的高度===上下外边距+上下边框+上下内边距+内容高度
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}元素内容的宽度为300px,其中margin: 25px设置外边距，border: 25px solid green设置边框，padding: 25px设置内边距.
div 的总宽度300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px
9.CSS margin(外边距)
margin 可以单独改变元素的上，下，左，右外边距，也可以一次改变所有的属性。
margin可以使用负值，重叠的内容。
一次改变所有的外边距
margin: 一个数据值【4边都一样】
2个数据值【第一个值控制上下，第二个值控制左右】
3个数据值【第一个值控制上，第二个值控制左右，第三个值控制下】
4个数据值【上,右,下,左】
10 CSS padding（填充）
padding 可以单独改变元素的上，下，左，右外边距，也可以一次改变所有的属性。
一次改变所有的外边距
padding: 一个数据值【4边都一样】
2个数据值【第一个值控制上下，第二个值控制左右】
3个数据值【第一个值控制上，第二个值控制左右，第三个值控制下】
4个数据值【上,右,下,左】
padding-top[上] padding-left[左] padding-right[右] padding-bottom[下]
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
