CSS标签属性及案例超详细笔记

最新推荐文章于 2024-04-16 17:45:13 发布

Willing卡卡

最新推荐文章于 2024-04-16 17:45:13 发布

阅读量1k

点赞数 3

分类专栏： JavaWeb 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_42601136/article/details/107277923

版权

JavaWeb 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

CSS基础标签及案例超详细笔记

引言：

本文主要分享了有关CSS的知识包括：CSS的书写规范、CSS与HTML结合的三种方式、CSS中常用的选择器（ID选择器、类选择器、标签选择器…）、伪类、CSS中的属性（字体、文本、背景、表格、边框…）、盒子模型、CSS的三种定位、CSS的伸缩布局（flex-container容器）以及利用CSS完成的注册界面；

1. CSS概述

CSS（cascading style sheets）层叠样式表格；如果说HTML属于毛坯房、CSS就是装修公司；

优点：

CSS起到装饰作用，将不同功能的代码做分离，方便维护；
可以大大提高工作效率，将HTML代码和样式代码分离；

1.1 书写规范

格式：选择器 {属性:属性值;属性:属性值}

选择器：确定当前css修饰的是哪一个元素

2. CSS与HTML的结合

2.1 内联结合

使用font标签可以改变文本的字体大小和字体颜色，但是字体大小最大是7，不能满足部分需求；

格式：

style=“属性名1: 属性值1;属性名2: 属性值2”

颜色取值：颜色英文单词或颜色16进制

<html>
	<head>
		<meta charset="UTF-8">
		<title>内联结合</title>
	</head>
	<body>
		<div>
            <!--字体大小为:100px,字体颜色:红色-->
			<font style="font-size: 100px; color:red;">这是一个div</font>
		</div>	
	</body>
</html>

优点：简单方便，一般对少数的特定的元素进行单独设置；
缺点：复用性差

2.2 内部结合

首先需要在head标签中使用style标签，然后使用选择器选中元素最后编写css代码

格式：

选择器{

属性名1：属性值1；

属性名2：属性值2；

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>内部结合</title>
        <style>
        	font{
        		font-size: 50px;
        		color: red;
        	}
        </style>
	</head>
	<body>
		<div>
			<font >这是font1</font><br />
			<font >这是font2</font><br />
			<font style="color: blue;">这是font3</font><br />
		</div>
	</body>
</html>

优点：可以对多个标签进行统一样式设置
缺点：复用性不高，css代码和html代码分离不彻底，只能作用于当前页面；

2.3 外部结合

首先新建一个CSS样式文件放入CSS文件夹下，然后编写CSS代码最后使用link标签引入外部样式文件；

link标签：

href：连接的css文件地址
rel：固定写:stylesheet

font{
	font-size: 20px;
	color: red;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>外部结合</title>
		<link rel="stylesheet" href="css/CSS_01.css"/>
	</head>
	<body>
		<div>
			<font >这是font1</font><br />
			<font >这是font2</font><br />
			<font >这是font3</font><br />
		</div>
	</body>
</html>

优点：将HTML和CSS代码完全分离，复用性高；

3. CSS选择器

让开发者能够选定元素；

3.1 路径问题

./代表同一个目录

…/代表上一级目录

3.2 Id选择器

在标签中给定id属性，注意一个页面中标签必须指定不同id属性(id必须唯一)，使用 # 引入，引用的是元素的id属性，id唯一标识；

js里面的DOM编程：获取标签对象 document.getElementById(“dl”) :防止里面获取不到标签对象；

语法：

#id属性值 {

属性名:属性值;

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			font{
				font-size: 20px;
			}
			#id1{
				color: red;
			}
			#id2{
				color: orangered;
			}
			#id3{
				color: green;
			}
		</style>
	</head>
	<body>
		<font id="id1">this is font one</font><br />
		<font id="id2">this is font two</font><br />
		<font id="id3">this is font three</font><br />
	</body>
</html>

3.3 类选择器

使用”.”来描述，引用的的是元素上的class属性值；在标签中指定class属性,而且一个页面中的标签它可以指定同名class；

格式：

.class属性值{

属性名:属性值;

}

处理多个元素有相同样式效果的；

<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			font{
				font-size: 20px;
			}
			.red{
				color: red;
			}
			.green{
				color: green;
			}
			.blue{
				color: blue;
			}
		</style>
	</head>
	<body>
		<font class="red">this is font red</font><br />
		<font class="red">this is font red</font><br />
		
		<font class="green">this is font green</font><br />
		<font class="green">this is font green</font><br />
		
		<font class="blue">this is font blue</font><br />
		<font class="blue">this is font blue</font><br />
	</body>
