前端基础02 css总结

已于 2022-10-14 14:11:51 修改
阅读量313 收藏 3
点赞数
分类专栏： 前端基础篇 文章标签： css
于 2022-03-23 19:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xs943/article/details/123674446
版权

一、css是什么

在这里插入图片描述
A.css 是层叠样式表
B.主要用于来美化网站（化妆后的女朋友)
C.css 不仅可以修饰静态的网页 还可以配合脚本来动态修饰网页中的元素

二、css 能做什么

A.css 主要用于来美化网站
B.使用css样式的时候 html标签与css样式进行分离 有利于提高代码结构的清晰度

三、css基础语法

1.css的组成部分: A.选择器 B.样式的声明
A.选择器:就是需要修饰的标签的名称
B.样式的声明:就是编写css样式 可以编写多个样式 也可以只写一个样式
2.例子:
h1 { color:“red”；“font-size”:“18px”}
3.注意点:
A.在大括号中编写样式
B.多组样式需要以英文的分号（或逗号 一般用分号）进行分割
C.属性与属性值是不区别大小写 建议使用小写 选择器是区分大小写

四、css三种引入方式

4.1 行内引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3 style="font-size: 20px; color: #FF0000;">行内引用啊啊啊啊啊啊啊啊啊</h3>
	</body>
</html>

4.2 内部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		h1{
			color: greenyellow;
			font-size: 20px;
		}
	</style>
	<body>
		<h1>内部引入啊啊啊啊啊</h1>
	</body>
</html>

4.3 外部引入（常用）
step01 在css文件夹下新建一个样式文件
在这里插入图片描述
step02 下文件中编写样式

h2{
	/*给字体加上阴影*/
	text-shadow:5px 5px 5px #FF0000;
}

step03 创建html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--外部引入样式  边加载标签 边进行渲染 一般使用这种方式
		rel="stylesheet" 告诉游览器以css样式进行解释 必须写上
		href 引入外部样式的地址
	-->
	<link  rel="stylesheet" href="css/demo.css"/>
	<!--外部导入 不建议使用  低版本不兼容 先加载标签 在加载样式 加载慢
		<style>
			@import url("css/demo.css");
		</style>		
	-->
	<body>
		<h2>外部引入啊啊</h2>
	</body>
</html>

4.4 外部导入（不使用）
其他和外部引入一样

<!--外部导入 不建议使用  低版本不兼容 先加载标签 在加载样式 加载慢-->
		<style>
			@import url("css/demo.css");
		</style>

4.5 三种引入方式的优先级
行内样式>内部样式|外部样式 就近原则

五、css选择器

1. 三种选择器

1.1 标签选择器
1.概念:以标签来进行命名的选择器 就是标签选择器 例如 p{} div{} h3
2.语法：
标签的名称 {css样式}
1.2 类选择器
1.概念：以类进行命名的选择器 就是类选择器 类选择器是.开头 后面接着是选择器的名称
2.语法: .getByClass{样式} .getByDiv{样式}
3.注意点:类选择器必须在标签中进行引入才能生效
一个标签 多个类选择器 可以用空格来分割,多个css样式都能实现，但是不能冲突
例子

<style>
.tt{
		width: 200px;
		height: 200px;
}
.kk{
		border: solid 1px red;
}
</style>
<div class="tt kk"></div>

1.3 id选择器
1.概念：以id进行命名的选择器 就是id选择器 id选择器是#开头 后面接着是选择器的名称
2.语法: #getById{样式} #getByDiv{样式}
3.注意点:
A.类选择器必须在标签中进行引入才能生效
B.id选择器唯一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			width: 200px;
			height: 200px;
			border: solid 1px red;
			
		}
		.getByclass{
			width: 200px;
			height: 200px;
			background-image: url(img/icon2.bmp);
			
		}
		#getById{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
	<body>
		<div>我是标签选择器</div>
		<div class="getByclass">我是class选择器</div>
		<div id="getById">我是id选择器</div>
	</body>
</html>

1.4 三种选择器的优先级
id选择器 >类选择器 > 标签选择器

2.其他选择器

