Web前端-CSS基础与应用

再来半包

已于 2022-11-23 12:39:57 修改

阅读量4.7k

点赞数 7

文章标签： html css web html5

于 2021-06-06 10:27:57 首次发布

本文链接：https://blog.csdn.net/qq_52761400/article/details/117620459

版权

启嘉班第二阶段第二周笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web前端-CSS

CSS历史

1.1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

2.1994年哈坤·利提出了CSS的最初建议

3.1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题

4.1998年5月：CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观

5.2012年：CSS3.0增加了更多的CSS选择器，可以实现更简单但是更强大的功能

CSS特点简介

丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的heade部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理

多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

CSS工作原理

工作原理：CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言简而言之：css就是一种先选择html元素，然后设定选中元素css属性的机制实质：包含css的网页—>浏览器解析执行（Webkit CSS parser CSS解析器）---->解析后的效果呈现在页面上

CSS版本区别

1.区别：在CSS2基础上新增属性，比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等以前CSS2也有的样式，因为浏览器版本不支持原因，现在CSS3中重新提出并使用，因为现在浏览器越来越高级智能，当然也就兼容HTML5 CSS3了

2.相同点：语法相同，目的相同

3.如何选择css2和css3：普通布局CSS2足够了，需要圆角、阴影、伪类等再使用CSS3，其实CSS3中90%以上css样式是css2的，只是在css2上新增和重用小部分CSS2的样式。

友情提示：要学习CSS3必须的掌握CSS2常用样式和语法、灵活应用

布局技巧，才能灵活使用CSS3样式

CSS的基本语法

<style type="text/css">
    选择器(即修饰对象){
        对象的属性1：属性值
        对象的属性2：属性值
    }
</style>

例如：

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>我是一个段落</p>
		</div>
	</body>
</html>
<!--以上代码将网页中的p段落颜色设为红色-->

CSS为HTML网页添加样式的三种方法

1.行内样式，直接写在特定标签的style属性中；

2.嵌入样式，在head元素中嵌入 <style type="text/css"></style> ，将css规则放入<style>和</style>中；

3.链接样式，在<head>元素中使用外部的样式表，如：

<link href="1.css" rel="stylesheet" type="text/css" />

友情提示：3种css样式的优先级：行内样式 > 嵌入样式 > 链接样式

CSS选择器

元素/标签选择器

通过元素进行选择，进行添加样式

