css快速入门教程

最新推荐文章于 2024-03-17 21:40:56 发布

碧落云

最新推荐文章于 2024-03-17 21:40:56 发布

阅读量1.5k

点赞数 3

分类专栏：前端初学者文章标签： css html 前端

本文链接：https://blog.csdn.net/sc909090/article/details/121134987

版权

前端同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

初学者

3 篇文章 1 订阅

订阅专栏

前言

在开始之前，先做说明：本文只涉及到基本css知识，如果有做前端开发的同学跳过即可，本文针对刚刚入门以及从其他方向转向前端开发的同学。众所周知，CSS并不是一门编程语言，它的学习在前期主要来源于对属性的积累和各种属性的联合搭配，所以并不存在学通一门编程语言再学css就进度飞快的情况.

本文总结了作者所认为的，css入门必学的知识点，其他的可以在开发中，通过百度练习逐渐掌握，以下是本文所涉及的内容。

css基本使用方式和常用选择器
css层叠性和权重
css常用属性
css盒子模型
浮动
position定位
flex弹性盒子

css十分困难，以至于几乎没有人敢说自己是css大神，但是入门却十分简单，接下来让我们开始css的学习过程。

注意：本文默认读者拥有一定的html知识，对html部分不做说明。

css基本使用方式和常用选择器

在开始学习之前，选择一个喜欢的开发环境。因为只是学习的原因，这里就推荐两个比较轻量的编辑器。Hubuilderx 和 VsCode.VsCode比较好用，但是需要自己安插件，如果懒的话，就用Hubuilderx吧，不过Hubuilderx是国产的，体验上有点问题。（亲身体会，并非看不起国产）。

HBuilderX-高效极客技巧 (dcloud.io)

Download Visual Studio Code - Mac, Linux, Windows

现在我们开始学习，在编辑器上新建文件，并且编辑基本html代码。

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
</head>

<body>
	<h1>开始css学习</h1>
	<ul>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
	</ul>
	<ol>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
	</ol>
	<p>这是一行段落</p>
	<div>一个平平无奇的div元素路过。。。。</div>
</body>

</html>

按下电脑F12或者右键浏览器选择检查元素，可以打开控制台。这里就是浏览器调试代码的地方。可以看到我们现在页面的样子已经出现，只是只有html光秃秃的。

css基本使用方式

css的引入有三种方式，内链式，外链式，和行内式。其实就是css写在不同的三个地方。这个可以自己去百度一下，很简单，这里就带过，我们直接使用外链式，给我们的h1标签写上样式。在body里面加上style标签，表示我们在这里面写css样式。

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		h1 {
			color: red;
		}
	</style>
</head>

可以看到，h1标签已经有了样式。

通过这里我们可以发现css的工作模式。通过选择器，选中我们想要赋予样式的属性，在通过大括号里面的属性集合为选中的元素添加样式。其中这里的h1就是选择器，对应h1元素，color就是属性，代表改变字体颜色，red就是属性值，表示颜色变为红色。颜色属性在css中可以使用对应的单词，也可以使用rgb,十六进制。这里给大家分享一个实用小工具，在电脑QQ开启的情况下，可以按住电脑Ctrl+Alt+a，调出qq截图工具，鼠标滑上自己想要吸取的屏幕颜色，按Ctrl+C就可以复制该颜色的十六进制数，可以直接粘贴进我们的css里面使用。

接下来我们介绍最常用的四种css选择器，标签选择器，class选择器，id选择和后代选择器，足以完成基本的选择需求，更多的就靠大家自己百度学习了，这里只做一个入门学习。

标签选择器

顾名思义，标签选择器就是以标签名字作为选择器名称的选择器，选择所有该名字的标签，比如上面的试例，就是一个选择h1标签的标签选择器，这个非常简单，选择器名称就等于html标签。比如在这里我们写上两个h1标签，可以发现，两个h1文字都变红了，都被选择到了。

class选择器

在使用标签选择器的时候，会出现一个问题，那就是html的标签就那么几个，如果我们要给同一种标签给上不同的样式该怎么办呢，这里就引出了最常用的class选择器，class选择器的用法是在需要的元素上写上class命名，然后使用.+名字的方式选择该元素，请注意：这里的class和面向对象的class类没有任何关系，可以理解为标记方式。名字随便命名即可，一般用能表现出功能的英文单词做好语义化。代码如下：

	<style>
		h1 {
			color: red;
		}
		.h1_two {
			color: blue;
		}
	</style>
        <h1>开始css学习</h1>
	<h1 class="h1_two">测试h1标签选择器</h1>

我们给第二个h1标签写上class，然后通过.+class名字的方式写上样式。效果如下：

