Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the high-frequency test points of CSS interview". In daily operation, I believe many people have doubts about what are the high-frequency test points of CSS interview. The editor has consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "what are the high-frequency test points of CSS interview"! Next, please follow the small series to learn together!

CSS is short for Cascading Style Sheets, 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 separate style from content, including layout, color, and fonts. This separation can improve accessibility of content, provide more flexibility and control in the specification of style features, and improve accessibility by creating a separate. .css file enables multiple web pages to share formatting and reduces complexity and duplication in structured content. It has simple syntax and uses a large number of English keywords to specify the names of various style attributes.

Question 1: What is CSS?

CSS(Cascading Style Sheets) is a style 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 the site code from the visual design.

This separation of structure and design allows HTML to perform more functions than it otherwise would.

Question 3: What are the main versions of CSS?

Different versions of CSS:

CSS1

CSS2

CSS2.1

CSS3

Question 4: What are the components of CSS styles?

A style rule consists of three parts:

Selectors-Selectors are HTML tags used to select content to style. It selects HTML elements based on their ID, class, and name.

Attribute-An attribute is an attribute of an HTML tag. In short, all HTML attributes are converted to CSS attributes.

Values-Values in CSS define a set of valid values for CSS properties.

Question 5: How many ways can CSS be integrated into a web page?

CSS can be integrated in three ways:

Inlining: used directly on HTML elements

hello world

External: Create separate CSS files in your workspace and link them in each web page you create

Internal: The head element of the web page implements internal CSS in it.

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

Question 6: Who maintains CSS specifications?

The World Wide Web Consortium maintains the CSS specification.

Question 7: What does pseudo-element mean?

A pseudo-element is a keyword added to a selector that allows a style that is a specific part of the selected element. CSS is used to apply styles to HTML markup, allowing additional markup to be made to documents without affecting the actual document. It can be used to:

Sets the style 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:

Consistency-CSS helps build a consistent framework that designers can use to build other sites. As a result, the efficiency of web designers has also increased.

Easy to use-CSS is very easy to learn and simplifies website development. All the code is on one page, which means that improving or editing lines of code doesn't require multiple page revisions.

* Website Speed *-Typically, a website can use up to 2 pages or more of code. But with CSS, that's not a problem. It only takes 2-3 lines of code, so the website database stays clean and eliminates any website loading issues.

Device compatibility-Because people use different types of smart devices to access the internet, responsive web design is needed. CSS's role here is to make web pages more responsive so they can be displayed the same way across all devices.

Multi-browser support-CSS has multi-browser support and is compatible with all major Internet browsers.

Repositioning-CSS allows you to define changes in the position of web elements on a page. Through its implementation, developers can place HTML elements where they like to be consistent with the aesthetic appeal of the page or other considerations.

Question 9: What is CSS Gradient?

Gradient refers to the process by which we create intermediate frames between two images to get the appearance of the first image and then evolve into the second image, which is mainly used to create animation.

Question 10: What is CSS specificity?

CSS specificity is a score or rating that determines which style declaration an element must use. There are four types of specificity levels in CSS that can authorize selectors:

inline styles

ID

Classes, attributes and pseudo-classes

Elements and pseudo-elements

Question 12: What are the disadvantages of CSS?

The 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 has no built-in security system to prevent it from being overwritten. With access to its read/write operations, anyone can change CSS files and change links.

Fragmentation -With CSS, it may not be possible to use one browser on 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 complicates CSS.

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

RWD(Responsive Web Design) technology is used to display design pages perfectly on every screen size and device such as mobile, tablet, desktop and laptop, eliminating the need to create different pages for each device.

Question 14: What are the benefits of CSS sprites?

The benefits of CSS sprites are:

By combining various small images into one image, the loading time of web pages is reduced.

Reduce HTTP requests, thereby reducing load time.

Question 15: What is CSS Context Selector?

A context selector, technically called a descendant combinatorial selector, is a set of label names separated by spaces. Use to select labels that are descendants of a specified ancestor element. As long as a label has such an ancestor "upstream" in its hierarchy, that label is selected. No matter how many levels there are between the tag and the context as an ancestor, there is no relationship.

Question 16: What is progressive enhancement and stationary degradation?

The concept of progressive enhancement refers to the gradual increase of functionality and user experience from the most basic usability, on the basis of ensuring the usability and accessibility of site pages in low-level browsers. Essentially, some of our everyday development habits, such as first writing pages in markup languages and then controlling page styles through stylesheets, are incremental enhancements; other more obvious behaviors include using new technologies such as HTML5 and CSS3 to enrich the user experience for advanced browsers.

