《Day02》DIV+CSS样式,还不会排版优化自己网页?不是吧!不是吧!一看就会的东西

一、DIV+CSS简介

(一)DIV+CSS简介

1、DIV:DIV是层叠样式表中的’定位技术’’,称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(blocklevel)的内容提供结构和背景的元素。
注意:div必须和css配合使用,必须利用css的样式,div才能起作用
在这里插入图片描述
2、CSS:层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以
配合各种脚本语言动态地对网页各元素进行格式化。
作用:美化网页
3、CSS引入方式:

(1)行内样式:在标签的开头标记中直接通过style属性设置样式效果

<p style="font-size: 40px; color: blue;"> 1

(2)内部样式(内嵌样式):在head标签中通过style标签书写样式
(3)外部样式(外链式):先定义一个外部样式文件,再head标签中通过link标签引入到页面中

<link href="css/css.css" type="text/css" rel="stylesheet" />

引入优先级:就近原则:行内样式—>内嵌式/外链式 (谁距离标签
近,就使用谁)
使用规则:

1:当页面中只有少量的标签时,使用行内样式(一次性)
2:当页面中有多个标签,具有相同的样式时,使用内嵌式
3:当多个页面中,多个标签具有相同样式时,使用外链式

4、CSS的语法规则
(一)语法规则:
选择器{
样式1:样式值1;
样式2:样式值2;
样式3:样式值3;

}
(二)CSS选择器
选择器作用:获取页面中要操作的元素(html标签)对象。

三种常用的选择器:

1、标签选择器:以标签的名字,作为选择器的名称
标签名{
样式规则…
}

h2{
 	color: red;
 }
 p{
 	color: blue;
 } 
 body{
 	color: green;
 }

<h2>静夜思</h2>
<p>
	床前明月光,疑是地上霜。
</p>
<p>
	举头望明月,低头思故乡。
</p>

2、类选择器
类选择器 :不同标签具有相同样式使用
​ 语法
​ .class名{
​ 样式规则…
​ }

.p1{
    color: red;
    font-size: 40px;
    font-family: "楷体";
}

<h2 class="p1">静夜思</h2>
<p class="p1">
	床前明月光,疑是地上霜。
</p>
<p class="p1">
	举头望明月,低头思故乡。
</p>

最常用的选择器
3、ID选择器

id选择器:相同标签具有不同样式

语法

# id名{ 样式规则 }

注意:id不能重名,一个页面中只能出现1个id,class可以有多个

#p1{
        font-size: 20px;
        color: red;
    }
    #p2{
        font-size: 30px;
        color: blue;
    }	

<h2>静夜思</h2>
<p id="p1">
	床前明月光,疑是地上霜。
</p>
<p id="p1">
	举头望明月,低头思故乡。
</p>

选择器的优先级

id>class>标签
样式是可以叠加的,也可以覆盖

优先级高的覆盖优先级低

不同选择器中具有不同样式时,样式会叠加

二、常用CSS样式

(一)字体样式font

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
			  font-size: 100px;	   /* 字体大小 */
			  font-weight: bold;    /* 字体粗细 */
			  font-family: "楷体";  /* 字体类型 */
			  font-style: italic;  /* 字体风格  普通和斜体 */
			  color: red;   /* 颜色 */
			}
		</style>
	</head>
	<body>
		<p>我是一段文本</p>
	</body>
</html>

