CSS(六)常用属性

最新推荐文章于 2023-03-22 00:51:37 发布

司天宏

最新推荐文章于 2023-03-22 00:51:37 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86371820

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

背景属性

```

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*设置html和body的高度都是100%,这样背景图片就能在竖直方向上居中 */
			
			html,body {
				height: 100%;
			}
			
			body {
				/* 设置背景色 */
				/*background-color:gainsboro;*/
				/* 设置背景图片 */
				background-image: url(../img/adv_1.jpg);
				/* 设置背景图片重复，默认值是repeat(在水平和竖直方向都平铺) 
				 * repeat-x：在水平方向平铺
				 * repeat-y：在竖直方向平铺
				 * no-repeat:不平铺，只显示一张
				 */
				background-repeat: no-repeat;
				/*背景图片居中,默认只能水平居中  */
				background-position: center center;
				/* 可以用background属性代替上面的3个属性 ,该属性有3个值，值1是背景图片，值2是设置图片重复的，值3是
				 * 背景图片的位置,3个值之间用空格隔开 */
				/*background: url(../img/adv_1.jpg) no-repeat center center;*/
				/*  将背景图片固定，不会随着文档滚动而消失 */
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>
		我是内容
	</body>

</html>

在这里插入图片描述

文本属性


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文本属性</title>
		<style>
			p.title{
				 color:red; 
				  /* 设置不透明度,范围是[0,1],1表示完全不透明，最清楚，0表示完全透明，元素就隐藏了 */
				  opacity: 0.8;
				  /*  字体名称 */
				  font-family: "宋体";
				   /*  字体大小 */
				  font-size: 16px;
				  /*  字体风格,italic为斜体 */
				  font-style: italic;
				  /*  字体粗细 ,bold和bolder都是加粗 */
				 font-weight: bold;
				 background-color: yellow;
				
				/* text-decoration:文本装饰，可以定义文本的下划线，上划线或中划线 */
				text-decoration: line-through;
				/* letter-spacing:字与字之间的间距 */
				letter-spacing: 5px;
				/* 当元素内的行高和高度相同时，元素内的文本就能在竖直方向上居中 */
				height: 50px;
				line-height: 50px;
				 /* text-align:设置块级元素内的文本的水平对齐方式 */
				text-align: center;
			}
			
			p#txt{
				 /* hidden:超出元素框的内容会被修剪，看不到了
				  * scroll:多余的内容能够看到，会出现滚动条
				  * auto:自动适应，如果元素高度不够，则会出现滚动条，否则没有滚动条
				  *  */
				 overflow: auto;
			}
		</style>
	</head>

	<body>

		<div class="title" style="height: 200px;">我是div</div>
		<p  id="txt" style="height: 160px; width:200px ; background-color: gray; font-size:12px;">
			我是p里面的内容我是p里面的内容我是p里面的内容<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			我是p里面的内容我是p里面的内容我是p里面的内容<br><br><br><br><br><br></p>
         <p  class="title">
         	我是p里面的内容我是p里面的内容我是p里面的内容我是p里面的内容我是p里面的内容
         </p>
	</body>

</html>

在这里插入图片描述

列表属性


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
    <style>
    	ul{
    		list-style-type: circle;
    	}
    	ol{
    		 /* upper- alpha:列表项的符号是大写英文字母
    		  * upper- roman:列表项的符号是大写罗马字母 
    		  *  */
    		list-style-type: upper-roman ; 
    	}
    </style>
	</head>

	<body>
		水果：
		<ul>
			 <li>苹果</li>
			 <li>香蕉</li>
			 <li>梨子</li>
		</ul>
		手机销量排行：
		<ol>
			<li>华为</li>
			<li>小米</li>
			<li>苹果</li>
		</ol>
		
	
	</body>

</html>

在这里插入图片描述

司天宏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(六)常用属性

背景属性```&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /*设置html和body的高度都是100%,这样背景图片就能在竖直方向上居中 */
复制链接

扫一扫