首页 前端知识 HTML—css

HTML—css

2024-09-08 02:09:20 前端知识 前端哥 759 959 我要收藏

css概述

C S S 是 C a s c a d i n g S t y l e S h e e t s ( 级 联 样 式 表 ) 。
C S S 是 一 种 样 式 表 语 言 , 用 于 为 H T M L 文 档 控 制 外 观 , 定 义 布 局 。 例 如 ,
C S S 涉 及 字 体 、 颜 色 、 边 距 、 高 度 、 宽 度 、 背 景 图 像 、 高 级 定 位 等 方 面 。
可 将 页 面 的 内 容 与 表 现 形 式 分 离 , 页 面 内 容 存 放 在 H T M L 文 档 中 , 而 用
于 定 义 表 现 形 式 的 C S S 在 一 个 . c s s 文 件 中 或 H T M L 文 档 的 某 一 部 分 。

基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
         /* 外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
过link标签将外部样式表文件链接到HTML文档中.  */
		<link href="css/index.css" rel="stylesheet" />
		<style>
			
			/* css注释 */
			/* 内嵌样式表,也可以叫类选择器 */
			.p1{
				color: black;
			}
			/* 标签选择器,这个html文件里面所有的a标签,优先级小于前面三种 */
			a{
				color: bisque;
				size: 800px;
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			}
			/* 统配选择器 给所有标签修饰 优先级最低*/
			*{
				color: brown;
			}
			/* id选择器  唯一的*/
			#pp{
				color: crimson;
			}
			
		</style>
		
	</head>
	<body>
		<!--
		  选择器优先级
		  相同属性共同修饰一个标签,优先级高的修饰,如果属性不重复,优先级低的可以和优先级高的共同修饰标签
		  优先级由高到低
		  行内样式表-->id选择器-->类选择器-->标签选择器-->统配选择器
		  -->
		<!-- 行内样式表,只能对所在标签进行修饰,优先级最高 ,p1不能对其修饰-->
		<a href="" class="p1" style="color: aqua;size: 70px;font-family: 楷体;">元神</a>
		<a href="" class="p1">元神</a>
		
		<!-- 使用外部样式表修饰标签,首先在头标签里面书写link标签 <link href="css文件地址" rel="stylesheet风格表格" />-->
		<a href="" class="p2">元神</a>
		<a>123</a><br />
		<a id="pp">元神</a>
	</body>
</html>

 伪类

C S S 伪 类 专 门 用 来 表 示 标 签 的 一 种 的 特 殊 的 状 态 , 当 我 们 需 要 为 处 在 这 些 特 殊 状
态 的 标 签 设 置 样 式 时 , 就 可 以 使 用 伪 类 。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		a{
			color: aqua;
		}
		/* 鼠标移入切换样式 */
		a:hover{
			color: purple;
		}
		/* 鼠标点击标签时自动切换样式 */
		a:active{
			color: black;
		}
		/* :focus鼠标聚集到这个标签,标签的样式切换到这个样式 */
		input:focus{
			background-color: purple;
		}
		img:hover{
			/* opacity透明度,1不透明,0.5半透明,0透明 */
			opacity: 0.5;
		}
		img:active{
			opacity: 0;
		}
			
		</style>
		
	</head>
	<body>
		<a href="">百度</a>
		<input type="button" class="p" value="保存"/><br />
		<input type="text" /><br />
		<input type="text" /><br />
		<img src="img/1.png" alt="" />
		
	</body>
</html>

块级,行级,行级块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 块级标签 无论内容多少都独占一行 可以设置宽高 主要用来网页布局
		 div块级标签,没有任何附加样式
		 -->
		<!-- 行级标签 只占内容的大小,由内容撑开,设置宽高没有用
		  span行级标签,没有任何附加内容
		  -->
		  
		  <!-- 常用标签
		   div span 表格 表单 a
		   -->
		   <!-- 行级块标签
			不占一行又可以设置宽高 例如:img input
			-->
			aaa
			<img src="img/1.png" width="100" height="100" alt="" />
			aaa <br />
			<!-- display 可以修改标签样式 inline可以改变为行级标签 block 可以变为块级标签 none 可以取消标签 inline——block变为行级快标签 -->
			<!-- 块级标签变行级标签 -->
			<div style="width: 100px; height: 100px; background-color: purple;display: inline;">aaa</div>
		<!-- 行级标签变块级标签 -->
		<span style="width: 100px;height: 100px;background-color: purple;display: block;">aaa</span>
		
		
	</body>
</html>

 

盒子模型 

 C S S 处 理 网 页 时 , 它 认 为 每 个 标 签 都 包 含 在 一 个 不 可 见 的 盒 子 里 。
如 果 把 所 有 的 标 签 都 想 象 成 盒 子 , 那 么 我 们 对 网 页 的 布 局 就 相 当 于 是 摆
放 盒 子 。
我 们 只 需 要 将 相 应 的 盒 子 摆 放 到 网 页 中 相 应 的 位 置 即 可 完 成 网 页 的 布 局 。

 盒子模型我们分为四个区域,内容区,内边距,边框,外边距。

