CSS 面试问题

亲爱的读者们，这些 CSS面试问题 是专门设计的，以让您熟悉您在CSS语言的面试中可能遇到的问题的性质。根据我的经验，好的面试官在面试中很少计划问任何特定的问题，通常问题从主题的一些基本概念开始，然后根据进一步的讨论和您的回答继续进行：

什么是CSS

层叠样式表（Cascading Style Sheets），简称CSS，是一种简单的设计语言，旨在简化网页的呈现过程。

使用CSS的优点是什么

使用CSS的优点如下所示：

CSS节省时间 - 您可以编写CSS一次，然后在多个HTML页面上重复使用相同的样式表。您可以为每个HTML元素定义一个样式，并将其应用于任意多个Web页面。
页面加载速度更快 - 如果您使用CSS，您无需每次都编写HTML标记属性。只需编写一个标签的CSS规则，并将其应用于该标签的所有出现。因此，代码较少意味着下载时间更快。
易于维护 - 要进行全局更改，只需更改样式，所有Web页面中的所有元素都将自动更新。
优于HTML的样式 - CSS具有比HTML更广泛的属性数组，因此与HTML属性相比，可以给HTML页面带来更好的外观。
多设备兼容性 - 样式表允许内容针对多种类型的设备进行优化。通过使用相同的HTML文档，可以为手持设备（如PDA和手机）或打印提供网站的不同版本。
全球网络标准 - 现在HTML属性正在被废弃，推荐使用CSS。因此，使用CSS在所有HTML页面上开始使用是一个好主意，以使它们与未来的浏览器兼容。
离线浏览 - CSS可以使用离线缓存将Web应用程序存储在本地。利用这一点，我们可以查看离线的网站。缓存还可以确保更快的加载和更好的整体性能。
平台无关性 - 这种脚本提供了一致的平台无关性，并支持最新的浏览器。

什么是CSS Style的组成部分

样式规则由三个部分组成-

选择器 -选择器是将应用样式的HTML标签。这可以是任何标签，如

h1>或

table>等。

属性 -属性是HTML标签的属性类型。简而言之，所有HTML属性都转换为CSS属性。它们可以是颜色、边框等。
值 -值分配给属性。例如，颜色属性可以是红色或#F1F1F1等。

什么是类型选择器

类型选择器只是匹配元素类型的名称。要为所有一级标题设置颜色-

h1 {
   color: #36CFFF; 
}

什么是通用选择器

通配选择器不选择特定类型的元素，而只是匹配任何元素的名称-

* { 
   color: #000000; 
}

此规则将文档中每个元素的内容呈现为黑色。

什么是后代选择器

假设您要将样式规则应用于仅在特定元素内时。如以下示例所示，样式规则仅适用于元素，只要它位于

<

ul>标签内。

