CSS

  1. frameset

主要用于多个界面合并成一个界面
framer填充
frameset页面上下平分，rows
frameset页面左右平分，cols
不能和body同时存在
页面之间关联，name，target

  1. div

块级元素

  1. CSS
  1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  2. 主要用于美化网站，静态修饰网页，配合脚本动态对网页元素进行格式化
  3. 选择器名称{属性名：属性值}
    p

3.1 CSS的3中引入方式：

3.1.1 行内引入

在标签中直接编写样式

<p style="属性名:属性值;"></p>

写起来方便,但代码结构性差

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="font-size: 20px; color: bisque;">测试一下css的行内引入</p>
	</body>
</html>

3.1.2 外部引入

在css文件写样式，在html中引入

代码可扩展，可维护性好，但引入多个css可能造成样式重叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/demo.css">
	</head>
	<body>
		<p>测试一下外部引入</p>
	</body>
</html>

3.1.3 内部引入

在html的头部，head写css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h3 {
				color: coral;
			}
		</style>
	</head>
	<body>
		<h3>测试一下内部引入</h3>
	</body>
</html>

3.1.4 三种引入方式优先级

就近原则：

行内引入>外部引入>内部引入

3.2 CSS三种基本选择器

3.2.1 id选择器

a.概念:以id来命名的选择器 就是id选择器

b.语法: # id选择器名称 {样式} 例如:#getId{样式}

c.注意点

定义id选择器之后 需要在标签中进行引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#getId{
				color: pink;
			}
		</style>
	</head>
	<body>
		<p id="getId">id选择器#</p>
	</body>
</html>

3.2.2 类选择器

i.概念:以类进行命名的选择器 就是类选择器

ii.语法: .类选择器名称{样式} 例如:.getClass{样式}

iii.注意点

