Re learning front end CSS (1) introduction to CSS

Time:2021-4-29

This series of articles is mainly about CSS content, including: CSS selector API, CSS weight, layout, sticky layout, BFC and so on. If there is anything wrong with my writing, please give me your advice. If you think there is anything important that I haven’t mentioned, please let me know. Thank you.

How to apply CSS to HTML?

   1) external style sheet < link rel = “stylesheet” A.K. = “index. CSS” > or use @ import URL (“index. CSS”) in CSS
   2) the internal style sheet places CSS in the < style > < / style > element < head > contained in HTML
   3) inline styles add a style property to the label, and then set CSS in that property. Don’t do this unless you have to.

Characteristics of CSS (cascading style sheet)

Characteristics of CSS (cascading style sheet):
   1) CSS is a language used to specify how web files are displayed to users — including web page style, layout, etc.
   2) CSS is a rule-based language, which can define the rules of web page specific element style.

Points for attention when using CSS

   1) when padding and margin are set to an element as a percentage, it is calculated according to the width of the body.
   2) the value of margin can be positive or negative; The padding value must be 0 or a positive value, otherwise it is invalid.
   3) you can use the contenteditable attribute of HTML to allow elements to be edited. Ie5.5 support.
   4) the viewport (the visible area of the browser page) also has a size. In CSS, there are VW units (the width of the view) and VH units (the height of the view) related to the size of the view. 1vh is equal to 1% of the height of the viewport. IE9 support.

Top level style sheet rules of CSS

1、 Definition
  Top level style sheet rules of CSSThe top-level style sheet rule of CSS is composed of a list of two rules, one is called at rule, that is, at rule, the other is qualified rule, that is, common rule.
2、 Related API
  at-rule: the rule consists of an @ keyword and a subsequent block. If there is no block, it ends with a semicolon.
  qualified ruleThis rule is a common CSS rule, which is composed of selector and attribute specification.
  Keywords of at rule:
     1) @ charset: Specifies the character encoding used in the style sheet. It must be the first element in the style sheet and cannot be preceded by any characters. If more than one @ charset rule is declared, only the first one will be used and cannot be used in HTML elements or style attributes within < style > elements of HTML pages. When the browser parses the style sheet, it assumes that the document is in UTF-8 format when the developer has no specific settings. Ie5.5 support(@charset "UTF-8"; @charset "utf-8";)
     2) @ import: used to import style rules from other style sheets, except for @ charset rules. This rule must be written before any CSS rule except @ charset. If it is located in other places, it will be ignored by the browser. Moreover, if there are other styles after @ import, the semicolon after @ import must be written and cannot be omitted. Ie5.5 support(@import url("./index.css");)
     3) @ media: media query, part of the style sheet can be applied according to the results of one or more media queries. IE9 support(@media only screen and (max-width: 1200px) { body {color: red;} })
     4) @ page: used to modify some CSS properties when printing documents. You can’t use the @ page rule to modify all CSS properties. Instead, you can only modify margin, orphans, wide and page breaks of the document. Modifications to other properties are invalid. IE8 support(@page {margin: 10%;})
     5) @ counter style: it allows developers to customize the style of counter. A @ counter style rule defines how to convert the value of a counter into a string representation. Only firefox33 supports it(@counter-style triangle { system: cyclic; symbols: ‣; suffix: " ";})
     6) @ keyframes: control the intermediate steps in CSS animation sequence by defining the style of keyframes (or waypoints) in the animation sequence. Ie10 support(@keyframes move { from {top: 50px;} to {top: 0;} })
     7) @ font face: specifies a custom font for displaying text; The font can be loaded from the remote server or the user’s locally installed font. If the local() function is provided, the specified font name can be searched from the user’s local, and a matching item is found, the local font will be used. Otherwise, the font will use the resource downloaded from the url() function. IE4 support(@font-face { font-family: "Open Sans"; src: url ("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");} )
      8) @ support: a set of nested CSS statements, which are composed of logical and, logical or, logical non combination. Such conditional statements are called support conditions. This statement can be used for feature query. Only supported by firebox(@Supports (animation name: Test) {/ * if animation name without prefix is supported, the CSS specified below will take effect * / @ keyframes {}})
     9) @ viewport: let’s set the size of the document. Viewport. Ie10 support(@viewport {width: 100vw;})
  qualified rule: it starts with a selector, followed by a pair of braces {}, in which one or more forms are defined as {}Prototype: value;A statement from the government. The value can also be a function.
Reference link:
@ charset on     MDN
@ charset on     MDN
@ page on     MDN

Common CSS calculation functions

Common CSS calculation functions:
  1) calc(): you can perform some calculations when declaring CSS property values. IE9 support(.border { width: calc(100% - 80px); })
  2) max(): used in CSS property values, you can set the maximum value from comma separated expressions. Ie, edge and Firefox do not support it(.logo {width: max(50vw, 300px);})
  3) min(): used in CSS property values, you can set the smallest value from comma separated expressions. Ie, edge and Firefox do not support it(.logo {width: min(50vw, 300px);})
  4) clamp(): allows you to select an intermediate value between the defined minimum and maximum values. It has three parameters, which are minimum value, preferred value and maximum allowable value. Edge, Firefox, ie and safari are not supported(.box {width: clamp(10px, 4em, 80px);} /* If the current EM value is between 10px and 80px, the width is 4em*/)
  5) attr(): used to get a HTML attribute value of the selected element and use it for its style. It can also be used for pseudo elements, where the attribute value is the element to which the pseudo element is attached. IE8 support(.msg::before { content: attr(data-word) " "; })