(二)文本样式 text

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 14px; /* 整个页面文字都是14px */
			}
			a {
				color: red;
				font-size: 50px;
				text-decoration: none;
				/* 下划线  none:去除下划线*/
			}
			
			p{
				text-indent: 28px;  /* 文本的首行缩进  2*14 */
			}
			
			div{
				border: 1px solid;
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;  /* 行高和高度一致,可以达到垂直居中效果 */
				letter-spacing: 10px; /* 字间距  文字 */
				word-spacing: 50px;  /* 词间距   单词 */
			}
		</style>
	</head>
	<body>
		<p>
			与此同时,拜登、哈里斯团队公布了第一批内阁成员提名名单,主要涉及国家安全和外交事务,
			具体为:安东尼·布林肯(Antony Blinken)任国务卿,马约卡斯(Alejandro
			Mayorkas)任国土安全部部长,艾薇儿·海恩斯(Avril Haines)任国家情报总监,琳达·托马斯-格林菲尔德(Linda Thomas-Greenfield)任美国常驻联合国代表,杰克·沙利文(Jack
			Sullivan)任白宫国家安全顾问,前国务卿约翰·克里(John Kerry)任总统气候特使。
		</p>
		<p>
			与此同时,拜登、哈里斯团队公布了第一批内阁成员提名名单,主要涉及国家安全和外交事务,
			具体为:安东尼·布林肯(Antony Blinken)任国务卿,马约卡斯(Alejandro
			Mayorkas)任国土安全部部长,艾薇儿·海恩斯(Avril Haines)任国家情报总监,琳达·托马斯-格林菲尔德(Linda Thomas-Greenfield)任美国常驻联合国代表,杰克·沙利文(Jack
			Sullivan)任白宫国家安全顾问,前国务卿约翰·克里(John Kerry)任总统气候特使。
		</p>
		<a href="http://www.baidu.com">百度</a>
		
		<div>
		   我要居中对齐,how are you 
		</div>
	</body>
</html>

(三)超链接伪类样式 a:

在这里插入图片描述
定义这四个伪类,必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。请记住,这4种样式定义顺序不能改变!

<style type="text/css">
		
		/* 未访问之前的 */
		a:link{
			text-decoration: none;
		}
		/* 访问之后的 */
		a:visited{
			color: red;
		}
		/* 鼠标悬停 */
		a:hover{
			color: blue;
			font-size: 50px;
		}
		/* 鼠标点击时 */
		a:active{
			color: #008000;
		}
        
        
        img:link{
				width: 200px;
				height: 200px;
			}
        img:hover{
            width: 300px;
            height: 300px;
        }
	</style>
</head>
<body>
	  <a href="http://www.baidu.com">百度</a>
      <img src="img/学校.png" >
</body>

(四)边框样式 border

在这里插入图片描述

边框属性

border:1px solid red; 复合属性  相当于下面3个样式
border-width: 1px;
border-style: solid;
border-color: red;

border-top:1px solid red; 复合属性  ,其它方向写法一致
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

圆角属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				border: 1px solid;
				/* border-radius: 50px 50px 50px 50px; */ /* 左上 右上 右下 左下 */
				/* border-radius: 50px; */  /* 同时给四个方向设置 */
				/* border-radius: 50px 100px */;  /* 第一个给左上和右下,第二个给右上和左下 */
			     border-radius: 50%; /* 圆角表格  设置宽高的一半 */
			}
		</style>
	</head>
	<body>
		  <div id="div1">
		  	
		  </div>
		
	</body>
</html>

附加常用的圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#id1{
				width: 200px;
				height: 100px;
				border: 5px solid;
				color: red;
				border-radius: 30px 30px 30px 30px;// 圆角矩形
			}
			#id1_1{
				color: blue;
				position: absolute;
				top: 50px;
				left: 80px;
			}
			
			#id2{
				width: 200px;
				height: 100px;
				border: 5px solid;
				color: red;
				margin-left: 400px;
				margin-top: -110px;
				border-radius: 100px 100px 0 0//半圆
			}
			#id2_2{
				color: blue;
				position: absolute;
				top: 50px;
				left: 500px;
			}
			#id3{
				width: 200px;
				height: 200px;
				border: 5px solid;
				border-top-color: #0000FF;
				border-top-style: groove;
				border-left-color: blueviolet;
				border-left-style: dotted;
				border-bottom-color:forestgreen;
				border-bottom-style: dashed;
				border-right-color:gold;
				border-right-style:double;
				border-radius: 50%;//圆
			}
			#id3_3{
				color: blue;
				position: absolute;
				top: 230px;
				left: 100px;
			}
			#id4{
				width: 200px;
				height: 100px;
				border: 5px solid;
				color: red;
				border-radius: 200px/100px//椭圆
			}
			#id4_4{
				color: blue;
				position: absolute;
				top: 400px;
				left: 100px;
				}
			#id5{
				width: 100px;
				height: 100px;
				border: 5px solid;
				color: red;
				border-radius: 100px 0 0 0;//扇形
				margin-left: 400px;
				margin-top: -300px;
			}
			#id5_5{
				color: blue;
				position: absolute;
				top: 230px;
				left: 450px;
				}
		</style>
	</head>
	<body>
		<div id="id1">
			<div id="id1_1">
				 圆角矩形
				
			</div>
			
		</div>
		<div id="id2">
			<div id="id2_2">
				半圆
				
			</div>
		</div>
		<p><div id="id3">
				<div id="id3_3"></div>
		</div></p>
		<p><div id="id4">
				<div id="id4_4">
					椭圆
				</div>
			</div></p>
			<div id="id5">
				<div id="id5_5">
					扇形
				</div>
			</div>
		
	</body>