2.1 属性选择器
1.概念：以标签中的属性进行命名的选择器就是属性选择器
2.语法: 标签[属性名=‘属性值’]{} 标签[属性名]{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		input[type="text"]{
			color: red;
		}
		input[type="password"]{
			color: yellow;
		}
		a[href]{
			color: red;
			text-decoration: none; 
		}
	</style>
	<body>
		<form action="#" method="get">
			<font>用户名：</font>
			<!--只能读 不能修改readonly-->
			<input type="text" readonly value="唉唉唉" />
			<font>密码</font>
			<input type="password" value="哈哈" />
			<a href="#">点击我 !送</a>
			<a href="#">点击我 !送</a>
			<a >点击我 !送</a>
			
		</form>
	</body>
</html>

2.2 层级选择器
1.概念：层级选择器 有上下级关系的选择器 一般是根据父级来获取子级
2.语法:
#id(上) .class(下) .class #id 标签 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#tv_div .tv_class {
			color: red;
		}
		
		ul li {
			/*list-style-type: none;*/
			list-style-image:url(img/icon1.bmp);
		}
		
		.tv_class #tv_id {
			color: gold;
		}
	</style>
	<body>
		<div id="tv_div">
			<div class="tv_class">嗡嗡嗡</div>
			<div class="tv_class">帆帆发</div>
			<div class="tv_class01">灌灌灌灌</div>
		</div>
		
		<ul>
			<li>篮球</li>
			<li>足球</li>
			<li>羽毛球</li>
		</ul>
		
		<div class="tv_class">
			<div id="tv_id">
			<span><div id="tv_id">是打发打发</div></span>
			</div>
			<div id="tv_id01">酒神</div>
			<div id="tv_id01">睡神</div>
		</div>
	</body>
</html>

2.3 伪劣选择器 超链接的四种状态
1.a:link {} 未访问的链接状态(重点)
2.a:visited {} 已访问的链接状态
3.a:hover {} 鼠标悬停链接 状态(重点)
4.a:active{} 已选择的链接 状态

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*无下划线*/
			a {
				text-decoration: none;
			}
			/*未访问*/
			a:link {
				color: red;
			}
			/*已访问*/
			a:visited {
				color: yellow;
			}
			/*鼠标悬停*/
			a:hover {
				 color: blue;
			}
			/*已选择的链接*/
			a:active {
				color: green;
			}
		</style>
	</head>

	<body>
		<a href="#">今天晚上找酒神喝酒</a>
	</body>

</html>

六、css常用的样式

字体样式
在这里插入图片描述
color:white；字体颜色为白色
文本样式
在这里插入图片描述
line-height 行高 可以给行内元素设置高度
text-align ：center
text-decoration : none 去掉下划线
text-indent： 2px 首行缩进2字符
背景样式
在这里插入图片描述
background-repeat：no-repeat 不重复图片来填充容器
边框样式
在这里插入图片描述
border-style 有dotted solid double dashed;分别为点线 实线 双线 虚线
其中 soild 实线常用
border: soild 1px red ；
border-radius: 50%; 边框为圆形
border-radius: 5px; 边框角为半圆形
轮廓样式
在这里插入图片描述
outline-offset: 50px; 轮廓和内容的边距 相当于padding
outline-width: 50px; 轮廓的宽度相当于boder-width
列表的样式
在这里插入图片描述
list-style-type：none; 列表无样式

元素转换

1.在html中将元素分为三类:行元素 块元素 行块元素
2.块元素:(1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)自动换行，默认排列方式为从上至下 例如:div p
3.行元素:1)设置宽高无效(2)对margin padding仅设置左右方向有效，上下无效；(3)不能自动换行，默认排列方式为从左到右，行满了在向下另起一行 例如:< span> < font>
4.行块元素:同行内元素，只是多加了能够设置宽高，行高，边距的上下左右 例如;img
textarea
5.三种元素之间的相互转换

在这里插入图片描述

七、盒子模型

1.生活中的盒子:内容 content +内边距padding+边框 border+外边距+margin 网页中的盒子模型与
这是类似的
2.盒子模型
在这里插入图片描述

magrin:盒子与另一个盒子的距离
padding:盒子内容到盒子边框的距离
boder:盒子边框 设置有宽度等属性
且这三个属性都有单独的上下左右
margin:0px auto 上下外边距为0，左右边距平分即居中
margin: 5px 5px 5px 5px 分别对应上右下左，按顺时针顺序
一般都会使用通配符*来设置全局边距

*{
  list-style-type: none;
  margin: 0px auto;
  padding: 0px;
}

