Reading Notes CSS authoritative guide,

Reading Notes CSS authoritative guide,

The main purpose of this book:

Since I learned CSS, I have mastered its usage methods and skills, but I am not clear about its underlying principles and implementations. I want to learn more systematically and deeply about its nature, from skilled use to true understanding of the front-end BASIC language.

 

Chapter 4 CSS and documentation

1.1 WEB fading (adding many tag elements such as font to the performance hinders page structuring)

1.2 CSS as a rescue Star (W3C released an ongoing CSS plan in 95 years)

　　CSS features: Rich styles; easy to use and maintain; can be used repeatedly on multiple pages; easy to stack; reduce file size; prepare for the future (for HTML structuring, separation of structure and performance)

1.3 elements (the basis of the document structure, at least in CSS2.1, each element generates a box and also becomes a box)

Replacement element: the part used to replace the element content is not directly represented by the document content, such as img and input.

Non-replacement elements: most of the elements are non-replacement elements. The content is displayed in the box generated by the element, such as paragraphs, titles, and cells.

Element display role (Block-level elements: Generate an element box that fills the content area of its parent element;Line Element: Generate an element box in a text line without interrupting this line of text)

Block-level elements in HTML and XHTML cannot be nested in-row elements, but there is no restriction on nesting in CSS.

1.4 combine CSS and XHTML (external, inline, import, in-row)

<Link rel = "stylesheet" type = "text/css" href = "sheet.css" media = "all"/> <! -- Link tag (external style table), link must be placed in the head, rel "relationship" (relation), media style application media type (most types are not supported) -->

<Style type = "text/css">... </style> <! -- Style element (Inline style table) -->

@ Import url(sheet2.css);/* @ import command (import a style sheet), which is written in a style file or within a style element */

<P style = "..."> test </p> <! -- Intra-row style sheets are not recommended because they are not conducive to the separation of content and performance -->

 

Chapter 4 Selector

2.1 Basic Rules

The core feature of CSS is to apply certain rules to a group of element types in the document.SelectorAndDeclare BlockComposition

　　

2.2 groups

H2, p {color: green}/* selector group: Apply the same style to multiple elements * // * declaration group: apply multiple declarations to one element */h3 {color: orange;} h3 {font-size: 18px ;}

2.3 class selector and ID Selector

Multi-class selectors: by connecting multiple class selectors, you can only select the elements that contain these classes at the same time (the class name sequence is not limited)

. Warning. urgent {background: red;}/* Note that there is no space in the middle: There is no sequence at the same time. It can be class = "urgent warning "*/

The ID selector is similar to the class selector, but it applies only once.

2.4 attribute Selector

Img [alt] {border: solid 1px red;}/* simple attribute selection, select the element with this attribute, regardless of the attribute value */a [title = "w3c"] {color: red, select the attribute value as the element of the specified value */p [class ~ = "Warning"] {color: red;}/* select an element whose property value contains the specified value */* [foo ^ = "bar"] {color: red;}/* select all elements starting with bar in the foo attribute */* [foo $ = "bar"] {color: red ;} /* select all elements ending with bar in the foo attribute */* [foo * = "bar"] {color: red ;} /* select all elements whose foo attribute contains bar */* [lang | = "en"] {color: red ;} /* select all the elements whose lang attribute is equal to "en" or whose name begins with "en */

2.5 document structure

H1 em {color: red;}/* descendant selector */h2> strong {color: red;}/* select the child element, that is, select only the child element of h2 (instead of the child element) strong element */h3 + p {color: red;}/* to select adjacent elements, that is, select the p element next to h3, and the two have the same parent element */

2.6 pseudo classes and pseudo elements

A: link {color: blue;}/* select a hyperlink (containing href attributes) */a: visited {color: purple;}/* hyperlink in accessed status */: hover {color: red;}/* hyperlink in the hover state */a: active {color: orange;}/* hyperlink in the active (pressed) State */input: focus {color: green;}/* input box for obtaining the focus status */p: first-child {color: red;}/* select the first element, that is, the first p element */*: lang ()/* is equivalent to | = attribute selector */a: link: hover {color: red;}/* combined with pseudo classes, merge writing. Do not use mutex pseudo classes in combination */

P: first-letter {color: red;}/* first letter, used only for marking or section */p: first-line {color: red;}/* first line, only used for marking or section */h2: before {content: "";}/* before the element, the special attribute of the pseudo element content */h2: after {content :"";} /* after the element, set the content to place it in the document structure */

 

Chapter 4 Structure and cascade

3.1 particularity

/* Special Value: 0, 0, 0 (that is, intra-row, ID, class or attribute or pseudo class, element or pseudo element) */p + em {color: red ;} /* 0, 0, 0 */. warning em {color: red;}/* 0, 1, 1, 1 */ul # menu li. active {color: red;}/*, */* {color: black, special behavior of wildcard 0 */div [id = "nav"] {}/*, ID attribute selection is different from ID selector */p. drak {color: #333! Important;}/* important statement. This rule always takes priority */

3.2 inheritance (inheritance has no particularity, and even 0 does not, so the 0 particularity of the wildcard> inheritance has no particularity)

3.3 cascade (sort by weight and source, sort by particularity, and sort by Order (link pseudo-class order LVHA ))

 

Chapter 3 values and units

4.1 digits

4.2 percentage

4.3 color (name, RGB, hexadecimal)

/* 17 color names defined in CSS */aqua (light green) fuchsia (purple) lime (green and yellow) olive (olive) red whiteblack gray maroon (brown) orange silver yellowblue green navy (dark blue) purple (purple) teal (Cyan)

Length unit: 4.4

Absolute length (almost none for web): inches (in), centimeters (cm), millimeters (mm), points (pt), cards (pc)

Relative Length: em and ex, pixel length (px), relative root element rem

4.5 URL

4.6 CSS2 Unit

Angle value: Degree (deg), gradient (grad), and radian (rad). the right angle can be declared as 90deg = 100 grad = 57rad.

Time Value: Millisecond (ms, second (s), time cannot be negative

Frequency value: Hz and MHz)

4.7 Other values

Keywords: none (null), inherit (inheritance)

 

Chapter 4 font

5.1 font family)

