CSS面试题及答案 - [ Web技术面试题及答案 ]

CSS代表Cascading Style Sheet。 它是一种流行的样式语言,与HTML一起用于设计网站。 它还可以与任何XML文档一起使用,包括纯XML,SVG和XUL。通过阅读下面CSS面试题和答案,有助于让您在面试过程中应付自如,也可作为测评或复习巩固CSS知识。

1. CSS是什么?

CSS代表Cascading Style Sheet。 它是一种流行的样式语言,与HTML一起用于设计网站。 它还可以与任何XML文档一起使用,包括纯XML,SVG和XUL。

详细答案>>

2. CSS的起源是什么?

SGML(标准通用标记语言)是CSS的起源。 它是一种定义标记语言的语言。

详细答案>>

3. CSS有哪些不同的变化(版本)?

以下是CSS的不同变体(版本):

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3
  • CSS4
详细答案>>

4. 如何在网页上集成CSS?

在网页上集成CSS有三种方法: 内联方法 - 用于在HTML文档中插入样式表。嵌入/内部方法 - 用于为单个文档添加唯一样式。链接/导入/外部方法 - 当要在多个页面上进行更改时使用。详细答案>>

5. CSS的优点是什么?

CSS的优点是:

  • 带宽
  • 整个网站的一致性
  • 页面重新格式化
  • 无障碍
  • 内容与演示文稿分开
详细答案>>

6. CSS的局限是什么?

CSS的局限是:

  • 选择器升序是不可能的
  • 垂直控制的局限性
  • 没有表达式
  • 没有列声明
  • 伪类不受动态行为控制
  • 规则,样式,不可能定位特定文本
详细答案>>

7. 什么是CSS框架?

CSS框架是预先计划的库,可以轻松实现更符合标准的Web页面样式。 经常使用的CSS框架是:

  • Bootstrap
  • Foundation
  • Semantic UI
  • Gumby
  • Ulkit
详细答案>>

8. 如果背景和颜色应始终设置在一起,为什么背景和颜色是单独的属性?

这背后有两个原因: 它增强了样式表的易读性。 background属性是CSS中的复杂属性,如果它与颜色结合,复杂性将进一步增加。颜色是继承属性,而背景不是。所以这可能会进一步混淆。详细答案>>

9. 什么是嵌入式样式表?

嵌入式样式表是与HTML一起使用的CSS样式规范方法。可以使用STYLE元素将整个样式表嵌入到HTML文档中。 <style> body { background-color: linen; } h1 { color: red; margin-left: 80px; } </style> 详细答案>>

10. 嵌入式样式表有哪些优点?

嵌入式样式表有以下优点:

  • 可以创建用于文档中多个标记类型的类。
  • 可以使用选择器和分组方法在复杂情况下应用样式。
  • 导入信息无需额外下载。
详细答案>>

11. 什么是CSS选择器?

它是一个字符串,用于标识特定声明适用的元素。 它也被称为HTML文档和样式表之间的链接。 它相当于HTML元素。 CSS中有几种不同类型的选择器: CSS元素选择器CSS Id选择器CSS类选择器CSS通用选择器CSS组选择器详细答案>>

12. 请列出一些CSS样式组件。

一些CSS Style组件是:

  • 选择器
  • 属性
详细答案>>

13. CSS Opacity有什么用?

CSS opacity属性用于指定元素的透明度。 简单来说,可以说它指定了图像的清晰度。 在技术术语中,不透明度定义为允许光通过物体的程度。 例如: <style> img.trans { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } </style> 详细答案>>

14. 请解释通用选择器是什么?

通用选择器匹配任何元素类型的名称,而不是选择特定类型的元素。

<style>    
* {    
   color: green;    
   font-size: 20px;    
}     
</style>
详细答案>>

15. 哪个命令用于选择段落的所有元素?

p[lang]命令用于选择段落的所有元素。

详细答案>>

16. %unit有什么用?

它用于定义百分比值。

详细答案>>

17. 用于指定元素背景颜色的属性是哪个?

background-color属性用于指定元素的背景颜色。 例如:

<style>    
h2,p{    
    background-color: #b0d4de;    
}    
</style>
详细答案>>

18. 用于控制背景的图像重复的属性是什么?

background-repeat属性水平和垂直重复背景图像。 某些图像仅水平或垂直重复。 <style> body { background-image: url("paper1.gif"); margin-left:100px; } </style> 详细答案>>

19. 用于控制背景中图像位置的属性是什么?