</html>

在这里插入图片描述

3.4 标签选择器

对页面上的标签进行统一的设置，引用的就是标签的名称；

格式：

标签名 {

属性名:属性值;

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<!--
			将font标签中的文本颜色修改为红色
			将span标签中的文本颜色修改为蓝色
			将div标签中的文本颜色修改为绿色
			所有的文本大小都为20px
		-->
	<style>
			body{
				font-size: 20px;
			}
			font{
				color: red;
			}
			span{
				color: blue;
			}
			div{
				color: green;
			}
		</style>
	</head>
	<body>
		<font>this is a font1</font><br />
		<span>this is a span1</span><br />
		<font>this is a font2</font><br />
		<div>this is a div1</div><br />
		<span>this is a span2</span><br />
		<font>this is a font3</font><br />
		<div>this is a div2</div><br />
	</body>
</html>

在这里插入图片描述

3.4 选择器的分组

多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组使用分组。选择器之间使用逗号分开；

格式：

id选择器,class选择,元素选择器 {

属性名:属性值;

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器的分组</title>
		<!--
			font/span/div中的文本内容字体大小为20px,字体颜色为红色
        -->
		<style>
			#f1,.s1,div{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<font id="f1">this is a font</font><br />
		<span class="s1">this is a span</span><br />
		<div>this is a div</div><br />
	</body>	
</html>

在这里插入图片描述

3.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；

格式：

父标签名(父id,父类名) 子标签名(子id,子类名){

属性名:属性值;

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>派生选择器 </title>
		<!--
		设置span中的font中内容样式,先找到span,再找到font
       -->
       		<style>
			span font{
				font-size: 20px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>
			<font>这是一个font</font>
		</span>
		<div>
			<font>这是一个font</font>
		</div>
	</body>
</html>

在这里插入图片描述

父选择器：可以是id选择器、class选择器、元素选择器
子选择器：可以是id选择器、class选择器、元素选择器

3.6 通配选择器

选中所有标签添加样式;

格式：

*{

样式代码

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>通配选择器</title>
		<style>
			*{
				font-size: 50px;
				color: #00F;
			}
		</style>
	</head>
	<body>
		<font id="f1">this is a font</font><br />
		<span class="s1">this is a span</span><br />
		<div>this is a div</div><br />
	</body>	
</html>

在这里插入图片描述

3.6 选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器

作用范围越小，优先级越大

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器优先级</title>
		<style>
			/*标签选择器*/
			font{
				font-size: 10px;
				color: yellow;
			}
			/*类选择器*/
			.class{
				font-size: 20px;
				color: red;
			}
			/*id选择器*/
			#id1{
				font-size: 30px;
				color: beige;
			}
		</style>
	</head>
	<body>
			<font id="id1" class="class" style="font-size: 40px; color: red;">
			这是一个font
		</font>
	</body>
</html>

4.CSS伪类

CSS伪类用于向某些选择器添加特殊的效果；在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；

4.1 伪类的标签

a:link {color: #FF0000}：未访问的链接，鼠标没有选择状态；
a:visited {color: #00FF00}：已访问的链接，鼠标点了并且松开了,(元素已经被访问过)状态；
a:hover {color: #FF00FF} ：鼠标移动到链接上，鼠标经过标签的状态；
a:active {color: #0000FF}：选定的链接，鼠标点击标签但是没有松开的状态；

注意事项

a:hover 必须被置于 a:link 和 a:visited 之后
a:active 必须被置于 a:hover 之后

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS伪类</title>
		<style>
			a:link {
				/* 未访问的链接 */
				color: cornflowerblue;
			}
			a:visited {
				/* 已访问的链接 */
				color: red;
			}
			a:hover {
				/* 鼠标移动到链接上 */
				color: orange;
			}
			a:active {
				/* 选定的链接 */
				color: green;
			}			
			font:hover{
				color: green;
				font-size: 100px;
			}			
			button{
				background-color: orange;
			}			
			button:hover{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<a href="index.html">this is a super link</a><br />
		<font>this is a font element</font><br />
		<button>按钮</button><br />
	</body>
</html>

4.2 伪类案例

需求：除过表头之外,经过每一行背景颜色发生变化变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类练习</title>
		<!--除过表头之外,经过每一行背景颜色发生变化变化-->
		<style>
			tbody tr:hover{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<table border="1px" width="200px" height="200px" align="center">
			<thead>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>班级</th>
				<th>成绩</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>2000班</td>
				<td>80</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>2001班</td>
				<td>90</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>2002班</td>
				<td>75</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

5.CSS的属性

5.1 字体属性

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

font-family：默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；
font-size：字体大小（px）
font-style：字体风格
normal(默认)
italic(斜体)
oblique : 倾斜的字体

font-weight：设置字体粗细程度
不设置:默认normal
bolder:适当加粗

font字体的简写属性：将所有的样式属性声明在一个样式代码

font:楷体 50px oblique bolder ;

<html>
	<head>
		<meta charset="UTF-8">
		<title>字体属性</title>
		<style>
			
			span{
				font-family: "楷体";
				font-size: 50px;
				font-style: oblique;
				font-weight: bolder;
			}		
		</style>
	</head>
	<body>
		<span>这是一个span标签</span>
	</body>
</html>

在这里插入图片描述

5.2 文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

direction：设置文本方向
ltr: left to right
rtl: right to left

line-height:文本行高
color:颜色(red/#F00)
letter-spacing :字符间距
letter-spacing :单词间距(系统默认两个字组成一个单词)
text-align:文本的对齐方式(left,center,right)
text-decoration:文本的修饰
underline:下划线
line-through:中划线
overline:上划线
none:去掉修饰内容

text-indent:首行缩进以em为单位如：首行缩进2个字符2em
letter-spacing:字符间距,字符与字符之间的间距
word-spacing:单词间距,单词与单词之间的间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本属性</title>
		<style>
			div{
				font-size: 50px;
				color: gray;
				direction: ltr;
				text-align: left;
				text-decoration: none;
				text-indent: 2em;
			}
			a{
				font-size: 50px;
				text-decoration: underline;
			}
			#i1{
				font-size: 100px;
				letter-spacing: 20px;
			}
			#i2{
				font-size: 100px;
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个div
		</div>
		<a href="index.html">超链接</a>
		
		<div id="i1">
			this is a div1
		</div>
		<div id="i2">
			this is a div2
		</div>
	</body>
</html>

在这里插入图片描述

5.3 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

background-color:将颜色作为背景
background-image:将图片作为背景
background-repeat:设置背景是否重复以及如何重复
默认图片作为背景，如果这个图片没有将浏览占满，它会自动以左上角为（0，0)点，x轴和y轴在重复；
no-repeat:不重复 (推荐)
repeat-x:x轴重复
repeat-y:y轴重复
background-size: cover(全覆盖)
background-position:设置图片的起始位置
默认值:top left
top center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS背景属性</title>
		<style>
			body{
                background-image: urlurl(img/09.jpg); 
				background-repeat: no-repeat;
				background-position: top center;
				 background-color: greenyellow
			}
		</style>
	</head>
	<body>
		CSS背景属性
	</body>
</html>

在这里插入图片描述

5.4 字体、文本、背景案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>卡卡的Font属性</title>
		<style>
			body{
				background-image:url(img/图片文件.jpg);
				background-size: cover;
			}
			#title{
				font-size: 3em;
				color: black;
				text-align: center;
				font-family: "楷体";
			}
			.content{
				font-size: 1.2em;
				color: red;
				text-align: left;
				font-family: "宋体";
				text-indent: 2em;
				line-height: 2em;
				letter-spacing: 0.1em;
				font-weight: bolder;
			}
		</style>
	</head>
	<body>
		<p id="title">
			读心灵鸡汤小故事，品智慧人生
		</p>

		<p class="content">
			一位老和尚，他身边聚拢着一帮虔诚的弟子。这一天，他嘱咐弟子每人去南山打一担柴回来。弟
		</p>

		<p class="content">
			子们匆匆行至离山不远的河边，人人目瞪口呆。只见洪水从山上奔泻而下，无论如何也休想渡河打柴		</p>
		
		<p class="content">
			了。无功而返，弟子们都有些垂头丧气。唯独一个小和尚与师傅坦然相对。师傅问其故，小和尚从怀		</p>
	
		<p class="content">
			中掏出一个苹果，递给师傅说，过不了河，打不了柴,
		</p>
	
		<p class="content">
			见河边有棵苹果树，我就顺手把树上唯一的一个苹果摘来了。后来，这位小和尚成了师傅的衣钵传人。
		</p>
	
		<p class="content">
			世上有走不完的路，也有过不了的河。过不了的河掉头而回，也是一种智慧。
		</p>
	
		<p class="content">
			但真正的智慧还要在河边做一件事情：放飞思想的风筝，摘下一个“苹果”。历览古今，抱定这样一种生活信念的人，最终都实现了人生的突围和超越。				
		</p>
	
	</body>
</html>

在这里插入图片描述

5.5 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS尺寸属性</title>
		<style>
			#d1{
				min-width: 100px;
				max-width: 300px;
				
				min-height: 100px;
				max-height: 300px;
				
				width: 500px;
				height: 500px;
				background-color: green;
				
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<font id="d1">这是一个font</font>
		<!--图片属于特殊的行内元素-->
		<img src="img/图片文件.jpg" id="d1"/>
		<!--行内元素-->
		<span id="d1">这是一个span</span>
		<div id="d1">这是一个div</div>
	</body>
</html>

在这里插入图片描述

5.6 表格属性

通过CSS表格样式设置边框和单元格之间的空隙，CSS 中设置表格边框，使用 border 属性；

border-collapse：合并边框和单元之间空隙；
width 和 height 属性定义表格的宽度和高度；
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中；
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS表格</title>
		<style>
			table{
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table border="1"  align="center" width="400px" height="300px">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>班级</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>1001班</td>
				<td>80</td>
				
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>1002班</td>
				<td>90</td>
				
			</tr>
		</table>
	</body>
</html>

5.7 列表属性

CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；

list-style-image：将图象设置为列表项标志；
list-style-position：设置列表中列表项标志的位置；
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐；
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐；
inherit：规定应该从父元素继承 list-style-position 属性的值；

list-style-type：设置列表项标志的样式；
square：列表项标志为方片
disc：实心圆（默认）
circle：空心圆

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS列表属性</title>
		<style>
			ul{
				/*文本内容的对齐方式*/
				text-align: center;
				list-style-image: url(img/a.gif);
				/*list-style-type: circle;*/
				list-style-position: inside;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li>卡卡</li>
			<li>之家</li>
			<li>卡卡</li>
		</ul>
	</body>
</html>

在这里插入图片描述

5.8 边框属性

CSS边框属性允许规定元素边框的样式、宽度和颜色；

边框默认的方向(颜色/宽度/样式):上右下左(顺时针方向)；
边框所有的属性(颜色/宽度/样式):某一个边没有设置颜色/宽度/样式都会补齐对边的颜色/宽度/样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS边框属性</title>
		<style>
			body{
				text-align: center;
			}
			#d{
				width: 300px;
				height: 300px;
				/*样式都一样*/
				border: dotted greenyellow 10px;
				/*
				 * 左边框
				 * 样式：点状
				 * 颜色：淡绿
				 * 宽度：10px
				 */
				/*
					border-left-style: dotted;
					border-left-color: greenyellow;
					border-left-width: 10px;
				*/
				border-left: dotted greenyellow 10px;
				/*
				 * 上边框
				 * 样式：虚线
				 * 颜色：中绿
				 * 宽度：15px
				 */
				border-top: dashed mediumseagreen 15px;
				/*
				 * 右边框
				 * 样式：实线
				 * 颜色：绿
				 * 宽度：20px
				 */
				border-right:solid green 20px;
				
				/*
				 * 下边框
				 * 样式：双实线
				 * 颜色：绿
				 * 宽度：20px
				 */
				border-bottom: double darkgreen 25px;
			}
		</style>
	</head>
	<body>
		<img id="d" src="img/09.jpg" />
	</body>
</html>

在这里插入图片描述

5.9 圆角边框

边角是个弧形；

border-radius：创建圆角

box-shadow：向方框添加阴影

border-image：使用图片来创建边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS圆角边框</title>
	<style>
			img{
				width: 500px;
				height: 500px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img src="img/图片文件.jpg" />
	</body>
</html>

在这里插入图片描述

5.10 浮动属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；

float:right：进行右浮动
float:left：进行左浮动
clear：清除浮动
both：左右两边都不浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS浮动属性</title>
        <style>
        /*给第一个div显示边框*/
        #d1{
            width: 100px;
            height: 100px;
            /*显示边框*/
            border:1px solid #000;
            background-color: #F00;
            /*左浮动*/
            float:left;
        }
        /*第二个div*/
        #d2{
            width: 100px;
            height: 100px;
            /*显示边框*/
            border:1px solid #000;
            background-color: #0F0;
            float:left;
        }
        #d3{
            width: 100px;
            height: 100px;
            /*显示边框*/
            border:1px solid #000;
            background-color: #00F;
        }
        #clear{
            /*常用both 左右两边都不浮动 */
            clear:both ;
        }
    </style>
	</head>
    <body>
        <div id="d1">div1</div>
        <div id="d2">div2</div>
        <!--定义一个div元素-->
        <div id="clear"></div>
        <div id="d3">div3</div>
    </body>
</html>

在这里插入图片描述

6. 盒子模型

将HTML页面中的任意元素都可以看为是“盒子”（万物皆盒子）；CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式；

盒子的容量（element）：指定盒子的宽度和高度（DIV的宽度和高度）；
盒子的厚度（border）：就是指定DIV元素的边框大小；
盒子的内边距（padding）：内容和边框之间的距离；
盒子的外边距（margin）：盒子跟盒子之间的距离；

padding和margin都和CSS边框里的特点一致；

默认方向：上、右、下、左
某一个边没有设置外边距或内边距会自动补齐对边的外边距跟内边距；

在这里插入图片描述

element:元素内容

width:元素内容的宽度

height:元素内容的高度

border:元素的边框

padding:边框到内容的距离

margin:边框到其他元素的距离,同时设置左上右下外边距

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS盒子的基本使用</title>
	<style>
			body{
				float: right;
			}
			img{
				width: 200px;
				height: 100px;
				border: 5px solid red;
			}
			#img1{
				padding: 10px;
				margin: 50px;
			}
			#img2{
				padding: 15px;
				margin: 100px;
			}
			#img3{
				padding-top: 20px;
				margin-left: 150px;
				margin-right: 200px;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="img/123.png" />
		<img id="img2" src="img/psb.jpg" />
		<img id="img3" src="img/psb1.jpg" />
	</body>
</html>

在这里插入图片描述

注意：

内边距和外边距的值可以是负数；
在页面上，设置margin-right无效，因为元素默认是左对齐，不管怎么设置元素都是左对齐，所以将元素设置为右对齐就可以看到效果，float:right；
浏览器：元素进行渲染的时候，是从左往右进行渲染；

7. CSS定位

CSS 定位 (Positioning) 属性允许对元素进行定位；

position:
固定(fixed)
相对(relative)
绝对(absolute)
静态(static)

left：对元素进行左偏移；
top:对元素进行上偏移；
right:对元素进行右偏移；
bottom:对元素进行下偏移；

7.1 固定定位

只在一个位置进行显示；(类似小广告)

<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
	<style>
			img{
				position: fixed;
				width: 350px;
				height: 200px;
				right: 0px;
				bottom: 0px;
			}
			p{
				font-size: 20px;
			}
			
		</style>
	</head>
	<body>
		<a href="https://huoying.qq.com/"><img src="img/123.png" /></a>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
		<p>卡卡之家</p>
	</body>
</html>

在这里插入图片描述

7.2 相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动；

<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style>
			#s1{
				background-color: red;
			}
			#s2{
				background-color: orange;
				position: relative;
				top: 20px;
				left: 20px;
			}
			#s3{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<span id="s1">这是span1</span>
		<span id="s2">这是span2</span>	
		<span id="s3">这是span3</span>	
	</body>
</html>

在这里插入图片描述

原有元素占用的空间不会消失，偏移根据原有位置进行偏移；

7.3 绝对定位

设置绝对定位的元素框从文档流中删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭；

<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style>
			#s1{
				background-color: red;
			}
			#s2{
				background-color: orange;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			#s3{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<span id="s1">这是一个span1</span>
		<span id="s2">这是一个span2</span>
		<span id="s3">这是一个span3</span>
	</body>
</html>

在这里插入图片描述

绝对定位并不会在原有位置占用空间，元素的偏移是根据父容器进行偏移；

8. 块级元素和行内元素

display: inline(行内元素)、block(块级元素)、inline-block(行内块级元素)；

块级元素：

块级元素前后会带有换行符,占用一整行；

常见的块级元素:div；

行内元素：

行内元素前后没有换行符,只包裹内容；

常见的行内元素:span；

margin-top、margin-bottom、padding-top、padding-bottom设置无效；

<html>
	<head>
		<meta charset="UTF-8">
		<title>块级元素和行内元素</title>
		<style>
			div{
				background-color: blue;
				/*使得div仅包裹内容*/
				display: inline;
				padding-top: 10px;
				margin-top: 100px;
			}
			span{
				background-color: red;
				margin-top: 100px;
				/*是的span占满整一行*/
				display: block;
			}
		</style>
	</head>
	<body>
		<div>这是一个div</div>
		<span>这是一个span</span>
	</body>
</html>

在这里插入图片描述

9. CSS伸缩布局

伸缩布局flex：在响应式开发中可以发挥极大的作用；

如：内容根据浏览器的大小而进行改变；

flex-container:伸缩容器；

main-axis:主轴,元素的排列方向，默认是row(水平方向)；

cross-axis:侧轴，默认是column(垂直方向)；

flex-item:伸缩元素，会按照主轴的方向进行排列；

在这里插入图片描述

9.1 flex入门案例一

左边是菜单栏（40%），右边是内容栏（60%），高度填充整个屏幕；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伸缩布局入门案例一</title>
	    <style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
			}
			#container{
				display: flex;
				height: 100%;
			}
			#left{
				background-color:red;
				width: 40%;
				height: 100%;
				font-size: 50px;
			}
			#right{
				background-color:blue;
				width: 60%;
				height: 100%;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">left</div>
			<div id="right">right</div>
		</div>
	</body>
