div块级元素
作用:包围+换行
span内联元素
作用:包围(不换行)
font
font-size:字体大小
font-family:字体(如果字体商用,一定要注意版权问题)
font-style:字体风格(italic/oblique斜体 normal默认…)
font-weight:粗细(bord粗体、border更粗、lighter细、100-900)
font-size:字体大小(px、em、rem、cm、mm、pt、pc)
text-indect:缩进
linr-height:行高
text-decoration:划线(underline下划线/overline上划线/linethrow删除线)
color:颜色(十六进制、rgb( , , )、rgba( , , , 透明度【0-1内的小数】))
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1{
text-shadow:orange 10px 10px 5px; /*字体阴影:颜色 横纵坐标 发散程度*/
}
a{
text-decoration:none;
color:black;
}
a:hover{ /*hover表示鼠标悬浮事件*/
color:orange;
cursor:pointer; /*表示鼠标悬浮时变手型*/
}
/*
a:link{ link表示未被访问的链接 chrome不兼容
color:red;
}
a:visited{ link表示未被访问的链接
color:blue;
}*/
a:active{ /*active表示鼠标点击事件*/
color:gray;
}
ul li{
/*list-style-type:square; 自定义无序列表前标图案*/
margin-left:70px;
list-style-image:url("img/3.png"); /*将前标设置为自定义图标*/
}
.makima{
/* x y 定义横纵坐标
no-repeat:不重复
repeat-x:只在x轴上重复
repeat-y:只在y轴上重复
*/
font-size:50px;
background:orange url("img/1.png") no-repeat;
background-size:auto; /*不推荐使用 auto表示自动适应 也能写百分比*/
}
.here{
/*background-image:linear-gradient(to bottom,yellow,orange,red,black); 线性(横向)渐变色*/
background-image:radial-gradient(black 30%,orange 60%,yellow 90%); /*同心圆渐变*/
}
</style>
</head>
<body>
<h1>汪汪汪</h1>
<a href="#">汪汪汪</a>
<a href="#">汪汪汪</a>
<a href="#">汪汪汪</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="makima"><b>最喜欢玛奇玛小姐了</b><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p class="here"><b>渐变色</b><br><br><br><br><br><br><br><br><br><br><br><br></p>
</body>
</html>