可以发现已经成功选择，值得一提的是，class可以重复使用，和标签选择器一样，同名的class会一同被选中，各位可以自行尝试。

id选择器

和class一样，给元素写上id属性，名字随意选择，尽量语义化。使用方式为#+id名字，请注意，id选择器唯一。请不要多次使用。

	<style>
		h1 {
			color: red;
		}
		.h1_two {
			color: blue;
		}
		#h1_one {
			color: green;
		}
	</style>
<h1 id="h1_one">开始css学习</h1>

后代选择器

当出现多个同类元素需要被选择时，我们可以使用后代选择器，选择器是可以叠加的。使用方式为选择器+空格+选择器。比如这里的有序列表和无序列表，他们的子元素都是li标签，我们想要给不同的li标签不同的效果，该如何操作呢。答案就是使用后代选择器

	<style>
		h1 {
			color: red;
		}
		.h1_two {
			color: blue;
		}
		#h1_one {
			color: green;
		}
		ul li {
			color: yellow;
		}
		ol li {
			color: blueviolet;
		}
	</style>
        <ul>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
	</ul>
	<ol>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
	</ol>

可以看到，我们分别给ul和ol下面的li标签设置了不同的字体颜色。这里使用的是标签选择器的后代选择，clas和id也是可以这样结合或者互相混合使用的，各位可以自行研究。

css层叠性和权重

相信比较细心的同学已经发现了，在前面，我们使用class选择器的时候，原本两个h1标签都是红色，但是给第二个标签加了蓝色的属性后，原本的红色就被覆盖了。选择该元素，在控制台查看，发现原本标签选择器所设置的红色字体打上了一个删除线。

这里就引出了css两个很重要的特性，层叠属性和权重值。

层叠属性

这个比较好理解，多个选择器作用在同一个标签上面，相同的属性会互相覆盖，规则是写在后面的覆盖写在前面的属性。这里拿两个h1标签来举例。

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		h1 {
			color: red;
		}
		h1 {
			color: blue;
		}
	</style>
</head>

<body>
	<h1 id="h1_one">开始css学习</h1>
	<h1 class="h1_two">测试h1标签选择器</h1>
	<ul>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
		<li>一个无序列表</li>
	</ul>
	<ol>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
		<li>一个有序列表</li>
	</ol>
	<p>这是一行段落</p>
	<div>一个平平无奇的div元素路过。。。。</div>
</body>

</html>

效果就是后面的选择器把前面的效果覆盖，h1标签字体为蓝色。

权重值

换成这样，效果会怎么样呢。

	<style>
		.h1_two {
			color: blue;
		}
		h1 {
			color: red;
		}
	</style>
        <h1 id="h1_one">开始css学习</h1>
	<h1 class="h1_two">测试h1标签选择器</h1>

按我们前面的讲解，这里class选择器选中了第二个h1标签，但是他后面又设置了标签选择器，把所有h1标签变为红色，所以两个h1标签应该都是红色对吧，但实际并不是如此。

实际上的效果是class选择器的效果把标签选择器覆盖了，第二个是蓝色，*这里的原因就是不同的选择器之间存在权重值，我们判断选择的覆盖效果，是先看权重，权重高的就覆盖权重低的，如果权重相同，那么后写的覆盖先写的。*不同选择器之间的权重为：

<h1 style="color: aqua;">开始css学习</h1> 这样的行内样式最高：1000
id选择器：100
class选择器：10
标签选择器：1
如果是存在后代选择器这样多个选择器叠加的情况，就按这里的值相加比较即可，大家可以自行尝试。最后还有一个小窍门，手动提高权重只需要在写的属性下面加上!important 比如 color: red !important;那么这个属性的权重就会无限大，覆盖一切，但是不建议多用。

继承性

部分css属性在部分标签上面会有继承性，比如写在ul上面的字体样式，会被li标签继承，但是继承得到的属性权重特别低，可以理解为权重0.1，有点多，这里就不展开讲了，知道有就行了。

css常用属性

不用主动去记css属性，更不要像背英语单词一样去背，网页的样式主要来源于css，而样式是比较好用语言表达的，这样就很方便百度搜索，比如搜一下，怎么给元素增加边框，怎么给元素设置背景，改变字体，字形。只要是你能在网页上看到的效果，基本上css都可以实现，只是难易程度不同罢了。这里放一个css的文章，有空可以看看。CSS 教程 (w3school.com.cn)
但是我建议，看完本文之后，对css的基本使用应该就有个大概的了解了，可以直接去找一些简单的练习页面，直接开抄就可以，遇到没见过不理解的属性再百度学一学，这样很快就能掌握css了。

css盒子模型

盒子模型是大家学习css比较重要的一个东西。这里不细说，知道两个重要的点就可以了。

