第四次HTML学习笔记(css的常用属性,盒子模型)

css常用属性

一、背景

1.background-color

设置元素的背景颜色

2.background-image

设置元素的背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体

3.background-repeat

设置如何重复背景图像

二、文本

1.color

字体颜色

2.text-align

对齐方式

3.text-decoration

文本修饰
(/去除文本效果(去除超链接下划线)/
text-decoration: none;)

4.text-indent

首行缩进

三、对齐方式

left、 center、 right、 justify两端对齐

四、display属性

第四次HTML学习笔记(css的常用属性,盒子模型)

五、 浮动

第四次HTML学习笔记(css的常用属性,盒子模型)
例子:

#div1{
			width: 800px;
			height: 600px;
			background-color: #808080;
			background-image: url(img/logo.png);
			background-repeat: no-repeat; 
			}
			
		#div2{
			/*字体颜色*/
			color: #0000FF;
			/*对整方式*/
			text-align: left;
			/*文本修饰*/
			text-decoration: line-through overline underline;
			/*首行缩进*/
			text-indent: 2em;
		}
		a{
			/*去除文本效果(去除超链接下划线)*/
			text-decoration: none;
		}
		
		#p1{
			/* 对齐方式  left  center  right  justify两端对齐 */
			text-align: justify;
		}
		
		h2{
			/* display属性 none隐藏元素 block显示元素*/
			display: none;
		}
		/*  浮动 */
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #7FFF00;
			float: left;
		}
		#d2{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #A52A2A;
			float: left;
		}
================================================================
<div id="div1">
		hello	
		</div>
		
		<div id="div2">
			hello world
		</div>
		<a href="https://www.baidu.com/">百度</a>
		<hr />
		<p id="p1">  1、踏破二十载风雨路,学院星空一年期,错一步,一生苦,空余笑靥如初。2、御剑江湖天涯路,前世梦今生误。晚舟唱,情相忘,泪痕浅瀛目。一世情缘未书,半生离愁难诉,不记春秋几回,只叹花落几度。3、岁月的长河静静流淌着,云淡风轻。假如生活欺骗了你,爱情的果实遭遇了害虫,你又执意不肯回头,就让我用三生烟火,换你一世迷离吧,等你终于清醒,我依旧在你身旁,从不曾离去。4、我自是年少,终是不懂,不懂什么官场人情,不懂什么人心险恶、世态炎凉,不懂得何谓早恋,何谓幼稚的爱。我只知道手心里的那只手,将一辈子陪我一起走。
  5、漫步在青石小路上,已至八月,天热的和蒸笼似的,就连吹过来的风都是热热的,所幸是将至傍晚,倒也是清凉了不少,颇有几分微醺之意。
  6、一株野草心的,没有温度,但有梦的憧憬,梦不是用心囤积的,她的梦是飘散的,风来的时候,或许会藏着一点。野草的心,不会有温度,每当靠近时,都会划伤你们的手。
  7、我是长在南国的一根野草,只想去看沙漠中的漠漠沙粒,和那些冷漠的骆驼刺。我想去看一望无尽的大海,坐在沙滩上,为自己种一朵花,静听海水的浪潮,等待夕阳把我缩影,直到六点半的世界。</p>
		
		<hr />
		<h2>hello</h2>
		<hr />
		
		<div id="d1"></div>
		
		<div id="d2"></div>

结果:
第四次HTML学习笔记(css的常用属性,盒子模型)

盒子模型(padding 内边距 border 边框 margin 外边框)

第四次HTML学习笔记(css的常用属性,盒子模型)

1.border

border 边框

设置边框的颜色、样式、宽度
border:颜色 样式 宽度
例:border:red soild 1px

<1>.border-wide
<2>.border-color
<3>.border-style

(border的基本属性)
第四次HTML学习笔记(css的常用属性,盒子模型)

<4>.border-collapse

设置是否将表格边框折叠为单一边框
属性值:separate(默认、单元格边框独立)、collapse(单元格边框合并)

2.padding 内边距

设置元素所有内边距的宽度,或者设置各边上内编剧的宽度
单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定

3.margin 外边距

设置一个元素所偶有外边距的宽度,或者设置各边上外边距的宽度
单独设置各边的外边距:margin-top、margin-left、margin-right

注:
当使用时
设置1个值:上右下左都一致
设置2个值:上下一致,左右一致
设置3个值:上右下,左和右一致

例子:
#d1{
			width: 100px;
			height: 100px;
			background-color: #7FFF00;
			/* 边框 */
			border: chocolate 5px outset;
			/* 内边距 */
			padding: 10px  20px;
			/* 外边距 */
			margin-top: 100px;
	=======================================
			<div id="d1"></div>

结果:
第四次HTML学习笔记(css的常用属性,盒子模型)

上一篇:CF gym102483 A. Access Points


下一篇:CentOS8安装MySQL5.7