入门CSS
先导
本文将会为大家介绍如下几种CSS的概念
- 什么是CSS
- 层叠是什么
- CSS的版本迭代
- CSS的常用写法
- 何为CSS文档流
- 我的CSS学习方法
什么是CSS(层叠样式表)
作为一名入门小白,一定很想知道CSS究竟是什么,以及CSS的学习方法到底是什么,我将会在本文中把我自己的学习方法分享给大家,同时还会给大家解释CSS的常用概念原理.
发明的CSS人是HTML的创始人蒂姆·伯纳斯-李的好朋友维姆莱.CSS主要是用来静态地修饰网页,还可以配合各种语言对网页各元素进行修饰
由于当时创建HTML的时候并没有CSS的概念,现如今CSS已经是我们在前端开发中离不开的话题,CSS在给我们带来可以随意轻松修改样式的同时,也给我们带来了一些麻烦的地方,因为当变动一处样式的时候很有可能就会变动其它的HTML代码位置的变动.
有哪几种样式的重叠呢?
| 层叠 | 特点 |
|---|---|
| 样式层叠 | 可以多次对同一选择器,进行样式声明 |
| 选择器重叠 | 可以用不同选择器对同一元素进行样式声明 |
| 文件重叠 | 可以通过引用多个文件进行重叠 |
CSS的版本迭代
| 版本 | 特点 |
|---|---|
| CSS1.0 | 这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等 |
| CSS2.0 | 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。 |
| CSS2.1 | 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。 |
| CSS3 | 2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。 |
从上面的表格可以看出CSS已经经历了很多次的迭代,CSS1.0版本的出现还是比较简单的样式,但是到CSS2.1的出现以后CSS在慢慢的变动,一遍遍的CSS修改中都是在2.1版本的基础上进行升级,而且现在使用最广泛的版本是CSS2.1版本,CSS3引用了一个很重要的观点是分模块,同时出现了许多不同的预处理语言,例如less,sass,stylus,在以后的文章中我会对部分的预处理器进行介绍.
CSS的常用写法
其实CSS的使用语法还是比较简单,对于入门的新手还说还是很容易理解
语法一丶样式语法: 代码如下
选择器{
属性名: 属性值 /*!请注意 这是CSS的注释写法*/
}
简单的例子:
.test{
color: white; /*!请注意 这是CSS的注释写法*/
}
此代码的含义是将class为test的字体颜色改为白色
语法二丶@语法
@charset "UTF-8"; /*放在第一行,指定的是文件编码*/
@import url(test.css); /*引入名为test的css文件*/
@media (min-width: 100px) and (max-width: 200px) {
/*此为媒体查询,具体细节大家可以查询MDN文档*/
}
何为CSS文档流
何为流: 一般认为指水的移动，引申泛指液体移动(此为百度百科的含义)
在介绍文档流时先介绍何为块元素,内联元素,内联块元素
| 类型 | 特点 |
|---|---|
| 块元素 | 块元素在文档流中从上到下独占一行 |
| 内联元素 | 内联元素不独占一行,沿着文档流动的方向(一般是从左到右依次排列) |
| 内联块元素 | 内联块元素同时含有内联元素的特点和块元素的特点,独占一行,可以改变宽度,但是当一行占不下时,不会让最后一个元素分开两行展示 |
需注意
1.内联元素不接受宽度,所以当写宽度100%是无效的,高度由line-height间接决定
2.块元素高度由文档流中元素确定
3.内联块元素由里面文档流中元素确定和block一样
通过以上的分析知道了什么是块元素,什么是内联元素,什么是内联块元素,我们明白文档流就是一个整体,里面包含了很多的元素,这些元素撑开了这个容器的大小,当不脱离文档流时会按照以上的规则进行排序分布,那么怎么让元素脱离文档流呢,此文提到了两种方法
float(浮动)
此为当容器内的元素都在文档流中,每个块元素独占一行排列,若给第一个块元素加上float后请看下图
当给第一个块元素加上浮动则会脱离文档流,下面的元素会跑上来
positon(定位):absolute/fixed
同样的道理,当给对应的元素开启了绝对定位后,元素同样会脱离文档流
总结
以上的文档流,以及脱离文档流的方式仅为部分内容,其中深刻的奥秘原理还需同学们更加深刻的学习
我的CSS学习方法
三字高效学习: 学丶练丶调
学
- 建议大家可以在MDN上查找相关的css资料,里面的css内容很全面而且也很权威很有参考的价值
- CSS tricks也是一个很的学习网站 推荐给大家 tricks
- 张鑫旭老师的博客 张鑫旭 这是一位研究了CSS多年的大神老师,看他的文章可以学到很多知识
练
- 千万要勤动手,不要只知道概念,但是到后期你也不会写
- 勤思考,多动脑思考,CSS需要的是创造力,CSS也是一门艺术
调
- 因为在写CSS的时候很有可能出现很多错误的问题,但是又不知道哪个地方写错了,在博主的学习过程中使用最多的是border调试法
border调试法
当怀疑某个元素有问题时,给这个元素加border,如果说border没有出现的话,说明选择器写错了,请检查单词,若border出现了,看看是否符合预期的效果,切记border千万别写错了要不然查不到啊.
当bug调试完了记得将border删除
总结
其实CSS说简单也简单,你很容易会使用,但是若想要深入的学习还需耗费较大的精力,在以后的博客中,博主还会对CSS进行进一步介绍,敬请期待.
记得持续学习,不断跟进!加油!
