CSS study notes_html/css_WEB-ITnose-HTML Tutorial-php.cn

These are the notes I took when I was learning CSS styles. I’ve sorted them out a little. It is also a learning outline.

CSS cascading style sheet learning mainly answers two questions:

(1) What is CSS cascading style sheet used for?

(2) How to use CSS cascading style sheets?

Answer the first question: CSS cascading style sheets beautify HTML. Including color, background, layout and more.

The second question can be broken down into two questions:

(1) How does CSS cascading style work with HTML?

(2) The specific syntax of CSS cascading style sheets, which styles of HTML tags are controlled, and how powerful is CSS?

Regarding question (1), the following is a detailed explanation:

CSS styles can work with HTML in three ways:

A. Embedded style sheet

Use the tag to embed CSS styles directly into the tag node of HTML text.

Inline style sheet

In the HTML tag, add the style general attribute and fill in the CSS content here.

For example: Test title statement

C. External style sheet

Put all used CSS styles into a unified file. The file extension is CSS, for example xx.css.

Then in the HTML text, just use the link reference in the element. For example:

Regarding question (2), haha, we have another It can be broken down into several questions:

(A) What is the CSS syntax?

(B) How does CSS choose to control the specified tag?

(C) What style properties does CSS control?

(D) Ability: Page layout.

Answer to question (A):

The syntax of CSS cascading styles is as follows:

> Attribute: style;

….}

Answer to question (B):

Selector has been mentioned in question (1), yes, by precision By selecting the selector, you can control the specified label. In HTML, in addition to tag names, there are also IDs and classes. These can all be the source of our selectors.

A. HTML tags

For example: p{attribute: style;}

B. Class selector

For example: .one{attribute: style;}

C. ID selector

For example: #one{Attribute: style;}

D. Association selectors

For example: table a{attribute: style;} [table a is a label, where a is in the table]

E. Combination selectors

For example: h1,h2{Attribute: style;}

F. Pseudo element selector

a:link{Attribute: style;}

a:visited{Attribute: style;}

Currently only used for element represents the styles applied to label elements in different states.

G. There are many others

, you can check the reference books.

Answer to question (C):

Mainly in the following categories: font, color, background, text, border, mouse cursor, positioning, and block attributes. Among them, positioning technology is really amazing. The so-called div CSS layout refers to positioning technology.

The answer to question (D): About div css page layout

The web page layout requires the cooperation of HTML and CSS. HTML mainly provides two tags: and tags.

is used for large blocks, is used for inline, which is a small module.

To learn layout, you need to master the three concepts of block model, positioning and floating.

Here we use a rectangular block defined by , which consists of element content, blank space, padding, and borders. For positioning, there is also a margin setting parameter.

By learning CSS to control block float and clearing the border, you can complete the layout of the div. For details, you can read various detailed tutorials online.