Learn CSS 2

1.2 CSS-related markup and instructions 1.2.1 Link<LINK rel = "stylesheet" type = "text/CSS" href = "sheet1.css" Media = "all"/> link markup is intended to allow HTML to be associated with other documents. CSS uses link to associate CSS documents with HTML documents. Although CSS documents are not part of HTML, they are used by HTML and introduced from external style sheets. Link is in the head element, but cannot be placed inside any head sub-element, such as title. Although the suffix of the cssfile is not required, some viewers cannot identify non-".css files. Link Properties: REL: Represents relation and is set to stylesheet. Type: Describes the data type. It is set to text/CSS and tells the browser that style sheet is in CSS format. In the future, there will be other style sheet, such as XSL. Href: URL of the style sheet. Media: Specifies the scope of use of the style sheet. Most of the following values are not supported by any browsers. They are commonly used for all, print, and screen. Opera supports projection. You can specify multiple values for media, such as media = "screen, projection" all use in all presentational media. aural use in speech synthesizers, screen readers, and other audio renderings of the document. braille use when rendering the document with a Braille device. embossed use when printing with a Braille printing device. handheld use on handheld devices like personal digital assistants or web-enabled cell phones. print use when printing the document for sighted users and also when displaying a "print preview" of the document. projection use in a projection medium, such as a digital projector used to present a slideshow when delivering a speech. screen use when presenting the document in a screen medium like a desktop computer monitor. all Web browsers running on such systems are screen-medium user agents. tty use when delivering the document in a fixed-pitch environment like teletype printers. TV use when the document is being presented on a television. Title: Use title to define the relationship between multiple CSS documents that are replaced with each other. For example, the following definition exists: <LINK rel = "stylesheet" type = "text/CSS" href = "sheet1.css" Title = "default"/> <LINK rel = "alternate stylesheet" type = "text/CSS "href =" bigtext.css "Title =" Big text "/> <LINK rel =" alternate stylesheet "type =" text/CSS "href =" zany.css "Title =" crazy colors! "/> In a browser that supports multiple CSS definitions at the same time, the following results are displayed: You can also set the title to the same value for grouping:

<link rel="stylesheet" type="text/css"

   href="sheet1.css" title="Default" media="screen" />

<link rel="stylesheet" type="text/css"

   href="print-sheet1.css" title="Default" media="print" />

<link rel="alternate stylesheet" type="text/css"

   href="bigtext.css" title="Big Text" media="screen" />

<link rel="alternate stylesheet" type="text/css"

   href="print-bigtext.css" title="Big Text" media="print" />

The above expression indicates that CSS is divided into two groups by Title: Default and big text. Each group is further divided into print and screen.

If multiple link elements exist, only links with Rel or stylesheet are available. If multiple links are available, they are applied to HTML documents at the same time, as shown below: <LINK rel = "stylesheet" type = "text/CSS" href = "basic.css"/> <LINK rel = "stylesheet" type = "text/CSS" href = "splash.css" /> 1.2.2 StyleStyle is the most common way to introduce style sheet. <Style type = "text/CSS"> Type: Style always uses the type attribute. When CSS is used, the value of type is "text/CSS ". Media: Same as link. A style starts with <style type = "text/CSS"> and ends with </style>. There are multiple styles in the middle. These styles can either point to the style sheet document or be expressed in an embedded manner. The style element can contain multiple styles, or you can use the @ import command to introduce multiple links pointing to the external style sheet. 1.2.3 @ import commandUsage:

<style type="text/css">

@ Import url(styles.css);/* @ import comes first */@ import url(blueworld.css); @ import url(zany.css); H1 {color: Gray ;}</style> it is similar to link, l notify the browser to load the external style sheet. L and multiple style sheets can be loaded. The difference is that the L position is different from the syntax. @ Import is included in the style element and must be before other CSS rules. L The style sheet of each import will be used and there is no replacement rule. Compared with the media attribute of link, import includes: @ import url(sheet2.css) All; @ import url(blueworld.css) screen; @ import url(zany.css) projection and print; @ Import Important use: In a imported style sheet a, a must also use an external style sheet. In this case, the link element is obviously useless. For example, in the CSS document, it is impossible to show the link element, then use @ import, as follows: @ import URL (http://example.org/library/layout.css); @ import url(basic-text.css); @ import url(printer.css) print; body {color: red;} H1 {color: Blue ;} 1.3 compatibility with earlier browsersThe browser ignores unidentifiable tags. However, if the browser cannot recognize the style element, the style will appear at the top of the webpage in the form of plain text. Solution: add the annotator to the style so that the browser of the old version will not be displayed in text format. The new version of the browser can correctly use the style element. The details are as follows: <style type = "text/CSS"> <! -- @ Import url(sheet2.css); H1 {color: maroon;} body {Background: yellow;} --> </style> 1.4 Comments in CSSCSS comments are similar to C:/* This is a css1 comment */comments can span multiple lines, just as in C ++:/* This is a css1 comment, and it can be several lines long without any problem whatsoever. */but note: CSS comments cannot be nested. 1.5 inline style inline StylePlace the style in the description of the HTML element, that is, inline style <P style = "color: Gray; "> the most wonderful of all breakfast foods is the waffle -- a Ridged and cratered slab of home-cooked, fluffy goodness... </P> This style attribute is a new attribute that can be used to display all elements in the body element. We can see that the value of the style is a string, using the same syntax as CSS. However, this string can only be a style declaration block. The @ import and CSS rules cannot be placed in this string. That is to say, only the text that appears in curly braces in the CSS document can be put. Note: inline style is not recommended. In xhtml1.1, inline style is opposed to deprecated. Because it is displayed in violation of the principles of data and display separation. This principle is also why CSS is used. 2 Selector CSS The core feature is the ability to apply rules to element sets.   Css2 Specification Selector , Http://www.w3.org/TR/REC-CSS2/selector.html  CSS pattern matching rules (CSS specification, address as above ):

Pattern	Meaning	Described in Section
*	Matches any element.	Universal Selector
E	Matches any E element (I. e., an element of Type E ).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E> F	Matches any F element that is a child of an element E.	Child selectors
E: First-child	Matches element e when e is the first child of its parent.	The: First-Child pseudo-class
E: Link E: visited	Matches element e if e is the source anchor of a hyperlink of which the target is not yet visited (: Link) or already visited (: visited ).	The link pseudo-classes
E: Active E: hover E: Focus	Matches e during certain user actions.	The dynamic pseudo-classes
E: Lang (c)	Matches element of Type E if it is in (human) Language C (the document language specifies how language is determined ).	The: Lang () pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E [Foo]	Matches any E element with the "foo" attribute set (whatever the value ).	Attribute selectors
E [Foo = "warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning ".	Attribute selectors
E [Foo ~ = "Warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning ".	Attribute selectors
E [Lang | = "en"]	Matches any E element whose "Lang" attribute has a hyphen-separated list of values beginning (from the left) with "EN ".	Attribute selectors
Div. Warning	HTML only. The same as Div [class ~ = "Warning"].	Class selectors
E # myid	Matches any E element ID equal to "myid ".	Id selectors