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>
<Title> FAQ </title>
<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 rel = "stylesheet" type = "text/CSS" href = "st.css">
<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:
<Div class = "Question">
<SPAN class = "QNA"> q </span>: What is your name? </Div>
<P>
<SPAN class = "QNA"> A </span>: Tom </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.