CSS基本属性

weixin_54230482

于 2022-02-07 18:40:50 发布

阅读量255

点赞数

分类专栏： css 前端 HTML 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_54230482/article/details/122808938

版权

前端同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

一.背景

背景颜色：background-color

背景图片：background-image

背景重复：background-repeat

head中的代码为：

<style type="text/css">
			#wulala{
				width: 31.25rem;
				height: 18.75rem;
				background-color: aquamarine;
				background-image:url(http://www.zzuli.edu.cn/_upload/tpl/05/8a/1418/template1418/images/logo.png);
				background-repeat: no-repeat ;
				
			}

body中的代码为：

<div id="wulala">
			zzuli
		</div>

效果如图所示：

二. 字体

字体颜色：color

对齐方式：text-align

right 右对齐

left 左对齐

justify：左右对齐

文本修饰：text-decoration

中划线：line-through

下划线：underline

上划线：overline

首行缩进：text-indent

head中的代码为：

#wuhaha{
				color: burlywood;
				text-align: left;
				text-decoration: line-through overline underline ;
				text-indent: 2em;
				
			}
p {
				text-align: justify;
			}

body中的代码为：

<div id="wuhaha">
			zzuli<br />
			zzuli
		</div>
<hr />
		<p id="ppp">
			如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？
			如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？
			如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？
			如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？如何用OpenGL绘制雪花？
		</p>

效果如图所示：

三. display属性

display：none 隐藏

display：block 显现

head中的代码为：

#h21{
				display: none;
			}
			#h22{
				display: block;
			}

body中的代码为：

<hr >
		<h2 id="h21">
			ni hao shijie
		</h2>
		<br>
		<h2 id="h22">
			hello world
		</h2>

效果如图所示：

四.浮动

float：none 不浮动

right 右浮动

left 左浮动

head中的代码为：

#div1{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #7FFFD4;
				float: left;
				
			}
			#div2{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #DEB887;
				float: left;
			}

body中的代码为：

<hr >
		<div id="div1"></div>
		<div id="div2"></div>

效果如图所示：

五.盒子模型

1.border边框：

整体设置边框的颜色样式宽度

单独设计边框的颜色：border-color 样式：border-style 宽度：border：width

border-collapse ：是否把表格里的边框设置成单一边框

head中的代码为：

#div3{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #DEB887;
			
				border-color: #7FFFD4;
				border-style: double;
				border-width: 0.125rem;
			}

body中的代码为：

</h2>
		<div id="div3"></div>

效果如图所示：

2.padding：内边距

设置元素内边的宽度

#div3{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #DEB887;
			
				border-color: #7FFFD4;
				border-style: double;
				border-width: 0.125rem;
				padding: 0.9375rem;
			}

body中的代码为：

</h2>
		<div id="div3"></div>

效果如图所示：

3.margin 外边距

设置元素外边的宽度

head中的代码为：

#div3{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #DEB887;
			
				border-color: #7FFFD4;
				border-style: double;
				border-width: 0.125rem;
				padding: 0.9375rem;
				margin: 1.875rem;
			}

body中的代码为：