Understanding CSS styles and css styles

Understanding CSS styles and css styles

CSS is called "Cascading Style Sheet )"

CSS code syntax

Css styleSelectorAndStatementAndStatementAlsoAttributeAndValueAs shown in:

Selector:It is also called a selector that specifies the elements in a webpage that apply style rules. In this example, the text of all segments (p) in the webpage will turn blue, and other elements (such as ol) will not be affected.

Statement:In the braces "{}", the attribute and value are separated by the colon. When there are multiple statements, they can be separated by semicolons (;), as shown below:

p { font-size:12px;color:red; }

Note:

1. The last statement may not contain semicolons, but it is generally added for future modification convenience.

2. To make it easier to read Styles, you can write each code in a new line, as shown below:

p {   font-size:12px;   color:red; }

CSS annotation code

Like in Html comments, there are comments in CSS: Use/* Comment statement */(Used in Html)<! -- Comment -->). Like the following code:

 

Inline css styles are directly written in existing HTML tags. From the perspective of CSS style code insertion, there are three types: inline, embedded, and external.

InlineThe css style sheet directly writes the css code in the existing HTML Tag, as shown in the following code:

<P style = "color: red"> the text here is red. </P>

Note that it should be written in the element's start tag. The following method is incorrect:

<P> the text here is red. </P>

The css style code should be written in style = "" Double quotation marks. If there are multiple css style code settings, they can be written together and separated by semicolons. The following code:

<P style = "color: red; font-size: 12px"> the text here is red. </P>

 

Embedded css style, written in the current file

The embedded css style code can be written in<Style type = "text/css"> </style>Between tags. The following code sets the text in the three <span> labels to Red:

<style type="text/css">span {color:red;}</style>

 

Embedded css styles must be written between <style> </style> and generally between External css style, written in a separate file

The external css style (also known as the external style) is to write the css code into a separate external file. This css style File.css"Is the extension. in

<link href="base.css" rel="stylesheet" type="text/css" />

 

Note:

1. the css style file name should be named with meaningful English letters, such as main.css.

2. rel = "stylesheet" type = "text/css" is a fixed writing method that cannot be modified.

3. The <link> tag location is generally written in the Priority of the three methods

Remember their priority:Inline> embedded> external

But embedded> external style has a premise: the position of the embedded css style must be behind the external style.

In summary-- Proximity principle (the closer the element to be set, the higher the priority level).

However, note that the priorities summarized above have one premise: the css styles in inline, embedded, and external style tables share the same weights.