字体样式:
<!-- font-family: 字体
font-size: 字体大小
font-weight: 字体的粗细
color: 字体颜色
-->
<style>
body{
font-family: 宋体;
color: brown;
}
h1{
font-size: 20px;
}
.p1{
font-weight: bolder;
}
</style>
文本样式:
1.颜色 color rgb rgba
2.文本对齐方式 text-align=center
3.首行缩进 text-indent:2em
4.行高 line-height: 单行文字上下居中! line-height=height)
5.装饰 text-decoration:
6.文本图片水平对齐 vertical-align
<!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 段落首行缩进
height: 300px;
line-height: 300px;
行高和 块的高度一致就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: purple;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/* 水平对齐 ~ 参照物, a,b*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="l1">1234555</p>
<p class="l2">1234555</p>
<p class="l3">1234555</p>
<h1>人物介绍</h1>
<p class="p1">炽天殿弋痕夕的学生。火属性四象侠岚。
开朗天真、活泼随和、充满正义感、热血单纯、冲动,做事不拘小节,爱开玩笑。直来直往的性格有时候给人感觉脑袋少根筋。姐姐墨夷被抓走的时候,辗迟暴露出了懦弱和胆小的性格。在辗迟自己看来,也是因为自己的懦弱才失去了姐姐,为此,辗迟暗自发誓,永远也不要做懦弱的人。这成为日后辗迟成长过程中的一大准则和动力。</p>
<p class="p3">辗迟从小体质就很弱,于是老板娘经常给辗迟服用三生草,来增强体质。没想到就这样,辗迟在老板娘辣妈的精心照料下,竟然没有消亡,而是和老板娘的侄女墨夷一起,健康地成长着。墨夷大辗迟三岁,辗迟称呼墨夷为姐姐。渐渐的,在活泼的墨夷影响下,辗迟变得开朗甚至调皮。进入玖宫岭后,辗迟结识了生命中最重要的朋友。虽然平时嘴上不说,甚至时不时捉弄朋友们。但就是这么一个让人头疼的捣蛋鬼辗迟,为了自己的朋友,不管面对任何困难,都敢挺身而出,因为辗迟一直认为是自己的懦弱和胆怯让他失去了姐姐,于是,为了让自己变得更强,辗迟总是在危难时刻挺身而出,越是危机的关头,辗迟越是一改平时大大咧咧的形象,表现出领袖气质,坚定不移,靠着自己乐观、积极、执着的精神将大家凝聚在一起。
不知道其具体身份,只知道被桃源镇的辣妈所收养,5岁那年姐姐被人掳走,为救姐姐,励志成为侠岚。虽身为侠岚,但是体内却存有零力,而一身零力更无从知晓从何而来。第五季回忆中穹奇为辗迟灌输大量零力,足可将假叶打伤。</p>
<a href="">123</a>
<p>
<img src="images/1.png" alt="">
<span>gsdaghasdjkghjsa</span>
</p>
</body>
</html>
超链接伪类:
正常情况下,a , a:hover
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的颜色 (只需要记住:hover)*/
a:hover{
color: yellow;
font-size: 50px;
}
列表:
/*
ul li
list-style: none 去掉圆点
circle 空心圆
decimal 有序数字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
背景:
背景颜色 ,背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.png");
/* 默认是全部平铺的 repeat */
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}