Detailed description CSS Cascading style sheet

========================

CSS Cascading Style Sheets

========================

Naming rules: Use letters, numbers, or underscores and minus signs, and do not start with numbers

First, the syntax of CSS

-----------------------------

Format: Selector {property: Value; property: Value; property: value; ...}

Where selectors are also called selectors

Comments in CSS:/* ... */

Second, how to use CSS style in HTML (HTML embedded CSS in the way);

----------------------------------------------------

1. Inline mode (inline style)

is to use the Style property in the HTML tag to set the CSS style

Format:

<p style= "color:blue;font-family: Official Script" > How to use CSS styles in HTML </p>

Features: for this label only.

2. Internal mode (inline style)

is to set the CSS style using the <style type= "text/css" >....</style> tag in the head tag

Format: <style type= "Text/css" >

.... CSS style code

</style>

Features: acts on the current entire page

3. External Import method (external link)

3.1 (recommended) is to use the <link/> tag in the head tag to import a CSS file, on this page, to implement CSS style settings

Format: <link href= "file name. css" type= "text/css" rel= "stylesheet"/>

3.2 You can also import CSS files in the Style tab using Import.

such as: <style type= "Text/css" >

@import "Style.css";

</style>

Features: Acting on the entire site

Their priority: When the style conflicts, is the nearest principle, is the value of CSS properties from the modified content of the most recent main.

If there is no style conflict, the overlay effect is applied.

Third, the **css2 selector:

---------------------------------------------------------------

1. HTML selector (tag Selector)

is to use HTML tags as selectors

such as p{.} All P tags in web pages take this style

h2{.} All H2 tags in web pages take this style

2. Class selector (use point.) to define a custom name (class name)

Definition:. Class name {style ...} anonymous class

Other selector names. class name {style ...}

Use:

. Mc{color:blue}/* Use this style for all class attribute values of MC */

P.ps{color:green}/* Only use this style if the class attribute value is PS in the p tag */

Note: Class selectors can be reused in Web pages

3. ID Selector

Definition: #id名 {style ...}

Use:

NOTE: The ID selector is used only once in a Web page.

Precedence of selectors: from large to small [ID selector]->[class selector]->[html selector]->[html Properties]

4. Associative selectors (including selectors)

Format: Selector 1 selector 2 Selector 3 ... {style ....}

For example: Table a{.} The a tag in the/*table tag only takes this style */

H1 p{color:red}/* Only the P tag in the H1 tag takes this style */

5. Combo Selector (selector group)

Format: Selector 1, selector 2, selector 3 ... {style ....}

H3,h4,h5, #one,. One{color:green;}/*h3, H4, and H5 all use this style */

6. Pseudo-Class selection (pseudo-Element) options:

Format: Tag name: Pseudo-class name {style ...}

