CSS(03)--css的属性(文本属性和背景属性)

最新推荐文章于 2022-06-21 15:06:52 发布

原创最新推荐文章于 2022-06-21 15:06:52 发布 · 307 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文本属性 #css属性 #背景属性

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS中用于控制文本样式的各种属性，包括行高、字体大小、字体样式等，并深入探讨了如何利用这些属性来美化网页内容。此外，还讲解了背景属性的应用，如背景颜色、背景图片及其控制方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个css样式都必须有两部分组成：选择符和声明
css属性：属性是指定选择符具有的属性，是css的核心
文本属性：(属性：属性值) 作用 :控制文本的样式
line-height:行高

数值(当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直方向的居中,小于时靠上,大于时靠下);

<systel>
    #nh{
			width: 400px;
			height: 200px;
			background: #F5F5DC;
			line-height: 200px;
	   }
</systel> 


 <div id="nh">你好</div>

font-size:数值; 字体大小注：设置时一般都是用偶数，数值最小最好别低于12px;

font-family:字体; 控制文字字体；注：有多个属性值的时候用，隔开
color:颜色值; 控制文字颜色

  font-weight:字体是否加粗
               bold--加粗
               bolder--更粗
               (100-900)--100-500常规,600-900加粗
font-style:字体是否倾斜
               italic/oblique--倾斜 oblique的倾斜幅度更大
               normal --默认的

font-variant:文本是否大小写
               small-caps--小型的大写字母字体,字体变小
               normal --默认的
text-align:文本对齐方式
               center--居中
               right--有对齐
               left--左对齐
               justify--对内容以两端边界线对齐显示

	<style type="text/css">
		*{
			margin:0;
			padding:0;	
		}
        b,strong{
			font-weight: normal;
			font-style: normal;
		}
		#sub{
			width: 400px;
			height: 200px;
			background: darkorchid;
		}
		.fon{
			/*字体大小*/
			font-size: 30px;
			/*行高*/
			line-height: 30px;
			/*字体样式*/
			font-family: "微软雅黑";
			/*字体颜色*/
			color: beige;
	        /*字体加粗*/
			font-weight: bold;
			/*字体倾斜*/
			font-style: oblique;
		}

	</style>
    <body>
		<div id="sub">
			<div class="fon">css的文字属性</div>
		</div>
	</body>

背景属性:控制网页的背景

       1:background-color: 背景颜色
                   属性值:颜色值(最好使用16进制颜色值)
       2:background-image: 背景图 (背景图不占据空间)
                   属性值:url(图片地址),;
           注:a:背景图小于容器属性时默认显示平铺状态
           b:当背景图等于容器尺寸时显示一张
           c:当背景图大于容器尺寸时只显示容器区域
       3:background-repeat:控制背景图是否平铺
                   属性值:repeat --平铺
                       no-repeat--不平铺
                       repeat-x--横向平铺
                       repeat-y--纵向平铺

4:background-position:控制图片位置
                   属性值:左右位置(left/right/center) 上下位置(top/bottom/center)
               注:可以写固定的数值(如 100px,200px):
                       第一个正值:往右
                       第二个正直:往下

5:background-size:设置背景图片大小

属性值:100px 100px(宽度,高度)

注:页面平铺背景图片background-size:100%

<style>
			*{
			margin:0;
			padding:0;	
			font-weight: normal;
			font-style: normal;
			}
			.txt{
				width: 1000px;
				height: 1000px;
				background-color: #9932CC;
				background-image: url(img/yy.jpg);
				background-repeat:no-repeat ;/*使背景图片不平铺*/
                background-position: 10px 100px;
			}
</style>
<body>
		<p class="txt"></p>
</body>

5:复合式写法:background:
属性值:颜色图片地址是否平铺左右位置上下位置;

<style>      
         .fh{
				width: 500px;
				height: 500px;
				background: #F5F5DC url(img/qxx.png) no-repeat right bottom;
			}
</style>
<body>
    <div class="fh">
			
		</div>
</body>

例:背景图在页面铺面(通体背景图)

<head>
	<title>居中</title>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			height: 100%;
		}
		.div1{
			width: 100%;
			height: 100%;
			background: url("http://img4.imgtn.bdimg.com/it/u=3545561584,783374626&fm=26&gp=0.jpg") no-repeat center;
			/*置背景图像是否固定或者随着页面的其余部分滚动*/
			background-attachment: fixed;
			background-size: cover;
		}	
	</style>
</head>
<body>
	<div class="div1"></div>
</body>