5.2 font bold (font-weight)

5.3 font size (font-size)

5.4 style and deformation (font-style and font-variant)

5.5 stretch and adjust font (font-stretch and font-size-adjust)

5.6 font attributes

5.7 font matching

CSS2 can use @ font-face to control font matching and download a remote font from the document.

@ Font-face {font-family: DeliciousRoman; src: url ('delicious-Roman. otf');}/* first, then use */p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif ;}

 

Chapter 2 text attributes

6.1 indent and horizontal align)

6.2 vertical alignment (line-height)

Vertical-align applies only to row elements and replace elements, images and forms; superscripts and subscripts super and sub;

6.3-character interval and letter interval (word-spacing and letter-spacing)

6.4 text conversion (text-transform: case-sensitive conversion)

6.5 text-decoration)

6.6 text shadow)

 

Chapter 2 Basic visual formatting

7.1 basic box

7.2 block-level elements)

7.3 inline)

7.4 change element display)

Inline-block)

 

Chapter 2 padding, border, and margin

8.1 basic element box

8.2 margin (margin)

8.3 border (border)

8.4 padding (padding)

 

 

Chapter 2 color and background

9.1 colors

9.2 foreground color)

9.3 background (background or background-color, background-images)

 

Chapter 2 floating and positioning

10.1 float (float: left | right | none | inherit)

Clear floating (clear: left | right | both | none | inherit)

10.2 positioning (position: static | relative | absolute | fixed | inherit)

Offset attribute (top | right | bottom | left)

Content overflow (overflow: visible | hidden | scroll | auto | inherit)

Content clipping (clip: ract (top, right, bottom, left) | auto | inherit)

Element visibility (visibility: visible | hidden | collapse | inherit)

Placement on the z axis (z-index)

 

Chapter 4 table layout

11.1 table formatting

Display: inline-table, table-row (tr), table-row-group (tbody), table-header-group (thead), table-footer-group (tfoot), table-column (col), table-column-group (colgroup), table-cell (th or td), table-caption

11.2 cell border of the table

Table border model (border-collapse: collapse (merged) | separate (separated) | inherit)

Border interval (border-spacing: <length>? | Inherit)

Table size 11.3

Width: Fixed layout and Automatic Layout

Height and alignment

 

Chapter 1 List and generated content

12.1 list

List-style-type, list-style-image, and list-style-position)

12.2 generate content

Use the before and after pseudo classes to generate and set the content value. The application of the counter

 

Chapter 4 user and interface style

13.1 system font and color

13.2 cursor)

13.3 contour (outline)

Chapter 4 non-Screen media

14.1 design a media-specific style sheet

14.2 paging Media

14.3 sound Style