CSS Basic Learning _css/html

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.

Seven CSS1 Property

3. 1 Font Properties

Type, font style, font size, font effect, and so on. Common properties are:

①font-family: Font, cursive, fantasy, comic Sans Ms.

②font-size: Font physical size or relative size, physical size includes: Xx-small, X-small, small, medium, large, X-large, Xx-large, respectively corresponding to the 1~7 font.

③font-style: Italic, Normal, italic, oblique (=italic).

④font-weight: Text weight, normal, bold, bolder, lighter.

⑤font-variant: Small caps, normal, small-caps (small capital letters).

<!--[if!supportemptyparas]--> <!--[endif]-->

<!--[Endif]-->3. 2 Text Property
Text decoration, text indentation, word spacing, letter spacing, line spacing, horizontal and vertical alignment of text, and control of blank size. Common properties are:

①text-transform: Word case, none, capitalize, uppercase, lowercase.

②text-decoration: Special effects, none, Line-through, overline, underline.

③word-spacing: Word spacing, normal, inches (in), cm (cm), point (PT), Pica (PC), EM (EM), pixel (px).

④letter-spacing: letter spacing.

⑤vertical-align: Vertical positioning of text or images, baseline (default), Sub, super, top, text-top, middle, bottom, text-bottom.

⑥text-align: Text horizontal alignment, left, right, center, justify.

⑦text-indent: Indents the first line of the paragraph element.

⑧line-height: The height of the current row, so that the line is set to empty out the same distance.

⑨white-space: Controls how spaces within an element are handled, normal (default), pre (without compressed spaces), nowrap (even if the text line exceeds the width of the element's content)

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 3 Color properties and Background properties

①color: Text color

②background-color: Background color

③background-image: Background image that is displayed below the background image to provide an opaque background than the ④background-repeat: determines how the background image is arranged when it is less than the element's canvas space hour.

Repeat: Default, tile in horizontal and vertical two directions;

Repeat-x: Tile in horizontal direction only;

Repeat-y: Tile only in vertical direction;

No-repeat: Uneven shop.

⑤background-attachment:

Scroll: Default, the image and text scrolling together;

Fixed: The image does not move, the watermark effect.

⑥background-position: The position of the background image in the element canvas space, specifying the horizontal and vertical spacing of the upper-left corner of the image relative to the canvas. Absolute distances (pixels), percentages, or special keywords can be used.

Horizontal direction Keywords: Left, center, right

Vertical-Orientation Keywords: top, center, bottom

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The Background-image attribute is used.

B{background-image:url (donut-tile.gif); background-color:white;}

P{background-image:url (picture.gif); background-position:20% 40%;}

Body{background-image:url (picture.gif); Background-position:center Center;

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4 Box Properties

Block-level elements such as <p> elements can be considered as a rectangular container on the screen. You can control the three aspects of these containers by using style properties. The box properties you can control are as follows:

①margin property: Determines the distance between the edge of the box of the element and the edge of the adjacent element.

②border property: Determines the visual characteristics of the border surrounding an element's edges.

③padding property: Determines the distance between its edge and its actual content within an element.

④height,width and Positioning properties: Determines the size and position of the box that is generated by the element.

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 1 Margin Properties

Setting rules for the one-sided distance:

①margin-top: Top margin

②margin-right: Right margin

③margin-bottom: Bottom Margin

④margin-left: Left Margin

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The setting of the one-sided distance.

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right:1.5cm;}

<!--[if!supportemptyparas]--> <!--[endif]-->

You can also use the margin property to set the margin for four edges at a single interval.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: Rules for setting margins by margin property.

① if only a single value is specified, the value is applied to 4 "blanks."

such as: p{margin:1.5cm;}

② if four values are specified, they apply clockwise to the various blanks (top, right, bottom, and left).

The last distance is followed by a semicolon, separated by a space.

such as: p{margin:10px 5px 15px 5px;}

③ if only two or three values are specified in the rule, the missing side value will be determined by its opposite side.

such as: p{margin:10px 5px;}

The top and bottom blanks are set to 10 pixels, and the blank to the right and left is 5 pixels.

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 2 Border Properties

The border is between the white space (margin) and the gap (padding).

(i) Border-style property

①none: No Border

②dotted: Point Border

③dashed: Dotted border

④solid: Solid Line border

⑤double: Double Border

⑥groove: Etched Border

⑦ridge: Highlight Border

⑧inset: Recessed Border

⑨outset: Raised border

You can also set the border type of each side individually by Border-top-style,border-right-style,border-bottom-style,border-left-style. When you use Border-style to set up four sides, the rules are similar to margin.

<!--[if!supportemptyparas]--> <!--[endif]-->

(ii) Border-width properties

Border-width, Border-top-width, Border-right-width, Border-bottom-width, border-left-width can set the thickness of the border separately. Typical values are: thin, medium, thick, and of course other length values are desirable.

(iii) Border-color properties

Border-color, Border-top-color, Border-right-color, Border-bottom-color, Border-left-color can set the color of the border respectively.

<!--[if!supportemptyparas]--> <!--[endif]-->

Border-style, Border-width, Border-color can be applied together to border, Border-top, Border-right, Border-bottom, Border-left to achieve a quick set of related border properties. When three properties are set together, it is best to give values in the order of Border-style, Border-width, and Border-color.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: Border the set of properties of a combination.

#RainbowBox

{

Background-color:yellow;

Border-top:solid 20px Red;

Border-right:double 10px Blue;

Border-bottom:solid 20px Green;

Border-left:dashed 10px Orange;

}

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 3 Padding Properties

The whitespace between the element's border and its actual content can be controlled by the Padding property. The 4 gaps (padding) of an element can be set by Padding-top, Padding-right, Padding-bottom, and Padding-left. As with white space (margin) and borders (border), you can use the Padding property of a shorthand character to set the gap of four edges at once.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: a comprehensive application involving margin, border and padding.

<style type = "Text/css" >

<!--

#one

{

Background:yellow;

border-style:double;

Border-width:medium;

padding-left:1cm;

padding-right:0.5cm;

}

#two

{

Background:yellow;

border-style:double;

Border-width:medium;

padding-top:1cm;

padding-bottom:1cm;

}

#three

{

Background:yellow;

border-style:double;

Border-width:medium;

padding:1cm 1cm;

margin:0.5cm 4cm;

}

-->

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 4 Width, Height property

Example: Synthesis.

P

{

width:300px;

height:400px;

padding:10px;

Border:solid 5px;

Background-color:yellow;

Color:black;

}

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 5 Float, clear properties

The Float property affects how the element is aligned horizontally, similar to the Align property of most HTML elements. It causes the elements it contains to "flow" to the left or right, when we call this element "flow" element. The clear property positions the flow element vertically, deciding whether to continue or clear the current flow, similar to the Clean property of the HTML element BR, with left, right, both, none (default).

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 6 Display Properties

The CSS model defines three types of display elements: block-level elements, inline elements, and lists. The Display property allows one of the displayed types of an element to be one of the following four values: Block,inline,list-item and none.

①none: Elements will not be displayed and will not occupy the canvas space, which is different from setting the Visibility property.

②block: block-level elements.

③inline: inline element.

④list-item: List Element

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The Display property is used.

① "Close" a paragraph so that it does not appear:

P.remove{display:none;}

② transforms a block-level element (such as a paragraph) into an inline element so that it can be displayed without wrapping!

P{display:inline;}

③ converts an inline element into a block-level element, which adds a carriage return (newline)!

Em{display:block;}

④ forces an element to appear to some extent as a list:

B{display:list-item;}