3.两个盒子纵向进行排列 同时设置margin值 margin的取值范围是两个盒子较大的margin值(重点)
两个盒子横向进行排列 同时设置margin值 margin值的范围是两个盒子margin值之和
div纵向排列是块级元素，不需要额外写什么
div横向排列，属性加上 display: inline-block;转为行块元素即可
4.嵌套的盒子:
盒子嵌套 小盒子默认在左上角
两个盒子进行嵌套的时候 给小盒子设置margin值
问题:大盒子会随着子盒子往下进行移动 父容器塌陷的问题
解决:在大盒子中设置 overflow: hidden 解决父容器塌陷的问题

八、浮动

1.在网页中 元素要么是从上到下进行排列 要么是从左到右进行排列 如果需要改变这种排列的规则 就需
要使用浮动
浮动就是让网页中的元素飘起来 浮动元素会脱离标准文档流 float:left| right
2.浮动的注意点:
A.浮动的元素遇到其它元素的边界的时候 就会停止浮动
B.浮动的元素会对不浮动的元素产生影响 清除浮动 clear left| right| both
代码

div{
float:left；
}

案例-导航栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* * 是通配符 表示所有的元素*/
			
			* {
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				width: 100%;
				height: 40px;
				background-color: #333333;
			}
			
			.left {
				float: left;
			}
			
			.left a:link {
				font-size: 12px;
				color: white;
				text-decoration: none;
				line-height: 40px;
				margin-left: 40px;
			}
			
			.left a:hover {
				color: orange;
			}
			
			.right {
				float: right;
			}
			
			.right li {
				float: left;
			}
			
			.right a:link {
				font-size: 12px;
				color: white;
				text-decoration: none;
				line-height: 40px;
				padding: 10px;
			}
			
			.right a:hover {
				color: orange;
			}
		</style>
	</head>

	<body>
		<!--大盒子-->
		<div class="box">
			<!--左边部分-->
			<div class="left">
				<a href="#">小米首页</a>
			</div>
			<!--右边部分-->
			<div class="right">
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">消息通知</a>
					</li>
					<li>
						<a href="#">购物车(0)</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>

九、定位

在这里插入图片描述
都以左上角为原点，只是不同定位左上角位置不同
fixed 相对于游览器左上角固定定位 top 离顶部距离 left离左边距离
relative 相对定位(相对于自身左上角进行定位)即以top和left=0时为原点进行偏离
absolute 绝对定位(相对于父容器左上角来进行定位) 无嵌套时，父容器为游览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#tv_div01{ 
			width: 200px; 
			height: 200px;
			background-color: red;
			float: left; 
		}
		#tv_div02{ 
			width: 200px; 
			height: 200px; 
			background-color: blue; 
			float: left; 
			/*position: relative; 
			top: 10px; 
			left: 10px; */
			/* position: fixed; 
			 top: 200px; 
			 left: 50px; */
			position: absolute; 
			top: 200px; 
			left: 50px; 
		}
		#tv_div04{
			width: 100px; 
			height: 100px; 
			background-color: green;
			 /*position: fixed; 
			 top: 20px; 
			 left: 50px;*/ 
			position: absolute; 
			top: 20px; 
			left: 50px;
		}
		
		#tv_div03{ 
			width: 200px; 
			height: 200px; 
			background-color: pink; 
			float: left; 
		}
	</style>
	<body>
		<div id="tv_div01"></div>
		<div id="tv_div02">
			<div id="tv_div04"></div>
		</div>
		<div id="tv_div03"></div>
	</body>