例如：

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			h1{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div>
			<h1>我是一级标题</h1>
		</div>
	</body>
</html>

以上代码将h1的文本样式进行改变，CSS中的选择器则是标签名

id选择器

通过元素的id进行选择，添加样式

例如：

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			#abc{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div id="abc">
			<h1>我是一级标题</h1>
		</div>
	</body>
</html>

以上代码是将id为abc的所有的元素进行一个样式的改变

class选择器

通过定义元素的class选择，添加样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			.box{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div >
			<h1 class="box">我是一级标题</h1>
		</div>
	</body>
</html>

以上代码是将class为box中的所有的元素进行一个样式的改变

群组选择器

备注：群组选择器，其目的是为了能实现统一设定一些相同的属性，但是每一个之间必须以英文的逗号隔开

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			h1,h3,p{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
            <h2>我是二级标题</h2>
			<h3>我是三级标题</h3>
			<p>我是一个段落</p>
		</div>
	</body>
</html>

以上代码只会将h1、h3、p元素中的样式进行改变，而h2中的样式则不会改变

包含选择器

提示：前一个标签与被包含标签之间是有空格间隔的称为（父子选择器）

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			div h1{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
			<h3>我是三级标题</h3>
			
		</div>
		<p>我是一个段落</p>
	</body>
</html>

以上代码只有div下的h1样式发生了改变，别的元素则不会发生改变

通配选择器

提示：以*开始起意思代表为所有，但是在开发过程中基本上不使用

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			*{
				color: red;
			}
			div h1{
				color: blue;
				font-family: "楷体";
		}
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
			<h3>我是三级标题</h3>
			
		</div>
		<p>我是一个段落</p>
	</body>
</html>

以上的代码div中的h3和p标签都会受到*选择的影响，但是因为h1属性包含选择器，权重大于通配选择器，所以h1的样式还由包含选择器掌握

伪类选择器

CSS的伪类选择器：用于向某些选择器添加特殊的效果

<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style type="text/css">
			a:link{
				color: red;
			}
			a:visited{
				color: blue;
			}
			a:hover{
				color: yellow;
			}
			a:active{
				color: black;
			}
		</style>
	</head>
	<body>
		<a href="testcss001.html">伪类选择器</a>
	</body>
</html>

提示：1）4种状态的意思

未访问状态（a:link ）

已访问状态（a:visited ）

鼠标移上状态（a:hover ）

激活选定状态（a:active ）

2）且一般是应用在a标签上的，别的标签也可以，但是最多的还是a标签上的使用

伪对象选择器

CSS伪对象选择器：用于向被选中元素的内容前面或者后面插入内容

:before 选择器在被选元素的内容前面插入内容。

:after 选择器在被选元素的内容后面插入内容。

注意：before 和after必须和content结合使用，即使没有内容插入也要写content=’ ’

<html>
	<head>
		<meta charset="UTF-8">
		<title>伪对象选择器</title>
		<style type="text/css">
			.box{
				color: red;
				border: 1px solid #FF00FF;
			}
			.box:after{
				content: "然后去吃饭";
			}
			.box:before{
				content: "先穿好衣服、叠好被子再";
			}
		</style>
	</head>
	<body>
		<div class="box">去洗漱</div>
	</body>
</html>

单纯一个div里面的文本则是：去洗漱，但是用了伪对象选择器，对前面和后面进行了文本的追加，在网页上显示的为：先穿好衣服、叠好被子再去洗漱然后去吃饭，但是真是的文本则只有：去洗漱

选择器的权重

权重：权重是指某一因素或指标相对于某一事物的重要程度，其不同于一般的比重，体现的不仅仅是某一因素或指标所占的百分比，强调的是因素或指标的相对重要程度，倾向于贡献度或重要性。通常，权重可通过划分多个层次指标进行判断和计算，常用的方法包括层次分析法、模糊法、模糊层次分析法和专家评价法等

简而言之：可以理解为是份量（就是所占的比重）

权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

例如：body #content .data img :hover

最终的权重值是：122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素选择器所以加了1

CSS属性

文本属性

文字大小：font-size 单位：px em：1em=16px

文字颜色：color

文字字体：font-family

文本样式（粗细）：font-weight

文本倾斜：font-style

文本修饰：text-decoration

文本转换：text-transform

字间距：letter-spacing

单词间距：word-spacing

文字对齐：text-align

<html>
	<head>
		<meta charset="UTF-8">
		<title>文字</title>
		<style type="text/css">
			p{
				font-size: 64px;/*定义字体大小为64像素*/
				color: blue;  /*设置字体颜色为蓝色*/
				font-family: "隶书";  /*设置文字字体为隶书*/
				font-weight: 300;   /*设置文字粗细为300*/
				font-style: oblique; /*设置文字倾斜*/
				text-decoration: underline;/*定义文本下一条线*/
				/*text-decoration: line-through;定义穿过文本的一条线*/
				text-align: center; /*设置文字居中*/
				letter-spacing: 10px;  /*设置字间距为10像素*/
			}
		</style>
	</head>
	<body>
		<p>我是一个段落blue</p>
	</body>
</html>

扩展

文字对齐：text-align 参数可以是

left（默认）：文本排列到左边

right：文本排到右边

center：文字排列到中间

justify：实现两端对齐文本效果

文字转换：text-transform 参数可以为

none：默认。定义带有小写字母和大写字母的标准的文本

capitalize：文本中的每个单词以大写字母开头

uppercase：定义仅有大写字母

lowercase：定义无大写字母，仅有小写字母

列表属性

list-style-type:列表的样式

list-style-image:列表导航点图片

list-style-postion:导航点的位置

<html>
	<head>
		<meta charset="UTF-8">
		<title>列表样式</title>
		<style type="text/css">
			li{
				width: 250px;   
				color: blue;
				font-size: 30px;
				font-family: "隶书";
				list-style-type: square; /*将列表前面的变成方框*/
				float: left;
			}
		</style>
	</head>
	<body>
		<div >
			<ul>
				<li>首页</li>
				<li>我的</li>
				<li>登录</li>
				<li>注册</li>
				<li>加入收藏</li>
				<li>设为主页</li>
			</ul>
		</div> 
	</body>
</html>

CSS边框

设定div的边框样式

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				border-width: 2px 10px 5px 100px;  /*钟表原则 设置边框的线宽*/ 
				border-color: black blue red pink; /*设置边框的线的颜色*/
				border-style: solid;/*设置边框的线的样式*/
			}
			.box1{
				width: 300px;
				height: 300px;
				border-right-width: 2px;/*设置右边线宽2px*/
				border-right-color: darkred;/*设置右边线颜色*/
				border-right-style: dotted;/*设置右边线样式*/
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<br />
		<br />
		<div class="box1"></div>
	</body>
</html>

CSS背景

background-color：设置背景颜色

background-image：设置背景图片

background-repeat：设置背景平铺方式

background-position：设置背景对齐方式

CSS浮动

1.默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示

2.浮动会脱离文档流，脱离常规文档流而表现为向右或向左浮动，浮动脱离文档流的时候是按照上一个非浮动元素去作为参考的，如果你的上一个元素是浮动的，那么你的参考线会继续向上查找，直到查找到非浮动元素为止

3.当指定了元素浮动之后，元素脱离文档流，会按照浮动方向进行排列

<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
		#one{
			width: 200px;
			height: 200px;
			background-color: red;
			float: right;
		}	
		#two{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
		#three{
			width: 200px;
			height: 200px;
			background-color: green;
			float: right;
		}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<br />
		<div id="two"></div>
		<br />
		<div id="three"></div>
	</body>
</html>

1.浮动元素位置：

1）当元素都是浮动元素的时候，会按照浮动规则进行排序

2）当屏幕宽度小于浮动元素的总宽度的时候，浮动的元素会进行重新排版

2.排版规则

还是按照浮动顺序进行排序，当宽度不能满足某一元素的时候，元素会进行换行

换行的会按照宽度和高度进行择位排列（先去查找高度，找高度最低的那一个，会继续计算宽度

是否能够容下）

美中不足:

会受上一个元素所影响，上一个元素的高度直接影响我们元素的y轴位置

清除浮动

1、没有清除浮动

<html>
	<head>
		<meta charset="UTF-8">
		<title>未清除</title>
		<style type="text/css">
			div {
				color: #fff;
				font: bold 22px 黑体;
			}
			#div1 {
				width: 150px;
				height: 100px;
				background: #ccc;
				float: right;
			}
			#div2 {
				width: 150px;
				height: 150px;
				background: #33FF33;
				float: right;
			}
			#div3 {
				width: 400px;
				height: 200px;
				background: #3cc;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="div1">第1块</div>
		<div id="div2">第2块</div>
		<div id="div3">第3块</div>
	</body>

