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.
It has a simple syntax and uses a large number of English keywords to specify the names of various style attributes.
Question 1: What is CSS?
Question 2: Why develop CSS?
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?
ID, class and name.
Inline
: Used directly on HTML elements<p style=”colour:skyblue;”>hello world</p>
<head> <link rel="text/css" href="your_CSS_file_location"/> </head>
<head>
<style>
P{
color : lime;
background-color:black;
}
</style>
</head>Question 7: What does pseudo element mean?
Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}Question 8: What are the advantages of CSS?
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.
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.
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.
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
#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.
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.
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.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. ( or ). The icons in the icon library are scalable vectors and can be customized using CSS.
border-widthSpecify the width of the border.
物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。
如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单
//物理元素 <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方面，则针对优化情况而定。
CSS伪类是用来添加一些选择器的特殊效果。伪类的语法
selector:pseudo-class{property:value;}CSS 和 SCSS 之间的区别如下：
CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。
嵌入式样式表的优点:
可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。
嵌入式样式表的缺点：
无法控制多个文档。
不同的介质不区分大小写，因此它们具有不同的属性。 他们是：
aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器
Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family
该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
