Home > Article > Web Front-end > Detailed description of CSS cascading style sheets

Detailed description of CSS cascading style sheets

高洛峰Original: 2017-03-14 15:56:052192browse

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

CSS CascadingStyle Sheet

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

Naming rules: use letters, numbers or underscores and minus signs Composition, do not start with a number

1. CSS syntax

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

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

The selector is also called the selector

Comment in CSS: /* ... */

2. How to use css style in HTML (the way to embed css in html);

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

1. Inline mode (inline style)

Use the style attribute in the HTML tag to set the css style

Format: <html tag style="Attribute: value; Attribute: value;...."> ;Modified content

font-family:official script"> in HTML How to use css style in

Features: Only applies to this tag.

2. Internal method (embedded style)

is to use tag to set css style

Format:

Features: Applies to the entire current page

3. External import method (external link in)

3.1 (recommended) is to use the tag in the head tag to import a css file, and then act on this page to implement css style setting

Format:

3.2 can also be used import imports the css file in the style tag.

For example:

Features: Acts on the entire website

Their priority: When styles conflict, the proximity principle is adopted, which is the value css attribute The one closest to the modified content is given priority.

If there is no style conflict, the overlay effect will be used.

3. **css2 selector:

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

1. html selector (tag selector)

is to use the html tag as a selector

such as p{....} All p in the web page Tags adopt this style

h2{....} All h2 tags in the web page adopt this style

2. classClass selector ( Use point. Selector to define a custom name (class name))

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

Others Select symbol name.Class name{style....}

Use:...

.mc{color:blue;} /* All those whose class attribute value is mc adopt this style*/

p.ps{color:green;} / *Only the class attribute value in the p tag is ps. This style is used*/

Note: the class selector can be reused in the web page

3. Id selector

Definition: #id name{style....}

Use: ...< ;/html tag>

Note: The id selector is only used once in the web page.

Priority of the selector: from the largest Go to the small [ID selector]->[class selector]->[html selector]->[html attribute]

4. Associated selectors (including selectors)

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

For example: table a{....} /*Only the a tag in the table tag adopts this style*/

h1 p{color:red} /*Only the p tag in the h1 tag adopts this style*/

