首页 > 代码库 > CSS入门学习
CSS入门学习
一,What?
CSS的全称是CascadingStyle Sheet,汉语意思是“级联样式表”,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。
例如,在网页的设计中,在HTML页中只加入网页内容,而将网页样式(例如,大到网页的布局结构,小到字体大小等)放在别处,实现了网页的内容和样式相分离,这样,在更改样式时,不影响内容。
可以说,CSS将网页中的内容和样式分离开,让它们各自变化,解除了耦合。
二,CSS的选择器
在CSS里面,有3种选择器,Class选择器,Id选择器,HTML选择器。
在这3种选择器中,我们都可以定义样式,但是,如果同时使用了多种样式,其中某些样式设置又是冲突的,这是该如何解决呢? 有两个办法:
方法1:使用优先级:这3中选择器的优先级顺序为:id>class>HTML标签选择器;
方法2:对于相同优先级的,按照样式表排列的先后顺序确定,使用排列在样式表前面的;
这个使用规则在计算机的很多地方都出现过,例如:使用运算符进行计算,出现中断如何处理等等。
三,CSS核心内容简介
1,标准流
简单理解就是页面中标签的排列方式:就像流水那样,排在前面的东西先出现,排在后面的后出现。
2,盒子模型
盒子模型在层次上感觉就像是俄罗斯套娃,一个套一个:
类比标准盒子模型:
看起来有点儿层次结构不好理解啊!!now,for example,我们在京东上买了个手机,这是我要包装的内容(content),然后在手机外面包上防震泡沫,这是padding,最后为了保险,还包上3cm厚的纸箱,这层是border. 为了防止不同盒子之间的碰撞,还要留出一个margin,ok,上面4层就形象啦~
3 ,float & position
按照标准流排列标签的方式感觉是先后顺序出来的,但是实际中,我们更多时候是要打破这种单一的按顺序排列的方式,浮动和定位产生了丰富的页面排列方式。