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, which is usually the name of an HTML element, or it can be a class, identifier (ID), Pseudo-class (pseudo class, which indicates the different states of the hyperlink), and so on.

2. There are 3 ways to add a style sheet (rule) to an HTML document:

① external style sheet.

② the style applied to the entire document, located in the area, including the embedded style sheet and the input style sheet.

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

3. Comments in the style sheet with/* ... */. By enclosing style rules between HTML annotations, it is possible for older browsers that do not support style sheet technology to work correctly instead of displaying style rules directly on the screen. In general, the browser ignores elements and attributes that are not recognized, but the content that surrounds the elements is displayed.

4. Each rule must be semicolon-terminated;

5. If multiple elements share the same style rules, you can use commas to group them into definitions. The concept of grouping here differs from the concept of classification (class) or identifier (ID), which sets the rule to work for all of that element in the entire document, and the latter only works on a subset of that element (class or ID). As group rules and other rules involve the same element, they are combined to produce the complete style of an element.

Example: 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

External style sheets are referenced by using elements within the zone , and the elements have three main properties:

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

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

③type: Indicates the type of style sheet, here is text/css. (Others also have JSS)

Example: how external style sheets are referenced.

Style Sheet linking Example

Three Style sheets applied to the entire document

3. 1 Embedding style Sheets

An embedded style sheet is used directly within the style element of the head area to form a style sheet that applies to the entire document. In this case, you only need to use the Type property of the style element.

Example: Use of embedded style sheets.

3. 2 Input Style Sheet

The input style sheet also refers to an external style sheet, but is referenced by the @import syntax in the style area instead of through the link element: @import url (the URL address of the CSS);

Four inline style

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

Example: the use of inline styles.

CSS1 Inline

Five Domain of style rules

The above discusses the location of the stylesheet, and now discusses the scope of the style sheet, the two are both linked and different: the inline style rule naturally determines its scope is the current element, while other style rules can be flexibly set the scope of the rule.

5. 1 Simple Rules

The simplest rules may call them document rules and in-line rules. The former can be applied to all occurrences of an element in the entire document, such as all

Element), which applies only to the current element.

5. 2 ID Rule

An element that uses the id attribute, in addition to being the target of a hyperlink (like the Name property, locates the display at the specified location on the page when the page is loaded), and can be used to bind to a style rule in the style sheet (where it is stronger than the Name property). Whether you are the href of 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 there is

...

, you can refer to the following:

Go to Secondparagraph or

5. 3 class Rules

As with the id attribute, the class attribute is one of the HTML core properties, and most elements have that property. The class attribute defines the name of the classes to which an element belongs. Class values do not require uniqueness, multiple instances of the same class of elements, and elements of different classes may belong to the same class. Using a class can significantly reduce the number of required style rules in your document. There are two forms of referencing 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: the use of class rules.

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

5. 4. 1 Pseudo-Class

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

①a:link: No links visited

②a:visited: Visited Link

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

④a:hover: When you move the mouse over a link

The status of the general A:hover and a:visited links (colors, underscores, etc.) should be the same. The first three correspond to the three attributes of the BODY element link, Vlink, and ALink respectively. The four "states" of the sequence of the process is: A:link->a:hover->a:active->a:visited. In addition, a:active cannot be set with or without underscores (always there).

Example: Common state values for pseudo-classes

5. 4. 2 Pseudo-elements

Two pseudo-elements:: First-letter and: First-letter. They often and like

This element guides a piece of text that is used together to influence the first or first line of the display, such as P:first-letter and P:first-line.

5. 5 Scenario Selection (contextual selection)

Scenario selection allows style control for an element that is located within a nested hierarchy by listing the name of the element in nested order and then giving the style rule to create it.

Example: making all occurrences in

Elements within the element all have a yellow background color.

P Strong {Background-color:yellow;}

Six Inheritance and nesting of style rules

