码迷,mamicode.com
首页 > Web开发 > 详细

CSS入门学习

时间:2017-07-21 00:05:18      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:position   更改   nbsp   标准   选择器   amp   content   字体大小   div   

    一。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

                                        依照标准流排列标签的方式感觉是先后顺序出来的,可是实际中,我们很多其它时候是要打破这样的单一的按顺序排列的方式,浮动和定位产生了丰富的页面排列方式。

                                     




CSS入门学习

标签:position   更改   nbsp   标准   选择器   amp   content   字体大小   div   

原文地址:http://www.cnblogs.com/wzjhoutai/p/7214578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!