学习html（4）

最新推荐文章于 2022-04-06 20:29:54 发布

花莫弦

最新推荐文章于 2022-04-06 20:29:54 发布

阅读量530

点赞数

分类专栏： HTML 文章标签： html it css

本文链接：https://blog.csdn.net/u011822862/article/details/46732631

版权

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.CSS控制段落文本

<p></p> 表示一段话，同样可以添加背景颜色等元素。

text-indent：段落缩进，就是在段的前方空多少像素。

text-align：center：文字居中，对齐方式。

text-decoration:underline：下划线；overline：上划线；line-through：删除线。

letter-spacing：字与字之间的距离。

其他的可以查询css参考手册进行查找样式。

2.CSS控制文字文本

color：颜色控制。

foot-style：文字的形式。italic：斜体。

foot-weight：重量，文字的粗细，bold等。

foot-size：文字的大小。

line-height：一行的高度。

font-family：字体的样式。

上面的五个可以在一起书写，foot：italic bold 23px/46px ‘SimHei’。

3.避免无字体产生的错误

Sans-serif 无衬线字体微软雅黑。

Seirf 有衬线字体，在转折处有突起宋体。

为避免在客户机上面没有在html中书写的字体，可以设置多个字体，以便备用。

例如：font-family：’微软雅’,’黑体’,sans-serif; 或者使用serif，同样的设置方式。

4.CSS设置背景图片

在<body></body>标签里面放置背景色或者背景图片。

background-image：url(background.jpg);如果图片过小或默认铺开

background-repeat:repeat-x;水平方向显示图片，一行；repeat-y：竖直方向显示图片，一列，no-repeat：不重复显示，显示一个。

background-attachment：fixed；无论在页面的哪，所加图片都跟着变换位置。左上角或者其他的，默认左上角。

背景图和背景色都设置，会优先显示背景图。

5.背景图片位置设置

background-position：center top；竖直中间，第一个参数是水平方向，第二个是竖直方向。

计算机里面，一般情况下左上角为象限的坐标原点，向右为x轴正方向，向下为y轴正方向。

background-position：-100px -120px；可以根据所需要背景图片中的某一部分来移动背景图片，显示在页面上。-100px 指将图片向左移动，-120px指向上移动。

<!DOCTYPE html>
<html>
<head>
<title>大图片背景</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	#test1 {
        border: 1px solid orange;
		width: 500px;
        height:500px;
		background-image: url(small.jpg);
        background-repeat: no-repeat;
        background-position: center; center;
		
	}

    #test2 {
        width:150px;
        height:130px;
        border: 1px solid blue;
        /*
        background-image: url(bg.png);
        background-position: -150px -530px;
        */
        background: gray url(bg.png) no-repeat -150px -530px;
    }
</style>
</head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
    </body>
</html>

CSS参考手册下载页：点击打开链接