初学CSS3应该掌握哪些基础知识

作者:日期:2017-02-25 23:49:41 点击:227

 初学CSS3应该掌握哪些基础知识

CSS3简介

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。更加好的诠释了能用css解决的问题坚决不用js这句话。

CSS现状

  • 浏览器支持程度差,需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

怎样应用

  • 坚持渐进增强原则(不要优雅降级)
  • 考虑用户群体(pc端or手机端)
  • 遵照产品的方案(设计稿或者产品原型)
  • 听Boss的(领导or甲方需求)

引用前的准备

同一环境

由于CSS3兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效率,在最后会单独说明兼容性的问题。

下面介绍的是工具版本:

  • Chrome浏览器 version 46+
  • Firefox浏览器 firefox 42+
  • PhotoShop CS6(建议高版本的ps软件)

如何使用手册

查询API是快捷的学习手段,无论你是培训还是自学,学会学习永远都是最重要的,这里给大家推荐几个学习的网站

具体学习那些知识点

CSS3选择器

就像我们学习css2一样,选择器是我们要进行的第一关,CSS3中增加了很多的选择器,更加的便捷,不用起很多的名字也可以选择元素了。

例如属性选择器:
1、E[attr] 表示存在attr属性即可;
2、E[attr=val] 表示属性值完全等于val
3、E[attr~
=val] 表示的一个单独的属性值 这个属性值是以空格分隔的
4、E[attr|
=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
5、E[attr*
=val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr^
=val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr
$=val] 表示的属性值里包含val字符并且在“结束”位置
例如伪类选择器
重点理解E是用来参考确定其父元素的,nth-child(n) 对应根据E元素确定的父元素的所有子元素,nth-of-type(n) 的不同之处在于其对应的是只有E元素,会忽略其子元素。(此处要配合案例加强理解)
E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素
E:nth-of-type(n) 第n个子元素,计算方法只是E元素,会忽略其子元素的
存在
E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。
n遵循线性变化,其取值1、2、3、4、...
关于n的取值范围:
1、当n做为一个独立值时,n取值为n>=1,例如nth-child(n)
2、当n做一个系数时,n取值为n>=0者n<0,例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1;
E:only-child 表示当前以E确定的父元素,除E之外并无其它子元素(独生子);
E:only-of-type表示当前以E确定的父元素, 除E之外不能包含其它和E同类型的子元素;
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
E:empty 选中没有任何子节点的E元素;
例如伪元素选择器
E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder默认样式,这个存在明显的兼容问题,比如::-webkit-input-placeholder,具体参考手册进行对比。
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::afterE::before,按伪元素来对待。
":""::" 区别在于区分伪类和伪元素

颜色

CSS 中常用的值和单位:CSS 属性是由属性名和属性值组成的,属性名规定了修改什么,而属性值是给定了具体的样式。那么这些值有些是特定的有意义单词,有些是具体的数值,下面我们就来介绍一下这些内容。

在页面编写的时候,很多地方会用到颜色属性,比如文字的颜色、元素的背景颜色、边框的颜色等,那么我们可以通过color、background-color、border-color属性来设置,这些属性的值都有哪些呢? 
请查看网站css样式之颜色和单位

关于透明度: 
1、opacity子元素会继承父元素的透明度,在实际开发中会带来干扰; 
2 、transparent 设置透明度时完全类似于“玻璃”一样的透明;

文本

新增了文字阴影还有文本溢出等css属性方法,请求请查看 
CSS中单行文本溢出显示省略号的方法

写着写着就已经这么多了,下一篇文章我们将继续介绍CSS3入门的一些基础知识,希望对你有所帮助。

 

上一篇: CSS常见问题及解决方案

下一篇: 初学CSS3应该掌握哪些基础知识2