background-position属性用于定义背景图像的初始位置。 默认情况下,背景图像位于网页的左上角。 可以设置以下位置: centertopbottomleftright 示例: background: white url('good-morning.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 详细答案>>

20. 用于在后台控制图像滚动的属性是什么?

background-attachment属性用于指定背景图像是固定的还是在浏览器窗口中与页面的其余部分一起滚动。 如果设置固定背景图像,则在浏览器中滚动期间图像不会移动。下面是一个以固定的背景图像的示例。 background: white url('bbb.gif'); background-repeat: no-repeat; background-attachment: fixed; 详细答案>>

21. 规则集有什么用?

规则集用于标识选择器可以与其他选择器连接。 它有两个部分:

  • 选择器 - 选择器指示要设置样式的HTML元素。
  • 声明块 - 声明块可以包含一个或多个以分号分隔的声明。
详细答案>>

22. 类选择器和id选择器有什么区别?

整个块被赋予类选择器,而id选择器只接受与其他元素不同的单个元素。 CSS类选择器 <style> .center { text-align: center; color: blue; } </style> CSS Id选择器 <style> #para1 { text-align: center; color: blue; } </style>...详细答案>>

23. 外部样式表有哪些优点?

外部样式表有以下优点: 可以创建类以在许多文档中重用它。通过使用它,可以从一个文件控制多个文档的样式。在复杂情况下,可以使用选择器和分组方法来应用样式。详细答案>>

24. 内联样式表,嵌入样式表和外部样式表有什么区别?

内联:内联样式表仅用于设置一小段代码的样式。 语法 <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag> 嵌入式:嵌入式样式表放在<head> ... </head>标记之间。 语法 <style> body { background-color: linen; } h1 { colo...详细答案>>

25. 什么是RWD?

RWD代表响应式网页设计。 此技术用于在每个屏幕尺寸和设备上完美显示设计页面,例如移动设备,平板电脑,台式机和笔记本电脑。无需为每个设备创建不同的页面。

详细答案>>

26. CSS sprites有什么好处?

如果网页有大量图像需要较长时间才能加载,因为每个图像分别发出HTTP请求。 CSS sprites的概念用于减少网页的加载时间,因为它将各种小图像组合成一个图像。 它减少了HTTP请求的数量,从而减少了加载时间。详细答案>>

27. 逻辑标签和物理标签之间有什么区别?

物理标签被称为表示标记,而逻辑标签对于外观是无用的。
物理标签是较新的版本,而逻辑标签是旧的并且专注于内容。

详细答案>>

28. 什么是CSS Box模型及其元素是什么?

CSS框模型用于定义CSS元素的设计和布局。 要素是: Margin - 它删除了边界周围的区域,它是透明的。Border - 它代表填充周围的区域Padding - 删除内容周围的区域。 它是透明的。Content - 它代表文本,图像等内容。 详细答案>>

29. CSS的float属性是什么?

CSS float属性用于向右或向左移动图像以及要围绕它的文本。 它不会改变之前使用的元素的属性。 要了解它的用途和来源,让我们来看看它的打印显示。 在打印显示中,将图像设置到页面中,使得文本根据需要包裹在其中。 它的网页布局也类似于打印布局。详细答案>>

30. 如何使用CSS恢复默认属性值?

简而言之,没有简单的方法可以恢复到浏览器使用的默认值。
最接近的选项是使用·initial·属性值,它恢复默认的CSS值,而不是浏览器的默认样式。

详细答案>>

31. z-index的目的是什么?它是如何使用的?

z-index有助于指定可能彼此重叠的定位元素的堆栈顺序。 z-index默认值为零,可以采用正数或负数。 具有较高z-index的元素总是堆叠在较低索引之上。 z-index可以采用以下值: Auto:将堆栈顺序设置为等于其父项。Number:排序堆栈顺序值。Initial:将此属性设置为其默认值(0)。Inherit:从其父元素继承此属性。详细答案>>

32. visibility:hiddendisplay:none 之间的区别?

visibility:hidden隐藏元素,但它占用空间并影响文档的布局。 <!DOCTYPE html> <html> <head> <style> h1.vis { visibility: visible; } h1.hid { visibility: hidden; } </style> </head> <body> <h1 class=...详细答案>>

33. 对W3C有什么了解?

W3C代表万维网联盟。 其目的是提供万维网的信息。 它还为Web开发规则和指南。

详细答案>>

34. 什么是渐变(tweening)?

它是在两个图像之间生成中间帧的过程。它给人的印象是第一张图像已经顺利演变成第二张图像。它是所有类型动画中使用的重要方法。在CSS3中,Transforms(矩阵,平移,旋转,缩放)模块可用于实现渐变。详细答案>>

35. CSS2和CSS3有什么区别?

CSS2和CSS3的主要区别在于CSS3分为不同的部分,也称为模块。 与CSS2不同,许多浏览器都支持CSS3模块。 除此之外,CSS3包含新的General Sibling Combinators,它负责将兄弟元素与给定元素进行匹配。详细答案>>
注: 此试题仅作为相关知识水平测试,不能作为权威试题和答案。非商业转载注明原文链接即可;商业转载需本站授权同意。