网页前端培训4CSS常用属性设置

素颜马尾好姑娘i 2024-05-01 16:11 83阅读 0赞

### 1.背景 ###

背景颜色

body\{

background-color:

背景图片

body\{

background-image: url()

是否重复

body\{

background-repeat:

#div1{
    				width: 500px;
    				height:900px;
    				/*背景颜色*/
    				background-color: aqua;
    				/*背景图片 默认重复*/
    				background-image: url(img/v2-dd52955ee2b5a66ec914fc204e64bc1a_r.jpg);
    				/*是否重复*/
    				background-repeat: no-repeat;
    			}

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_17_color_FFFFFF_t_70_g_se_x_16][]

### 2.文本 ###

文本颜色

body\{

color：

文本对齐方式

body\{

text-align：

文本修饰

body\{

text-decoration

首行缩进

body\{

text-indent:

#div2{
    			/*字体颜色*/
    				color: blue;
    			/*对齐方式 left center right*/
    				text-align: center;
    			/*文本修饰*/
    				text-decoration: line-through overline underline;
    			/*首行缩进*/
    				text-indent: 2em;
    	}

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16][]

### 去除超链接的下划线 ###

a{
    	/*去除文本效果（除去超链接的下划线）*/
    	text-decoration: none;
    }

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>常用属性</title>
    		<style type="text/css">
    			#div1{
    				width: 500px;
    				height:900px;
    				/*背景颜色*/
    				background-color: aqua;
    				/*背景图片 默认重复*/
    				background-image: url(img/v2-dd52955ee2b5a66ec914fc204e64bc1a_r.jpg);
    				/*是否重复*/
    				background-repeat: no-repeat;
    			}
    			#div2{
    				/*字体颜色*/
    				color: blue;
    				/*对齐方式 left center right*/
    				text-align: center;
    				/*文本修饰*/
    				text-decoration: line-through overline underline;
    				/*首行缩进*/
    				text-indent: 2em;
    			}
    				
    			a{
    				/*去除文本效果（除去超链接的下划线）*/
    				text-decoration: none;
    			}
    				
    		</style>
    	</head>
    	<body>
            /*背景*/
    		<div id="div1">
    			Hello
    		</div>
            /*文本*/
    		<div id="div2">
    			Hello
    		</div>
            /*去除文本效果*/
    		<a href="">123456</a>
    	</body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_19_color_FFFFFF_t_70_g_se_x_16][]

### 3.字体 ###

对齐方式

body\{

text-align:

display属性

body\{  
display: ;  
\}

浮动

body\{

float：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			#p1{
    				/*d对齐方式 left right center justify两端对齐*/
    				text-align: justify;
    			}
    			h2{
    				/*display属性 none隐藏元素 block显示元素*/
    				display: none;
    			}
    			/*浮动*/
    			#d1{
    				width: 100px;
    				height: 100px;
    				background-color: aqua;
    				/* 浮动 左浮动 */
    				float: left;
    			}
    			#d2{
    				width: 100px;
    				height: 100px;
    				background-color: cornflowerblue;
    				/* 浮动 左浮动 */
    				float: left;
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		<p id="p1">
    			123456789abcdefghi
    			123456789abcdefghi
    			123456789abcdefghi
    			123456789abcdefghi
    			123456789abcdefghi
    			123456789abcdefghi
    		</p>
    		<hr >
    		
    		<h2>
    			Hello
    		</h2>
    		
    		<div id="d1"></div>
    		<div id="d2"></div>
    	</body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_17_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/8bf2074ad20248c8ad5fdd97e1dc6d4e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/f33d47944cdf4b4c80ccd313b17b7cde.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_19_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/d6756dbec08443a0b33ca76cc97e83f5.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/a26e85075036423789e06b1ba777ea44.png