Home >Web Front-end >CSS Tutorial >26 CSS interview questions worth collecting to enhance your CSS foundation!

26 CSS interview questions worth collecting to enhance your CSS foundation!

青灯夜游forward: 2021-07-06 10:19:132511browse

CSS is very popular in web design to reduce complexity and repetition in structured content. This article shares 26 CSS-based interview questions with you, which can enhance your CSS foundation. Come and learn.

(Learning video sharing: css video tutorial)

CSS is Cascading Style Sheets(Cascading Style Sheets)# The abbreviation of ## is a style sheet language used to describe the layout of documents written in markup languages such as HTML. It is one of the three musketeers used to design web pages, the other two being HTML and Javascript.

CSS is designed to keep style and content separate, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of style features, and enable multiple Web pages are able to share formats and reduce complexity and duplication in structured content.

It has a simple syntax and uses a large number of English keywords to specify the names of various style attributes.

Now that we have discussed the basics of CSS, let’s look at important CSS-based interview questions.

Question 1: What is CSS?

CSS (Cascading Style Sheets)

is a styling language that is simple enough for HTML elements. It is very popular in web design, and its application is also common in XHTML.

Question 2: Why develop CSS?

CSS

was developed in 1997 as a way for web developers to design the layout of the web pages they were creating. Its purpose is to allow developers to separate the content and structure of website code from the visual design.

This separation of structure and design allows HTML to perform more functions than it could originally.

Question 3: What are the major versions of CSS?

Different versions of CSS:

CSS1

CSS2
CSS2.1
CSS3

A style rule consists of three parts:

– The selector is an HTML tag used to select the style to be set. Content. It selects HTML elements based on their
ID, class and name.
– An attribute is an attribute of an HTML tag. In short, all HTML properties are converted into CSS properties.
– Values in CSS define a set of valid values for a CSS property.

CSS can be integrated into three ways

Inline

: Used directly on HTML elements

<p style=”colour:skyblue;”>hello world</p>

External

: Create separate CSS files in the workspace and then in each web page created Link them

<head>

<link rel="text/css" href="your_CSS_file_location"/>

</head>

Internal

: The head element of a web page has internal CSS implemented in it.

<head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

Question 6: Who maintains the CSS specification?

The World Wide Web Consortium maintains the CSS specification.

Question 7: What does pseudo element mean?

Pseudo elements are keywords added to a selector that allow a styling of a specific part of the selected element. CSS is used to apply styles within HTML markup, which allows additional markup to the document without affecting the actual document. It can be used to:

Set styles for the first letter, line, or element.

Insert content
Grammar:

Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}

Question 8: What are the advantages of CSS?

The advantages of CSS are:

– CSS helps to build a consistent framework that designers can work with to build other sites. As a result, the efficiency of web designers also increases.
– CSS is very easy to learn and simplifies website development. All code is placed on one page, which means that improvements or edits to lines of code do not need to be repeated across multiple pages.
*– Typically, a website can use up to
2 pages or more of code. But with CSS, this is not a problem. It requires only 2-3 lines of code, therefore, the website database remains clean and eliminates any website loading issues.
– Since people use different types of smart devices to access the internet, responsive web design is required. The role of CSS here is to make web pages more responsive so that they display the same way across all devices.
– CSS enjoys multi-browser support and it is compatible with all major internet browsers.
Repositioning – CSS allows you to define changes in the position of web elements on the page. Its implementation allows developers to place HTML elements wherever they like, consistent with the page's aesthetic appeal or other considerations.

Question 9: What is CSS gradient?

Gradient is the process by which we create an intermediate frame between two images to get the look of the first image and then develop into the second image. It is mainly used to create animations.

Question 10: What is CSS specificity?

CSS specificity is a score or level that determines which style declaration an element must use. There are four categories in CSS that can grant specific levels of selectors:

Inline styles
ID
Classes, Attributes and Pseudo-Classes
Elements and Pseudo-Elements

##Question 12: What are the Disadvantages of CSS

Disadvantages of CSS are:

#Too many versions – CSS has many versions compared to other parameters like HTML or Javascript-CSS1 , CSS2, CSS2.1, CSS3. As a result, CSS becomes very confusing, especially for beginners.
Lack of Security - Since CSS is an open text based system, it does not have a built-in security system to prevent it from being overwritten. With read/write access to it, anyone can change the CSS file and change the links.
Fragmentation - Using CSS, it may not work from one browser to another. Therefore, before a website goes live, web developers must test compatibility by running the program on multiple browsers.
Complexity – Using third-party software such as Microsoft FrontPage can make CSS complex.

Question 13: What is RWD (Responsive Web Design)?

