3.1span标签重点要突出的字用它套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title{
font-size: 50px;
}
</style>
</head>
<body>
我是<span id="title">你爹</span>
</body>
</html>3.2字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字体样式*/
body{
font-family: "Arial Black",宋体;
color: red;
}
/*字体大小*/
h1{
font-size: 50px;
}
/*变粗*/
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>你妈妈吗</h1>
<p class="p1">
你们可能飞鸟时代发你你的烦恼可能第三方库难道是可能懒得看发你你放开你幅度可能发你分明看到你看你看大脑放空你
</p>
<p>
你们可能飞鸟时代发你你的烦恼可能第三方库难道是可能懒得看发你你放开你幅度可能发你分明看到你看你看大脑放空你
</p>
<p>
Mainland and Macao residents will be allowed to enter the Hong Kong
Special Administrative Region (HKSAR) without undergoing mandatory 14-day
quarantine starting from Sept. 15, Hong Kong Chief Executive Carrie Lam said at a press conference yesterday.
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--风格-->
<style>
/*
oblique 斜体
lighter 细的
bolder/bold 粗的
*/
p{
font: oblique lighter 12px "宋体" ;
}
</style>
</head>
<body>
<p>
你们可能飞鸟时代发你你的烦恼可能第三方库难道是可能懒得看发你你放开你幅度可能发你分明看到你看你看大脑放空你
</p>
</body>
</html>3.3文本样式
3.3.1颜色
color rgb rgba
3.3.2文本对齐的方式
text-align = center
3.3.3首行缩进
text-indent:2em
3.3.4行高
line-hight
3.3.5 装饰(下划线)
/*下划线*/
.l1{
text-decoration:underline ;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}- 超链接去下划线
text-decoration: none;
3.3.6 文本图片水平对齐
<!--水平对奇~ 参照物 a,b-->
<style>
img,span{
vertical-align: middle;
}3.4阴影
/* text-shadow阴影*/
#price{
text-shadow: #2700ff -10px 10px;
}
坐标偏移3.5超链接伪类
常用 a:hover
/*默认颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮颜色*/
a:hover{
color: orange;
}
/*鼠标按住未释放的颜色*/
a:active{
color: green;
font-size: 50px;
}
/*未访问的颜色*/
a:link{
color: bisque;
}
/*点完之后是红色*/
a:visited{
color: red;
}3.6列表
- 去下划线
- 去圆点
加个箭头
/*ul li*/ ul li{ height: 30px; /*去掉圆点 none circle 空心圆 decimal 数字 square 正方向 */ list-style: none; text-indent: 1em; }
3.7背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认是全部平铺*/
background-image: url("images/1.png");
}
/*水平平铺*/
.div1{
background-repeat: repeat-x;
}
/*垂直*/
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: round;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>3.8渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
background-image:linear-gradient(19deg,#21D3FD 0%,#B721FF 100%) ;
}
</style>
<body>
</body>
</html>