CSS3 secret section 3 covers HTML5 Study Notes 1 ~ Chapter 5, css3html5
Part 1 ---- chapter 1st of CSS basics, the simpler HTML that CSS requires, and the more friendly the search engine div is a block-level element, A span is a group of related content in the <section> tag of an element in a row. Just like a chapter in a book, The <aside> tag contains content related to its surrounding content, like the sidebar in a paper magazine, The <footer> tag contains information that is usually placed at the bottom of a webpage, such as copyright statements, legal information, and navigation links of some websites, and so on. The <nav> label is used to include important navigation links. <figure> label is used to show that IE8 and earlier versions support HTML5. html5shiv can be used. However, I only accept HTML5 labels and apply the CSS of tags. I didn't make the browser "understand" What the HTML5 labels are. For example, for <video>, IE8 and earlier versions do not play HTML5 videos, even if javascript programs are loaded to validate web pages W3C Web site (http://validator.w3.org/) Firefox (http://chrispederick.com/work/web-developer), extended http://users.skynet.be/mgueury/mozilla/Chrome (http://bit.ly/SCONRY) Safari (www.zappatic.net/safaritidy) for a list containing multiple related projects, use the unordered list <ul> to indicate the process steps or define the order of a group of projects, use the ordered list <ol> to create a glossary and its definition or description, use the <dl> definition list, <dt> to define a glossary, and <dd> to define a description that contains a quote, <blockquote>, for short quotes, use the <q> <cite> quote title, news report, or website to use the <address> identifier and provide the contact information of the author of the webpage without an appropriate HTML Tag, when you want to identify an element, you can use <div> and <span> Note: Do not abuse <div>. Remember to close the DOCTYPE of the tag DOCTYPE and give a prompt to the browser, what version of HTML is used for this webpage, so that the browser can correctly explain the HTML5 document. The declaration is as follows:
<!DOCTYPE html>
For old HTML or XHTML versions, such as HTML 4.01 Transitional or XHTML 1.0 Transitional, the Document declaration is complicated.
<! -- HTML 4.01 Transitional Document declaration --> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <! -- XHTML 1.0 Transitional Document declaration --> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Adding meta tags can enable IE8 to stop the weird behaviors with no headers (in the weird mode, enter IE7 mode) and enable IE8 to display webpages in the most standard compatibility mode.External style sheets use HTML <link> labels, or CSS's own @ import commands. The @ import command can implement one thing that <link> cannot do, attach multiple style sheets to an external style sheet. Test the CSSW3C: http://jigsaw.w3.org/css-validatorhtmling external Workflow table<meta http-equiv="X-UA-Compatible" content="IE=edge" />Note: It is best to place it in the head label, preferably under Chapter 2nd of the title label. Creating a simple style in a style and style table also contains several elements: Selector and Declaration Block), Declaration (Declaration), Property (attribute), Value (Value) Note: Each attribute/Value pair must be followed by a semicolon (;), if the semicolon is omitted, the style sheet is invalid. The internal style sheet is surrounded by <style> labels and placed before <style type="text/css">
<! -- HTML5: --> <link rel = "stylesheet" href = "css/style.css"> <! -- HTML4.01, you need to add the type attribute: --> <link rel = "stylesheet" type = "text/css" href = "css/style.css"> <! -- XHTML: --> <link rel = "stylesheet" type = "text/css" href = "css/style.css"/>Use CSS to link external style sheets
<Style> <! -- HTML4.01 and XHTML must also contain type = "text/css" --> @ import url (css/styles.css); </style>Note: All @ import rows should be placed before all CSS rules, and the web browser will ignore any style table rows introduced after the CSS rule. The style will be defined in the style attribute of the HTML element, this is very bad. Chapter 2 selector: Specify the STYLE tag selectors: The overall control tag selector is also called the type selector and element selector. It acts on the HTML element class selector: precise Control of class name naming conventions in style sheets 1. All class selector names must start with a dot 2. CSS only allows class names to use letters, numbers, and hyphens (-), underscore (_) 3, must start with a letter after the dot 4, class name case sensitive note: in HTML, as a part of the class property, you do not need to add a vertex ID selector before the class name. You only need to create a comma-separated selector list to control the special webpage element group selector.
h1,h2,h3{ color:#333;}The universal selector (*) * is the universal selector flag used to select each tag.
1 <Html> covers Ancestor Tag:When an HTML Tag contains another tag, HTML becomes the ancestor of the tag. <Html> is the ancestor tag of all other tags, <body> is the ancestor tag of Derived tags:A label within one or more tags is a derived tag. <Body> is a derived tag of Parent Tag:Parent tag is the ancestor closest to another tag. Sub-Tag:Directly surrounded by another tag Compatriot Tag:The child tags of the same tag create a derived selector multiple selectors are separated by spaces, similar to the group selector separated by commasH1 strong {color: #666}/* indicates that as long as the strong label in h1 appears, the font is changed to red, and the strong in other places remains unchanged * // * if there is no space between them, the meaning of the representation will be completely different: */p. intro;/* this means that the intro class must be dedicated to p labels (<p class = "intro">. */Pseudo classes and pseudo elements define the link style a: link: All links that visitors have not accessed, the mouse has not been moved to, or clicked a: visited: indicates the link a: hover that has been clicked by a visitor Based on the Web browser history. When the visitor clicks the link, the effect of the link is changed. a: active: when a visitor clicks a link, the show effect pseudo element: first-letter,: first-lineCSS3 modifies the syntax of these pseudo elements. In CSS2.1, the pseudo class starts with a colon, like this: first-letter, CSS3 adds a colon on this basis to facilitate the identification of items from the pseudo element: hover. : Focus: It takes effect when a visitor executes certain actions. Similar to a visitor clicking a webpage text box, the focus is on the text box. Only works for elements in focus: before: You can add content before a specified element.<p class="tip">P. tip: before {content: "hot tip! "}/* Insert the text" HOT tip "*/before the paragraph when the TIP class in the <p> label is displayed "*/The technical term used to add text with this selector is "create content": after: Like: before, it will also create content, but it is added after the element. Note: IE8 + and other mainstream browsers support: before AND: after selector. Note: before,: after, And: first-letter,: first-line are all pseudo elements, in CSS3, the following values must be used: before,: after, but the browser supports the single-colon version. Therefore, you can continue to use: before,: after: selection: for projects that visitors have already selected on the webpage. This selector can only set the color and background-color attributes. Note: This selector is effective in IE9, Opera, Chrome, and Safari, but not in IE8 and Firefox. However, you can add a vendor prefix to make Firefox support it, example:::-moz-selection{ color:#fff; background-color:#999;}The property selector is similar to the img [title], input [type = "text"], and a [href ^ = "http: //"] sub-selectors use angle brackets (> ). Similar to a derived selector, a child selector can be used to set a style for the sub-tag of another tag. The derived selector applies to different derived tags of the same tag, the child selector allows you to specify the child tag of the parent tag, that is, it only affects the direct child element without affecting the indirect child element. The adjacent compatriot selector uses the plus sign (+ ). Select only the adjacent first child element. h2 + p selects only the common sibling selector of a p tag after the h2 tag and uses the wavy line (~). Select all siblings, h2 ~ P Selects all siblings at the same level as h2. p tags: first-child: select and format only the first child element of the element. If you want to select the first h1 tag, you can create a selector like h1: first-child (written on the child element). The problem is that if you change h2 under the div to h1, this h1 will also be selected: last-child is similar to: first-child, but you can view the link by selecting the last or more attributes: HTML5 and CSS3 basic tutorial version 8 study notes 7 ~ Chapter 9 of Chapter 10 compares the definition selector with this chapter, and allows you to easily set different styles for table row separation by referring to nth-child:Tr: nth-child (odd) {background-color: #333;/* Set */} tr: nth-child (even) {background-color: #666;/* set an even number of rows */}You can also select a child element for each of the second child elements in a series. For example, you want to highlight every three table cells (<td> tags) in a row starting from the second table unit:
tr td:nth-child(3n + 2) { background-color:#900;}Note: 3n indicates every three elements, 4n indicates every four elements, and the plus sign indicates the first element. Note: all modern browsers, including IE9 and later versions, support: last-child,: first-child,: nth-child (), but IE8 does not support child type selector: first-of-type: similar to: first-child. : Last-of-type: similar to last-child. Note: These type selectors must be subtags of a special label. Therefore: p: first-of-type indicates "the first sub-tag of a paragraph label": nth-of-type: similar to nth-child: not selector is also called a negative pseudo class, you can choose something that is not another thing.P: not (. classy) {color: red;}/* select all paragraphs except the class as classy */1. Only simple selector can be used with the: not selector. img: not (. portrait), li: not (: first-child), etc. 2. Do not use the derived selector 3. Do not use multiple not selector chapter 4th. Save time with style inheritance. You can view the link: HTML5 and CSS3 basic tutorial version 8 study notes 7 ~ Chapter 10 Chapter 7: Comparison and reference of CSS construction Blocks 1. In general, attributes that affect the position of webpage elements, or margins, background colors, and borders of elements, are not inherited. 2. Web browsers use their own styles to set styles for various labels. When you define a font size for a webpage and apply it to the <body> tag, the title will still be larger than the paragraph text. That is, inheritance does not affect the browser's internal style for certain elements. 3. When a style conflict occurs, the more specific style will win Chapter 1. Use the cascade management style. If a tag itself does not set any style, when the inherited attribute has any conflict, the ancestor tag closest to it wins any style that is directly applied to the specified tag, the values are used to determine which style to win. 1. One tag selector value is 1 minute. 2. One class selector value is 10 minutes. 3. One ID selector value is 100 minutes. 4. One built-in style. value 1000 note: the arithmetic involved in weight calculation is actually more complex than this, but this formula is used in most cases. To learn how the Web browser actually calculates the weight, you can log on to the following website: www.w3.org/tr/css3-selectors/?specificityinjection: pseudo elements (such as: first-line) are usually treated as tag selectors with a value of 1 point and pseudo classes (such as link) treated as classes with a value of 10 points. Because the derived selector is composed of several selectors, it is more complicated in arithmetic. The weight value is the sum of all selector values. Note: inherited attributes do not have the same weight value, if the last style exists, when the internal style table conflicts with the external style table, the position of the two style sheets in HTML is very important, if the <style> label is before the <link> label, the external style sheet wins. Suggestion: We recommend that you first list all external style sheets. When you absolutely need to apply one or more style sheets to a webpage, it is best to use only one internal style sheet to ignore the weight value. When a certain attribute must not be overwritten by another more specific style, you can insert it after the attribute to be protected! Important can avoid being overwritten by attributes with higher weights. Note: it applies to individual attributes, not the entire style. Finally, when both have! When important's style conflicts, more specific styles will win. Select overwrite 1. Use an internal style sheet to define the style to be overwritten 2. Use another external style sheet to define the style to be overwritten, and introduce at the end to avoid weight wars<div id="article"> <p>A paragraph</p> <p>Another paragraph</p> <p class="special">A Special paragraph</p></div>First, define:
#article p{ color:red;}To change the <p class = "special"> section, you must define the following rules:
#article .special{ color:blue;}Long and useless. When you copy <p class = "special"> directly to another place, the style will not change if you replace it with a class:.article p{ color:red;}p.special{ color:blue;}Reduce redundancy and cut <p class = "special"> to other places. Suggestion for style still taking effect: Use class selector whenever possible, avoid using id selector detailed discussion about why avoid using ID selector: http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-classCSS reset: http://meyerweb.com/eric/tools/css/reset
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
