The first chapter

background

Early HTML tags were structured and meaningful to describe the various parts of a document. But they do not address what display style should be used for these parts. In later development, the need for style began to increase, which led to the emergence of some tags that were easy to style but lacked semantics (such as :,). But there are more easy-to-style tags and less semantic tags, making the document less usable (in previous development, using structured HTML tags meant giving up a lot of control over how the page looked).

The advantages of structured and semantic tags (semantic: doing the right thing with the right tag)

  1. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is conducive to SEO;
  2. Displays in a document format without style CCS and is easy to read;
  3. Make it easier to read the source code of the website will be divided into blocks, easy to read maintenance understanding;
  4. Facilitate parsing by other devices (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
  5. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

The CSS to produce

To make HTML more structured and semantically focused, the styling part of the HTML was stripped out. This resulted in styling CSS, but it was much more powerful than styling tags. In the past, the same style of the same label needs to be set separately for each label, and modification also needs to find out and modify item by item. After using CSS, all style codes can be centralized in one place for unified management and more convenient modification. With the advent of CSS, the W3C has phased out the use of tags that were previously used to style pages without meaning.

Briefly describe block-level elements and inline elements

  1. Block-level elements have a single row
  2. The default width for block-level elements is Auto, which is equal to the width of the content portion of the parent element
  3. Block-level elements cannot be nested within inline elements
  4. Inline elements can be placed in more than one row

The link tag

Effect: Introduces an external style sheet

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
Copy the code

@ import instruction

Effect: Introduces an external style sheet

Most common scenario: Introducing other stylesheets in one stylesheet (external stylesheets cannot contain any HTML tags, so tags cannot be used)

<style type="text/css"> @import url("URL1"); @import url("URL2"); //@import must be written at the beginning </style>Copy the code

The difference between the link tag and the @import directive

@import is a syntax rule provided by the CSS. It only imports stylesheets. Link is an HTML-provided tag that not only loads CSS files, but also defines RSS, REL connection properties, and more.

2. The loading sequence is different. When the page is loaded, the CSS introduced by the link label is loaded at the same time. The CSS introduced by @import will be loaded after the page is loaded.

3. Compatibility differences @import is a CSS2.1 syntax, so it can only be recognized in IE5+; The link tag, as an HTML element, has no compatibility issues.

4.DOM controllability difference can be manipulated by JS DOM, insert link tag to change the style; Because DOM methods are document-based, you cannot insert styles using @import.

Link introduces styles with more weight than @import does.

6. Write in different positions

CSS writing position:

  • < span style=” color: RGB (51, 51, 51); CSS property name: CSS property value; ></ Tag name >

  • Internal style sheet

  • External style sheets

The second chapter

The browser reads the selectors from right to left.

The CSS is composed of many rules. Each rule is composed of a selector and a declaration block. The declaration block consists of one or more declarations

H1 {color: red; background : pink}

The selector

  1. Element selector (tag selector)

    Element selectors are usually HTML elements

    html {
color: black;
}
h1 {
color: gray;
}
Copy the code

  2. Wildcard selector

    Match all elements

    * {
  color: red;
}
Copy the code

  3. Class selectors

  4. The ID selector

  5. Property selector

    Select an element that has a particular attribute, regardless of the attribute’s value.

    h1[class] {
color: silver;
}
a[href][title] {
font-weight: bold;
}
Copy the code

    Select elements for which an attribute is a certain value

    p[class="urgent warning"] {
font-weight: bold;
}
Copy the code

    Elements are selected based on a portion of the attribute value rather than the entire value

    type describe
    [foo~="bar"] Select all of thefooProperties, andfooA list of words with whitespace delimited properties contains wordsbarThe element.
    [foo*="bar"] Select all of thefooProperties, andfooProperty values contain substringsbarThe element.
    [foo^="bar"] Select all of thefooProperties, andfooThe attribute value tobarThe opening element.
    [foo$="bar"] Select all of thefooProperties, andfooThe attribute value tobarThe closing element.
    `[foo =”bar”]`

Conformance usage of the base selector

  1. Descendant selector

  2. Child selector

  3. Union selector

    Refer to the same style on multiple elements

    h2.p {
color: gray;
}
h1.h2.h3.h4.h5.h6 {
color: gray;
background: white;
padding: 0.5 em;
border: 1px solid black;
font-family: Charcoal, sans-serif;
}
Copy the code

  4. Sibling selector

    To select an element immediately following another element under the same parent, the combinator uses the plus sign (+)

    h1 + p {
margin-top: 0;
}
Copy the code

    Generic sibling selector: This combinator allows you to select all elements following (not necessarily following) an element under the same parent, using the wavy line symbol (~).

Pseudo-class selector (selects elements in a page based on some condition or state and applies response styles)

  1. Link pseudo-classes (only for links)

    • A: Link: indicates a link that has not been accessed
    • A: Visited: indicates the links that have been visited. Only color related statements can be set
    • :target (this selector allows you to emulate CSS-style tabs)

  2. Dynamic pseudo-classes (applied based on the user action of the element)

    • :hover: mouse moved in
    • :active: clicking
    • :focus(for form controls)

  3. Pseudoclass selector :root selects the root element of the document. (In HTML documents, you can directly select HTML elements without using :root pseudoclass.)

  4. Using the pseudo-class: Empty, you can select any element that has no child node — no child element of any type: contains text nodes, including text and whitespace. (Comments are neither treated as content nor as white space)

  5. CSS3 introduces the negation pseudo-class: not ()

    The: not () works by appending it to an element and filling the parentheses with a simple selector.

    The simple selectors are: type selectors, generic selectors, attribute selectors, class selectors, ID selectors, or pseudo-classes.

  6. Pseudo-element selectors (pseudo-elements insert fictional elements into documents to achieve some effect)

    Pseudo-elements use double colon syntax;

    Pseudo-elements must be placed at the very end of the selector where they appear.

    ::first-letter Pseudo-element Sets the first letter of all non-inline elements (non-line-like elements).

    ::first-line can be used to affect the first line of the element text.

    ::first-letter and ::first-line pseudo-elements can currently only be applied to block display elements (such as headings or paragraphs) and not to inline elements (such as hyperlinks)

    :: before and :: after insert and style generated content before or after the inside of the element.

  7. Only child :only-child selects the child of an element that has only one child

    Select all images wrapped by hyperlink elements

    a[href] img:only-child{/ /a[href]>img: different onlychildborder: 2px solid black;
}

a[href] img: only-child Matches all eligible images. The image is a unique child element, but does not represent a child element of an ancestor element. It can be a descendant element. To be selected, the image element must be the only child of its immediate parent and a descendant of the link, but the parent itself can be a descendant of the link.Copy the code

    Note:

    1. Unique child pseudo-classes always apply to child elements, not parent elements;
    2. When using :only-child in descendant selectors, the parent-child relationships between elements are not strictly listed

  8. UI State pseudo class (form control state)

    type describe
    :enabled Point to UI elements that allow input (such as input in a form)
    :disabled Points to UI elements that do not allow input (such as input forbidden in forms)
    :checked Points to a radio or check box that has been selected, either by the document itself or by a user click
    :indeterminate Points to unselected radio or check boxes. This state can only be set using JS, not triggered by the user
    :default Points to a radio, check box, or drop-down box that is selected by default
    :valid Points to the element that the user enters valid data
    :invalid Refers to the element that the user entered invalid data
    :in-range Refers to the element within the specified size range of user input data
    :out-ofrange Refers to an element whose user-entered data is not in the specified size range
    :required Points to the element that requires the user to enter data
    :optional Points to an element that does not force the user to enter data
    :read-write Points to editable elements
    :read-only Pointing to read-only elements

  9. Structural pseudo-classes (find in child elements)

:nth-child(n)

:first-child Is used to select the element that is the first child of another element.

:last-child Selects the element as the last child of another element.

Selector name :nth-child(n) : selector of this type if the colon is preceded by no space but is directly followed by the selector, then this is equivalent to: Find all parent elements that have child elements, then find the NTH child element inside those parent elements, and determine whether the child element is the tag element specified before the colon, or not. If yes, apply the CSS style to the selected child element.

This is equivalent to finding the child element, and applying the CSS style if the child element is the one specified before the colon.

<ul>
    <p>asd</p>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

ul :first-child {
    background-color: #afc; } / / selectedulThe first child below, whatever tag that child is, okayul li:first-child {
    background-color: #afc; } // In this case, no elements can be selected becauseulThe first child ofli, butp

ul li:nth-child(1) {
    background-color: #afc; } // In this case, no elements can be selected becauseulThe first child ofli, butp

ul :nth-child(1) {
    background-color: #afc; } / / selectedulThe first child below, whatever tag that child is, okayli:nth-child(1) // Select the first child of all elements, and the first must beliTags do. Regardless of theliThe label isdivorulAnd so on.Copy the code

Positive direction range

li:nth-child(n+6)

Select the child element starting with the sixth

Negative direction range

:nth-child(-n+9)

Select child elements from 1 to 9. Using :nth-child(-n+9) rather lets you select the ninth and all children before it

Fore and aft limiting range

:nth-child(n+4):nth-child(-n+8)

Select child elements 4-8. Using nth-child(n+4):nth-child(-n+8) we can select a range of children, from 4 to 8 in the above example

Odd and even bits

:nth-child(odd)

:nth-child(even)

Isolation selects child elements

:nth-child(3n+1),

Option 1,4,7,10

:nth-of-type(n) : first find tags of the same type in different levels, then find the NTH element in the selected tags and apply the style to it.

:first-of-type Selects the first element of an element type in another element. This allows operations such as selecting the first table within a given element, regardless of the element preceding it.

:last-of-type: Selects the last element of an element type in another element. This allows operations such as selecting the first table within a given element, regardless of what element precedes it.

<body>
  <div id="wrap">
    <p>one</p>
    <div>I am a div</div>
    <p>two</p>
    <p>three</p>
    <p>four</p>
  </div>
  <p>qwe</p>
  <p>zxc</p>
  <p>tyu</p>
</body>


<style>
    p:nth-of-type(3) {
      background: red; // select three and tyupLabel}#wrap p:nth-child(3) {
      background: yellow; // Select the corresponding of twopLabel}</style>
Copy the code

Struct pseudoclass example

<section>
	<p>A no.</p>
	<div>No. 2,</div>
	<div>No. 3</div>
</section>Section div:nth-child(1){declaration block} : no element is selected section div:nth-of-type(1){declaration block} : no element is selectedCopy the code

The third chapter

“Inheritance”

Inheritance is a mechanism by which styles are applied not only to a specified element but also to its descendants.

There is one exception to the up-propagation rule in HTML: the background style applied to the “body” element can be passed to the “HTML” element, which is the root element of the document and therefore defines its canvas. This only happens if the “body” element has a defined background that the HTML element does not.

Inheritance claims are not at all specific; they are less specific than wildcard selectors.

“Specificity”

For each rule, the user agent evaluates the specificity of the selector and appends it to each declaration in the rule, and the specificity value is assigned to all of its related declarations. When an element has two or more conflicting attribute declarations, the one with the highest specificity wins.

The specificity of the selector is determined by the components of the selector itself. The specificity value can be expressed in four parts, like this :’ 0,0,0,0 ‘.

  • For each ID attribute value given in the selector, add ‘0,1,0,0’. // Note the ID selector and the attribute selector that targets the ‘ID’ attribute

  • Add ‘0,0,1,0’ for each class attribute value, attribute selection, or pseudo-class given in the selector.

  • For each element and pseudo-element given in the selector, add ‘0,0,0,1’.

  • Combinators and universal selectors contribute nothing to specificity, adding ‘0,0,0,0’.

  • There is no specificity for inheritance.

  • The first zero is reserved for inline style declarations, which override any other declaration specificity.

  • ! Important is always at the end of a statement, before a semicolon.

    All!!!! Important declarations are grouped together, and specific conflicts are resolved relatively within that group. Similarly, all unimportant declarations are considered together, and any conflicts in unimportant groups are resolved using particularity. Thus, in any case where important and unimportant statements conflict, the important statement “always” wins.

“Cascade”

When two equally special rules apply to the same element.

  1. Finds all rules that contain selectors that match the given element.

  2. Sorted by explicit weights for all declarations used for a given element. The rules say ‘! The important is more important than the unimportant.

  3. Sorts by source all declarations for a given element. There are three basic sources: author, reader, and user agent. More often than not, the author’s style trumps the reader’s.” ! Important “reader style is stronger than any other style, including”! Important authorial style. Both the Author and Reader styles override the default style of the user agent.

    1. Important statement for Readers
    2. Author’s Important Statement
    3. Normal author declaration
    4. The reader’s normal statement
    5. User agent Statement

  4. Sort by “specificity” for all declarations applied to a given element. Elements with high specificity have a higher weight than elements with low specificity.

  5. If two rules have exactly the same explicit weight, source, and characteristics, the rule that appears later in the stylesheet wins.

The fourth chapter

CSS attribute values

  1. The value is keyword
    • The inherit keyword causes the value of the attribute on the element to inherit the value of the parent element’s response attribute. In other words, it forces property inheritance when inheritance does not occur.
    • The initial keyword restores the value of an attribute to its original value, in a way that it “resets” the value.
    • The unset keyword is a generic alternative to inherit and initial. If a property is inherited, the effect of unset is the same as that of inherit; if a property is not inherited, the effect of unset is the same as that of initial.
    • All (a CSS property name that refers to all properties except direction and Unicode-bidi.) It can only accept global keywords. // #example {all: inherit; }
  2. The value is string
    • String values are arbitrary sequences of characters enclosed in single or double quotes
  3. Value is the URL
    • Absolute address
    • Relative address
  4. Figures and percentages