CSS面试问题（CSS Interview Questions）

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

以下是使用CSS的优点 -

• CSS saves time - 您可以编写一次CSS，然后在多个HTML页面中重复使用相同的工作表。 您可以为每个HTML元素定义样式，并将其应用于任意数量的Web页面。

• Pages load faster - 如果您使用的是CSS，则无需每次都编写HTML标记属性。 只需编写一个标记的CSS规则，并将其应用于该标记的所有实例。 因此代码越少意味着下载时间越短。

• Easy maintenance - 要进行全局更改，只需更改样式，所有网页中的所有元素都将自动更新。

• Superior styles to HTML - CSS具有比HTML更广泛的属性，因此与HTML属性相比，您可以更好地查看HTML页面。

• Multiple Device Compatibility - 样式表允许针对多种类型的设备优化内容。 通过使用相同的HTML文档，可以为诸如PDA和手机之类的手持设备呈现不同版本的网站或用于打印。

• Global web standards - 现在不推荐使用HTML属性，建议使用CSS。 因此，最好在所有HTML页面中开始使用CSS，以使它们与未来的浏览器兼容。

• Offline Browsing - CSS可以在离线catche的帮助下本地存储Web应用程序。使用此功能，我们可以查看离线网站。缓存还可确保更快的加载速度和更好的网站整体性能。

• Platform Independence - 脚本提供一致的平台独立性，并且还可以支持最新的浏览器。

风格规则由三部分组成 -

• Selector - 选择器是将应用样式的HTML标记。 这可以是任何标签，如“h1”或“表”等。

• Property - 属性是HTML标记的一种属性。 简而言之，所有HTML属性都转换为CSS属性。 它们可以是颜色，边框等。

• Value - 将值分配给属性。 例如，color属性可以是红色值或＃F1F1F1等。

类型选择器非常简单地匹配元素类型的名称。 为所有1级标题提供颜色 -

h1 {
   color: #36CFFF; 
}

通用选择器非常简单地匹配任何元素类型的名称，而不是选择特定类型的元素 -

* { 
   color: #000000; 
}

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

假设您希望仅在特定元素位于特定元素内时才将样式规则应用于特定元素。 如以下示例所示，样式规则仅在em元素位于ul标记内时才适用于em元素。

ul em {
   color: #000000; 
}

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

.black {
   color: #000000; 
}

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

你可以把它变得更加特别。 例如 -

h1.black {
   color: #000000; 
}

此规则仅将h1元素的内容设置为黑色，并将class属性设置为黑色。

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

#black {
   color: #000000; 
}

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

你可以使它更具特色。 例如 -

h1#black {
   color: #000000; 
}

此规则仅将h1元素的内容设置为黑色，并将id属性设置为黑色。

考虑以下示例 -

body > p {
   color: #000000; 
}

如果它们是元素的直接子元素，则此规则将呈现所有黑色段落。 放在其他元素（如

您还可以将样式应用于具有特定属性的HTML元素。 下面的样式规则将匹配具有text属性值的text属性的所有输入元素 -

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

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

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

p [lang =“fr”] - 选择其lang属性值恰好为“fr”的所有段落元素。

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

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

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

• Embedded CSS - “样式”元素:您可以使用“样式”元素将CSS规则放入HTML文档中。

• Inline CSS - 样式属性:您可以使用任何HTML元素的样式属性来定义样式规则。

• External CSS - “链接”元素:“link”元素可用于在HTML文档中包含外部样式表文件。

• Imported CSS - @import规则:@import用于以类似于“link”元素的方式导入外部样式表。

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

• 任何内联样式表都具有最高优先级。 因此，它将覆盖在任何外部样式表文件中定义的 ... 标记或规则中定义的任何规则。

• style 标记中定义的任何规则都将覆盖任何外部样式表文件中定义的规则。

• 外部样式表文件中定义的任何规则都具有最低优先级，并且仅当上述两个规则不适用时，才会应用此文件中定义的规则。

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

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

cm - 以厘米为单位定义测量值。

div {margin-bottom: 2cm;}

em - em空间中字体高度的相对度量。 因为em单位等于给定字体的大小，如果你将字体分配给12pt，每个“em”单位将是12pt; 因此，2em将是24pt。

p {letter-spacing: 7em;}

ex - 此值定义相对于字体x高度的度量。 x高度由字体的小写字母的高度决定。

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

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

p {word-spacing: .15in;}

mm - 以毫米为单位定义测量值。

p {word-spacing: 15mm;}

pc - 以picas定义测量值。 异食癖相当于12分; 因此，每英寸有6皮卡。

p {font-size: 20pc;}

pt - 以点为单位定义测量值。 一个点定义为1/72英寸。

body {font-size: 18pt;}

px - 以屏幕像素定义测量值。

p {padding: 25px;}

vh - 视口高度的1％。

h2 { font-size: 3.0vh; }

vw - 视口宽度的1％。

h1 { font-size: 5.9vw; } 

vmin 1vw或1vh，以较小者为准。

p { font-size: 2vmin;}

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

有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属性用于在组成单词的字母之间添加或减去空格。

单词间距属性用于在句子的单词之间添加或减去空格。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border-collapse指定浏览器是否应控制相互接触的外观，或者每个单元格是否应保持其样式。

border-spacing指定表格单元格之间应出现的宽度。

标题侧标题显示在caption元素中。 默认情况下，它们呈现在文档中的表格上方。 您可以使用标题侧属性来控制表格标题的位置。

空单元格指定在单元格为空时是否应显示边框。

表格布局允许浏览器通过使用它为列的其余部分提供的第一个宽度属性来加速表的布局，而不必在呈现之前加载整个表。

border-color指定边框的颜色。

border-style指定边框是实线，虚线，双线还是其他可能值之一。

border-width指定边框的宽度。

保证金指定了一个简写属性，用于在一个声明中设置保证金属性。

margin-bottom指定元素的下边距。

margin-top指定元素的上边距。

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

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

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

list-style-position指定包裹到第二行的长点是否应与第一行对齐或从标记的开头下面开始。

list-style-image指定标记的图像而不是项目符号或数字。

列表样式用作样式属性的简写。

marker-offset指定标记与列表中文本之间的距离。

padding-bottom指定元素的底部填充。

padding-top指定元素的顶部填充。

padding-left指定元素的左边距。

padding-right指定元素的右边距。

填充用作所有填充属性的简写。

CSS的cursor属性允许您指定应向用户显示的游标类型。

auto - 光标的形状取决于它结束的上下文区域。 例如，文本上的“我”，链接上的“手”，等等。

十字准线 - 十字准线或加号。

默认 - 箭头。

指针 - 指针（在IE 4中，此值为手）。

移动或发短信 - '我'栏。

等 - 一小时玻璃。

帮助 - 问号或气球，非常适合在帮助按钮上使用。

是! 将url设置为游标图像文件的源。

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

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

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

outline属性用于在单个语句中设置所有大纲属性。

height属性用于设置框的高度。

width属性用于设置框的宽度。