You don't know the history of the relationship between HTML and CSS.

HTML and CSS

History of Style sheets in popular science

Since the beginning of the 1990 's, HTML was invented,
As an HTML-code-assisted style sheet,
appear in various forms;

Initially, different browsers combined their own style language,
Readers can use these style languages to adjust the way Web pages are displayed;
The first style sheet is for the reader,
The initial HTML version contains only a few display properties,
Readers to decide how the page should be displayed.

But with the growth of HTML, in order to meet the requirements of designers,
HTML has a lot of special effects display functions,
With the increase of these functions,
The foreign definition of the style of the language is more and more meaningless.

1994 Hakun put forward the original ideas and suggestions of CSS,
namely "cascading Style Sheets";
1995 Burt Posse (Bert Bos) involved,
Work with Hakun to design CSS.
　　
There had been some thought of the stylesheet language,
But CSS is the first to have a "cascade" concept;
In CSS,
The style of a file can be inherited from other style sheets,
The reader can use his own preferred style in some places,
Other places inherit or "Cascade" the author's style,
This cascading approach allows both the author and the reader the flexibility to join their own design,
They can also retain or mix their preferences.

At that time, the development of the CSS was very interesting,
Even a seminar was organized specifically for this purpose,
Hakun, Persia and others (such as Microsoft's Thomas Relden)
is the main technical director of the project.

1996 at the end of December the first version of CSS was published.

Early 1997,
A CSS working group dedicated to the Chris Riley is organized within the
Start discussing issues not covered in the first edition,
The result is the second edition, published in May 1998.

Using Css+div for Web page refactoring,
Relative to the traditional table page layout, there are 3 notable advantages:
1.
Separation of performance and content,
The design section is stripped out and placed in a separate style file,
Only text information is stored in the HTML file,
Page content is easier to retrieve (ie easily crawled by search engines);
2.
Improve page browsing speed,
For the same page visual effect,
Using the Css+div refactoring page,
Capacity is much smaller than the size of the table-encoded paging file,
Thus reducing the compiler load of the browser;
3.
Easy maintenance and revision,
You simply modify the configuration within a few CSS,
You can redesign the page for the entire site.

Attached: Some popular concepts explained
Basic Classroom Address: html/css/javascript/jquery Front-end development small white to ... ：
https://ke.qq.com/course/256212?flowToken=1001082
"1" url
A modern web site usually refers to a website address that can be accessed remotely.
But the original "url" simply refers to the number or name of a switch or server in the network,
This "network" is even only connected by two computers with their own operating functions,
And modern refers to everything with the ability of remote interaction computing or storage network;
A URL is a "Uniform Resource Locator", which usually points to the address of a server;
http: is the URL that supports HTTP protocol;
FTP: Is the URL that supports the document Transfer Protocol, GOPHER: for GOPHER retrieval,
HTTPS: SSL encryption is added to the HTTP;
Domain name
is the name of a computer or computer group on the Internet that consists of a string of dot-delimited characters,
Used to identify the electronic orientation of the computer during data transfer
(sometimes referred to as geographical location, geographical domain name, refers to a local area with administrative autonomy).
It is also a "mask" on an IP address.
"2" Web page
A webpage is a visual page that contains information such as content and data, which is read through a browser;
Web pages convert server data into visual controls through a browser or other visualizer.
"3" Browser
The analysis of external data, on the terminal system platform, the use of visual interface to display information,
Such a complete process requires a tool or software to implement,
The software commonly used to browse and read as the main function is called "browser";
If it is to modify the source code or compile the main software,
It is generally not called a "browser".
"4" style sheet
Define the parameters of the visualization through a separate style configuration,
Enables the browser to get the configuration of views and controls faster,
Simplifies the complexity of server data,
Reduces the load on the data parsing refactoring by the browser,
It also improves the reusability and normalization of configuration code for views and controls.

Attached: What is cascadingstylesheets (cascading style sheets)?

CSS = = Cascadingstylesheets
(Cascading style sheets)

The CSS language is a markup language,
It can be interpreted directly by the browser (which belongs to the browser-interpreted language).

In the standard web design
CSS is responsible for the performance of Web content;
CSS files can also be said to be a text file,
It contains a few CSS tags,
CSS files must use CSS as the filename suffix;
You can change the configuration in the CSS file by simply
To change the overall form of the Web page,
Can reduce the amount of code and workload;
CSS standards are developed and maintained by the CSS Working Group.

Attached: the process of displaying Web pages in a regular browser
1.
The order in which the browsers are downloaded is from top to bottom,
The order of rendering is also from top to bottom,
Download and rendering are done at the same time.
2.
When rendering to a portion of a page,
All the above sections have been downloaded and completed
(not that all associated elements have been downloaded);
3.
If you encounter semantic explanatory tags embedded in the file
(JS script, CSS style),
Then the download process of the browser will enable a separate connection to download;
4.
After the download, the script and style are parsed,
The download of elements that are paused after parsing;
5.
After the download is complete, the style sheet
Parses all the style sheets that were downloaded before the call,
And after parsing is complete
Re-renders all previous elements (including those previously rendered);
6.
If there is a redefinition in the script and the style,
The configuration defined later overrides the pre-defined configuration.

The rendering efficiency is related to the following three points:
1.CSS Selector's query location efficiency,
2. Browser rendering modes and algorithms,
3. The size of the content to be rendered.

Attached: browser-to-CSS matching principle

Browser css matches are not searched from left to right,
Instead, the search is made from right to left.
Like what
div#divboxpspan.red{color:red;},
The browser looks in the following order:
Find the span element for all class= ' red ' in HTML first,
Once found, find out if there is a P element in its parent element,
Then determine if there is a DIV element with ID divbox in the parent element of P,
If all exist then match according to CSS.

Benefits of Browser Lookup from right to left
is to filter out irrelevant styling rules and elements as early as possible.
Firefox calls this search method a
Keyselector (keyword query),
The so-called keyword is the last (rightmost) rule in the style rule,
The key above is span.red.

Attached: How to use CSS style sheets

There are three ways to use CSS style sheets in HTML pages:
1.
Inline style sheet:
The style is defined in a single element,
Written in the style attribute of the element;
2.
Internal style sheet:
The style is defined in the header element of the HTML page;
3.
External style sheet:
Define the style in an external CSS file,
The style sheet file is then referenced by the HTML page.

Attached: How to understand the cascading nature of CSS style sheets

CSS uses cascading (Cascade) principles to consider
inheritance, stacking order, and precedence
Such important characteristics as to determine which rule should be relied upon in conflicting rules.

Inheritance:
Many CSS style rules affect not only the elements defined by the selector,
And will be inherited by the descendants of these elements;

Stacking:
When a Web page uses more than one style sheet,
Styles in multiple style sheets can cascade to one;
When there are no conflicts between styles defined in multiple style sheets,
The browser will display all the styles.

Priority level:
When a style definition conflict occurs,
The browser will first apply styles according to the precedence of the different style rules;
At the same priority level, whichever is the last defined style;
The precedence of CSS styles is as follows (where the number 3 has the highest precedence):
1.
browser default settings;
2.
External style sheet (. css file) or internal style sheet (inside the 3.
Inline style (as the value of the style property of an element).

Attached: What is the difference between the element selector and the class selector in the CSS selector?

In CSS, selectors are a pattern,
Lets you select the element that you want to add a style to.

The element selector is the most common CSS selector,
That is, the element of the document is the most basic selector;
A selector is usually an HTML element,
such as <p>, It can even be the

Class selector is used to match a style rule to an element that comes with a class attribute.
Where the value of the Class property is the value specified in the class selector;
When using a class selector, you first need to define a style class whose syntax is:
. ClassName {}
All elements that can have a class attribute can use this style declaration;
You only need to set the value of the class property to "ClassName",
You can associate the style of a class selector with an element.

If you need to define a style for an element when you are actually using it,
The element selector is often used;
If you want to apply a style without considering the elements of a specific design,
The most common method is to use the class selector.

You don't know the history of the relationship between HTML and CSS.