a:link {color: #FF0000; text-decoration:none}/* Link not visited */

a:visited {color: #00FF00; Text-decoration:none}/* Visited link */

a:hover {color: #FF00FF; text-decoration:underline}/* Mouse on link */

a:active {color: #0000FF; text-decoration:underline}/* Activate link */

7. Property selector:

...

8. Other pseudo-class selectors

...

Iv. Selectors in CSS3 (learn)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1. Relationship selector:

Div>p Select all child elements as DIV elements p

Div+p Select the P element that clings to the DIV element

Div~p selects all sibling elements after the DIV element p

2. Property selector:

[attribute] selects the element with the attribute attribute.

[Attribute=value] Selects an element with a attribute attribute and a property value equal to value.

[Attribute~=value] Selects a list of words with a attribute attribute and a space-delimited property value, where one element equals value.

[Attribute|=value] Select the e element with the ATT attribute and the attribute value to begin with Val and the string delimited by the connector "-".

[Attibute^=value] matches the e element with the attribute attribute and the value begins with Valule

[Attribute$=value] matches the e element with the attribute attribute and the value ends with

[Attribute*=value] matches the e element with the attribute attribute with value

3. Structural pseudo-Class selector:

:: First-letter Sets the style of the first character within the object.

:: First-line Sets the style of the first row within the object.

: Before sets the content that occurs before the object, based on the logical structure of the object tree.

: After setting what happens after the object (based on the logical structure of the object tree).

: lang (language) matches e elements that use special languages.

: Element1~element2:

: First-of-type matches the first sibling element in the same type

: Last-of-type matches the last sibling element in the same type

: Only-of-type matches the only sibling element in the same type

: Only-child matches only one child element of the parent element

: Nth-child (n) matches the nth child element of the parent element

: Nth-last-child (n) matches the reciprocal nth sibling element in the same type

: Last-child () matches the last child element of the parent element

: Root matches the element in the document. In HTML, the root element is always html

: Empty matches elements that do not have any child elements (including text nodes)

4. * Status pseudo-class selector

: Link sets the style of hyperlink a before it is accessed.

: visited set hyperlink a style that has been accessed in its linked address obsolete

: The style of the active settings element when it is activated by the user (an event that occurs between mouse clicks and releases)

*:hover to set the style of an element when its mouse hovers

*:focus sets the style of the element when it gets focus

: Target matches the E element pointed to by the related URL

: Enabled matches elements that are in a usable state on the user interface

:d isabled matches elements that are disabled on the user interface

: Checked matches the selected element on the user interface

: Not (selector) matches elements that do not contain selector selectors

:: Selection style when setting objects to be selected

5. Other pseudo-class selectors

E:not (s): {attribute}

Matches all elements that do not match the simple selector s E

P:not (. bg) {background-color: #00FF00;}

======================================================================================

V. Properties commonly used in CSS:

---------------------------------------------------------------------------------------

1. Color property:

A. HSL color: A variety of colors are obtained by changing the hue (H), saturation (S), Brightness (L) three color channels, and their superposition to each other.

BACKGROUND-COLOR:HSL (240,100%,50%); color:white;

B. Hsla color: Hue (H), saturation (S), Brightness (L), transparency (A);

Background-color:hsla (0,100%,50%,0.2);

*c. RGB color: Red (R), Green (G), Blue (B) three color channel changes

Background-color:rgba (200,100,0);

D. Rgba color: Red (R), Green (G), Blue (B), transparency (A)

Background-color:rgba (0,0,0,0.5);

*e. Settings for picture transparency img{opacity:0.25;}

2. Font properties: Font

Font

*font-size: Font Size: 20px,60% based on the percentage value of the parent object

*font-family: Font: Arial

Font-style:normal normal; italic italic; oblique italic font

*font-weight: Font Bold: Bold

Font-variant:small-caps Small Caps font

Font-stretch:[understand] The stretch of the text is the normal width of the font relative to the browser display (most browsers do not support it).

3. Text properties:

Text-indent: First line indent: text-indent:30px;

Text-overflow: Whether the overflow of text uses the ellipsis tag (...). ）。 Clip|ellipsis (show ellipsis)

*text-align: Position of text: Left center right

Text-transform: Case of text in object: Capitalize (first letter) |uppercase uppercase |lowercase lowercase

*text-decoration: Font Draw line: None, underline down line, Line-through through line

text-decoration-line:[Understanding] The position of the text trim line (browser incompatible)

*text-shadow: Whether text has Shadow and blur effect

Vertical-align: Vertical alignment of text

Direction: Text flow direction. Ltr | Rtl

White-space:nowrap; /* Force display all text in the same line */

*letter-spacing: Spacing of text or letters

Word-spacing: Word Spacing

*line-height: Row Height

*color: Font Color

. Border:

Border: Width style color;

Border-color;

Border-style; Border Style: solid implementation, dotted dotted line, dashed dash

Border-width:

Border-left-color;

Border-left-style;

Border-left-width:

...

The style of the CSS3

Border-radius: Round Corner processing

Box-shadow: Setting or Retrieving Object shadows

5. Background properties: Background

*background-color: Background color

*background-image: Background image

*background-repeat: Repeat, how do you repeat? Tile

*background-position: Positioning

Background-attachment: Whether the background is fixed,

Scroll: Default value. Background image is scrolled with object content

Fixed: Background image fixation

Properties of the CSS3

*background-size: Background size, such as background-size:100px 140px;

Multi-layered backgrounds:

Background:url (test1.jpg) no-repeat scroll 10px 20px,url (test2.jpg) no-repeat scroll 50px 60px,url (test3.jpg) no-repeat Scroll 90px 100px;

Background-origin:content-box,content-box,content-box;

Background-clip:padding-box,padding-box,padding-box;

background-size:50px 60px,50px 60px,50px 60px;

6. * Internal filler (inner patch)

padding: Retrieves or sets the internal margins of the object, such as padding:10px; padding:5px 10px;

Padding-top: Retrieves or sets the inner margin of the top edge of an object

Padding-right: Retrieves or sets the inner margin to the right of the object

Padding-bottom: Retrieves or sets the inner margin below the object

Padding-left: Retrieves or sets the internal padding to the left of the object

7. * Outer filler (external patch)

Margin: Retrieves or sets the extended margins of the object, such as margin:10px; MARGIN:5PX Auto;

Margin-top: Retrieves or sets the epitaxial margins of the top edge of an object

Margin-right: Retrieves or sets the extended margins to the right of an object

Margin-bottom: Retrieves or sets the epitaxial margins below the object

Margin-left: Retrieves or sets the extended margins on the left side of the object

8. Position positioning

*position: Positioning mode: absolute (absolute positioning), fixed (stationary) (relative positioning reference, can be positioned relative to the internal absolute)

*z-index: Stacking order, the larger the value, the higher the above.

*top: Retrieves or sets the position of the object relative to the top of its most recently positioned parent object

Right: Retrieves or sets the position of the object relative to its nearest parent object to which it is positioned

Bottom: Retrieves or sets the location under which an object is related to its most recently positioned parent object

*left: Retrieves or sets the position of the object relative to the left of its most recently positioned parent object

9. Layout layouts

*display: Whether and how to display: None hidden, block block display ...

*float: Indicates whether and how the object floats: value None | Left | Right

*clear: Clear float: none | Left | Right | Both sides

Visibility: Sets or retrieves whether the object is displayed. Visible|hidden|collapse.

Unlike the display property, this property retains the physical space it occupies for hidden objects

Clip: Retrieves or sets the viewable area of an object. The parts outside the area are transparent. Rect (top-right-bottom-left)

such as: Clip:rect (auto 50px 20px Auto), upper and left not cropped, right 50, bottom 20.

*overflow: Out of hiding: hidden,visible: Do not cut content

Overflow-x: How to manage content when the content exceeds its specified width: visible | Hidden | Scroll | Auto

Overflow-y: How content is managed when content exceeds its specified height

10.Flexible Box Flexible box (see manual)

Box-orient: Sets or retrieves the arrangement of child elements of a flexible box model object. Horizontal (horizontal) |vertical (Portrait)

Box-pack Sets or retrieves the alignment of the child elements of a flexible box model object.

Box-align Sets or retrieves the alignment of the child elements of a flexible box model object.

Box-flex Sets or retrieves how the child elements of the elastic box model object allocate their remaining space.

Box-flex-group Sets or retrieves the owning group of the child elements of the elastic box model object.

Box-ordinal-group Sets or retrieves the order in which child elements of a flexible box model object are displayed.

Box-direction Sets or retrieves whether the order of the child elements of a flexible box model object is reversed.

Box-lines Sets or retrieves whether the child elements of a flexible box model object can be displayed in a newline.

11. UI User Interface

*cursor what system predefined cursor shapes the mouse pointer uses. Pointer small hand, URL customization

Zoom Sets or retrieves the magnification of an object: Normal|5 times |200% percent

Box-sizing Sets or retrieves the object's box model composition mode. Content-box | Border-box

Content-box:padding and border are not included within the defined width and height.

Border-box:padding and border are included within the defined width and height.

Resize Sets or retrieves whether the area of an object allows the user to scale, adjusting the element size.

None: The user is not allowed to resize the element.

Both: The user can adjust the width and height of the element.

Horizontal: User can adjust the width of the element

Vertical: The user can adjust the height of the element.

Outline composite Properties: Set or retrieve line outlines outside an object

Outline-width set or retrieve the width of a line outline outside an object

Outline-style to set or retrieve the style of a line outline outside an object

Outline-color set or retrieve the color of a line outline outside an object

Outline-offset Sets or retrieves the value of the offset position of the line outline outside the object

Nav-index Sets or retrieves the navigation order of an object.

Nav-up Sets or retrieves the navigation direction of an object.

Nav-right Sets or retrieves the navigation direction of an object.

12. Multi-column Multi-column

Columns Sets or retrieves the number of columns and the width of each column of an object

Column-width set or retrieve the width of each column of an object

Column-count set or retrieve the number of columns of an object

Column-gap set or retrieve the gap between the column and columns of an object

Column-rule set or retrieve the border between the column and columns of an object

Column-rule-width set or retrieve the border thickness between the column and columns of an object

Column-rule-style set or retrieve the border style between the column and columns of an object

Column-rule-color the border color between the columns of the object and the column

Whether the Column-span element spans all columns

Column-fill the height of all columns of the object is uniform

Column-break-before the object before the break

Whether to break a column-break-after after an object

Column-break-inside whether a break is inside an object

13. Table-related properties:

Table-layout layout algorithm for setting or retrieving tables

Border-collapse Sets or retrieves whether the rows and cells of a table are merged together or separated by a standard HTML style separate | Collapse

Border-spacing Sets or retrieves the horizontal and vertical spacing of the borders of rows and cells when the table border is independent

Caption-side setting or retrieving a table's caption object is on the side of the table top | Right | Bottom | Left

Empty-cell Sets or retrieves whether the cell's border is displayed when there is no content in the table cell Hide | Show

14. Transition Transition:

Transition the transition effect when retrieving or setting an object transform

Transition-property retrieving or setting the properties of a participating transition in an object

Transition-duration retrieving or setting the duration of an object transition

Transition-timing-function retrieving or setting the type of transitions in an object

Transition-delay retrieving or setting the time for object delay transitions

15. Animation Animation

Animation to retrieve or set the animation effect applied to an object

Animation-name retrieves or sets the name of the animation to which the object is applied

Animation-duration to retrieve or set the duration of an object animation

Animation-timing-function to retrieve or set the transition type of an object animation

Animation-delay retrieving or setting the time for object animation delay

Animation-iteration-count to retrieve or set the number of cycles of an object animation

Animation-direction retrieves or sets whether an object animation moves backwards in a loop

Animation-play-state retrieving or setting the state of an object animation

Animation-fill-mode retrieves or sets the state outside the object's animation time

2D Transform 2D Transform:

Transform retrieving or setting transformations on an object

Transform-origin retrieves or sets the origin of the reference to the transformation in the object

Queries Properties Media Query

Width defines how wide the page visible area is in the output device

Height defines how high the page visibility area is in the output device

Device-width defines the screen visible width of the output device

Device-height defining the screen visibility height of the output device

Orientation defines whether ' height ' is greater than or equal to ' width '. The value portrait represents Yes, landscape represents no

Aspect-ratio defines the ratio of ' width ' to ' height '

Device-aspect-ratio defines the ratio of ' device-width ' to ' device-height '. such as the common display ratio: 4/3, 16/9, 16/10

Device-aspect-ratio defines the ratio of ' device-width ' to ' device-height '. such as the common display ratio: 4/3, 16/9, 16/10

Color defines the number of color originals for each set of output devices. If it is not a color device, the value is equal to 0

Color-index defines the number of entries in the Color query table of the output device. If no color query table is used, the value is equal to 0

Monochrome defines the number of monochrome originals that are contained per pixel in a single-color frame buffer. If it is not a monochrome device, the value is equal to 0

Resolution defines the resolution of the device. such as: 96dpi, 300dpi, 118DPCM

Scan defines scanning operations for TV-class devices

Grid is used to query whether the output device uses rasters or dots. Only 1 and 0 are valid values, 1 means yes, 0 means no