CSS-美化网页-文本样式-颜色-对齐方式-首行缩进-行高-装饰-文本图片水平对齐
文本样式: 1.颜色:rgba() 2.文本对齐方式:text-align 3.首行缩进:text-indent:2em 4.行高:
height:300px;/*设置背景色行高*/
line-height:100px;/*设置文本行高
5.装饰:
上划线:text-decoration:overline
中划线:text-decoration:line-through;
下划线:text-decoration:underline
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <!-- 颜色使用方法: 写单词 RGB:红绿蓝,#000000:黑色,#ffffff:白色,红色:#ff0000,绿色:#00ff00,蓝色:0000ff RGBA:红绿蓝透明度:方法:rgb(红,绿,蓝),如:rgb(0,255,255):绿色+蓝色,方法:rgba(红,绿,蓝,透明度),透明度只能从0开始1结束,如:rgba(0,255,255,0.5):绿色+蓝色,透明度0.5 --> <style> h1{ color:rgba(0,255,255,0.5);/*设置字体颜色和透明度*/ text-align:center;/*文字对齐方式:居中*/ } .p1{ text-indent:2em;/*em:1个em代表一个字的距离*/ } .p3{ background:rgba(0,255,255,0.6);/*设置背景颜色和透明度*/ height:300px;/*设置背景色行高*/ line-height:100px;/*设置文本行高,当行高和块的高度一致,就可以实现上下居中,块表示:容器,div等等*/ } .l1{ text-decoration:underline;/*显示文本下划线*/ } .l2{ text-decoration:line-through;/*显示文本中划线*/ } .l3{ text-decoration:overline;/*显示文本上划线*/ } </style> </head> <body> <h1> 故事介绍 </h1> <p class="l1">4255</p> <p class="l2">5454</p> <p class="l3">4545</p> <p class="p1"> 一天晚上,一群猴子在树林里玩耍:有的在树上蹦蹦跳跳,有的在地上打打闹闹。</p> <p class="p3"> I love three things:the sun ,the moon and you。 The sun is for the day ,the moon is for the night。 and you forever </p> </body> </html>
图片:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <!--水平对齐的话,要有参照物,相当于谁跟谁对齐--> <style>
/*文本图片水平对齐*/ img,span{ vertical-align:middle;/*img,span这两个标签居中对齐*/ }
/*超链接去下划线*/
a{
text-decoration:none;/*去除下划线*/
} </style> </head> <body> <p><img src="图片.png"> <span>内容大全</span> </p>
<a href="">123</a>
</body> </html>