HTML入门基础知识讲解之CSS专场
导读： 前两期给大家带来了html部分的基础知识，大家的反馈还是让我超级开心的！当然我的水平和能力也有限，而且当年学习代码的痛苦仍然历历在目，所以我的入门教程可以说是真正的入门，本着给大家讲故事，顺带的加一点知识的原则，坚持写由浅入深的文章，同...
前两期给大家带来了html部分的基础知识，大家的反馈还是让我超级开心的！当然我的水平和能力也有限，而且当年学习代码的痛苦仍然历历在目，所以我的入门教程可以说是真正的入门，本着给大家讲故事，顺带的加一点知识的原则，坚持写由浅入深的文章，同时寓教于乐，让大家知其然还要知其所以然的方法，带你入门WEB前端。
一 CSS 的发展历史：
因为HTML早期样式和内容是不区分的，是在一个页面内开发，例如可以通过使用标签来显示加粗字体。初期因为web页面的开发比较简单，但是随着网页内容的逐步丰富，浏览器展示性能也不断的提高，HMTL3.0标准下的内容和样式的高耦合度，使得HTML文件越来越难以理解和维护。
CSS就基于此应运而生，他的优势基于HTML在使用中的两个劣势层面
1 使用层面：
还是从当年HTML3.0腾空出世，各大主流浏览器厂商为了显示更丰富的web文档，已达到更加绚丽的网页效果，不断地制定新的标准，不断将新的独立标签和不同的属性添加到HTML的标准中。随着时间的推移，越来越多的人发现了一个问题，就是单纯的HTML页面如果想实现更好的效果，代码越来越臃肿，动辄几千行代码，除了记忆大量的复杂的标签和属性，而且很多样式相同的网页，需要重复的加载相同的代码，当年的计算机的性能也限制了HMTL的加载速度。
2 代码层面：
大家编写代码的时间越长，一定会听到一个词语，叫耦合性，也叫耦合度，是对不同代码模块之间关联程度的一个衡量。而代码的耦合性越低，代码越健康越好维护，代码设计中通常用耦合度和内聚度作为对模块划分程度的标准。
回来接着说HTML，这种臃肿的代码，最终使得网页展示的内容与网页的样式交叉在一起，如果后期需要维护代码，则要从浩瀚的代码中寻找，而且每个人的书写习惯不同，难以创建内容清晰的文档，这给后期网站的升级和维护带来了巨大的困难。
为了解决上面的HTML的使用限制的问题，万维网联盟在制定HTML 4.0版本的时候，在此之外提出了CSS，全名层叠样式表，使用CSS将样式的部分从内容只抽离出来，以此完成样式与内容的分离，这大大规范了HTML的开发格式，也为后期的维护极大地降低了时间成本。
不仅仅是HTML的前端开发，软件开发中的一条重要原则就是样式与内容分离，单独维护。不仅可以更清晰地分别表达样式或者内容，更重要的目的是这二者不再耦合，同时网页的样式变得可复用、组件化，新的网页如果样式和之前相同，不需要在反复的写重读的代码，直接调用就可以了。
二 CSS的入门经验：
css部分的代码内容非常的琐碎、而且涉及的格式样式非常的广泛，只是单纯的看不行，需要不断code，一边写代码一般看其实际的效果反馈，才能逐步的体会其中的细节。
三 CSS的引入方式：
我们从前两期的文章中知道HTML文件中根节点是标签，这个标签包含了子标签和。我们在标签中可以引入外部的CSS样式文件，这样在外部CSS文件中的样式格式将被引用到当前的HTML文件中。
引入方式一：
语句，比如我们写好了zhihu.css文件，将其引入的方式就是
其他引入方式：
除了上面的在标签中引入外部CSS文件，还有两种方式可以引入样式：
1设置标签的style属性，例如：
zhihu
2 可以在的任何地方，添加标签，语法同外部CSS文件。例如：
a{
color: red;
}
在代码写作中，在引入外部样式文件。是最利于样式文件的分离：利于各个不同小组的协同分工进行工作。
网页的样式和效果往往由设计师负责，而网页内容往往由前端工程师负责编写。而CSS样式的导入到HTML文件只需要双方约定好，CSS的文件名字即可，同时一个确定的样式可以反复用。除此之外在引入样式时，可以对不同的样式文件分别进行样式组合，便于网站风格的建立和管理。
一个简单的 CSS格式展示：
这是一个简单的 CSS 文件，先不必在意其含义，我会慢慢的讲解，大家大致观察一下CSS的语法格式。
div p{
padding-left: 20px;
}
body img, body div{
float: left;
}
.avatar{
width: 100px;
height: 100px;
}
可以观察到上述文件分为3模块的内容，每一部分的内容都包含了逗号分隔的字符串，紧接着的一组大括号，以及大括号内的内容。
1 CSS是由多组"规则"组成的，上面的每一个不同的部分称为一个规则（rule），
2 大括号前的字符串内容称为选择器（selector），它用来约定该规则用于怎样的HTML元素；
3{
}
大括号内是"特性"列表，每个特性都用：结束。
"特性"由"属性名"（property）和"数值"（value）组成，以冒号分隔：
属性（property）：某一种特性的名称,比如上面展示的 width；
值（value）：该特性的设置值，比如约定宽高的100px;
。
四 CSS的不同的选择器：
1 类型选择器
类型选择器是CSS中最常用的选择器，用于选择指定类型的HTML标签，并对其进行约束。
比如如下案例：
body{
margin: 150px;
}
div p{
padding-left: 25px;
}
body img, body div{
float: right;
}
设置body的效果：外边距为150像素；
设置body下的p：左侧内边距为25像素；
设置body下的img和body下的div：向右浮动。
这样的代码是的现在网页效果便有了边距，并且展示的图片和下面的文字排成了一行：
2 类选择器
类选择器的使用频率也是非常的高，用于选择指定class标签中的HTML标签，在CSS库中很常见。
首先需要给HTML标签设置class：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML入门基础知识讲解之CSS专场
本文地址： https://pptw.com/jishu/661391.html