Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge of this article "how to insert CSS in the web page", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to insert CSS in the web page" article.

CSS is Cascading Style Sheets, which is translated into "cascading style sheet", or style sheet for short. It is a new technology for making web pages.

Stylesheet files can be opened and edited with any text editor (for example: notepad). The general stylesheet file extension is .css.

1. How to insert CSS into a web page

The way to insert a style sheet in a page: link to an external style sheet, an internal style sheet, import an external style sheet, and an embedded style.

1. Link to an external style sheet

To link to an external stylesheet is to save the stylesheet as a stylesheet file, and then link to the stylesheet file with a tag on the page, which must be placed in the area of the page, as follows:

Media= "print"

The above indicates that the browser reads the defined stylesheet in document format from the mystyle.css file. Rel= "stylesheet" refers to the association between the LINK and its href, which indicates that the href file is a stylesheet file. Type= "text/css" means that the type of file is stylesheet text. Href= "mystyle.css" is the location where the file is located.

Content is defined stylesheet such as: body {background-image: url ("images/back40.gif")}

two。 Internal style sheet

The internal stylesheet places the stylesheet in the area of the page, and these defined styles are applied to the page. The stylesheet is inserted with tags, and you can see the use of tags in the following example:

Note: some older browsers do not recognize style tags, which means that older browsers ignore the contents of the style tags and display the contents of the style tags directly on the page as text. To prevent this from happening, we hide the content by annotating it with HTML instead of showing it:

3. Import external style sheets

Importing an external stylesheet means importing an external stylesheet in the internal stylesheet, using @ import when importing

Example:

Method is similar to the method of chaining stylesheets, but importing external stylesheet input has an advantage. In essence, it is equivalent to existing in an internal stylesheet.

Note: importing an external stylesheet must be at the beginning of the stylesheet, on top of other internal stylesheets.

4. Embedded styl

Embedded styles are mixed in HTML tags, and you can easily define styles individually for an element. The use of embedded styles is to add the style parameter directly to the HTML tag. The content of the style parameter is the attribute and value of CSS, as shown in the following example:

This is a paragraph.

The contents in quotation marks after the style parameter are equivalent to those in stylesheet curly braces.

The style parameter can be applied to elements within any BODY (including BODY capabilities), except for BASEFONT, PARAM, and SCRIPT.

II. Grammar

1. Basic grammar

The definition of CSS consists of three parts: the selector, the properties and the value of the attribute.

The basic format is as follows:

Selector {property: value}

(selector {attribute: value})

Selectors can be in a variety of forms, usually the HTML tags you want to define the style, such as BODY, P, TABLE...

If you need to specify more than one attribute for a selector, we use a semicolon to separate all attributes from values:

Selector {property1: value1; property2: value2}

(selector {attribute 1: value 2; attribute 1: value 2})

2. Selector type

HTML tag selector / tag selector

For the HTML tags that you want to define styles, such as BODY, P, TABLE... You can define its properties and values in this way, which are separated by colons

Body {color: black}

ID selector

In the HTML page, the ID parameter specifies a single element, and the ID selector is used to define a separate style for this single element.

The application of the ID selector is similar to the class selector, using the id parameter in the html tag:

Align this paragraph to the right

To define the ID selector, precede the ID name with a "#" sign. There are two ways to define the properties of an ID selector.

In the following example, the ID attribute matches all elements of the id= "intro":

# intro

{

Font-size:110%

Font-weight: bold

Color:#0000ff

Background-color: transparent

}

(font size is 110% of the default size; bold; blue; background color transparent)

In the following example, the ID attribute matches only the paragraph elements of the id= "intro":

P#intro

{

Font-size:110%

Font-weight: bold

Color:#0000ff

Background-color: transparent

}

Note: the ID selector is so limited that you can only define the style of an element individually, and you can only use it in special cases.

Id can only be used once per page, if multiple id are used:

The first is that it cannot pass the W3 check, although it can be used in the browser.

Second, when you need to use JavaScript to control the div through id, there will be an error.

Conceptually:

Id first finds the structure / content, and then defines the style for it; class defines a style first, and then sets it to multiple structures / content.

Class selector

With the class selector, you can classify the same elements and define different styles. When defining the class selector, add a period to the name of the custom class. If you want two different paragraphs, one aligned to the right and one centered, you can define two classes first:

P.right {text-align: right}

P.center {text-align: center}

When applying, simply add the class parameter you defined to the HTML tag:

This paragraph is aligned to the right

This paragraph is arranged in the middle

Note: the name of the class can be any English word or a combination of English words and numbers, generally named briefly after its function and effect.

There is also a use for class selectors to omit the HTML tag name in the selector so that several different elements can be defined in the same style:

.center {text-align: center}

Such a class can be applied to any element.

Note: this kind of class selector omitting the HTML tag is the most commonly used CSS method. With this method, we can easily apply pre-defined class styles to any element.