块元素和行内元素

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		div {
			height: 300px;
		}
		.one {
			background-color: red;
		}
		.two {
			background-color: blue;
		}
	</style>
</head>

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

</html>

在这里可以看到，我们给两个div设置了高度，和不同的背景。它的效果是这样的,没有设置宽度，但是它却撑满了整个浏览器，而且两个div不会再同一行，即使我们减小它的宽度。

这样的元素称为块级元素，特点就是宽度自动撑满父元素和无法在同一行。控制元素类型的属性是display，其中块元素的属性值为block.默认为块元素的元素有，div,p,h系列等等。

另一种就是行内元素，它的特点是，可以并行排列，内容由子元素撑开，无法给自身设置宽高。
比如我给这个span元素设置了宽高都是500px，但是它没有任何的宽高变化，依旧只有文字大小。它的属性值为display: inline

还有一种类型叫行内块，顾名思义，它兼具块元素和行内元素两种特点，可以并行排列，也可以设置宽高，其中img标签就是一种行内块元素。它的属性值为display: inline-block.这里做一个大概的了解即可，更多的可以参考CSS 属性篇(七)：Display属性 - 掘金 (juejin.cn)

盒模型内外边距

盒模型顾名思义就是网页上所有的元素都可以看做一个盒子，比如我们检查元素，鼠标滑上对应的元素，所框选出来的不就是一个矩形盒子么。

我们给div依次设置内边距，外边距，边框,

	div {
		height: 300px;
		width: 300px;
		margin: 0;
		padding: 20px;
		margin: 20px;
		border: 30px solid blueviolet;
	}

可以想象一个快递盒子，为了防止盒子碰撞，盒子外部包裹一层充气气囊，把盒子和其他盒子隔开，这就是外边距，盒子的厚度，就是边框，而盒子里面，为了防止物品晃动，所填充的泡沫就是内边距。其中有两种计算盒子内容的方式，有人把泡沫和物品一起算作盒子内容，有人只把物品当做盒子内容。这个计算方式可以更改，通过box-sizing，默认是盒子和泡沫一起算盒子内容，可以通过设置box-sizing: border-box;修改为另一种，这里涉及到IE和W3C的规范之争。用法不细讲，可以查看文章。关于CSS3 的 box-sizing属性 - 掘金 (juejin.cn)

浮动

浮动是比较老的布局方案了，原本它设计的初衷并不是为了用来布局，仅仅是用以实现类似报纸的文字环绕图片风格，后来大家发现它布局很方便，就都来用，它布局会有一些缺陷，现在我已经很少使用了，除非为了兼容IE.可以做一个了解。现在主要用定位和弹性盒子flex布局。

浮动布局

上面我们说到，块级元素有一个特点就是，无法在同一行排列，但是实际页面开发中，肯定会用到并行排列，如何解决这个问题呢，可以使用浮动。这里我们写了一个header,里面有一个标题和一个导航栏.

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		.header {
			border: 1px solid red;
		}
		.title,.nav {
			height: 80px;
			width: 200px;
			text-align: center;
			line-height: 80px;
			background-color: aqua;
		}
	</style>
</head>

<body>
	<div class="header">
		<div class="title">这里是标题</div>
		<div class="nav">这里是导航栏</div>
	</div>
</body>

</html>

效果并不是很理想，两个块级元素无法并排

使用浮动，标题栏左浮动，导航栏右浮动。设置float属性

		.title {
			float: left;
		}
		.nav {
			float: right;
		}

成功让两个块级元素并排，并且左浮动和右浮动，但是这里出现了一个问题，那就是他们的父元素，header,失去了高度，可以看到原本的红色边框已经坍塌成了一条线了，为什么？

这也就是上面提到的浮动的缺陷：浮动会让文档脱离文档流，用更贴切的说法就是，他们浮起来了，原本在同一个平面，子元素的高度把父元素撑开，但是浮动了之后，浮动的元素就飘了起来，把网页看成一个立体的，浮动元素就相当于垂直于电脑屏幕飘了起来。这样父元素就没有东西可以撑开了，自然就发生了坍缩，高度消失。

我们在header同级添加一个div。

<style>
	.test {
		height: 200px;
		background-color: red;
	}
</style>
<body>
	<div class="header">
		<div class="title">这里是标题</div>
		<div class="nav">这里是导航栏</div>
	</div>
	<div class="test">我顶上去了</div>
</body>

可以看到，test div顶了上去，并且两个浮动元素漂浮在test上面。要解决这个缺陷，我们要清除浮动

清除浮动

清除浮动有两种常用方法，一种是在父元素上面设置overflow属性，一种是在最后添加子元素并设置clear: both。我们来尝试第一种。

.header {
	border: 1px solid rgb(250, 0, 0);
	overflow: auto;
}