</html>

在这里插入图片描述

圆角矩形:border-radius: 30px 30px 30px 30px;
半圆:border-radius: 100px 100px 0 0
圆:border-radius: 50%;
椭圆: border-radius: 200px/100px
扇形:border-radius: 100px 0 0 0;

(五)背景样式 background

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				/* background: #ffaaff;*/
				background: url(img/美女.jpg); 
				/* background: url(img/学校.png); *//* 背景图片默认以平铺的方式 */
				background-repeat: no-repeat;  背景不重复
				width: 500px;
				height: 400px;  /* 背景图片不能设置大小 css2的样式规则 */
				/* background-size: 500px 500px; */
				/* background-size: 100%; */
				background-size: cover;   css3新特性  图片填充满整个网页
				background-attachment: fixed;  /* 文字在背景上漂浮,背景不动 */
				font-size: 40px;
				color: red;
			}
		</style>
	</head>
	<body>
		  <marquee onmouseover="this.stop()" onmouseleave="this.start()">我是弹幕</marquee>
		 你好吗<br>
		 你好吗<br>
		 你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>
		 你好吗<br>你好吗<br>你好吗<br>你好吗<br>
	</body>
</html>

1、注意:背景图片原则是不允许设置大小的,css3新特性background-size:cover 设置大小
2、img标签可以设置大小,图片处于背景的上方

(六)盒子模型 div

有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容

外边距:margin 两个盒子之间的距离

边框:border 盒子本身的边框

内边距:padding 内容距盒子的距离

内容:width+height 元素本身的大小
在这里插入图片描述
1:一个盒子,研究他的内部结构

1.1:盒子内容大小不会变化,变化的是边距和填充以及边框

​ 盒子的实际宽度 = 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

​ margingLeft+borderLeft+paddingLeft+width+paddingRight+borderRight+marginRight

盒子的实际高度 =上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

​ margingTop+borderTop+paddingTop+height+paddingBottom+borderBottom+marginBottom

2:多个盒子,研究他们之间的相互关系

2.1:盒子的上下外边距,只能获取一个外边距,按照最大值来获取

2.2:多个盒子的内边距,不会相互受影响

案例:导航菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 100px;
				height: 50px;
				border: 1px solid;
				text-align: center;
				line-height: 50px;
			}
			
			#div0{
				margin-left: 557.5px;
			}
			#div2{
				margin-left: 101px;
				margin-top: -52px;
			}
			#div3{
				margin-left: 202px;
				margin-top: -52px;
			}
			#div4{
				margin-left: 303px;
				margin-top: -52px;
			}
		</style>
	</head>
	<body>
		
		<div id="div0">
			<div id="div1">
				音乐
			</div>
			<div id="div2">
				视频
			</div>
			<div id="div3">
				知道
			</div>
			<div id="div4">
				图片
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述

(七)布局样式

1:浮动布局 float

1.1:正常文档流

​ html的元素按照默认的位置在页面上排列

1.2:非正常文档流

打乱了html元素的默认位置,按照一定浮动或者定位改变位置了

float:left/right 左浮动

clear:both;清除浮动

2:定位布局 绝对+相对