Selector group

You can combine selectors with the same attributes and values and separate selectors with commas to reduce repetitive style definitions:

P, table {font-size: 9pt}

(the text in paragraphs and tables is size 9)

The effect is exactly equal to:

P {font-size: 9pt}

Table {font-size: 9pt}

Include selector

A stylesheet that contains relational definitions for an element separately, and element 1 contains element 2, which defines only element 2 in element 1, and no definition for individual element 1 or element 2, for example:

Table .leftdiv

{

Font-size: 12px

}

The links within the table have changed the style, and the text size is 12 pixels, while the text for links outside the table is still the default size.

Cascading of stylesheets

Cascading is inheritance, and the inheritance rule of the stylesheet is that external element styles are retained and inherited to other elements contained in this element. In fact, all elements nested within an element inherit the attribute values specified by the outer element, sometimes overlaying many layers of nested styles. For example, the P tag is nested within the DIV tag:

Div {color: red; font-size:9pt}

The text of this paragraph is red number 9.

(the content in the P element inherits the attributes defined by DIV)

Note: in some cases, internal selectors do not inherit the values of surrounding selectors, but these are special in theory. For example, the upper boundary attribute value is not inherited, intuitively, a paragraph will not have the same upper boundary value as the document BODY.

In addition, when a conflict occurs in the inheritance of a stylesheet, the last defined style always prevails. If the color of P is defined in the example above:

Div {color: red; font-size:9pt}

P {color: blue}

The text of this paragraph is blue number 9.

We can see that the text size 9 in the paragraph inherits the div attribute, while the color attribute follows the final definition.

When different selectors define the same element, the priority between different selectors should be taken into account. ID selector, class selector, and HTML tag selector, because the ID selector is added last to the element, so it has the highest priority, followed by the class selector in the following order:

Style id selector for embedded stylesheet class selector HTML tag selector

If you want to transcend the relationship between the three, you can use! important to raise the priority of the stylesheet, for example:

P {color: # FF0000}

.blue {color: # 0000FF}

# id1 {color: # FFFF00}

The color is shown here.

We add these three styles to a paragraph on the page at the same time, and it ends up with red text according to the HTML tag declared by! important. If! important is removed, the ID selector with the highest priority is yellow text.

3. Special selector-pseudo class

Pseudo-classes can be thought of as special class selectors, which can be automatically recognized by browsers that support CSS. Its greatest use is that it can define different style effects on links in different states.

1. Grammar

The syntax of pseudo-classes is to add a pseudo-class (pseudo-class) to the original syntax:

Selector:pseudo-class {property: value}

(selector: pseudo class {attribute: value})

Pseudo-classes, unlike classes, are defined by CSS and cannot be used by other names as freely as class selectors.

According to the above syntax, it can be interpreted as:

The style of an object (selector) in a particular state (pseudo-class).

Class selectors and other selectors can also be mixed with pseudo-classes:

Selector.class:pseudo-class {property: value}

(selector. Class: pseudo class {attribute: value})

two。 Pseudo class of anchor-dynamic connection

We most often use pseudo-classes of four a (anchor) elements, which indicate that dynamic links are in four different states: link, visited, active, hover (unvisited links, visited links, active links, and mouse over links). We define them as different effects:

A:link {color: # FF0000; text-decoration: none} / * unvisited links * /

A:visited {color: # 00FF00; text-decoration: none} / * visited links * /

A:hover {color: # FF00FF; text-decoration: underline} / * Mouse over the link * /

A:active {color: # 0000FF; text-decoration: underline} / * Activation Link * /

Note: sometimes it works when the mouse points to the link before the link visit, but it has no effect when the mouse points to the link again after the link visit. This is because you put a:hover in front of a:visited, so that because of the high priority behind, the effect of a:hover will be ignored when you visit the link. When defining these link styles, be sure to write in the order of a:link, a:visited, a:hover, and a:actived.

3. Pseudo-class of anchor-- dynamic link of class selector

By combining pseudo-classes and classes, you can do several different sets of link effects on the same page. For example, we define one set of links as red and blue after access, and the other as green and yellow after access:

A.red:link {color: # FF0000}

A.red:visited {color: # 0000FF}

A.blue:link {color: # 00FF00}

A.blue:visited {color: # FF00FF}

Now apply to different links:

This is the first set of links.

This is the second set of links.

4. Other pseudo classes

CSS2 also defines pseudo-classes for the first word and the first line (first-letter and first-line), which can be styled differently for the first word or first line of an element.

For the next example, we define the first word size of the text as 3 times the default size in the paragraph tag:

P:first-letter {font-size: 300%}

Define another instance of the first line style:

Div:first-line {color: red}

If there are multiple lines in a paragraph, the first behavior is red, and the second and third behaviors default color

Note: the pseudo-classes of the first word and the first line need to be supported by IE5.5 or above.

The above is about the content of this article on "how to insert CSS in the web page". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.