ul em { color: #000000; }

什么是类选择器

您可以根据元素的class属性定义样式规则。所有具有该类的元素将根据定义的规则进行格式化。

.black { color: #000000; }

此规则将文档中class属性设置为black的每个元素的内容呈现为黑色。

您可以使类选择器特定于某个元素类型吗？

您可以使其更具体。例如-

h1.black { color: #000000; }

此规则仅将class属性设置为黑色的<h1>元素的内容呈现为黑色。

什么是id选择器

您可以基于元素的id属性定义样式规则。所有具有该id的元素将根据定义的规则进行格式化。

#black { color: #000000; }

此规则将文档中id属性设置为black的每个元素的内容呈现为黑色。

你能为元素类型创建一个特定的id选择器吗？

你可以更加具体一些。例如 −

h1#black { color: #000000; }

该规则仅对id属性设置为black的<h1>元素中的内容呈现为黑色。

什么是子选择器

请看下面的例子−

body > p { color: #000000; }

如果<p>是<body>元素的直接子元素，该规则将会使所有的段落显示为黑色。放在其他元素（如<div>或<td>）中的段落将不会受到该规则的影响。

什么是属性选择器

你还可以将样式应用到具有特定属性的HTML元素上。下面的样式规则将匹配所有具有类型属性值为text的input元素−

input[type = "text"] { color: #000000; }

该方法的优点在于<input type = "submit" />元素不受影响，颜色仅应用于所需的文本字段。

如何选择具有lang属性的所有段落元素？

p[lang]：选择具有lang属性的所有段落元素。

如何选择lang属性值为”fr”的所有段落元素？

p[lang=”fr”]：选择lang属性值为”fr”的所有段落元素。

如何选择lang属性值包含单词”fr”的所有段落元素？

p[lang~=”fr”]：选择lang属性值包含单词”fr”的所有段落元素。

如何选择lang属性值为”en”或以”en-“开头的所有段落元素？

p[lang|=”en”]：选择lang属性值为”en”或以”en-“开头的所有段落元素。

各种在HTML页面中使用CSS的方式有哪些？

关联样式到HTML文档有四种方法。最常用的方法是内嵌CSS和外部CSS。

嵌入式CSS − <style>元素：您可以将CSS规则放入HTML文档中使用<style>元素。

内联CSS − style属性：您可以使用任何HTML元素的style属性来定义样式规则。

外部CSS − <link>元素：<link>元素可用于在HTML文档中包含外部样式表文件。

导入CSS − @import规则：@import用于以类似<link>元素方式导入外部样式表。

CSS样式覆盖是如何工作的

以下是覆盖任何样式表规则的规则：−

任何内联样式表具有最高优先级。因此，它将覆盖<style>...</style>标签中定义的任何规则或任何外部样式表文件中定义的规则。

任何在<style>...</style>标签中定义的规则将覆盖任何外部样式表文件中定义的规则。

任何在外部样式表文件中定义的规则具有最低优先级，只有在上述两个规则不适用时才会应用这个文件中定义的规则。

%（百分比）测量单位的用途是什么？

% – 定义一个相对于另一个值的百分比测量，通常是一个封闭元素。

p {font-size: 16pt; line-height: 125%;}

cm（厘米）测量单位的用途是什么？

cm – 定义一个以厘米为单位的测量。

div {margin-bottom: 2cm;}

em（相对单位）测量单位的用途是什么？

em – 用于字体高度的相对测量单位。因为一个em单位等于给定字体的大小，如果将字体分配为12pt，则每个”em”单位将为12pt；因此，2em将为24pt。

p {letter-spacing: 7em;}

ex（相对单位）测量单位的用途是什么？

ex – 该值相对于字体的x高度进行测量。x高度由字体的小写字母的高度确定。

p {font-size: 24pt; line-height: 3ex;}

in（英寸）测量单位的用途是什么？

in – 定义以英寸为单位的测量。

p {word-spacing: .15in;}

我们为什么要使用毫米（mm）作为测量单位？

mm – 定义了以毫米为单位的测量值。

p {word-spacing: 15mm;}

我们为什么要使用pica（pc）作为测量单位？

pc – 定义了以pica为单位的测量值。一pica等于12个点，所以一英寸有6个pica。

p {font-size: 20pc;}

我们为什么要使用点（pt）作为测量单位？

pt – 定义了以点为单位的测量值。一点被定义为英寸的1/72。

body {font-size: 18pt;}

我们为什么要使用像素（px）作为测量单位？

px – 定义了以屏幕像素为单位的测量。

p {padding: 25px;}

我们为什么要使用视口高度（vh）作为测量单位？

vh – 视口高度的1%。

h2 { font-size: 3.0vh; }

我们为什么要使用视口宽度（vw）作为测量单位？

vw – 视口宽度的1%。

h1 { font-size: 5.9vw; }

我们为什么要使用视口最小值（vmin）作为测量单位？

vmin – 1vw或1vh，取决于哪个更小。

p { font-size: 2vmin;}

有多少种格式可以指定CSS颜色

您可以以多种格式指定颜色值。以下表格列出了所有可能的格式 –

格式语法示例

十六进制代码 #RRGGBB p{color:#FF0000;}

短十六进制代码 #RGB p{color:#6A7;}

RGB百分比 rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB绝对值 rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

关键词 aqua, black, 等等 p{color:teal;}

什么是浏览器安全颜色

这是216种被认为最安全和与计算机无关的颜色列表。这些颜色的十六进制代码从000000到FFFFFF不等。这些颜色是安全使用的，因为它们保证在运行256色调色板时，所有计算机都能正确显示颜色。

用于设置元素背景颜色的属性是哪个？

background-color属性用于设置元素的背景颜色。

用于设置元素背景图像的属性是哪个？

background-image属性用于设置元素的背景图像。

用于控制背景图像重复的属性是哪个？

background-repeat属性用于控制背景图像的重复。

用于控制背景图像位置的属性是哪个？

background-position属性用于控制背景图像的位置。

用于控制背景图像滚动的属性是哪个？

background-attachment属性用于控制背景图像的滚动。

用作缩写以指定其他多个背景属性的属性是哪个？

background属性用作缩写以指定其他多个背景属性。

用于改变字体样式的属性是哪个？

font-family属性用于改变字体样式。

用于使字体倾斜或斜体的属性是哪个？

font-style属性用于使字体倾斜或斜体。

用于创建小型大写字母效果的属性是哪个？

font-variant属性用于创建小型大写字母效果。

用于增加或减少字体的粗细程度的属性是哪个？

font-weight属性用于增加或减少字体的粗细程度。

用于增加或减少字体大小的属性是哪个？

font-size属性用于增加或减少字体大小。

用作缩写以指定其他多个字体属性的属性是哪个？

font属性用作缩写以指定其他多个字体属性。

用于设置文本颜色的属性是哪个？

color属性用于设置文本颜色。

用于设置文本方向的属性是哪个？

direction属性用于设置文本方向。

用于增加或减少单词中组成字母之间的间距的属性是哪个？

letter-spacing属性用于增加或减少单词中组成字母之间的间距。

使用哪个属性来增加或减少句子中单词之间的间距？

word-spacing 属性用于增加或减少句子中单词之间的间距。

哪个属性用于缩进段落的文本？

text-indent 属性用于缩进段落的文本。

哪个属性用于对齐文档中的文本？

text-align 属性用于对齐文档中的文本。

哪个属性用于在文本上加下划线，上划线和删除线？

text-decoration 属性用于在文本上加下划线，上划线和删除线。

哪个属性用于将文本转换为大写、小写或首字母大写？

text-transform 属性用于将文本转换为大写、小写或首字母大写。

哪个属性用于控制文本的流动和格式？

white-space 属性用于控制文本的流动和格式。

哪个属性用于设置文本周围的文本阴影？

text-shadow 属性用于设置文本周围的文本阴影。

哪个属性用于设置图像边框的宽度？

border 属性用于设置图像边框的宽度。

哪个属性用于设置图像的高度？

height 属性用于设置图像的高度。

哪个属性用于设置图像的宽度？

width 属性被用于设置图像的宽度。

哪个属性用于设置图像的不透明度？

-moz-opacity 属性用于设置图像的不透明度。

超链接的哪个属性表示未访问过的超链接？

:link 表示未访问过的超链接。

超链接的哪个属性表示已访问过的超链接？

:visited 表示已访问过的超链接。

超链接的哪个属性表示鼠标指针悬停在其上的元素？

:hover 表示鼠标指针悬停在其上的元素。

超链接的哪个属性表示用户当前点击的元素？

:active 表示用户当前点击的元素。

表的哪个属性指定浏览器是否应控制相邻边框的外观？

border-collapse 属性指定浏览器是否应控制相邻边框的外观，相邻边框是指彼此相邻的边框，或者每个单元格是否应保持自己的样式。

表的哪个属性指定在表格单元格之间应显示的宽度？

border-spacing 属性指定在表格单元格之间应显示的宽度。

哪个属性控制表格标题的位置？

表格标题通过<caption>元素来呈现。默认情况下，标题在文档中的表格上方呈现。可以使用caption-side属性来控制表格标题的位置。

哪个属性指定当单元格为空时是否显示边框？

empty-cells属性指定当单元格为空时是否显示边框。

哪个属性允许浏览器通过使用第一个宽度属性来加快表格的布局？

table-layout属性允许浏览器通过使用遇到的第一个宽度属性来加快表格的布局，而不是在渲染表格之前必须加载整个表格。

哪个属性指定边框的颜色？

border-color属性指定边框的颜色。

哪个属性指定边框应该是实线、虚线、双线或其他可能的值之一？

border-style属性指定边框应该是实线、虚线、双线或其他可能的值之一。

哪个属性指定边框的宽度？

border-width属性指定边框的宽度。

哪个属性用于在一条声明中设置边距属性的简写属性？

margin属性用于在一条声明中设置边距属性的简写属性。

哪个属性指定元素的底部边距？

margin-bottom属性指定元素的底部边距。

哪个属性指定元素的顶部边距？

margin-top属性指定元素的顶部边距。

哪个属性指定元素的左边距？

margin-left属性指定元素的左边距。

哪个属性指定元素的右边距？

margin-right属性指定元素的右边距。

哪个属性允许您控制列表标记的形状或外观？

list-style-type属性允许您控制列表标记的形状或外观。

哪个属性指定换行到第二行的长点应与列表标记的第一行对齐，还是在列表标记的开始下方开始？

list-style-position属性指定换行到第二行的长点应与列表标记的第一行对齐，还是在列表标记的开始下方开始。

哪个属性指定列表标记的标记为图像而不是实心点或数字？

list-style-image属性指定列表标记的标记为图像而不是实心点或数字。

哪个属性用作列表的样式属性的简写方式？

list-style属性用作列表的样式属性的简写方式。

哪个属性指定了列表中标记和文本之间的距离？

标记偏移（marker-offset）属性指定了列表中标记和文本之间的距离。

哪个属性指定了元素的底部内边距？

底部内边距（padding-bottom）属性指定了元素的底部内边距。

哪个属性指定了元素的顶部内边距？

顶部内边距（padding-top）属性指定了元素的顶部内边距。

哪个属性指定了元素的左侧内边距？

左侧内边距（padding-left）属性指定了元素的左侧内边距。

哪个属性指定了元素的右侧内边距？

右侧内边距（padding-right）属性指定了元素的右侧内边距。

哪个属性作为元素所有内边距属性的简写形式？

内边距（padding）作为元素所有内边距属性的简写形式。

哪个属性允许你指定应显示给用户的光标类型？

CSS的cursor属性允许你指定应显示给用户的光标类型。

哪个光标属性值根据所处区域的上下文而改变光标形状？

auto − 光标形状取决于所处区域的上下文。例如，在文字上方显示’I’形光标，在链接上显示’hand’形光标，等等。

哪个光标属性值将光标更改为十字线或加号？

crosshair − 十字线或加号。

哪个光标属性值将光标更改为箭头？

default − 箭头。

哪个光标属性值将光标更改为手型？

pointer − 指向的手型（在IE 4中，此值为hand）。

哪个光标属性值将光标更改为’I’形光标？

move or text − ‘I’形光标。

哪个光标属性值将光标更改为沙漏形式？

wait − 沙漏形式。

哪个光标属性值将光标更改为问号形式？

help − 问号或气球形式，非常适用于帮助按钮。

可以将图像设置为光标显示吗？

可以！将URL设置为光标图像文件的源。

用于设置轮廓的宽度的属性是什么？

outline-width属性用于设置轮廓的宽度。

用于设置轮廓线样式的属性是什么？

outline-style属性用于设置轮廓线样式。

用于设置轮廓颜色的属性是什么？

outline-color属性用于设置轮廓颜色。

哪个属性用于一次性设置所有边框属性？

outline属性用于一次性设置所有边框属性。

哪个属性用于设置盒子的高度？

height属性用于设置盒子的高度。

哪个属性用于设置盒子的宽度？

width属性用于设置盒子的宽度。

接下来是什么

进一步可以回顾你过去在这个主题上完成的作业，并确保你能够自信地谈论它们。如果你是初学者，面试官并不希望你回答非常复杂的问题，而是希望你将基础概念打牢固。

其次，如果你无法回答一些问题，其实并没有太大关系，更重要的是你必须自信地回答你知道的问题。所以在面试过程中要保持自信。我们在教程点祝你找到一个好的面试官，祝你未来一切顺利。加油！:-)