</html>

在这里插入图片描述

2、清除浮动

<html>
	<head>
		<meta charset="UTF-8">
		<title>未清除</title>
		<style type="text/css">
			div {
				color: #fff;
				font: bold 22px 黑体;
			}			
			#div1 {
				width: 150px;
				height: 100px;
				background: #ccc;
				float: right;
			}			
			#div2 {
				width: 150px;
				height: 150px;
				background: #33FF33;
				float: right;
			}
			#div3 {
				width: 400px;
				height: 200px;
				background: #3cc;
				clear: right;
			}
		</style>
	</head>
	<body>
		<div id="div1">第1块</div>
		<div id="div2">第2块</div>
		<div id="div3">第3块</div>
	</body>

</html>

在这里插入图片描述

清除浮动后，div不会在浮动，下面再定义div浮动的时候，他会重新在下一个区域重新浮动

浮动高度塌陷修复

1.高度塌陷:当一个容器内所有元素都浮动的时候，容器元素的高度计算会出现异常，高度不能正确计算会出现高度为0的情况

<html>
	<head>
		<meta charset="UTF-8">
		<title>高度塌陷</title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 150px;
				background: gold;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 300px;
				background: deeppink;
				float: left;
			}
			
			.three {
				width: 400px;
				height: 250px;
				background: deepskyblue;
				float: left;
			}
			
			#container {
				border: 2px solid red;
			}
			
		</style>
	</head>

	<body>
		<div id="container">

			<div class="one"></div>

			<div class="two"></div>

			<div class="three"></div>
		</div>
