CSS层叠样式表一些常见的基本问题

1、CSS是什么?

CSS(Cascading Style Sheets)层叠样式表,简单的说HTML是结构,CSS是表现(样式、外观)、Javascript是行为。

CSS不仅可以静态的修饰网页,也可以结合JavaScript脚本语言动态的对网页各个元素进行控制。

是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

w3school中的解释是:

  1. CSS stands for Cascading Style Sheets(层叠样式表)
  2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media(CSS描述了如何在屏幕,页面或其他媒体上显示HTML元素)
  3. CSS saves a lot of work. It can control the layout of multiple web pages all at once.(CSS节省了大量的工作。它可以同时控制多个网页的布局)
  4. External stylesheets are stored in CSS files(外部样式表存储在CSS文件中).

2、CSS的三大特性是什么?具体如何理解?

  •  继承性:
    • 子标签可以继承夫标签的样式风格
    • 子标签的样式不会影响父标签的样式风格
    • 不是所有的样式都能继承
    • 子元素可以拥有父元素的一些属性。描述用到一些而不是全部,不难看出并不是所有的属性都可以被继承。在CSS中以text-、font-、line- 开头的属性是可以被继承的
    • 常见属性:
    • 字体相关:line-height, font-family, font-size, font-style, font-variant, font-weight, font
    • 文本相关: letter-spacing, text-align, text-indent, text-transform, word-spacing
    • 列表相关:list-style-image, list-style-position, list-style-type, list-style
    • color

 

  • 层叠性:层叠性就是CSS处理冲突的一种能力
    • 当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖(层叠)。可以这样理解权重:这个选择器对于这个元素的重要性。
  • 优先级(权重):
    • 权重的计算规则:
      • 根据权重计算结果的大小决定 具体生效的样式
      • 如果权重值相同,以卸载后面的样式为准
      • 通过继承生效的样式权重为0
      • 如果权重都为0,以靠近标签的样式为准;一样近时再根据选择器权重计算规则
      • !important具有最高权重

3、伪类与类的区别在哪里?

CSS中的类(class)是为了方便过滤(即选择)元素,给这类元素添加样式,class是定义在HTML文档树中的。

但是在一些情况下不够用,如用户的交互动作(悬停、激活等等)会导致元素状态发生变化。

引入伪类(pseudo-class)概念用来支持根据文档树以外的信息来过滤元素的能力。

伪类是一个抽象类,本质上还是一个类,因此其主要作用仍然是用来选择元素而后设定具体的样式。

伪类的定义使用:单冒号加上名称,如 mydiv:hover。

伪类的选择对象可能会随着用户操作文档而发生变化,比如当用户删除某些节点后,会影响子元素(nth-child)伪类的选择。

伪元素(pseudo-element):为了能支持根据文档树以外的信息来进行格式化。伪元素本质上是一个元素,只是它一般需要依附在一个已有元素上,作为这个元素的“部分”或“补充”。比如::first-line或::after。

详细使用方法:http://wow.techbrood.com/

4、背景图片(background-image)与<img/>图片设置有何差别?

相同点: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同点:

1.  在no-repeat情况下,如果容器宽高比与图片宽高比不同,
cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;(图片不完整)
contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;(图片是完整的)

2.  在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。

5、CSS精灵图(Sprite)是什么?

CSS的Sprite有叫精灵图、雪碧图等等,是图片整合技术,多张图片整合为一整图片的技术。

Sprite原理:是将多张零散的背景图片整合到一张背景图上,然后通过background-position来调整背景的位置,这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的,不然很容易漏出其他的背景图片,所以尤其要控制好盒子的大小;

其次,你还需要注意书写背景定位的时候极大多数都是负的,水平为负数,图片才会往左侧平移,所以才会显示出你需要的那部分背景图,垂直方向也是同理。

当多个盒子引用一张背景图时,只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图,这样做的目的就是为了降低浏览器向服务器的请求次数,这样一来可以大大提高网页的加载速度。

优点:

1、利用CSS Sprites能够减少浏览器向服务器的请求次数,减少http请求,从而提高页面的性能,这是图片精灵的最显著特点,也是被广泛应用的主要原因。

2、利用图片精灵还能减少图片的字节,你使用9张小的图片,一张4KB,9张就是36KB,而把他们都放一张图片上,只需要4KB到5KB就可,所以减少图片字节也是显而易见的。

3、在整理图片的过程中,不需要再纠结如此大量图片的名字问题,多张放在一张上,只需要取一个综合的名字就可以了,如此便提高了工作效率

4、如果想改变网站风格,你只需要处理一张图片就可以了,把一张图片的颜色和风格一改,那么整个网站的风格就都变了,便于后期的维护和修改

CSS Sprites 的缺点:

1、在应用精灵图片的时候,你需要考虑当前盒子会不会漏出其他的背景图,这个还好,比较头疼的是,页面自适应时,背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐,你需要处理好每张图之间的距离和位置,如果做得不合理,那么使用起来就比较麻烦了,甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了繁琐,因为他是多张图在一张图上,牵一发而动全身的感觉,你改变一张背景图,如果大小发生变化,那么其他的你就得动,只要你动了,那么所有的背景定位都将需要改变,所以一旦需要更改背景图的话,轻易不要改变其他图片的位置,原位能放下就在原位改,放不下就在下面添加。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注