Home > Developer > Web Develop
Inherited
Some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants. For example, the following code: If a color is applied to the P tag, the color setting applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.
p{color:red;}
In my third year of <p>, I was a little girl with a <span> timid </span>. </p>
Visible to the right of the results window, the text in P and the text in span are set to red. Note, however, that there are some CSS styles that are not inherited. such as border:1px solid red;
p{border:1px solid Red;}
In my third year of <p>, I was a little girl with a <span> timid </span>. </p>
In the example above, the function of the code is simply to set the P tag with a border of 1 pixels, a red, a solid border line, and for the child element span is useless to play a role
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Inheritance </title>
<style type= "Text/css" >
p{color:red;}
p{border:1px solid Red;}
</style>
<body>
<p class= "First" > Third grade, I was a <span> timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p>
<p id= "Second" > to the third grade next semester, our class in a public class, the teacher put forward a very <span> simple </span> problem, a lot of students in the class have raised their hands, even worse than I do a lot of, also raised their hands, Also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p>
</body>
Particularity
Sometimes we set a different CSS style code for the same element, so which CSS style does the element enable? Let's take a look at the following code:
p{color:red;}
. First{color:green;}
<p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
P and. First are matched to P on this tab, so what color does it show? Green is the right color, then why? This is because the browser uses the weights to determine which CSS style to use, and which CSS style to use when the weights are high.
Here are the rules for weights:
The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:
p{color:red;}/* Weighted value is 1*/
P Span{color:green;}/* Weighted value is 1+1=2*/
. Warning{color:white;}/* Weighted value is 10*/
P span.warning{color:purple;}/* Weighted value is 1+1+10=12*/
#footer. Note P{color:yellow;}/* Weighted value is 100+10+1=111*/
Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> particularity </title>
<style type= "Text/css" >
p{color:red;}
. First{color:green;} /* Because the weight is high display green */
Span{color:pink;} /* Set to Pink */
p>span{color:purple;}/*p span{color:purple;} */
</style>
<body>
<p class= "First" > Third grade, I was a <span> timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p>
<p id= "Second" > to the third grade next semester, our class in a public class, the teacher put forward a very simple question, the class many students have raised their hands, and even the results of a lot worse than me, also raised his hand, also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p>
</body>
Cascade
Let's consider a question: what if there are multiple CSS styles in the HTML file that can exist for the same element and that have the same weight values for the multiple CSS styles? Well, the Cascade in this section helps you solve this problem.
Cascading is in the HTML file for the same element can have more than one CSS style exists, when the same weight of the style exists, according to the order of the CSS style to decide, in the back of the CSS style will be applied.
As in the following code:
p{color:red;}
P{color:green;}
<p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
The text in the last P is set to green, which is well understood and is understood as a style that overrides the previous style.
So the previous CSS style precedence is easy to understand:
Inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file).
Importance
When we do the code of the Web page, some special situations need to have the highest weights for some style settings. At this time we can use!important to solve.
The following code:
P{color:red!important;}
P{color:green;}
<p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
The text in the p paragraph is then displayed in red.
Note:!important to be written in front of the semicolon
Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly. Notice that the style priority is: Browser default style < page maker Style < user-set style, but remember that the!important priority style is an exception and the weight is higher than the user's own style.
Text layout--fonts
We can use CSS styles to set style attributes such as font, font size, color, and so on for text in a Web page. Let's take a look at an example where the following code is implemented: set the font for text in a Web page to Arial.
Body{font-family: "The song Body";}
Be careful not to set fonts that are not commonly used, because the default font is displayed if the font you set is not installed on the user's local computer. (because the user can see whether the font style you set depends on whether the font you set is installed on the user's local computer.) ）
Now General page likes to set "Microsoft Ya Black", the following code:
body{font-family: "Microsoft Yahei";}
Or
Body{font-family: "Microsoft Jas Black";}
Note: The first method is better compatible than the second method.
Because this font is beautiful and can be displayed in the client security (the user is generally installed by default).
Text layout--font size, color
You can use the following code to set the font size of the text in the Web page to 12 pixels and set the color to #666 (gray):
Body{font-size:12px;color: #666}
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> font size, color </title>
<style type= "Text/css" >
Body{font-size:12px;color: #666;}
. stress{font-size:20px;color:red;}/* Remove our Code Test results */
</style>
<body>
<p> third grade, I was a <span class= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p>
<p> to the third grade in the next semester, our class in a public class, the teacher put forward a very simple <span> problem </span>, the class many students have raised their hands, even worse than me, also raised his hand, also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p>
</body>
Text layout--Bold
We can also use CSS style to change the style of the text: bold, italic, underline, strikethrough, you can use the following code to implement the formatting text in bold style display.
P Span{font-weight:bold;}
As you can see here, if you want to set the bold font for text to be implemented with a separate CSS style, you don't have to use the H1-H6 or strong tags to implement bold styles.
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Bold Check </title>
<style type= "Text/css" >
P Span{font-weight:bold;}
A{font-weight:bold;}
</style>
<body>
<p> third grade, I was a <span class= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will <a href= "http/ Www.imooc.com "> Criticism </a> me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p>
<p> to the third grade in the next semester, our class in a public class, the teacher put forward a very simple question, the class many students have raised their hands, and even the results of a lot worse than me, also raised his hand, also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p>
</body>
Text Layout-Italic
The following code enables the text to be displayed in the browser in italic style:
P A{font-style:italic;}
In my third year of <p>, I was a little girl with a <a> timid </a>. </p>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Italic Style </title>
<style type= "Text/css" >
A
Font-style:italic;
}
P{font-style:italic;}
</style>
<body>
In my third year of <p>, I was a little girl with a <a> timid </a>. </p>
</body>
Text layout-Underline
In some cases, you want to set the text to underline style, so that you can visually emphasize the text, you can use the following code to achieve:
P A{text-decoration:underline;}
In my third year of <p>, I was a little girl with a <a> timid </a>. </p>
Text layout--Strikethrough
If you want to set a strikethrough on a webpage, this style is often seen on the e-commerce website:
The deletion line in the original price can be implemented using the following code:
. Oldprice{text-decoration:line-through;}
Paragraph Layout--indentation
In the Chinese text before the paragraph is used to empty two blank text, this special style can be implemented with the following code:
P{text-indent:2em;}
In the spring of <p>1922, a writer who wanted to be named Nikkalavi (Toby McGuire Tobey Maguire), left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live. </p>
Note: 2em means twice times the size of the text.
Paragraph layout-line spacing (row height)
In this section, let's learn about another line spacing (row height) attribute (line-height), which plays an important role in paragraph layout, and the following code implements setting the paragraph line spacing to 1.5 times times.
P{line-height:1.5em;}
<p> Fitzgerald, one of the American literary giants of the 20th century, has both writer and screenwriter status. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age. </p>
Paragraph layout--word spacing, letter spacing
Text interval, Letter spacing settings:
If you want to set the text interval or the letter spacing in the page layout can be implemented using letter-spacing, such as the following code:
h1{
letter-spacing:50px;
}
...
Note: This style is used in English words to set the spacing between letters.
Word Spacing settings:
What if I want to set the spacing between English words? Can be implemented using word-spacing. The following code:
h1{
word-spacing:50px;
}
...
Paragraph layout--alignment
Do you want to set the center style for text and pictures in a block element? You can use the Text-align style code, which allows text to be centered in the following code. (So what is a block element?) It will be mentioned in sections 11-1 and 11-2 later. )
h1{
Text-align:center;
}
You can also set the left:
h1{
Text-align:left;
}
You can also set the right:
h1{
Text-align:right;
}
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Alignment </title>
<style type= "Text/css" >
Div{text-align:center;}/*div{text-align:left;} */
</style>
<body>
<div></div>
</body>
HTML learning the next day--Nineth to tenth Chapter--CSS inheritance, Cascade and particularity +css formatted layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