</html>
长河落日猿
关注
专栏目录
css知识点总结
guchiccc的博客
12-28 1097
一．什么是css？ CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。 二．CSS引入方式 1.行内样式 在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性 内嵌式 把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内 外链式 把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在h
css知识总结
Yoryky的专栏
12-17 489
我们知道网页开发，无非就是h5页面+css+js，前面写了一篇文章总结了js，这里再来总结下css，算是为自己目前的网页开发知识做一个系统性的总结。我们知道h5标签是一些可显示的控件，这些控件显示在什么位置，怎么显示则是通过css来进行控制，至于页面布局首先是放在什么位置的问题，这里就先来看看页面布局的问题。 1、页面布局页面布局涉及到的知识点比较多，比如盒子模型、position、displa
css总结
z1580925的博客
06-21 1049
什么是CSS？1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。3. CSS 是用来表现HTML或XML的标记语言。4. CSS 是由W3C的CSS工作组发布推荐和维护的.5. CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。6. CSS语法由三部分构成：...
CSS总结
m0_51528800的博客
05-04 616
CSS知识点总结 什么是CSSCSS语法归纳1、语法规范2、选择器元素选择器（标签选择器）id选择器class选择器3、如何生效外部样式表内部样式表内联样式优先级4、居中一、水平居中一、垂直居中5、盒子模型 什么是CSS CSS能对html构建的网页进行美化，HTML主要做结构，显示元素内容，CSS来布局网页，它最大的价值是：负责样式，即HTML的结构与CSS的样式相分离。 CSS语法归纳 1、语法规范 2、选择器 选择器（选择符）就是根据不同需求把不同标签选出来，这就是选择器的作用。 以上CSS做了两
前端-css总结
qq_39009130的博客
06-15 369
二.CSS 1.概述 1.样式包含 选择器 声明：（属性名：属性值;） 2.CSS基本格式 选择器{属性名：属性值;} 2.CSS样式的三种格式 优先级：内嵌式>内部式>外部式 内嵌式：在html标签的style中编写样式 <div style="color: red;"></div> 内部式：在该html页面的style编写样式 <style type="text/css"> .myclass{ color: red;
前端面试之CSS总结
01-29
由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述了CSS中的基础部分...
免费下载前端HTML，CSS总结(b站黑马程序员540集)
06-19
【HTML与CSS基础】 HTML（HyperText Markup Language）是...通过这样的综合学习，你可以快速掌握前端开发的基础，并逐渐进阶到更高级的主题，如JavaScript交互、框架应用（如React、Vue、Angular）以及性能优化等。
基于HTML/CSS/JavaScript的JavaScript前端基础知识练习与总结源码
最新发布
10-05
该项目集成了HTML、CSS、JavaScript等多种前端技术，旨在通过131个文件构建一套全面的前端基础知识练习与总结源码。其中包括25个HTML文件、20个JPG图片、17个Java文件、17个CSS文件、16个PPTX文件、10个PNG图片、6个...
Web前端HTML+CSS+JavaScript基础知识总结.xmind
07-27
本思维导图涵盖HTML、CSS所需掌握的主要应用知识，及JavaScript基础语法，是本人2020年暑假学习笔记，总计35618字。体系清晰，逻辑分明，适合已学习人群对基础知识的复习，初学者也可以以此为基础进行自己的知识体系...
css工作总结
_心动的博客
10-03 1035
1、width||height: 100% &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; auto 区别 auto 子元素（包括content+padding+border+margin）撑满整个父元素的content区域。 子元素有margin、border、padding时，会减去子元素content区域相对应的width值 父元素的content = 子元素（content + padding + border ...
104道 CSS 面试题，助你查漏补缺(一)
qq_36291960的博客
10-16 392
CSS 面试知识点总结 最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/
CSS学习总结
竹叶戏雨的博客
01-21 1294
总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。 一.CSS概述 1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术 。 使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力 2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:    ...
Div+CSS总结
weixin_30773135的博客
11-29 142
之前最早接触是在牛腩新闻发布系统中，当时看到这些自己是一头雾水，不过好在我们已经形成了这样的学习习惯，先实践在接触理论，这样再学习理论的时候就会想到当初我是怎样的迷茫，这样自己印象更深刻。 DIV+CSS，用来进行网页设计和布局的，我们看到百度界面如此简洁，看到很漂亮的空间，这些不得不说是我们CSS的功劳。 1）Div的功能：对整个网页进行模块划...
css学习总结
XiaoduDadu的博客
07-08 580
css学习总结
CSS效果小结
姜皓的博客
05-21 384
效果属性1.box-shadow（盒子阴影）示例加上 box-shadow内阴影复杂例子阴影的形状跟原来的形状是一样的 结果：box-shadow 作用：1.营造层次感（立体感）2.充当没有宽度的边框（没有大小，不会占据位置）3.特殊效果 2.text-shadow（文本阴影）作用：1.立体感  2.印刷品质感（边缘有模糊效果）比较：3.border-radius圆角矩形圆形半圆/扇形只有左上角，...
HTML前端与CSS基础总结
"这篇资料是关于在校学习HTML前端知识的总结，涵盖了HTML基本标签、CSS样式设置、JavaScript和jQuery的基础内容，以及相关的案例笔记。" HTML是超文本标记语言，用于构建网页结构，其常用标签包括： 1. `a`标签用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值