CSS naming rules

   1) use lowercase letters to separate class names with a middle dash (. Element content {})
   2) ID is named by hump (# mydialog {})
   3) variables, functions and mixtures in SCSS are named by hump (@ mixin centerblock {})
Source: code writing habits of Tencent alloyteam

CSS features

   1) in CSS, properties and values are case sensitive. If the property is unknown or invalid for a given property value, the declaration is considered invalid, and the browser’s CSS engine ignores the declaration completely.
   2) like HTML, browsers tend to ignore most of the white space inside CSS, a lot of white space just to improve readability.
   3) when the browser parses CSS, if it encounters a property or value that it does not understand, it will ignore it and proceed to the next declaration. If a property or value is misspelled, or if it is too new and the browser does not support it, it will do so. Similarly, if the browser encounters an unintelligible selector, it will ignore the entire rule and proceed to the next rule( ash1, ..test{}Will be ignored)
   4) CSS selectors are parsed from right to left. For browsers, ID selectors are the fastest, followed by class selectors and HTML element selectors. When there are multiple selectors, such as. Layout span {}, all span nodes will be found first, and for each span, the node with class = layout will be found upward.
   5) the execution order of CSS is from top to bottom. Under the same weight and the same rules, the latter rules cover the former rules.
   6) when the weight of styles defined in CSS is different, the style of elements with high weight will be determined

CSS comment writing method:/*This is a CSS comment, which can be multi line*/

CSS weight

1、 Definition
  CSS weightWeight determines how CSS rules are parsed by the browser until they take effect. CSS weights are calculated by adding each selector.
2、 Basic rules
  Basic rules of weight:
      1) when the weight is the same, the following selector is the final rule
      2) when the weight is different, the higher the weight is, the higher the weight is
3、 Weight level
  Weight level:
     1) 0: weight 0 of wildcard selector (*)
     2) 1: the weight of an element or pseudo element is 1, and the pseudo element selectors are: before,:: after,:: first letter,:: first line,:: selection, etc.
     3) 10: the weight of an attribute selector / class or pseudo class is 10
     4) 100: the weight of an ID selector is 100
     5) 1000: weight of in line style is 1000
        6) highest: add ###, after the attribute value of the style! Important #, which means the style has the highest weight, can only be followed by the same attribute, and the attribute value is followed by #! Important # covered by
4、 Weight calculation case
Weight calculation case:

01. *{}                         ====》0
02. Li {} = = = = = = = 1 (one element)
03. Li: first line {} = = = = = = = "2 (one element, one pseudo element)
04. UL Li {} = = = = = = = = 2 (two elements)
05. UL ol + Li {} = = = = = = = = 3 (three elements)
06. H1 + * [rel = up] {} = = = = = = = "11 (an attribute selector, an element)
07. UL ol Li. Red {} = = = = = = = = 13 (one class, three elements)
08. Li. Red. Level {} = = = = = = = "21 (two classes, one element)
09. Style = = = = = < 1000 (an in-line style)
10. P {} = = = = = = = 1 (one element)
11. Div P {} = = = = = = = = 2 (two elements)
12. Sith {} = = = = = = = 10 (a class)
13. Div p.sith {} = = = = = = = = 12 (one class, two elements)
14. # Sith {} = = = = = = = 100 (an ID selector)
15. Body # Darkside. Side P {} = = = = = = = = = "112 (1 + 100 + 10 + 1, one ID selector, one class, two elements)

Reference link:
Pseudo elements on MDN
Something you should know about CSS weight

CSS box model

  Standard box model: total width / height of the box = width / height + margin + padding + border. The browser uses the standard box model by default.
  Ie box model: total width / height of the box = width / height + margin( That is, width / height already contains padding and border values). If you want to use the weird box model, you need to set the.box {box-sizing: border-box;}

Font size unit

   1) PX (pixels): This is an absolute unit, which causes the text on the page to calculate the same pixel value in any case.
   2) em: 1em is equal to the font size set on the parent element of the current element.
   3) REM: 1rem is equal to the font size of the root element in HTML, not the font size of the parent element. IE8 and below are not supported.

Dealing with different text directions

1、 API of definition and pattern
   writing mode in CSS(writing-mode): refers to whether the text is placed horizontally or vertically.
   the three possible values of the writing mode attribute are:
     1) horizontal TB: the direction of block flow from top to bottom. The sentences are arranged horizontally. This is by default.
     2) vertical RL: the direction of block flow from right to left. The sentences are arranged vertically.
     3) vertical LR: the direction of block flow from left to right. The sentences are arranged vertically.

Re learning front end CSS (1) introduction to CSS
   the figure above shows the two dimensions of horizontal TB in horizontal writing mode
Re learning front end CSS (1) introduction to CSS
   the figure above shows two dimensions (vertical RL, vertical LR) in vertical writing mode

Taking the horizontal TB value of writing mode as an example, in this writing mode, the block is vertical and the inline is horizontal.

2、 Related properties
  inline-size: defines the horizontal or vertical size of an element block, depending on the write mode of the element. It corresponds to the width and height properties, depending on the value of the write mode. When the value of writing mode is horizontal TB, it is a wide size. Neither ie nor edge supports it.
  block-size: defines the horizontal or vertical size of an element block, depending on the write mode of the element. It corresponds to the width and height properties, depending on the value of the write mode. When the value of writing mode is horizontal TB, it is the high size. Neither ie nor edge supports it.
   see: handling text in different directions on MDN

If there are any mistakes in the above contents, I hope you can point them out. Thank you.