Style sheet (css:cascading style Sheets) brief tutorial [top]

css| Tutorial | style sheet

A Style Sheet Basics

1. Each entry in a style sheet consists of a selector (selector) and a corresponding rule, and the selector is usually the HTML element name, the class, the identifier (ID), the pseudo class (pseudo class, which indicates the different states of the hyperlink), and so on.

2. There are 3 ways to add style sheets (rules) to an HTML document:

① an external style sheet.

② the style applied to the entire document, located in the

③ in-line style, implemented by the style property of most elements.

3. Comments in the style sheet are/* ... *. By enclosing style rules in HTML comments <!---->, old browsers that do not support stylesheet technology can work properly instead of directly displaying style rules on the screen. Generally speaking, browsers ignore elements and attributes that are not recognized, but the content that surrounds them is displayed.

4. Each rule must be a semicolon;

5. If multiple elements share the same style rules, you can group them by using commas. The concept of grouping is different from the concept of category (class) or identifier (ID), which has a rule that works for all of the elements in the document, and the latter only works on a subset of that element (class or ID). When a group rule and other rules involve the same element, they are grouped to produce the complete style of an element.

Examples: The application of group rules.

h1,h2,h3 {background:yellow; color:black;}

h1 {font-size:200%;}

h2 {font-size:150%;}

h3 {font-size:125%;}

Two External style sheet

An external style sheet has three properties by referencing the,<link> element by using the <link> element within the

①rel: Indicates the link relationship, this is stylesheet.

②href: Indicates the URL of an external style sheet.

③type: Indicates the type of style sheet, this is text/css. (Other JSS)

Example: The way an external style sheet is referenced.

<title>style Sheet linking Example</title>

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

Three Style sheet applied to the entire document

3. 1 embedded style sheet

The embedded style sheet is used directly in the style element in the head area to form a stylesheet that applies to the entire document. In this case, you only need to use the type attribute of the style element.

Example: Use of embedded style sheets.

<style type = "Text/css" >

<!--

Body {

font:10pt;

Font-family:serif;

Color:black;

Background-color:white;

}

-->

</style>

3. 2 Input Style Sheet

The input style sheet also refers to an external style sheet, but not through the link element but in the style area by @import syntax: @import url (the URL of the CSS); You can reference some input style sheets within the <style> element. Also specifies some styles that apply only to this document. However, (Netscape) browser support for input style sheets is not common, so <link> is recommended for referencing external style sheets.

For example: Enter a combined use of a style sheet and an embedded style sheet.

<style type = "Type/css" >

<!--

@import URL (corerules.css);

@import URL (linkrules.css);

/* A rule specific to this document * *

h1{

font:24pt;

Font-family:sans-serif;

Color:black;

Text-align:center;

}

-->

</style>

Four inline style

Most elements have a style attribute. Inline style information does not need to be hidden from browsers that do not support style sheets, because browsers ignore any attributes they do not understand.

Example: use of inline styles.

<H1 style = "font-size:48pt; font-family:arial; Color:green; " >css1 inline

Five Scope of Style rules

This discussion of where the style sheet is stored is now a discussion of the scope of the style sheet, both connected and different: inline style rules naturally determine that its scope is the current element, while other style rules can flexibly set the scope of the rule.

5. 1 Simple Rules

The simplest rules might call them document rules and inline rules. The former can be applied to all occurrences of an element (such as all <p> elements) throughout the document, which applies only to the current element.

5. 2 ID Rule

Elements that use the id attribute can also be used to bind to a style rule in a style sheet (a place that is stronger than the Name property), in addition to the destination of the hyperlink (similar to the Name property, which is displayed when the page is loaded). Whether it is an href as a hyperlink or a selector for a style rule, the format of the reference ID is: #id value. In an HTML document, the id attribute value must be globally unique.

Example: The id attribute is used in conjunction with a hyperlink or style sheet.

If you have a <p id = "Secondparagraph" >...</p>, you can refer to the following:

<a href = "# secondparagraph" >go to secondparagraph</a> or

<style type = "Text/css" >

<!--

#secondparagraph {background-color:green;}

-->

</style>

5. 3 Class Rule

As with the id attribute, the class attribute is also one of the HTML core attributes, and most elements have that attribute. The class attribute defines the name of the class to which an element belongs. Class values do not require unique, multiple instances of the same type of element, and elements of multiple different classes may belong to the same class. Using a class can significantly reduce the number of required style rules in a document. There are two types of formatting that refer to class in a style rule:

① sets the style for all elements of the class:. Class name {style rule;}

② sets the style for all x elements that belong to the class: X. Class name {style rule;}

Example: Use of class rules.

<style type = "Text/css" >

<!--

. Main-item {font-size:150%}

h1.veryimportant {background-color:orange;}

-->

</style>

5. 4 Pseudo-Class (pseudo-classes) and pseudo-elements (pseudo-elements)

5. 4. 1 Pseudo class

A set of predefined classes, called pseudo classes, are used primarily to handle the state of hyperlinks. The state of the hyperlink text can be controlled by the pseudo class selector + style rule. Pseudo class selectors include:

①a:link: Links not visited

②a:visited: Links already visited

③a:active: The color of the link when activated (when the link gets focus)

④a:hover: When the mouse moves over the link

The status of General A:hover and a:visited links (colors, underscores, etc.) should be the same. The first three correspond to the three attributes of link, Vlink, and ALink of the Body element respectively. The four "state" process is: A:link->a:hover->a:active->a:visited. In addition, a:active cannot be set without underlining (always available).

Example: Common state values for pseudo classes

<style type = "Text/css" >

<!--

a:link {color:blue; text-decoration:none;} Not accessed: blue, no underline

a:active:{color:red;} Active: Red

a:visited {color:purple;text-decoration:none;} Visited: purple, no underline

a:hover {color:red; text-decoration:underline;} Mouse move near: red, underline

-->

</style>

5. 4. 2 pseudo Element

Two pseudo elements:: First-letter and: First-letter. They are often used in conjunction with a text that is guided by elements such as <p> to influence the display of the first letter or first line, such as P:first-letter and P:first-line.

<style type = "Text/css" >

<!--

p:first-line {background-color:yellow;}

p:first-letter{color:red;font-size:150%;}

-->

</style>

5. 5 Scene selection (contextual selection)

Story selection allows style control over an element that is located within a nested level, which is created by listing the names of the elements in a nested order and then giving them a style rule.

For example: Make all <strong> elements that appear within the <p> element have a yellow background color.

P Strong {Background-color:yellow}

Six Inheritance and nesting of style rules

This property allows you to combine a variety of rules for an element, either inheriting some properties from the parent element or overriding some properties. The general idea of cascading (c in CSS) effectively creates a system to determine which rules will be applied in documents with multiple stylesheets. For example, use the id attribute to specify a rule for a particular <p> element, which has precedence over the rules specified by the class rule, whereas the class rule has precedence over the rules specified for the <p> element itself. The inline style specified through a style property is more important than the style that is applied to the entire document or the external style that is linked in. An easy way to think about which rule will eventually take effect is that the more specialized the precedence of the rule, the higher the rule priority that is closer to the tag position.

If you need a particular rule that is never overridden by another rule later, you can use the!important declaration. For rules that you want to never be ignored, you can insert a declaration!important before the semicolon of this rule, and it must be placed at the end of the rule, before the semicolon, otherwise it will be ignored. In addition, many older versions of browsers do not support this claim.

Example: Use!important to declare rules that are not overridden.

P {color:red!important;font-size:12pt;}

<p style= "color:green;font-size:24pt;"} ...</p>

The <p> element will eventually be displayed in red, 24-point size.

First, two manuals are available for download Css2&javascript.rar