HTML Learning 4

1.CSS Code syntax
CSS styles consist of selectors and declarations, and declarations are made up of attributes and values, as shown in:

Selectors, also called selectors, indicate the elements in the Web page to which you want to apply a style rule, as in this case, the text in all segments (p) in the page will turn blue, while other elements, such as OL, will not be affected.

Declaration: In English curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are more than one statement, the middle can be a semicolon ";" Delimited, as follows:

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

1, the last statement may not have a semicolon, but for later modification convenient, usually plus a semicolon.

2, in order to use the style easier to read, you can write each code in a new line, as follows:

p{
font-size:12px;
color:red;
}
Task
I'll give it a try: Add CSS code to make the code work

Observe in the right code editor 8-10 lines, CSS code is not complete, so three CSS code does not play a role, please add the code complete.

2.CSS Comment code
Just like in HTML annotations, there are comment statements in CSS: Use the/* Comment statement */to mark (using <!--comment statement in HTML). Just like the following code:

Task
Let me try this: Add a comment statement to the CSS style code to indicate the code's role

1, in the right editor, the 8th line of font-size:12px; add the "Set text font size to 12px" comment after the statement.

2. Add the "Set text color to red" comment after the statement in line 9th of the color:red in the right editor.

3. Inline CSS style, written directly in the existing HTML tag
Where can CSS styles be written? From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline, embedded and external three kinds. This section first explains the inline type.

Inline CSS stylesheet is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>
Note that it is wrong to write in the start tag of the element:

<p> here the text is red. </p style= "color:red" >
and CSS style code to write in style= "" double quotes, if there are multiple CSS style code settings can be written together, separated by semicolons. The following code:

<p style= "color:red;font-size:12px" > here the text is red. </p>
Task
Let me try this: use the inline CSS style to set the font color to blue for the "super cool Internet" word

Write code in the first span label in line 13 in the right editor:

Style= "Color:blue"

4. embedded CSS style, written in the current file
Now there is a task, the right editor in the "Cool Internet", "service timely intimate", "fun and easy to learn" The three short word text size modified to 18px. It would be a headache to set up the inline CSS style that we learned in the last lesson (adding sytle= "font-size:18px" to each <span> tag), this section explains a new way of embedding CSS styles to accomplish this task.

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The following code is implemented to set the text in three <span> tags to red:

<style type= "Text/css" >
span{
color:red;
}
</style>
Embedded CSS styles must be written between <style></style>, and in general the embedded CSS style is written between

Task
Let me give it a try: Set the font color with inline CSS styles

1, in the right-hand Code Editor paragraph, there are three <span> tags, please set the three <span> tags in the text color is blue

5. external CSS style, written in a separate file
An external CSS style (also known as an inline) is to write the CSS code in a separate external file, with a CSS style file with a ". css" extension, within

<link href= "Base.css" rel= "stylesheet" type= "Text/css"/>

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the

Task
Let me give it a try: Set the text size with an external CSS style

1. Click Open style.css file (on the right side of index.html), enter code font-size:20px in line 3rd, and observe the change of text size in the results window.

6. priority of three methods
Some of the small partners asked, if there is a situation: for the same element we have three ways to set CSS style, then which method really effective? That's what happens in the editor on the right.

1. Use inline CSS to set the "cool Internet" text to pink.

2. Then use the embedded CSS to set the text to red.

3, and finally use the external format to set the text to blue (style.css file Settings).

But eventually you can observe that the text of the short word "super cool Internet" is set to pink. Because these three styles are prioritized, remember their priorities: inline > Embedded > External

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior. As is the case with the right code editor, <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development). Interested partners can try, change them in order, and see if their priority changes.

In fact, in summary, that is-the nearest principle (the higher the priority level from the Set element).

However, note that the precedence summarized above is a precondition: inline, inline, external style sheet CSS style is the same weight in the case, what is the weight of the value? This is explained in the next 9-2 sections.

Task
Use inline, embedded, and external CSS styles to set the "Cool Internet" text font size to feel the priority of these three methods.

7. What is a selector?
Each CSS style declaration (definition) consists of two parts, in the following form:

selector {
Style
}
The part before {} is the selector, and the selector indicates the object of the style in {}, that is, which elements in the Web page the style acts on. The "Body" in the 7th line of code in the right-hand code editor, for example, is the selector.

Task
Click the Submit button to learn from the next section.

8. Tag Selector
The tag selector is actually a tag in the HTML code. such as

P{font-size:12px;line-height:1.6em;}
The effect of the above CSS style code: Set the 12px font size for the P tag, and the line spacing to set the 1.6em style.

Task
I'll also try to add a style to the title "Courage", remove the default bold style of the H1 tag and set the font color to red

1. On the 7th line of the editor on the right, enter h1{

2. On the 8th line of the editor on the right, enter font-weight:normal;

3. On the 9th line of the editor on the right, enter color:red;

4. On the 10th line of the editor on the right, enter}

9. class Selector
Class selectors are most commonly used in CSS style encodings, such as the code in the right-hand code Editor: can be implemented as "timid", "courage" font is set to red.

Grammar:

. class Selector name {CSS style code;}
Attention:

1, English dot start

2, where the class selector name can be arbitrarily named (but not Chinese OH)

How to use:

The first step: Use the appropriate tags to mark the content to be modified, as follows:

<span> Timid </span>
Step Two: Use class= class selector name to set a class for the label as follows:

<span class= "Stress" > Timid </span>
Step three: Set the class selector CSS style as follows:

. stress{color:red;} /* Add an English dot in front of the class */

Task
I'll try it, too. Set the "Open lesson" in the second paragraph to three words green

1. On the 16th line of the editor on the right, enter:

<span class= "Setgreen" > Open Class </span>
2. In the 10–12 line of the editor on the right, enter:

. setgreen{
Color:green;
}

ten.ID Selector
In many ways, the ID selector is similar to a class selector, but there are some important differences:

1. Set id= "ID name" for the label, instead of class= "class name".

2. The ID selector is preceded by the pound sign (#), not the English dot (.).

The right-hand code editor is a complete instance of an ID selector.

Task
I'll try, too. Set the ID selector to green for the "open lesson" in the second paragraph of text three words

1. On the 16th line of the editor on the right, enter:

<span id= "Setgreen" > Open Class </span>
2. In the 10–12 line of the editor on the right, enter:

#setGreen {
Color:green;
}

HTML Learning 4