CSS Basics and Insights (ii.)

Some styles in CSS are inherited. It allows a style to be applied not only to a particular HTML tag element but also to its descendants. such as: p{color:red;}  <p>dsffd<spans>sdfasdf</span>sd</p> Note Some CSS styles are not inherited. such as border:1px solid red; the design of the CSS has a special, the weight of the tag is 1, the weight of the class selector is 10,id the weight of the selector is up to 100. Note that there is also a weighted value more special, inherited. Inheritance also has the right value but it is the lowest. Suddenly there is a problem, if you can have more than one CSS style in HTML for the same element and how many CSS styles have the same weights? I just tried it. Another feature, called cascading cascading, is that there can be multiple CSS styles for the same element in the HTML file, and when the same weights are present, the CSS styles that are at the very back are applied, depending on the order of the CSS styles. Inserting a digression, I feel this function is really motherfucker ... No eggs at all. The meaning of the nearest principle. How can you understand that? is to take the last value, what is what. So.. What's the fuck? What do you do in the front???? Later knowledge let me understand, the original is I know too little. So I hope you learn the knowledge, you must be humble ... Some special cases need to have the highest weights for some style settings, and this time use important to solve them. such as: p{color:red!important;}     P{color:green;}     <p class= "D" >ddd<span>ppp</span>ddd</p> at this point, the text inside the p paragraph will turn red. Watch out! Important to be written in front of the semicolon (yes, you read it right.) There is a! Number and impotent are together!!! Here, and pay attention to one thing. When a page creator doesn't set CSS styles, the browser displays the page in its own set of styles. And some crappy users will also set their own style of browsing habits. If some users are accustomed to put the font (eye) Large (eyes) point (blind), so that it view the text of the page more clearly. At this point to pay attention, after all, the user is hanging large. So priority: Browser Default style < Page Creator Style < user-set style. But remember that the!important priority style is an example (hanging) outside (large), with weights higher thanThe style that the user sets himself. Setting the font this piece is simple enough to add a line of code to the style. such as: body{font-family: "Some Kind of font"} look at the requirements, which kind of font, make the set. Note that it is best to use the official language. Do not use Chinese, that is, "some kind of font" in the official language, such as Microsoft Ya Black is Microsoft Yahei double quotes do not forget! Text typesetting and so on, let you check the manual you lazy. I wrote it directly: Body{font-size:xxpx;color:xx} that's it! In bold words: P span{font-weight:blod;} Italic words: P a{font-style:italic} underline is: P a{text-decoration:underline;} Some e-commerce sites, such as a treasure, the original price will have a deleted horizontal line, this is also very simple. such as:. Oldprice{text-decoration:ine-through;} Hey, little white guys. What is Oldprice? Is that how it's fixed? No! This is the class selector in the selector! You can go back and review it. ~~~~~ Chinese text in front of the paragraph used to have two spaces, this crappy setting does not know which old ancestors set out the high (S) end (B) set. And then naturally there is a way to solve it. One line of code: P{TEXT-INDENT:2EM;} This em has been useful before, and you can look back at the previous content. Be sure to review ~ ~ ~ Note, 2em means twice times the size of the text. Since there are the preceding spaces, naturally also have the upper and lower spaces, that is, line spacing. Similarly, one line of code resolves: p{line-height:1.5em;} The following settings can be described as a surprise and the setting of the world, the paragraph layout. This kind of high-tech things are generally text editing to do the work, we have cross-industry!!! This is the paragraph layout. Text spacing, letter spacing. If you want to set the text spacing in the page layout or the letter spacing can be used: letter-spacing to achieve, such as:h1{   letter-spacing:50px}

CSS Basics and Insights (ii)