HTML learning (6) use styles

Last Update:2018-12-03 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. About styles

1.1 advantages of using styles

Assume that you have a faq page and set all question to green. You can add the <font> label before each question to set the color attribute to green. But if we need to change all the problems on the page to blue, it will become very troublesome. The style is similar to the macro definition in C ++. You only need to declare it at the beginning. When you need to change it, you only need to change the definition value.

Example:

<Style> P. Question {color: Green} </style>

This Code creates a specific <p> tag named question. When the <p> label is used and its class attribute is set to question, the Section text is displayed in green.

2. Basic Elements of a style

Example:

<Head>

<Title> style </title>

<Style> H1 {font-weight: bold; font-size: 14pt; color: Orange} </style>

</Head>

In this example, the style is created for the

Example:

<H1 style = "font-weight: bold; font-size: 14pt; color: Orange">...

The first method is to create a style that is part of the style page and will be applied to all

3. apply styles

3.1 Internal Style

When you create one or more styles in the title of a web page and enclose them with <style>, this style is applied to the entire page. This kind of style set contained in the web page is called "Internal style page ".

Example:

<Head>

<Style>

H3 {Background: green; color: White}

P. Question {color: green; font-style: italic}

</Style>

</Head>

3.2 External Style

The external style page is contained in a webpage file independent of the style to be applied. The advantage of using external style pages is that you can apply styles to multiple web pages.

Example:

H3 {Background: Green}

P. Question {color: green; font-weight: bold}

The code example appears in the form of a file with a. CSS extension (which is a standard extension for cascading styles. Suppose the code is put in a file named "st.css", and then use the following code to apply the style:

<Link> the label is used to reference the. CSS style page and associate the style page with the web page. The rel attribute only indicates that the link references a style page to be applied to the document. The Type attribute specifies the link content type. In this example, it is a cascading style page. Same as the internal style page, the reference of the external style page must be placed in the title.

3.3 Style

In addition to applying a style to all instances of a tag specified on the page, you can also create a "Style Class" applied to a type of tag ".

Example:

P. Question {color: green; font-style: italic}

This Code indicates that the style class is created by specifying the style as the tag name followed by a period (.) and then using the class name (question.

3.4 local style

Apply a style to a specific label. This is the so-called "local style ".

Example:

<H3 style = "Background: green; color: White"> rel

This style is only applied to this label. A local style will overwrite all the styles on the style page of the same label.

3.5 link Style

Link styles are specially applied to hyperlink text in Web pages. The following are some hyperlink statuses:

Link has not been accessed

A link that has been accessed by visited

Link that was just clicked by active

Hover mouse pointer stays on the Link

You can create a style for a hyperlink by following tag a with a colon and the status name of the hyperlink.

Example:

A: hover {Background: green; color: White}

4. Style and custom style labels

There are two types of HTML tags: block-level tags and built-in tags. Block-level labels usually start a new row on a web page and often contain other labels. <P>, <body>, <Table>, and

<Div> A tag is used to create a custom block-level tag. <span> A tag is used to create a custom built-in tag.

4.1 create a custom style label

Div. Question {color: green; font-style: italic}

This Code creates a style for a custom question. This style is specified by using the DIV label name followed by a period and then with the custom style label name. However, this does not mean that you have created a custom STYLE tag named <question>. Instead, you have created a custom category for the DIV tag named "question.

Span. QNA {font-size: 150%}

Custom built-in labels for this code. A custom style label with the QNA class name is created.

4.2 Use custom style labels

Example:

<P>

In this example, the custom Question Style Class is used for the <div> label to mark the problematic section. The answer section is still a traditional <p> label.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More