</html>

在这里插入图片描述

9.2 flex入门案例二

上边是菜单栏（40%），下边是内容栏（60%），宽度填充整个屏幕；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伸缩布局入门案例二</title>
		<style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
			}
			#container{
				display: flex;
				/*改变主轴方向*/
				flex-direction: column;
				height: 100%;
			}
			#top{
				background-color: orange;
				height: 40%;
				font-size: 50px;
			}
			#bottom{
				background-color: dodgerblue;
				height: 60%;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="top">top</div>
			<div id="bottom">bottom</div>
		</div>
	</body>
</html>

在这里插入图片描述

10. 综合案例之注册案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册案例</title>
	<style>		
		html{
			height: 100%;
		}	
			body{
				height: 100%;
				margin: 0px;
				background-image:url(img/123.png);
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#container{
				display: flex;
				background-color: #B6BBD0;
				width: 1000px;
				height: 500px;
			}
			#left{
				width: 20%;
				padding-top: 20px;
			}
			#left font{
				font-size: 30px;
				color: gray;
			}
			
			#left #f1{
				color: orange;
			}
			#center{
				width: 60%;
				padding-top: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			#right a{
				color: indianred;
				text-decoration: none;
			}
			
			#right a:hover{
				color: red;
			}
			#right{
				width: 20%;
				padding-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">
				<font id="f1">新用户注册</font><br />
				<font id="f2">USER REGISTER</font>
			</div>
			
			<div id="center">
				<form>
					<table>
						<tr>
							<td>账户</td>
							<td>
								<input type="text" name="username" placeholder="输入账户！！！" />
							</td>
						</tr>
						
						<tr>
							<td>密码</td>
							<td>
								<input type="text" name="password" placeholder="输入密码！！！" />
							</td>
						</tr>
						
						<tr>
							<td>邮箱</td>
							<td>
								<input type="text" name="email" placeholder="输入邮箱！！！" />
							</td>
						</tr>
						
						<tr>
							<td>姓名</td>
							<td>
								<input type="text" name="name" placeholder="输入姓名！！！" />
							</td>
						</tr>
						
						<tr>
							<td>电话</td>
							<td>
								<input type="text" name="phone" placeholder="输入电话！！！" />
							</td>
						</tr>
						
						<tr>
							<td>性别</td>
							<td>
								<input type="radio" name="sex" value="male" />男
								<input type="radio" name="sex" value="female" />女
							</td>
						</tr>
						
							<tr>
							<td>出生日期</td>
							<td>
								<input type="text" name="birth" placeholder="输入生日！！！" />
							</td>
						</tr>
						
							<tr>
							<td>验证码</td>
							<td>
								<input type="text" name="code" placeholder="输入验证码！！！" />
								<img src="img/捕dd获.PNG" />
							</td>
						</tr>
						
						<tr>
							<td colspan="2">
								<button type="submit">注册</button>
							</td>
						</tr>
					</table>
				</form>
			</div>
			
			<div id="right">
				<font>已有账户?</font>
				<a href="index.html">立即登录</a>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

Willing卡卡

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS标签属性及案例超详细笔记

本文主要分享了有关CSS的知识包括：CSS的书写规范、CSS与HTML结合的三种方式、CSS中常用的选择器（ID选择器、类选择器、标签选择器...）、伪类、CSS中的属性（字体、文本、背景、表格、边框...）、盒子模型、CSS的三种定位、CSS的伸缩布局（flex-container容器）以及利用CSS完成的注册界面；
复制链接

扫一扫