定位的方法有很多种

固定定位(fixed)

相对定位(relative) 以左上角的原点为起始位置

绝对定位(absolute)

静态定位(static)。

  1. position:absolute
  2. left:距父元素左边框的距离
  3. top:距父元素上边框的距离
  4. z-index: 数字 数字越大,层级越高,反之越低
  5. 定位布局比浮动布局使用更加广泛
  6. div嵌套布局
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div0{
				
				width: 800px;
				height: 600px;
				border: 1px solid;
				position: absolute;
				left: 360px;
				top: 50px;
				
			}
			#div1{
				width: 600px;
				height: 200px;
				border: 1px solid;
				position: absolute;
				left: 100px;
				top: 50px;
			}
			#div2{
				width: 600px;
				height: 200px;
				border: 1px solid;
				position: absolute;
				left: 100px;
				top: 350px;
			}
			#div1_1{
				width: 200px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 50px;
				top: 25px;
			}
			#div1_2{
				width: 200px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 300px;
				top: 25px;
			}
			#div2_1{
				width: 200px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 50px;
				top: 25px;
			}
			#div2_2{
				width: 200px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 300px;
				top: 25px;
			}
		</style>
	</head>
	<body>
		
		 <div id="div0">
		 	<div id="div1">
		 		<div id="div1_1">
		 			
		 		</div>
				<div id="div1_2">
					
				</div>
		 	</div>
			<div id="div2">
				<div id="div2_1">
					
				</div>
				<div id="div2_2">
					
				</div>
			</div>
		 </div>
	</body>
</html>

相对定位:相对于上一个元素,会保留元素位置

子绝父相:父元素使用相对定位,会保留位置,布局不会打乱,儿子元素使用绝对定位,计算方便

position: relative;
left: 100px;
top: 100px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div0{
				width: 600px;
				height: 650px;
				border: 1px solid;
				position: relative;
				left: 460px;
				top: 50px;
			}
			#div1{
				width: 500px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 250px;
				top: 50px;
			}
			#div2{
				width: 500px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 50px;
				top: 250px;
			}
			#div3{
				width: 500px;
				height: 150px;
				border: 1px solid;
				position: absolute;
				left: 50px;
				top: 450px;
			}
		</style>
	</head>
	<body>
		 <div id="div0">
		 	 <div id="div1">
		 	 	
		 	 </div>
			 <div id="div2">
			 	
			 </div>
			 <div id="div3">
			 	
			 </div>
		 </div>
	</body>
</html>

(八)转换样式与列表样式 display

html标签分类

1:行级元素:多个标签处于同一行,不能设置宽高,不会自动换行

a, b ,i ,span

2:块级元素:每个标签独占一行,可以设置宽高

div,p,ul,ol,table,

3:行内块元素:多个标签处于同一行,可以设置宽高

img,input
4:元素之间的样式相互转换

display 样式转换

1:block 块级

2:inline:行级

3:inline-block 行内块

4:none 不存在

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#span1{
				display: block;  
				border: 1px solid;
				width: 200px;
				height: 200px;
				
			}
			#div1{
				display: inline;
				border: 1px solid;
				width: 200px;
				height: 200px;
			}
			#div2{
				display: inline-block;
				border: 1px solid;
				width: 200px;
				height: 200px;
			}
			#div3{
				display: none;  
				border: 1px solid;
				background-color: red;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		  <span id="span1">我是行级元素1</span>
		  <span id="span2">我是行级元素2</span>
		  <div id="div1">
		  	我是块级元素
		  </div>
		  <div id="div2">
		  	我是块级元素
		  </div>
		  <div id="div3">
		  	我是块级元素
		  </div>
		  
		  <button type="button" onclick="show()">显示</button>
		  <button type="button" onclick="hidden1()">隐藏</button>
	</body>
</html>
<script type="text/javascript">
	function show(){
		var div3 = document.getElementById("div3");
		div3.style.display = "block";
	}
	function hidden1(){
		var div3 = document.getElementById("div3");
		div3.style.display = "none";
	}
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿福真的不想掉头发

大爷?赏点?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值