Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

What is CSS? What does it do?


May 31, 2021 Article blog


Table of contents


CSS is an abbreviation for Cascading Styke Sheet. i s a marker language used (enhanced) to control the style of rendered pages and to allow CSS style information to run separately from page HTML content. C SS does not require compilation and can be executed directly by the browser (which is the browser explanatory language). C SS is a domain language (DSL) that overlaps and inherits to give CSS elegant and infinite creativity. I t is precisely because it is so "simple", we need to learn it more fully, easy to use it, so that our web pages live flexible present.

history

  • CSS was first proposed in 1994;
  • The earliest browser support was in 1996;
  • In 1996, W3C officially launched CSS1;
  • In 1998, W3C officially launched CSS2;
  • CSS2.1 is currently recommended by W3C;
  • CSS3 is still under development;
  • CSS 3 is improved to include all CSS 2 support, so you don't have to worry about compatibility issues.

CSS also supports a variety of devices, such as mobile phones, TVs, slideshows, printers, etc., but CSS has been better promoted in browsers.

CSS syntax

selector{property:value; }

 What is CSS? What does it do?1

How to introduce it

There are three ways to add style sheets to your page:

Inline style Inline Styles

Inline is the style property definition that uses an object within an element's markup to define the style sheet properties that apply to it.

 What is CSS? What does it do?2

Internal style block object Embing a Style Block

You can insert a <style> > object into the < <head> tag of your HTML document.

 What is CSS? What does it do?3

External style sheet Linking to a Style Sheet

You can first establish an external style sheet file, .css, and then use HTML's link object. Or use the @import to introduce it.

<! - Using the LINK Element ->
<linkĀ rel="stylesheet" href="code.css">


<! - Use @Import ->

<style>

@importĀ url("demo.css")

</style>

Note: In real-world development, it is recommended to use HTML link objects for introduction.

Selector weight

 What is CSS? What does it do?4

The weights are divided into four levels:

  • First class: represents an inline style, such as: style="" with a weight of 1000
  • Second class: represents the ID selector, such as: #content the weight is 100
  • Third class: represents classes, pseudoclasses, and property selectors, such as .content with a weight of 10
  • Fourth, it represents the label selector and the pseudo-element selector, such as: div p with a weight of 1

 What is CSS? What does it do?5

Priority

Follow these rules:

  • Selectors have a weight, the greater the weight, the more priority;
  • When the weights are equal, the style sheet settings that appear later are better than the style sheet settings that appear first;
  • The author's rules are higher than the viewer's: that is, the CSS style set by the web page writer takes precedence over the style set by the browser;
  • The inherited CSS style is not as good as the CSS style later specified;
  • The !important rule is marked with the highest priority in the same set of property settings

 What is CSS? What does it do?6

The above is the use of CSS, CSS a variety of styles and so on you to explore, small compilation of the online popular courses and practice for you to strengthen learning