5. Selector combination (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-classSelect (pseudo-element) selector:

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

a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/

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 . Attribute selector:

...

8. Other pseudo class selectors

...

4. Selectors in CSS3 (understanding)

－－－－－－－－－－－－－－－－－－ ----------------------------------------------

1. Relationship selector:

div> p selects all the child elements p

that are div elements div+p selects the p element immediately after the div element

div~p selects all sibling elements p

# after the div element ## 2. Attribute selector:

[attribute] Selects elements with the attribute attribute.

[attribute=value] Select elements with attribute attribute and attribute value equal to value.

[attribute~=value] Select an element that has an attribute attribute and the attribute value is a space-separated list of words, one of which is equal to value.

[attribute|=value] Select the E element that has the att attribute and the attribute value is a

string starting with val and separated by the connector "-".

[attibute^=value] Matches E elements that have an attribute attribute and the value starts with value

[attribute$=value] Matches E elements that have an attribute attribute and the value ends with value

[attribute*=value] Matches E elements with attribute attributes and values containing value

3. Structural pseudo-class selector:

:first-letter Set the style of the first character within the object .

:first-lineSet the style of the first line in the object.

:beforeSet the content that occurs before the object (according to the logical structure of the object tree).

:afterSet the content that occurs after the object (according to the logical structure of the object tree).

:lang(language) matches E elements using a special language.

:element1~element2:

:first-of-type Matches the first sibling element of the same type

:last-of-type Matches the last sibling element of the same type

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

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

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

:nth-last-child(n) matches The penultimate nth sibling element of the same type

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

:root matches the root element of the document. In HTML, the root element is always HTML

:empty matches elements without any child elements (including text nodes)

4. *

Status Pseudo-class selector

:link sets the style of

hyperlinka before it is visited.

:visited Sets the style of hyperlink a when its link address has been visited.

:active Sets the element when it is activated by the user (

event that occurs between mouse click and release ) style

*:hover Set the style of the element when it is hovered by the mouse

:focus Set the style of the element when it gets focus

:target matches the E element pointed to by the relevant URL

:enabled matches the elements in the available state on the user interface

:disabled matches the elements in the disabled state on the user interface

:checked Matches selected elements on the user interface

:not(selector) matches elements that do not contain the selector selector

::selection Sets the value when the object is selected Style

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

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

5. Commonly used attributes in CSS:

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

1. Color color attribute:

a. HSL color: By comparing hue (H), saturation (S), and brightness (L) Changes in color channels and their superposition on each other to obtain a variety of colors.

background-color: hsl(240,100%,50%);color:white;

b . HSLA color: Hue (H), Saturation (S), Lightness (L), Transparency (A);

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

*c. RGB color: changes in the three color channels of red (R), green (G), and blue (B)

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. Picture Transparency setting img{ opacity:0.25;}

2. Font attributes: font

font

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

*font-family: Font: Song Dynasty, Arial

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

*font-weight: font bold: bold

font-variant: small-caps Small uppercase font

font-stretch: [Understand] Text stretching is relative to browsing The normal width of the font displayed by the browser (not supported by most browsers).

3. Text attributes:

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

text-overflow: Whether to use the omission mark (...) for text overflow. clip|ellipsis (display omission mark)

*text-align: Text position: left center right

text-transform: The case of the text in the object: capitalize(first letter)|uppercase uppercase|lowercase lowercase

*text -decoration: font line drawing: none, underline, line-through

text-decoration-line: [Understand] the position of text decoration lines (browser is not compatible)

*text-shadow: Whether the text has a shadow and blur effect

vertical-align: The vertical alignment of the text

direction: Text flow direction. ltr | rtl

white-space:nowrap; /*Force all text to be displayed on the same line*/

*letter-spacing: The spacing of text or letters

word-spacing: The spacing of words

*line-height : Line height

*color: Font color

*4. Border:

border: width style color;

border-color;

border-style; Border style: solid implementation, dotted dotted line, dashed dashed line

border-width:

border-left-color;

border-left-style;

border-left-width:

. ..

CSS3 style

border-radius: rounded corner processing

box-shadow: set or retrieve object shadow

5. Background properties: background

*background-color: Background color

*background-image: Background image

*background-repeat: Whether to repeat, how to repeat? (Tile)

*background-position: Positioning

background-attachment: Whether to fix the background,

scroll: default value. Background image is scrolled with the content of the object

fixed: The background image is fixed

’s ’s ’s 3’s ’s ’s ’s ’s ’s ’s ’s ’ s 3 ‐ ‐ -size

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

Multi-layer background:

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. *Inner padding (inner patch)

padding: Retrieve or set the internal margins on the four sides of the object, such as padding:10px; padding :5px 10px;

padding-top

: Retrieve or set the internal padding of the top edge of the object

padding-right

: Retrieve or set the object's top edge Internal padding on the right

padding-bottom

: Retrieve or set the internal padding below the object

padding-left

: Retrieve or set the object Internal margin on the left

7. *Outer padding (outer patch)

margin

: Retrieve or set the outer margins on the four sides of the object, Such as margin:10px; margin:5px auto;

margin-top

: Retrieve or set the extended margin of the top edge of the object

margin-right

: Retrieve or set the outer margin on the right side of the object

margin-bottom

: Retrieve or set the outer margin on the bottom of the object

margin-left

: Retrieve or set the extended margin on the left side of the object

8. Position positioning

*position: Positioning method: absolute(

Absolute positioning

) , fixed (relative positioning reference, can be used for relative absolute positioning of the interior)

*z-index

: Stacking order, the larger the value, the higher it is.

*top: Retrieve or set the position of the object relative to the top of its most recently positioned parent

right: Retrieve or set the position of the object relative to the right of its most recently positioned parent

bottom: Retrieve or set the position of the object relative to the bottom of its most recently positioned parent object

*left: Retrieve or set the position of the object relative to the left side of its most recently positioned parent object

9. Layout

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

Unlike the display attribute, this attribute reserves the physical space occupied by the hidden object clip: Retrieve or set the

visual area

of the object. The parts outside the area are transparent. rect(top-right-bottom-left)

For example: clip:rect(auto 50px 20px auto); top and left are not clipped, right 50, bottom 20. *overflow: beyond hidden: hidden, visible: do not cut content

overflow-x

: How to manage content when it exceeds its specified width: visible | hidden | scroll | auto

overflow-y: How to manage content when the content exceeds its specified height

10. Flexible Box Flexible Box (see manual for details)

box-orient: Set or retrieve the arrangement of the child elements of the flexible box model object. horizontal(horizontal)|vertical(vertical)

box-pack sets or retrieves the alignment of child elements of the flexible box model object.

box-align sets or retrieves the alignment of child elements of the flexbox model object.

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

box-flex-group sets or retrieves the group to which the child elements of the flex box model object belong.

box-ordinal-group sets or retrieves the display order of child elements of the flexible box model object.

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

box-lines sets or retrieves whether the child elements of the flexible box model object can be displayed in new lines.

11. User Interface User Interface

*cursor Which system predefined cursor shape the mouse pointer adopts. Pointer little hand, url customization

zoom Sets or retrieves the zoom ratio of the object: normal|5 times|200% percentage

box-sizing Sets or retrieves the box model composition mode of the object. content-box | border-box

content-box: padding and border are not included in 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 the object allows the user to zoom and adjust the size of the element.

none: Do not allow the user to resize the element.

both: Users can adjust the width and height of elements.

Horizontal: The user can adjust the width of the element

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

outline Composite attribute: Set or retrieve the line outline outside the object

outline-width Set or retrieve the outline outside the object The width of the line outline

outline-style Sets or retrieves the style of the line outline outside the object

outline-color Sets or retrieves the style of the line outline outside the object The color of the line outline

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

nav-index Sets or retrieves the ## of the object #NavigationSequence.

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

nav-right Sets or retrieves the navigation direction of the object.

12. Multi-column

columns Set or retrieve the number of columns of the object and the width of each column

column-width Set or retrieve The width of each column of the object

column-

count Set or retrieve the number of columns of the object

column-gap Set or retrieve the gap between the columns of the object

column-rule Set or retrieve the border between the columns of the object

column-rule-width Set or retrieve the border thickness between the columns of the object

column -rule-style Set or retrieve the border style between the columns of the object

column-rule-color The color of the border between the columns of the object

column-span Whether the image element is Across all columns

column-fill Whether the height of all columns of the object is uniform

column-

break-before Whether the object breaks lines before

column-break -after Whether to break lines after the object

column-break-inside Whether to break lines inside the object

13.

TableRelated properties:

table-layout Set or retrieve the layout algorithm of the table

border-collapse Set or retrieve whether the rows and cell edges of the table are merged together or according to the standard The HTML styleseparate separate | collapse

border-spacing Sets or retrieves the horizontal and vertical spacing of the row and cell borders when the table borders are independent.

caption-side Sets or retrieves the side of the table where the caption object is. top | right | bottom | left

empty-cell Sets or retrieves the side of the table. When the cell has no content, whether to display the border of the cell hide | show

14. Transition:

transition Retrieve or set the object

Transition effect during transformation

transition-property retrieves or sets the properties involved in the transition in the object

transition-duration retrieves or sets the duration of the object's transition

transition-timing-function retrieves or sets the transition in the object The type of

transition-delay retrieves or sets the time of the object’s delayed transition

15. Animation Animation

animation retrieves or Set the animation effects applied to the object

animation-name Retrieve or set the animation name applied to the object

animation-duration Retrieve or set the duration of the object animation

animation- timing-function retrieves or sets the transition type of object animation

animation-delay retrieves or sets the delay time of object animation

animation-iteration-count retrieves or sets the loop# of object animation ##Numbers

animation-direction retrieves or sets whether the object animation moves in reverse direction in the loop

animation-play-state retrieves or sets the state of the object animation

animation- fill-mode retrieves or sets the state of the object outside the animation time

16.

2D Transform 2D Transform:

transform retrieves or sets the object's state Transform

transform-origin Retrieves or sets the origin referenced by the transformation in the object

17. Media Queries Properties

Media Queries

width defines the width of the visible area of the page in the output device

height defines the height of the visible area of the page in the output device

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

device-height defines the visible height of the screen 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 'device-width ' to 'device-height' ratio. Such as common monitor ratios: 4/3, 16/9, 16/10

device-aspect-ratio defines the ratio of 'device-width' and 'device-height'. For example, common monitor ratios: 4/3, 16/9, 16/10

color defines the number of color originals for each group 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 lookup table of the output device. If no color lookup table is used, the value is equal to 0

mono

chrome defines the number of monochrome originals per pixel contained in a monochrome frame buffer . If it is not a monochrome device, the value is equal to 0

resolution Defines the resolution of the device. For example: 96dpi,

300dpi, 118dpcm

scan defines the scanning process of TV equipment

grid is used to query whether the output device uses raster or dot matrix. Only 1 and 0 are valid values, 1 represents yes, 0 represents no

The above is the detailed content of Detailed description of CSS cascading style sheets. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the CSS box model and block-level and inline elementsNext article：Detailed explanation of the CSS box model and block-level and inline elements

See more

Detailed description of CSS cascading style sheets

Related articles