15个CSS问题测试你的知识

你对CSS了解多少?通过尝试回答这篇文章中的CSS问题来测试你的知识。这些问题分为三类:

  1. 基本的CSS问题
  2. 中级CSS问题
  3. 高级CSS问题

这组CSS问题是我们之前收集的问题的后续HTML的问题。(你也可以看看这个。)没有时间限制,也没有分数追踪。在你完成这15个具有挑战性的问题后,请在评论中随意谈论你的结果。

CSS基本问题

问题1

下面哪个是一个有效的边框样式属性值吗?

  • 有点的
  • 插图
  • 上釉
  • 固体

看看答案

回答

上釉边框样式属性值的视觉指南- w3.org”width=来源:w3.org你可以看到所有的边框样式属性值“4.2。Line Patterns: border-style属性W3C节CSS背景和边框模块3级规格。

问题2

下面哪个是一个有效的CSS长度单位?

  • 厘米
  • dm
  • 新兴市场
  • 毫米

看看答案

回答

dm厘米毫米绝对长度单位新兴市场是一个font-relative长度

问题3

什么是CSS选择器,它可以让你在网页中定位每个元素?

看看答案

回答

通用选择器(*).下面的样式规则使用通用选择器将所有HTML元素的边距和内边距设置为零:

*{边距:0;填充:0;}

相关:你应该重置你的CSS吗?

问题4

哪个CSS属性允许你隐藏一个元素,但仍然保持它在网页中占据的空间?

看看答案

回答

可见性不透明度有几种方法可以用CSS隐藏HTML元素。

设置可见性元素to的属性隐藏的将隐藏元素。元素仍将在网页中占据与其几何尺寸相等的空间。例如,如果隐藏元素的尺寸是100x100px,您将在元素所在的区域看到一个100x100px的空白空间。

隐藏元素也可以通过赋值来实现透明度:0到一个元素。隐藏一个元素而不保留它在网页中占用的空间可以通过设置元素的值来实现显示财产没有一个。设置显示没有一个渲染元素,就好像它不存在一样。

问题5

有16个基本色彩关键词在CSS。以下哪些是基本颜色关键词?

  • 橄榄
  • 樱红色
  • 青色
  • 阿卡
  • 栗色

看看答案

回答

青色青色是有效的颜色关键字。但它不是基本色彩关键词。的青色Color关键字被记录为扩展颜色关键词

相关:CSS颜色介绍

问题6

字体样式CSS属性四个不同的有效值。三个这些值中有继承正常的,斜体显示。另一个有效值是什么?

看看答案

回答

读了字体样式的文档在MDN上了解更多关于这个CSS属性的信息。

相关:CSS排版:基础

问题7

下面两个选择器中哪个有a更高的CSS特异性?选择器1

#对象h2::首字母

选择器2

Body .item div h2::首字母:hover

看看答案

回答

选择1:#对象h2:首字母的特异性值选择器1是102。的特异性值选择器2是24。相关:CSS专用性是如何工作的

中级CSS问题

问题8

是什么?理想的以下伪类选择器在样式表中的顺序?

  • :主动
  • :徘徊
  • :链接
  • :参观

看看答案

回答

  1. :链接
  2. :参观
  3. :徘徊
  4. :主动

一个元素可以同时匹配多个伪类选择器。这就是为什么上述伪类的顺序至关重要的原因。我们知道,如果两个选择器在专一性上相等,默认情况下,样式表下部的选择器获胜。

可以通过超链接元素清楚地看到这个问题。假设您将鼠标指针悬停在链接上,然后单击链接而不移动鼠标。这种情况意味着链接与两者都匹配:徘徊:主动选择器。

所以如果:主动样式规则在:徘徊样式规则-例如-用户永远不会看到:主动应用了样式规则。这是因为:徘徊样式规则将总是覆盖它。你可以通过记忆缩写词来记住理想的顺序,LVHA

链接参观了徘徊

活跃的相关:要了解有关此主题的更多信息,请阅读CSS链接伪类。同时,找出为什么:visited伪类很奇怪

问题9

下面哪个CSS属性影响盒子模型吗?

  • 内容
  • 填充
  • 保证金
  • 大纲
  • 边境

看看答案

回答

大纲这是一部分大纲房地产的规范:

使用outline属性创建的轮廓被绘制在一个框上,也就是说,轮廓总是在顶部,并且不会影响框或任何其他框的位置或大小。因此,显示或抑制轮廓不会导致回流或溢出。18.4动态轮廓:outline属性

问题10

在使用媒体查询时,下列哪项是有效的媒体类型?

  • 电视
  • 所有
  • 的声音
  • 打印
  • 盲文
  • tty
  • 压花

看看答案

回答

的声音中可以找到所有有效的媒体类型媒体查询W3C规范。的声音不是有效的媒体类型。尽管有演讲媒体类型。

问题11

五个的通用字体族值字体类型财产。三个下面列出了其中的一些。其他两个通用字体族值是什么?

  • 衬线
  • 无衬线
  • 等宽字体

看看答案

回答

  • 草书
  • 幻想

通过阅读来详细了解通用字体族“3.1.1通用字体族”CSS字体模块3级相关:@font-face的基本指南

问题12

什么颜色关键字将总是等于计算颜色所选元素/元素的属性值?

看看答案

回答

currentColor下面是一个示例背景颜色边境的Color属性值将等于.box元素:

.box{颜色:绿色;background - color: currentColor;border: 1px;}

的好处currentColor关键字是,我们只需要在一个地方改变颜色值。

我们可以改变这个的值颜色属性,更改将级联到其他属性。这个关键字的工作方式与CSS变量非常相似。读“4.4。currentColor color关键字CSS颜色模块级别要了解更多关于这个颜色关键字。略相关:CSS变量简介

CSS高级问题

问题13

下面哪个是一个有效的CSS单元?

  • ch
  • px
  • ems
  • dpcm
  • 年代
  • 赫兹
  • 快速眼动

看看答案

回答

ems

问题14

以下哪个颜色关键词有尚未在W3C规范中提出?

  • blanchedalmond
  • dodgerblue
  • 桃色
  • orchidblack
  • navajowhite
  • 番茄

看看答案

回答

orchidblack参见“5。命名颜色”CSS颜色模块4级编辑稿查找所有当前建议的颜色关键字。

问题15

什么是CSSat-rule可以让您定义样式表的字符编码?

看看答案

回答

@charset应该始终使用UTF-8作为CSS文件的字符编码。

如果是这种情况,则不需要声明@charset规则。请参阅本指南了解更多信息:在CSS中声明字符编码

你答对了几道题?

哪些问题让你很难回答?在评论中分享你的想法吧。

更新

相关内容

亚历山大·道森是一名网页设计师/开发者和书籍作者,专门研究网页标准、可访问性和用户体验设计。在他的个人网站上了解更多关于他的信息,HiTechy

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。

我们招聘!
查看30多个职位空缺!