1.1 字体样式
<!--
font-family:字体
font-size:大小
font-weight: 字体粗细
-->
<style>
body{
font-family: "Agency FB",楷体;
color: #5f85ff;
}
h1{
font-size: 50px;
}
.p1{
font-weight: inherit;
}
</style>1.2 文本样式
1、颜色 color rgb rgba
2、文本对齐方式 text-align:center
3、首行缩进 text-indent:2em
4、行高 line-height（单行文字上下居中 line-height = height）
5、装饰 text-decoration
6、文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
RGB 0~F
RGBA A：0~1
text-align: 排版
text-indent: 2em;段落首行缩进
line-height: 30px; 行高
行高 和 块的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: #5f85ff;
height: 50px;
line-height: 50px;
}
/*
underline：下划线
line-through：中划线
overline：上划线
*/
.p3{
text-decoration: underline;
}
.p4{
text-decoration: line-through;
}
.p5{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/*文字图片水平对齐*/
img,p{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>棕熊盖房子</h1>
<p class="p1">
冬天快来了，棕熊想：我要在森林里盖一座房子，这样冬天我就不用睡在外面，就可以呆在自己的屋子里一边吃东西，一边读自己喜欢读的书了！
</p>
<p class="p2">
冬天快来了，棕熊想：“我要在森林里盖一座房子，这样冬天我就不用睡在外面，就可以呆在自己的屋子里一边吃东西，一边读自己喜欢读的书了！”不过，怎么盖呢？盖成什么样子呢？ 棕熊想：“我该请别的朋友给我出出主意！”
</p>
<br/>
<p class="p3">123321</p>
<p class="p4">123321</p>
<p class="p5">123321</p>
<a href="#">123321</a>
<p>
<img src="../3.文本样式/image/1.png" width="900px" height="805" alt="">
<span>无间道</span>
</p>
</body>
</html>1.3 阴影
/*text-shadow:水平偏移，垂直偏移，阴影半径，颜色*/
#price{
text-shadow:5px 5px 2px lightblue;
}1.4 超链接伪类
常用的 a，a:hover
/*默认颜色*/
a{
text-decoration: none;
color:black;
}
/*鼠标悬浮的状态*/
a:hover{
color: #5f85ff;
font-size: 24px;
}
/*鼠标按住未释放的状态*/
a:active{
color: orange;
}
/*已访问的链接*/
a:visited{
color: #ff23bd;
}1.5 列表
/*ul,li*/
/*
list-style: none;去掉无序列表圆点
circle 空心圆
decimal 数字
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}1.6 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认全部平铺*/
background-image: url("image/1.JPG");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>1.7 渐变
background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
评论 (0)