This property allows you to combine multiple rules of an element, either inheriting attributes from the parent element or overriding certain properties. The general idea of cascading (c in CSS) effectively creates a system to determine which rules will be applied in a document that has multiple style sheets. For example, use the ID property for a specific

element specifies a rule, which has precedence over the rules specified by the class rule, and the class rule is relative to the

The rules specified by the element itself have precedence. The inline style specified by a style property is more important than the style that is applied to the entire document or the external style in which the link comes in. The simple way to consider which rule will eventually take effect is that the more specialized the rule priority is, the higher the rule priority is, and the closer the tag position is.

If you need a particular rule that is never rewritten by another rule, you can declare it with!important. For a rule that you want to never be ignored, you can insert the declaration!important before the semicolon of this rule, it must be placed at the end of the rule, before the semicolon, otherwise it will be ignored. In addition, many older browsers do not support this statement.

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

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

The element will eventually appear in red, 24-point size.

Seven CSS1 Property

3. 1 Font Properties

fonts, font styles, font sizes, font effects, and more. Common properties are:

①font-family: Font, cursive, fantasy, Comic Sans MS, etc.

②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 number font.

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

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

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

3. 2 Text Property
Text decoration, text indentation, word spacing, letter spacing, line spacing, horizontal and vertical alignment of text, and white space size control. 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), centimeters (cm), point (PT), Pica (PC), EM (EM), pixels (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 same distance will be vacated on the top and bottom of the set line.

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

3. 3 Color property and Background property

①color: Text color

②background-color: Background color

③background-image: The background image, which is displayed below the background image, to provide an opaque background, than ④background-repeat: determines how the background image is arranged when the canvas space of the element is less than the 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 paving.

⑤background-attachment:

Scroll: Default, the image and text scroll together;

Fixed: Image does not move, watermark effect.

⑥background-position: How the background image is positioned in the element canvas space, specifying the horizontal and vertical spacing of the upper-left corner of the image relative to the canvas. You can use absolute distances (pixels), percentages, or special keywords.

Horizontal direction Keywords: Left, center, right

Vertical direction Keywords: top, center, bottom

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;}

3. 4 Box Properties

Like

Elements such as block-level elements can be considered as a rectangular container on the screen. You can control three aspects of these containers through style properties. The following box properties can be controlled:

①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 bounding rectangle that surrounds the edge of the element.

③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 created by the element.

3. 4. 1 Margin Property

Setting rules for single-sided margins:

①margin-top: Top margin

②margin-right: Right margin

③margin-bottom: Bottom Margin

④margin-left: Left Margin

Example: The setting of the single-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;}

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

Example: Set the rules for margins with the 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 are applied in a clockwise direction to each white space (top, right, bottom, left order).

After the last distance, add 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 value of the missing side is determined by its edge.

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

Set the top and bottom blanks to 10 pixels, and the blank on the right and left to 5 pixels.

3. 4. 2 Border Properties

The border is located between the blank (margin) and the gap (padding).

(i) Border-style property

①none: No Border

②dotted: Point Border

③dashed: Dashed border

④solid: Solid Line border

⑤double: Bilateral box

⑥groove: Etched Border

⑦ridge: Highlight Border

⑧inset: Recessed Border

⑨outset: Raised border

You can also set the border type for each edge individually by Border-top-style,border-right-style,border-bottom-style,border-left-style. When using Border-style to set four edges, the rule is similar to margin.

(ii) Border-width property

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.

(iii) Border-color property

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

You can apply Border-style, Border-width, Border-color together to Border, Border-top, Border-right, Border-bottom, Border-left to implement a quick set of related border properties. When the three attributes are set together, it is best to give the values in the order of Border-style, Border-width, Border-color, and so on.

Example: Border the set of combination properties.

#RainbowBox

{

Background-color:yellow;

Border-top:solid 20px Red;

Border-right:double 10px Blue;

Border-bottom:solid 20px Green;

Border-left:dashed 10px Orange;

}

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 the blank (margin) and border (border), you can use the Padding property in shorthand notation to set the gap at one time.

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