CSS basics _ CSS/HTML

CSS basics 1. style sheet Basics

1. each entry in the style sheet consists of a selector and corresponding rules. The selector is usually the name of an HTML element, or a class or id) and pseudo classes (which indicate different states of hyperlinks.

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

① External style sheet.

② The style applied to the entire document, located inPartition, including embedded style sheets and input style sheets.

③ Intra-row styles are implemented by the style attribute of most elements.

3. annotate the style sheet /*... */. Enclose style rules in HTML comments So that old browsers that do not support the style sheet technology can work normally, rather than directly displaying style rules on the screen. Generally, the browser ignores unknown elements and attributes, but the content surrounded by elements is displayed.

4. Each rule must end with a semicolon.

5. If multiple elements share the same style rules, you can use commas to group and define them. The concept of grouping is different from that of classification or identifier (id). The rules set by the former take effect for all the elements in the document, the latter takes effect only for a subset of the element (with the same class or id. When group rules and other rules involve the same element, they are combined to generate a complete style of an element.

Example: grouping rule application.

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

H1 {font-size: 200% ;}

H2 {font-size: 150% ;}

H3 {font-size: 125% ;}

Ii. External Style Sheets

External Style SheetsZone usage Element to reference, The element has three attributes:

① Rel: Specifies the link. Here is stylesheet.

② Href: Specifies the URL of the external style sheet.

③ Type: specifies the type of the style sheet, which is text/css. (Others include jss)

Example: reference an external style table.

Style Sheet Linking Example

3. Apply the style sheet to the entire document

3.1 embed a style sheet

Embedded style sheets are directly written in the style element of the head area to form a style sheet for applications and the entire document. In this case, you only need to use the type attribute of the style element.

Example: Use of embedded style sheets.

3.2 input style sheet

The input style table also references an external style table, but does not reference it through the link element but through the @ import syntax in the style area: @ import url (url address of css); you can

4. Intra-row style

Most elements have the style attribute. In-row 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.

For example, use of intra-row styles.

CSS1 Inline

5. domain of style rules

The storage location of the style sheet is discussed above. Now, the range of the style sheet is discussed. The two have both links and differences: the intra-row style rule naturally determines that its impact scope is the current element, other style rules can flexibly set the scope of the rule.

5.1 simple rules

The simplest rules may be called document Rules and in-row rules. The former can be applied to all elements that appear in the entire document (such as all

Element), the latter is only applied to the current element.

5.2 id rules

The element using the id attribute can be used as the target of the hyperlink (similar to the name attribute, it will be displayed at the specified position on the page when loading the page ), you can also use it to bind a style rule to a style table (which is stronger than the name attribute ). Whether used as the href of the hyperlink or the style rule selector, the format of the referenced id is: # id value. In an HTML document, the id attribute value must be globally unique.

For example, the combination of id attributes and hyperlinks or style sheets.

If yes

...

Can be referenced as follows:

Go to SecondParagraph or

5.3 class rules

Like the id attribute, the class attribute is also one of the core HTML attributes. Most elements have this attribute. The class attribute defines the name of the class to which an element belongs. The class value must not be unique. Multiple instances of the same class Element and multiple elements of different classes may belong to the same class. You can use classes to significantly reduce the number of style rules required in the document. Style rules have two formats for referencing class:

① Set a style for all the elements of this class:. Class Name {style rule ;}

② Set a style for all X elements of the class: X. Class Name {style rule ;}

Example: Use of class rules.

5.4 pseudo-classes (pseudo-classes) and pseudo-elements (pseudo-elements)

5.4.1 pseudo-classes

A set of specialized pre-defined classes are called pseudo classes, which are mainly used to process the hyperlink status. The hyperlink text status can be controlled by pseudo-class selector + style rules. Pseudo-class delimiters include:

① A: link: unaccessed link

② A: visited: accessed Link

③ A: active: the link color when the link gets the focus.

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

Generally, the status of a: hover and a: visited links (color, underline, etc.) should be the same. The first three attributes correspond to the link, vlink, and alink attributes of the body element. The procedure of the four States is as follows: a: link-> a: hover-> a: active-> a: visited. In addition, a: active cannot be set with or without underscores (always ).

Example: common status values of pseudo classes

5.4.2 pseudo elements

Two pseudo elements: first-letter and first-letter. They are often

These elements are used together to affect the display of the first letter or line, such as p: first-letter and p: first-line.

5.5 contextual selection)

Context Selection allows you to control the style of an element in a nesting level. This rule lists the names of elements in the nesting order and then provides style rules to create them.

Example: Make all

ElementEach element has a yellow background color.

P strong {background-color: yellow ;}

6. Inheritance and nesting of style rules

This attribute allows you to combine multiple rules of an element. You can inherit some attributes from the parent element or rewrite some attributes. The general idea of Cascade (C in CSS) is to effectively create a system to determine which rules will be applied in documents with multiple style sheets. For example, use the id attribute

The element specifies the rule, which has priority over the rule specified by the class rule, and the class rule is relative

The rules specified by the element have priority. Compared with the styles applied to the entire document or external styles Linked In, the intra-row styles specified by a style attribute are more important. A simple method to determine which rule will take effect is: the higher the priority of a specific rule, the higher the priority of a rule that is closer to the tag location.

If you want a specific rule to never be overwritten by another rule, you can use it! Important Declaration. You can insert a statement before the semicolon of a rule that you want to never ignore! Important, which must be placed at the end of the rule before the semicolon; otherwise, it will be ignored. In addition, many earlier versions of browsers do not support this statement.

Example: Use! Important declares rules not to be overwritten.

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

The elements are displayed in red and 24.

VII. CSS1 attributes

3.1 font attributes

Font model, Font Style, font size, font effect, etc. Common attributes include:

① Font-family: model, Cursive, Fantasy, Comic Sans MS, etc.

② Font-size: physical or relative font size. The physical size includes: xx-small, x-small, small, medium, large, x-large, and xx-large correspond to 1 ~ Font 7.

③ Font-style: whether it is italic, normal, italic, and oblique (= italic ).

④ Font-weight: Text width, normal, bold, bolder, and lighter.

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

3.2 text attributes
Text modifier, text indent, word spacing, letter spacing, line spacing, horizontal and vertical alignment of the text, and control the space size. Common attributes include:

① Text-transform: the words are case sensitive, including none, capitalize, uppercase, and lowercase.

② Text-decoration: Special Effects: none, line-through, overline, underline.

③ Word-spacing: word spacing, normal, in, 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: horizontal text alignment, left, right, center, and justify.

7. text-indent: indent is generated for the first line of the paragraph element.

⑧ Line-height: the height of the current row. In this way, the same distance is left blank between upper and lower rows.

Invalid white-space: controls the processing of spaces in an element. normal (default), pre (no space compression), and nowrap (line breaks are not wrapped even if the text line exceeds the width of the element content)

3.3 color attributes and background attributes

① Color: text color

② Background-color: background color

③ Background-image: background image. The background color is displayed below the background image to provide an opaque background, such as ④ background-repeat: determines how the background image is arranged when it is less than the canvas space of the element.

Repeat: by default, it is tiled horizontally and vertically;

Repeat-x: tiled only in the horizontal direction;

Repeat-y: Tile only in the vertical direction;

No-repeat: not tiled.

⑤ Background-attachment:

Scroll: by default, the image and text scroll together;

Fixed: The image does not move and the watermark effect is displayed.

⑥ Background-position: Positioning Method of the background image in the element canvas space. It specifies the horizontal and vertical spacing between the upper left corner of the image and the canvas. You can use absolute distance (pixel), percentage, or special keyword.

Horizontal Direction keywords: left, center, right

Vertical keywords: top, center, bottom

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

3.4 box attributes

Image

Block-level elements such as elements can be considered as a rectangular container on the screen. You can use style attributes to control three aspects of these containers. The controllable box attributes are as follows:

① Margin attribute: determines the distance between the edge of the element's box and the edge of the adjacent element.

② Border attribute: determines the visual characteristics of the border of the edge of the element.

③ Padding attribute: determines the distance between its edge and its actual content in the element.

④ Height, width, and positioning attributes: determine the size and position of the box generated by the element.

3.4.1 attributes of margin

Rules for setting a single margin:

① Margin-top: top margin

② Margin-right: right margin

③ Margin-bottom: bottom margin

④ Margin-left: left margin

For example, set a single margin.

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

P {margin-bottom: 20mm ;}

P. fun {margin-left: 1.5; margin-right: 1.5 ;}

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

For example, you can use the margin attribute to set margin rules.

① If only one value is specified, the value is applied to four blank spaces ".

For example, p {margin: 1.5 ;}

② If four values are specified, they will be applied to each blank area clockwise (in the order of top, right, bottom, and left ),

The last distance is followed by a semicolon, which is separated by spaces.

For example, 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 opposite side.

For example, p {margin: 10px 5px ;}

The white space on the top and bottom is set to 10 pixels, and the white space on the right and left is 5 pixels.

3.4.2 border attributes

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

(1) border-style attributes

① None: no border

② Dotted: dot border

③ Dashed: dotted border

④ Solid: solid border

⑤ Double: double border

⑥ Groove: Etching border

7. ridge: highlight the border

Inset: concave border

Border outset: raised border

You can also use border-top-style, border-right-style, border-bottom-style, and border-left-style to set the border type of each edge separately. When border-style is used to set the four sides, the rule is similar to that of margin.

(2) border-width attribute

Border-width, border-top-width, border-right-width, border-bottom-width, and border-left-width can respectively set the border width. Typical values include thin, medium, and thick. Of course, other length values are also recommended.

(3) border-color attributes

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

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

For example, set the border combination attribute.

# 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 attributes

The padding between the border of an element and its actual content can be controlled through the padding attribute. The four gaps (padding) of an element can be set through padding-top, padding-right, padding-bottom, and padding-left. Like the blank (margin) and border (border), you can use the padding attribute in shorthand form to set the gap between the four sides at a time.

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