</html>

2.修复高度塌陷

① 在父级元素中使用 overflow属性，指定越界内容隐藏

<html>
	<head>
		<meta charset="UTF-8">
		<title>高度塌陷</title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 150px;
				background: gold;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 300px;
				background: deeppink;
				float: left;
			}
			
			.three {
				width: 400px;
				height: 250px;
				background: deepskyblue;
				float: left;
			}
			
			#container {
				border: 2px solid red;
				overflow: hidden;/* 父级中添加overflow将越界内容隐藏*/
			}
			
		</style>
	</head>

	<body>
		<div id="container">

			<div class="one"></div>

			<div class="two"></div>

			<div class="three"></div>
			
		</div>
</html>

② 在父级元素内部最后面，添加一个清除浮动的元素，它的高度是0

<html>
	<head>
		<meta charset="UTF-8">
		<title>高度塌陷</title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 150px;
				background: gold;
				float: left;
			}
			
			.two {
				width: 300px;
				height: 300px;
				background: deeppink;
				float: left;
			}
			
			.three {
				width: 400px;
				height: 250px;
				background: deepskyblue;
				float: left;
			}
			
			#container {
				border: 2px solid red;
			}
			
			.four {
				width: 100px;
				height: 0px;
				background: black;
				clear: left;
			}
		</style>
	</head>

	<body>
		<div id="container">

			<div class="one"></div>

			<div class="two"></div>

			<div class="three"></div>
			<div class="four"></div>
		</div>
</html>

CSS盒子模型

1.CSS盒子模型：网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

可以简单的理解为：CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型

2.为什么需要盒子属性

1）盒子模型是网页布局的基础

2）盒子属性是盒子模型的关键属性

3.盒子模型的属性：

外边距（margin）、边框（border）、内边距/填充（padding）、内容（content）

4.各属性又分为四个方向

margin属性的四个方向

margin-top、 margin-right、 margin-bottom、 margin-left

例如：

margin：100px 200px 300px 400px; //将每个外边距都定义像素

margin：1px 2px; //定义上右两个方向的像素长度，下则会跟上像素保持一致，左跟右会保持一致

margin：0px auto ;

margin-left:1px; //指定方向的外边距像素长度

4.元素的宽高及实际占位

盒子高度 = height属性 + 上下填充高度 + 上下边框高度

盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度

5.使用盒子属性实现页面布局

例如：实现贵美logo图片的布局：

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background: #ccc;
			}
			
			#logo {
				width: 380px;
				border: 5px solid black;
				padding: 10px 20px 40px 50px;
				background: #ff7300;
				margin: 30px auto;
			}
		</style>
	</head>

	<body>
		<div id="logo"><img src="../img/1.png" alt="logo" />
		</div>
	</body>

</html>

在这里插入图片描述

6.使用盒子属性实现DIV+CSS布局

未完待续。。。。。

再来半包

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
7
评论
Web前端-CSS基础与应用

Web前端-CSS基础Web前端-CSSCSS历史CSS特点简介丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS工作原理CSS版本区别CSS的基本语法CSS为HTML网页添加样式的三种方法CSS选择器元素/标签选择器id选择器class选择器群组选择器包含选择器通配选择器伪类选择器伪对象选择器选择器的权重CSS属性文本属性扩展列表属性CSS边框CSS背景CSS浮动清除浮动浮动高度塌陷修复CSS盒子模型Web前端-CSSCSS历史1.1990年，Tim Berners-Lee和Robert Ca
复制链接

扫一扫