Hello friend, I'm Ritc|
收藏闪存小组博问

Ritchie里其

园龄：2年6个月粉丝：4关注：7

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>

本文作者：Ritchie里其

本文链接：https://www.cnblogs.com/wang-zeyu/p/16847392.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Ritchie里其  阅读(83)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
SQL AI 助手
✨欢迎你~🍻
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 遥か Aimer
遥か - Aimer
00:00 / 00:00
An audio error has occurred.

作词 : aimerrhythm/田中ユウスケ

作曲 : 田中ユウスケ

编曲 : 玉井健二/百田留衣

海岸線の雨に ちらばった君の影

思い出が交差する 海辺の街

君はあの日のまま いまも夢を見てた

君はあの日のまま いまも夢を見てた

遥か記憶の空 2人照らす光

遥か記憶の空 2人照らす光

膝までの浅瀬で 見つけた星

君まで届くなんてさ ありえないような

浅い眠りの中で 深い夢から覚めて

浅い眠りの中で 深い夢から覚めて

裸足のまま駆けてく まばゆい星

君はあの日のまま どんな夢を見てた？

君はあの日のまま どんな夢を見てた？

遥か記憶の空 2人照らす光

遥か記憶の空 2人照らす光

いつまでもこうして 笑っててほしい

夜空に舞い上がる 幾千の花びら

でたらめな誓いで 生きてく日々

君から届くなんてさ ありえないような