可以看到，父元素高度坍缩已经接近，其实overflow设置为auto和hidden都可以，大家自行尝试，clear比较麻烦，我一般用overflow的方式，这里就不展示了。感兴趣的可以查看文章。清除浮动的四种方式及其原理理解 - 掘金 (juejin.cn)

position定位

这个定位比较好理解，一般是子元素相当于父元素的定位。常用的值有四种类型。

position: static 静态，这个就是什么都不干时元素默认的定位方式，没什么用。
position: relative 相对定位，这个是相当于自身定位在当前位置的情况下移动
position: absolute 绝对定位，相对于上一个postion值不为static的父元素的位置进行定位
position: fixed 固定定位, 相对于屏幕定位，无论页面怎么滚动，固定不动。
position: sticky 吸顶，这个没怎么用过，可以自行百度
简单示例如下：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		.position {
			position: relative;
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
		.position div {
			height: 150px;
			width: 150px;
			background-color: blue;
		}
		.test1 {
			position: absolute;
			left: 10px;
			bottom: 0;
		}
	</style>
</head>

<body>
	<div class="position">
		<div class="test1">这是测试1</div>
	</div>
</body>

</html>

可以看到，在postion父元素设置了relative定位后，子元素设置绝对定位absolute，这样子元素的定位情况就是相对于父元素了，定位设置了之后可以使用方向定位一共四个值left,right,top,bottom，分别对应离左，右，上，下的距离，一般设置两个就可以完成定位，类似于坐标系中的xy。比如上面设置了离左边10px，离下边0，这样就定位到了最底部。
如果我们删除父元素relative定位。

		.position {
			/* position: relative; */
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}

可以看到，子元素不再相对于父元素定位，因为父元素的postion的属性值成为了默认的static,而absolute无法相对于static进行定位，最后找到了body元素，相对于整个页面进行定位，就成了现在这个效果，跑到了页面最下边。记住一个基本的定位口诀子绝父相,意思就是子元素使用absolute绝对定位，父元素使用relative相对定位。更多的postion操作请查看文章。CSS定位position - 掘金 (juejin.cn)

弹性盒子 flex

弹性盒子的使用方法特别简单，也是比较常用的布局方式，但是IE的支持情况不是很好，不要在意这些细节。我们不整那些华丽呼哨的，花里花哨的后面大家自己学，直接上代码。

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>针对后端开发的css快速入门教程</title>
	<style>
		.flex {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.flex div {
			height: 150px;
			width: 150px;
			background-color: blue;
		}

	</style>
</head>

<body>
	<div class="flex">
		<div class="test1">这是测试1</div>
	</div>
</body>

</html>

这样就完成了居中效果，本质上是，先使用display: flex声明，这是一个弹性盒子的容器，display属性相比大家都不陌生。弹性盒子的本质就是容器有两个方向，一个横向，一个纵向，选择这两个方向上面的布局即可，比如justify-content: center;就是在横轴上面居中，align-items: center;就是纵轴居中。

横轴，从左到右，纵轴从上到下，他们各有三个属性，起点，中点，终点，

justify-content: flex-start;

如果横轴设置为起点

align-items: flex-end;

设置纵轴为终点

还有一个属性也比较常用，space-between,添加一个div，并设置横轴为space-between

justify-content: space-between;

两个div就会分布在父元素横轴的两侧。这个属性可以让子元素散开。各位自行尝试。也可以多个元素。自动分布均匀散开。

注意：flex布局基本上在父元素上面操作，父元素称为容器，作用于直接子元素，子元素称为项。如果子元素里面还有嵌套，就需要把子元素当做孙子元素的父元素再次设置display:flex
以上是常用的flex布局操作，如果掌握了这个布局，基本上所有的静态页面样式都可以开发，这里并没有说完，flex布局还有许多知识，可以参考：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)。

后续

到这里快速入门就结束了，css的属性非常多，不同属性直接的结合还有很多的操作，这就需要在实战中慢慢积累了。这里推荐几篇比较高级的css基础知识（并不是病句）。

碧落云

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
css快速入门教程

前言在开始之前，先做说明：本文只涉及到基本css知识，如果有做前端开发的同学跳过即可，本文针对刚刚入门以及从其他方向转向前端开发的同学。众所周知，CSS并不是一门编程语言，它的学习在前期主要来源于对属性的积累和各种属性的联合搭配，所以并不存在学通一门编程语言再学css就进度飞快的情况. 本文总结了作者所认为的，css入门必学的知识点，其他的可以在开发中，通过百度练习逐渐掌握，以下是本文所涉及的内容。css基本使用方式和常用选择器css层叠性和权重css常用属性css盒子模型浮动posit
复制链接

扫一扫