定义类选择器之后 需要在标签中进行引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.getClass{
				height: 20px;
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="getClass">类选择器.</div>
	</body>
</html>

3.2.3 标签选择器

a.概念:以标签来进行命名的选择器 就是标签选择器 例如:p{} div{}

b.语法：标签名称 {样式} 例如: div {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: solid 1px red;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div>标签选择器</div>
	</body>
</html>

3.2.4 三种选择器优先级

id选择器>类选择器> 标签选择器

3.2.5 属性选择器

1.概念:以标签的属性来进行命名的选择器 就是属性选择器 
2.语法:标签名称[属性='值'] 例如: input[type='text']

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[type='text']{
				color: aqua;
			}
			font[size]{
				color: firebrick;
				/* 上下都写颜色的话，优先显示这里的 */
			}
			a[href]='#'{
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<p><input type="text" name="" id="" value="属性选择器"></p>
			<p> <font size="3" color="">段落颜色值，优先选用style定义的</font></p>
			<a href="#">这个是。。。</a>
		</form>
	</body>
</html>

3.2.6 层级选择器

1.概念:标签有上下级关系 标签有父子关系 就可以使用层级选择器获取 
2.语法: ul li .getClass p

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 层级选择器 */
			ul li {
				color: bisque;
			}
			.getClass p{
				color: coral;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>无序列表一</li>
			<li>无序列表二</li>
			<li>无序列表三</li>
		</ul>
		
		<div class="getClass">
			<p>段落1</p>
			<p>段落2</p>
			<p>段落3</p>
		</div>
	</body>
</html>

3.2.7 anchor伪类选择器

a:link {} /* 未访问的链接 */ 
a:visited {} /* 已访问过的链接 */ 
a:hover {} /* 鼠标悬浮停留的链接 */ 
a:active {} /* 点按选中的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 伪类选择器 -->
		<style>
			a:link{
				color: blue;/未访问时是蓝色
			}
			a:visited{
				color: lightpink;/访问过后的颜色
			}
			a:hover{
				color: aqua;/鼠标放上去的颜色
			}
			a:active{
				color: coral;/点中不放开时候的颜色
			}
		</style>
	</head>
	<body>
		<a href="#">点我跳转链接</a>
	</body>
</html>
  1. CSS常用样式

4.1 字体样式

属性名 属性描述
font-size 字体大小
color 字体颜色
font-weight 字体粗细
font-family 字体类型
font-style 字体样式 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-size: 200%;
				font-weight: bold;
				color: aquamarine;
				font-family: cursive;
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<p>字体样式测试</p>
	</body>
</html>

4.2 文本样式

属性名 属性描述
text-align 文字对齐方式
line-height 设置行高
text-decoration 设置文本装饰
text-indent 设置缩进
text-shadow 设置阴影(水平阴影,垂直阴影 模糊效果,颜色) 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 150px;
				border: solid 1px red;
				text-align: center;
				line-height: 300px;
				/* text-shadow: 2px 2px 0.5px dodgerblue; */
				text-decoration: overline;
			}
			p{
				text-indent: 6px;
				text-shadow: 2px 3px 1px blueviolet;
			}
			
		</style>
	</head>
	<body>
		<div>
			div文本样式测试
		</div>
		<p>p文本样式测试</p>
	</body>
</html>

4.3 背景样式

属性名 属性描述
background-color 背景颜色
background-image 背景图片
background-repeat 是否平铺
background-position 设置图片偏移 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 240px;
				height: 240px;
				border: solid 2px mediumvioletred;
				background-image: url("img/01.png");
				background-repeat: no-repeat;
				background-position: center;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

4.4 轮廓样式

属性名 属性描述
outline-style 轮廓的样式
outline-color 轮廓的颜色
outline-width 轮廓宽度 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: solid 2px seagreen;
				outline-style: solid;
				outline-width: 5px;
				outline-color: palevioletred;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

4.5 边框样式

属性名 属性描述
border-xxx-color 设置边框颜色
border-xxx-style 设置边框线样式
border-xxx-width 设置边框宽度 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 400px;
				height: 400px;
				border: solid 2px red;
				background-image: url("img/01.png");
				border-radius: 40%;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
  1. 盒子模型

5.1 一个盒子

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
属性名 属性描述
padding 上右下左
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 240px;
				height: 240px;
				/* Border(边框) - 围绕在内边距和内容外的边框。 */
				border: solid 2px red;
				/* Margin(外边距) - 清除边框外的区域，外边距是透明的。 */
				margin: 20px;
				/* Padding(内边距) - 清除内容周围的区域，内边距是透明的。 */
				padding: 20px;
				padding-top: 10px;/上
				padding-right: 20px;/右
				padding-bottom: 30px;/下
				padding-left: 40px;/左
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

5.2 两个盒子

两个盒子纵向进行排列:同时设置margin的值,取的是两个盒子margin值较大的值;
两个盒子横向进行排列:同时设置margin的值,取的是两个盒子margin值之和。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.getClass1{
				width: 200px;
				height: 200px;
				border: solid 2px red;
				/* display 属性规定是否/如何显示元素。 */
				/* inline-block 允许在元素上设置宽度和高度。水平显示 */
				display: inline-block;
				margin-right: 20px;
			}
			.getClass2{
				width: 200px;
				height: 200px;
				border: solid 4px seagreen;
				display: inline-block;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="getClass1"></div>
		<div class="getClass2"></div>
	</body>
</html>

5.3 嵌套盒子

两个盒子嵌套的时候 给子容器设置margin值的时候 父容器会随着子容器一起移动 这个现象叫做父容器塌陷问题 
解决方案 overflow: hidden;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#getId1{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
				padding: 50px;
				overflow: hidden;
			}
			#getId2{
				width: 100px;
				height: 100px;
				background-color: coral;
				padding-top: 50px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="getId1">
			<div id="getId2"></div>
		</div>
	</body>
</html>
  1. 元素转换display

1.在html中将元素分为三类 行状元素 块状元素 行块元素

2.解释

块元素:不根据内容来进行填充 独占一行 例如 p div

行元素:根据内容进行填充 不是独占一行 例如: em span font

行块元素:既有行元素的特征 又有快元素的特征 不是独占一行 但是可以设置其宽度 img

3.元素之间转换

display: block; 转换为块状元素

display: inline; 转换为行状元素

display: inline-block; 转换为行块元素

display: none; 隐藏元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				display: inline;
			}
			div{
				width: 100px;
				border: solid 2px red;
				/* 转为行元素 */
				display: inline;
				/* 转为行块元素 */
				display: inline-block;
				/* 隐藏元素 */
				display: none;
			}
			img{
				border: solid 1px green;
				display: block;
			}
		</style>
	</head>
	<body>
		<p>p段落块</p>
		<div>div块</div>
		<em>em行</em>
		<span>span行</span>
		<font>font行</font>
		<img src="img/1.png" alt="">
	</body>
</html>
  1. 浮动float

1.在html中 网页中的元素的是从左到右 或者是从上到下进行排列 如果需要改变这种排列的规则 就可以

使用浮动

浮动的元素会脱离标准文档流(让元素飘起来)

2.设置浮动

float: left 元素向左浮动。

float: right 元素向右浮动。

float: none 默认值。元素不浮动

3.注意点:

A.浮动的元素 遇到其他元素的边界的时候 或者遇到浏览器窗口的时候 就会停止浮动

B.浮动的元素会对不浮动的元素产生影响 清除浮动 clear left right both

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.getClass1{
				width: 200px;
				height: 150px;
				background-color: red;
				float: left;
			}
			.getClass2{
				width: 300px;
				height: 200px;
				background-color: blue;
				float: left;
			}
			.getClass3{
				width: 400px;
				height: 250px;
				background-color:green;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="getClass1"></div>
		<div class="getClass2"></div>
		<div class="getClass3"></div>
		<div style="clear:both"></div>
	</body>
</html>
  1. 定位position

position: absolute; 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

position: relative; 相对定位元素的定位是相对其正常位置。

position: fixed; 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动

position: static; HTML 元素的默认值，即没有定位

sticky 粘性定位是基于用户的滚动位置来定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.getClass1{
				width: 200px;
				height: 200px;
				background-color: rosybrown;
				float: left;
			}
			.getClass2{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				float: left;
				/* 定位 */
				position: fixed;
				top: 20px;
				left: 20px;
			}
			.getClass3{
				width: 200px;
				height: 200px;
				background-color: lawngreen;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="getClass1"></div>
		<div class="getClass2"></div>
		<div class="getClass3"></div>
	</body>
</html>
posted @ 2022-11-01 13:44  Ritchie^._.^  阅读(88)  评论(0)    收藏  举报