盒子模型-内边距 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p{
				width: 100px;
				height: 100px;
				background-color: purple;
				/* 设置内边距 */
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型 网页布局就是摆放一个个盒子 -->
		<!-- 每一个盒子分为四个区域
		 内容区
		 内边距
		 边框
		 外边距    每一个盒子大小=内容区+内边距+边框
		 -->
		 <div class="p">盒子模型</div>
		
		
		
		
	</body>
</html>

盒子模型-边框 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: purple;
				height: 100px;
			   padding: 20px 304px;
				border: 1px gray solid;
				/* 盒子模型边框设计 */
				border-radius: 50px;
				/* 边框原型 */
				
			}
			input{
				width: 600px;
				height: 30px;
				
				
			}
		</style>
	</head>
	<body>
		<!-- 边框 border:像素 颜色 样式 -->
		<div>
			<input type="text" class="p" />
		</div>
		
		
		
		
		
		
		
	</body>
</html>

盒子模型-外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;background-color: purple;
				margin-left: auto;
				margin-right: auto;
				/* 设置div居中 ,注意高度不可以这样设置,会默认为0*/
				
				
				
			}
			.p{
				width: 100px;
				height: 100px;background-color: gray;
				margin: 10px;
				
			}
		</style>
	</head>
	<body>
		<!-- 外边距不影响大小,影响位置 -->
		<div class="p">
			
		</div>
		<div>
			
		</div>
		
		
		
	</body>
</html>

浮动

文档流

文 档 流 指 的 是 文 档 中 的 标 签 在 排 列 时 所 占 用 的 位 置 。 将 窗 体 自 上 而 下 分
成 一 行 行 , 并 在 每 行 中 按 从 左 至 右 的 顺 序 排 放 标 签 , 即 为 文 档 流 。
也 就 是 说 在 文 档 流 中 标 签 默 认 会 紧 贴 到 上 一 个 标 签 的 右 边 , 如 果 右 边 不
足 以 放 下 标 签 , 标 签 则 会 另 起 一 行 , 在 新 的 一 行 中 继 续 从 左 至 右 摆 放 。
这 样 一 来 每 一 个 块 标 签 都 会 另 起 一 行 , 那 么 我 们 如 果 想 在 文 档 流 中 进 行
布 局 就 会 变 得 比 较 麻 烦。

给标签添加浮动便可以摆脱文档流。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p{
				padding: 10px 30px;
				background-color: purple;
				float: left;
			}
			.p:hover{
				background-color: aliceblue;
			}
			.p1{
				width: 368px;
				margin:  auto;
			}
		
			.main{
				width: 300px;
				margin: auto;
			}
			.main-box{
				float: left;
				width: 100px;
				background-color: papayawhip;
			}
		</style>
	</head>
	<body>
		<!-- 浮动: 浮动使原来的标签脱离文档流(二维平面),漂浮起来了
		 float:left
		 漂浮后会产生一个问题,浮动后的标签不会占用原来文档流的位置,下面的标签就会上移,影响布局
		 可以在浮动后的标签后面添加div设置风格为clear对应左浮动还是右浮动
		 -->
		 <div class="p1">
		 <div class="p">新闻</div>
		  <div class="p">体育</div>
		   <div class="p">娱乐</div>
		    <div class="p">游戏</div>
			<!-- 清除浮动 -->
				<div style="clear: left;"></div>  
			</div>
		
			
			
			
			<div>www</div>
			<div class="main">
				<div class="main-box">left</div>
				<div class="main-box">center</div>
				<div class="main-box">right</div>
				<div style="clear: left;"></div>
				<div style="width: 300px; background-color: azure;">bottom</div>
			</div>
		
	</body>
</html>

定位

相对定位

相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动,移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位,
left right top bottom四个属性来设置标签的偏移量。

相对定位的特点
当标签的position属性设置为relative时,则开启了标签的相对定位
1.当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				background-color: aliceblue;
				width: 100px;
				height: 100px;
				position: relative;
				/* 相对定位 */
				left: 100px;
				/* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
			}
			.div2{
				background-color: gray;
				width: 100px;
				height: 100px;
				position: relative;
				/* 相对定位 */
				top: 50px;
				/* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
			}
			
		</style>
	</head>
	<body>
		<div class="div1">div1</div>

<div class="div2">div2</div>		
		
		
	</body>
</html>

绝对定位

绝对定位是不占空间的,运用了
绝对定位的标签会脱离原来的文档
流,浮动起来,因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位,
left right top bottom四个属性来
设置标签的偏移量

绝对定位的特点
1.开启绝对定位,会使标签脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签
的绝对定位都会同时开启父标签的相对定位)
如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				background-color: aliceblue;
				width: 100px;
				height: 100px;
				position: absolute;
				/* 开启绝对定位标签立即脱离文档流 */
				left: 50px;
				/* 
				绝对定位的参照物,离他最近的开启了定位的父级标签,一般父级开相对定位 
				 */
			}
			.div2{
				background-color: gray;
				width: 100px;
				height: 100px;
				position: relative;
				/* 相对定位 */
				top: 50px;
				/* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
			}
			.div3{
				background-color: aqua;
				width: 300px;
				height: 300px;
				position: relative;
			}
			
		</style>
	</head>
	<body>
		<div class="div3">
			div3
		<div class="div1">div1</div>
		</div>

<div class="div2">div2</div>		
		
		
	</body>
</html>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17817.html
标签
tensorflow
评论
发布的文章

数据持久化(Json)

2024-09-28 23:09:01

JSON Gate 开源项目教程

2024-09-28 23:09:00

【C 】Ubuntu安装jsoncpp

2024-09-28 23:09:58

http请求json

2024-09-28 23:09:58

JSON 格式详解

2024-09-28 23:09:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!