2020年CSS基础知识总结

1、css基础知识总结css 是一种用来表现 HTML 标准通用标记语言的一个应用）或 XML 标准通用标记语言的一个子集）等文件样式的计算机语言。下面 为大家了相关 css 基础知识总结，希望大家喜欢。1 、前端基本概念以及常识web 应用，主要分为前端和后端，而前端的话，主要是想用户 展示内容，后端的话主要是处理用户数据。前端内容呈现中，主要有 几个问题：内容是什么 ?如何展示内容 ?如何展示页面的行为 ?内容是 什么是通过html 来标记的，内容如何呈现是通过 css 改变和调整的， 页面的前端行为则是通过 js 来控制。 html 和 js 这里不详解，主要 这里说说 css。css ，可

2、以理解为页面格式，格式和内容的分离，使得 html 文 件大小缩小，条理清晰，格式可以多次利用，这里和 MVC 模型有同工 异曲。反正， css， 用个人通俗的话语理解， 就是拿来调节页面格式 的一种规则，这种规则可以同时作用于多个页面， 一次加载多次利用 毫无疑问地使得网页文件大小大大缩小，同时，页面可以统一风格， 调节页面也可以统一调节，方便高效。然后， css 的学习，个人的拙见就是：看完基本规则语法，就 开始干活，不懂去 W3Cschool 查资料，然后，做了一定页面后看本系 统的 css说明书籍， 带着问题去本有系统的书籍会收获很多， 然后在 继续实践。好了，废话说了那么多，进入干货

3、总结环节。2、css 编写的一些习惯（这里看不懂或者不认同的就算了，毕竟只是个人拙见而已，不感兴趣可以直接跳过的 ）a 、可以用 css 调样式的地方，就不要用 html 属性 （html 属性 具体是什么各位百度去吧 ）、先布局，再确定具体样式，个人觉得，合理的布局才是最重、 css 有继承关系，所以，尽量在开工前将公共的样式抽出来、 css 内容的话，个人觉得学习分三 part: 页面布局， 具体样式调整以 及前端框架的使用。 前两个的话是基础， 后面的框架只是集成的一些 类， 可以提高工作效率。 学习路线的话作为菜鸟的我不敢给什么意见，不过我的学习方式是大概对前两者有个概念之后， 便开始

4、着手去用前 端框架了 （毕竟是实际开发， 讲求效率 ） ，在用框架的过程如果发现自 己哪部分基础不了解不扎实的话回头再回顾。好了，上面讲了一大坨话，下面就正式进入主题啦，其实网上 也有很多 css 的基础总结，本人也只是将个人对编程的一些理解说出 来而已，重复造轮子是避免不了的，但是有那么一点收获，便是值得要的先。css1、 html 的一些常识11恩，会用 css 的前提必须是有一定的 html 基础， 先简单粗暴地 讲解下一些和 css 密切相关的 html 的一些知识吧， 具体的 html 只是 还是需要各位百度谷歌去的。html 节点：一个 html 文档中标签间的关系，可以形象地比喻

5、 为一颗树中各个分叉节点的关系： 每个标签之间有嵌套关系， 被嵌套 的标签是上一级的子节点，依次类推。clss 属性： html 中，每个标签都有 clss 属性，多个 html 节点 可以有多个相同的 clss 属性， class 属性，个人理解就是 html 节点 拥有的样式的一种说明方式。 由于 class 的意思就是这个标签所拥有 的样式，所以肯定是可以多个的，看一下代码估计你也明白了：1234ID 属性： id, 是一个 html 节点对无二的标记，即正常情况下一 个节点只是对应一个 id, 一个 id 一般也是只是对应一个 html 节点（ 当 然，一个 id 对应对个节点也不会出

6、错，只是浏览器解析时只会识别 第一个节点的 id） ，具体看代码2 、选择器 选择器，其实就是选择页面中你要修改的哪一部分的一种规则， 可以利用选择器对文档进行选择，进而进行样式的调整。 css 的基本 结构便是：选择器 +对应内容的样式说明，格式如下：选择器 样式说 明代码具体的，上代码吧：/* 选择器 */.class1/* 这是一个类选择器，中括号里面可以填写选中内容的相应样 式*/font-size:20px;/*font-size 是一中 css 属性值，具体后面会 介绍表示。所有拥有类名为 class1 的节点字体大小为 20px*/* 类选择器以以个 . 开头加类名字构成 */#

7、id1/* 这是一个 id 选择器，它由 # 和 id 名称构成 */font-size:20px;/* 类似的，这里表示拥有 id 名为 id1 的节点 字体大小为 20px*/title/* 属性选择器，表示选择具有 title 属性的标签节点 */font-size:20px;p/* 这个也是一个选择器， 表示选择所有 p 标签的节点 , 单纯由标 签名字组成 */font-size:20px;大概，各位对选择器的基本知识也多了解了吧，接下来，简单 说说怎么用选择器吧2 、选择器的使用在前面中，我们都是一个选择器一个选择器的单独使用的，单 独使用的话，选择的文档就显得比较粗糙不精确了。因此，各种选择 器之间可以组合起来使用，具体的话，请看代码吧：/* 选择器的组合使用 */.class1p/* 类选择器 +普通选择器，表示所有拥有 class1 的标签节点 */font-size:20px;p.class1/* 等效于上面的代码 */font-size:20px;#id1p/*id 选择器 +id1 的标签节点 */font-size:20px;p.id1/* 等效于上面的代码 */font-size:20px;headti