CSS入门学习

简介:     一,What?        CSS的全称是CascadingStyle Sheet,汉语意思是“级联样式表”,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。

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

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

                                     




目录
相关文章
|
4月前
|
前端开发
|
4月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
37 4
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
256 91
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
66 28
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
49 15
|
2月前
|
前端开发
|
2月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
2月前
|
前端开发
|
2月前
|
Web App开发 移动开发 自然语言处理