The concept of smooth degradation refers to first using the latest technology to build the strongest features and user experiences for advanced browsers, and then gradually attenuating those features and experiences that cannot be supported for the limitations of lower browsers. In our daily development, a typical example of smooth degradation is to first write page code for Chrome, and then fix anomalies in IE or remove features that cannot be implemented for IE.

So, these two conceptual approaches are already in our daily development work, but the terms "gradual enhancement" and "smooth degradation" have only become popular in recent years. In our current HTML5 and CSS3 combat use, these two concepts are particularly important, how to ensure that the use of constantly changing new technologies to build sites with basic usability in mainstream browsers, and for advanced browsers to enhance the experience, these are our development process needs clear thinking.

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

We can add icons to HTML pages using icon libraries such as font-awesome or Ali's iconfont. We must add the name of the given icon class to any inline HTML element. (or). Icons in the icon library are scalable vectors that can be customized using CSS.

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

border-width Specifies the width of the border.

Question 19: How do you distinguish between physical labels and logical labels?

Physical labels are called presentation tags, while logical labels are useless for appearance. Physical tags are newer versions, while logical tags are older and focused on content.

As the title, our tag element is written, and the browser will render the result, but it is not that simple.

//Physical elements I want to bold with b label//Logical elements I want to bold with strong label//Both paragraphs of text are bold, and the visual effect is exactly the same

Indeed, the text is bold, both of which achieve the purpose we want, but we ignore a problem, since the b label can be bold, then the strong label is also bold, what is the meaning of existence? Since W3C defines two, what is the difference between them? What are the similarities between them?

(1)physical elements

Physical element, also called entity tag, what it does is a kind of physical behavior, for example, above I bold a paragraph of text with b tag, it conveys to the browser, telling the browser that I want to bold this paragraph of text, you can also see from the word Bold, English is only bold meaning, and has no other effect. To sum it up, physical elements tell the browser how to display them.

(2)logical elements

Logic element, from the English literal Strong can be seen that it is emphasized meaning, so we use this logic element (as above strong) to convey to the browser a message emphasizing the importance of a certain paragraph of text, indicating that this text is more important, but also conducive to search engine inclusion.

Web standards advocate that XHTML does not involve specific forms of expression."Emphasis" can be emphasized in bold, or in other ways. It can also change the specific expression of strong through CSS. There is no strong logical label, so it is not necessary to use the b label to indicate that the font is bold. By default, the b label and the strong label have the same emphasis effect. Strong can be defined as other styles to emphasize the effect. However, it is best to comply with the W3C standard. It advocates the separation of content and style. Therefore, it is not recommended to use b tags simply to achieve bold. From the perspective of XHTML document meaningfulness and user experience, strong logical tags are more appropriate, while SEO is based on optimization.

Question 20: How do I define a pseudo-class in CSS? What are they for?

CSS pseudo-classes are used to add special effects to selectors. Syntax of pseudo-classes

selector:pseudo-class{property:value;}

Question 21: What is the difference between CSS and SCSS?

The differences between CSS and SCSS are as follows:

CSS is a style language for designing web pages, and SCSS is used to compose CSS style sheets for browsers.

SCSS provides variables that can be used to shorten code, which is a big advantage over CSS.

Question 22: What are the advantages and disadvantages of embedded style sheets?

Advantages of embedded style sheets:

You can create multiple tag types in a document.

In complex cases, you can use selectors and grouping methods to apply styles.

No additional downloads required.

Disadvantages of embedded style sheets:

Multiple documents cannot be controlled.

Question 23: List the various media types used

Different media are case-insensitive, so they have different properties. They are:

aural -for speech and audio synthesizers

print -for printers

projection -used for presentation of proposals, such as slides

handheld -for small handheld devices

screen -for computer monitors

Question 24: What are the attributes of font?

Font-style

Font-variant

Font-weight

Font-size/line-weight

Font-family

Question 25: What does "rule set" mean?

This directive tells the browser how to render a particular element on an HTML page. It consists of a selector and a declaration block that follows the rule set. Selectors can be attached to other selectors to be identified by a rule set.

Question 26: What is CSS Framework?

CSS framework is a library that allows easier, more standards-compliant Web design using CSS language. Most of these frameworks contain at least one grid as well as more features and other Javascript-based features. Some famous CSS frameworks are ACSS, Bulma, YAML, Foundation, etc.

At this point, the study of "What are the high-frequency test points of CSS interview" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.