RWD (Responsive Web Design) technology is used on every screen Size and display the design page perfectly on devices such as mobile, tablets, desktops and laptops, eliminating the need to create different pages for each device.

Question 14: What are the benefits of CSS elves?

The benefits of CSS elves are:

By combining various small Images are combined into one image, reducing web page load time.
Reduce HTTP requests, thereby reducing load times.

Question 15: What is a CSS context selector?

Context selector, strictly speaking, is called

Descendant combined selector, which is a set of tag names separated by spaces. Used to select tags that are descendants of the specified ancestor element. As long as a tag has such an ancestor "upstream" in its hierarchy, the tag will be selected. It doesn't matter how many levels there are between the tag and the context that is the ancestor.

Question 16: What are progressive enhancement and smooth degradation?

The concept of progressive enhancement refers to starting from the most basic usability, while ensuring Site pages build on their usability and accessibility in low-level browsers, gradually adding functionality and improving the user experience. In essence, some of our daily development habits, such as first using markup language to write pages, and then controlling the page style through style sheets, all belong to the concept of progressive enhancement; other more obvious behaviors include the use of new technologies such as HTML5 and CSS3 , for advanced browsers to improve the richness of user experience for pages.

The concept of smooth degradation refers to first using the latest technology to build the strongest functions and user experience for advanced browsers, and then gradually reducing those that cannot be supported based on the limitations of low-level browsers. functions and experience; in our daily development, a typical example of smooth degradation is to first write the page code for Chrome, and then fix the exceptions in IE or remove those functional features that cannot be implemented for IE.

So, these two conceptual methods have actually coexisted in our daily development work for a long time, but the terms "progressive enhancement" and "smooth degradation" have only begun to be popularized in recent years. In our current practical application of HTML5 and CSS3, these two concepts are particularly important. How to ensure that the ever-changing new technologies are used to build a site with basic usability under mainstream browsers, and to improve the experience for advanced browsers? These are the ideas we need to be clear about during the development process.

Question 17: How do we add icons to web pages?

We can use icon libraries such as

font-awesome or Alibaba’s iconfont to add icons to HTML web pages. We have to add the name of the given icon class to any inline HTML element. (5a8028ccc7a7e27417bff9f05adf5932 or 45a2772a6b6107b401db3c9b82c049c2). The icons in the icon library are scalable vectors and can be customized using CSS.

Question 18: Which attribute specifies the width of the border?

border-widthSpecify the width of the border.

问题 19：如何区分物理标签和逻辑标签?

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

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<b>我想用b标签加粗</b>
 
//逻辑元素
<strong>我想用strong标签加粗</strong>
 
//两段文字都加粗了，而且视觉效果完全一样

确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？

物理元素

物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。

Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做，从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。

问题 20：如何在CSS中定义一个伪类?它们是用来干什么的

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

selector:pseudo-class{property:value;}

问题 21：CSS和SCSS有什么区别？

CSS 和 SCSS 之间的区别如下：

CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 22：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 23：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。他们是：

aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器

问题 24：font 的属性有哪些？

Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family

问题 25：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。

问题 26：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

英文原文地址：https://codersera.com/blog/top-css-interview-questions-and-answers/

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of 26 CSS interview questions worth collecting to enhance your CSS foundation!. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 css chrome css3 scss html xhtml print 选择器样式表 border 伪类伪元素数据库 http https microsoft 搜索引擎 SEO

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to hide css font overflowNext article：How to hide css font overflow

See more

26 CSS interview questions worth collecting to enhance your CSS foundation!

CSS (Cascading Style Sheets)

CSS

Different versions of CSS:

A style rule consists of three parts:

CSS can be integrated into three ways

The World Wide Web Consortium maintains the CSS specification.

Pseudo elements are keywords added to a selector that allow a styling of a specific part of the selected element. CSS is used to apply styles within HTML markup, which allows additional markup to the document without affecting the actual document. It can be used to:

The advantages of CSS are:

Question 9: What is CSS gradient?

Question 10: What is CSS specificity?

##Question 12: What are the Disadvantages of CSS

Question 13: What is RWD (Responsive Web Design)?

Question 14: What are the benefits of CSS elves?

Question 15: What is a CSS context selector?

Question 16: What are progressive enhancement and smooth degradation?

Question 17: How do we add icons to web pages?

Question 18: Which attribute specifies the width of the border?

问题 19：如何区分物理标签和逻辑标签?

问题 20：如何在CSS中定义一个伪类?它们是用来干什么的

问题 21：CSS和SCSS有什么区别？

问题 22：嵌入式样式表的优缺点是什么？

问题 23：列出使用的各种媒体类型。

问题 24：font 的属性有哪些？

问题 25：“规则集”是什么意思？

问题 26：什么是 CSS 框架？

Related articles