CSS Cascading Style Sheets_html/css_WEB-ITnose

Generally speaking, all styles have the following rules (the fourth one has the highest priority)

1. Browser default

Browser default

2 , External style sheet

External style sheet

3. Internal style sheet (inside the

tag)

Inline style sheet (inside the

tag) 4. Inline style (inside an HTML element)

Inline style (within an HTML element)

So the style written in the HTML element has the highest Priority (written within an HTML element), which overrides other forms of style.

The syntax of CSS consists of three parts: a selector, a property and a value, for example: selector{property:value}

The selector is The HTML element/tag you wish to define. Each attribute can have a value. The attribute and value are separated by a colon and enclosed in curly brackets. body{color:black}

If the value is multiple words, Then use double quotes -p{font-family:"sans serif"}

Note: If you want to specify multiple attributes, you must separate each attribute with a semicolon, as in the following example Demonstrates how to define live red text exercises

-p {text-align:center;color:red}

in order to make style definition more possible For readability, you can describe the attributes in separate lines like this

p{

text-align:center;

color:black;

font-family: arial

}

can also combine selectors. Separate each selector with a comma. The example below combines all heading elements and changes their color to green

h1,h2,h3,h4,h5,h6{color:green}

Using selector classes you can define different styles for the same type of HTML elements. For example, you want to have two different styles of paragraphs in your document: one is right-aligned, and the other is centered. This shows you how to do this with styles

p.right{text-align:right}

p.center{text-align:center}

You must use the class attribute in your HTML document (to show the effect)

This paragraph will be right-aligned.

This paragraph will be center-aligned.

Note: Each HTML element can only have one class attribute

You can also omit the tag name and define it directly, so that you can use it in all HTML elements. The following example can center the text of all elements with class="center" in all HTML:

.center{text-align:center}

H1 and P elements in the following code All have class="center". This means that both elements will follow the rules of the selector "center"

This heading will be center-aligned

This paragraph will also be center-aligned.

Do not use classes whose names begin with numbers. Doesn't work properly in Mozilla/Firefox.

(id selector)

Using id selector you can define the same style for different HTML elements

Style below The rule matches any element with an id attribute value of "green"

#green{color:green}

The above rule will match h1 and p elements

Some text

Some text

The following style The rule will match any p element with an id attribute value of "green"

p#green{color:green}

The above rule does not match the h1 element (that is, it does not Will produce style effect)

Some text

Same as class, the name of id Do not use numbers at the beginning, otherwise it will not work properly in Mozilla/Firefox.

How to insert a style sheet?

When the browser reads the style sheet, it formats the document according to it (the style sheet). There are three ways to insert a style sheet

1. External Style Sheet

2. Internal Style Sheet

3. Inline style (Inline Styles)

External style sheets:

Using external style sheets is an ideal way to apply styles to multiple web pages. This way you only need to change one file to change the appearance of the entire website. Use the tag to link each page to the style sheet. The tag is used in the head area

The browser will read the style definition information from the mystyle.css file and format the document according to it

External style sheets can be written using any text editor. The file should not contain any html tags. And save it as a file with the suffix .css. The following is the content of a style sheet file

hr{color:sienna}

p{margin-left:20px}

body{background-image:url(images/back40.gif)}

Inline style Table

An inline style sheet should be used when there are separate documents with special styles. Use the

hr {color:red}

p{margin-left:20px}

body{background-image:url("images/back40.gif")}

Inline style

Using inline style loses the advantage of the style sheet and changes the content confused with form. Generally, this method is used when individual elements need to change the style.

is used to add inline styles using the style attribute on the relevant tags. Style properties can contain any CSS property. The example will show how to add left spacing to a paragraph and change the color to red

This is a paragraph

Multiple Style Sheets

If some properties are set to different styles by the same selector, the values ​​will be inherited from the more specific style ( Concrete)

For example, an external stylesheet has an h3 selector attribute like this

h3{color:red;text-align:left;font-size:8pt}

At the same time, there is an inline style sheet with such h3 selector attribute

h3{text-align:right;font-size:20pt}

If the page has inline If the style sheet is connected to an external style sheet at the same time, the h3 attributes will become

color:red;text-align:right;font-size:20pt

The color is inherited from the external Style sheets and text alignment and text size are replaced by embedded style sheets.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.