Day 3 - css text styles

Today's study allows me to summarize the knowledge I have learned before.

1. Relationship: HTML is the foundation, and CSS is added to it.

2. Working principle: First, the browser converts html and css into dom (document object model) - combining the document content and style, and then displays the dom on the browser, and the final result appears.

3, dom: equivalent to a tree structure, each element, attribute, text is equivalent to a node, and then these node branches are connected to the total elements containing these to form a tree.

4. Three ways to apply css to html:

(1) External style sheet: HTML is a file, css is a file, and then write a sentence in HTML <link href="XX.css" rel="stylesheet"> //relatively the best. If necessary, you can rewrite the content of all HTML text linked to CSS by changing only one place.

(2) Internal style sheet: <head><style>Add css style here</style><head>.

(3) Inline mode: <p style="color:red;"> //It is difficult to maintain, it is not recommended to use

5. Syntax: selector { attribute: attribute value; }

6. Statement:

@-rules (At-rules) convey metadata, conditional information, or other descriptive information. It @begins with a ( ) symbol, followed by a descriptor indicating what kind of rule it is, followed by a grammar block for that rule, and finally ends with a semicolon ( ;). Each @ -rule defined by a descriptor has its own internal syntax and semantics.
- @charset and @import (metadata)
- @media or @document (Conditional information, also known as nested statements, see below.)
- @font-face (descriptive information)
```
@import 'custom.css';    该@-规则向当前 CSS 导入其它 CSS 文件
```

nested statement
- @media The content of this @-rule will only be applied if the device running the browser matches its expression conditions;
- @supports The content of this @-rule will only be applied if the browser actually supports the feature under test;
- @document The content of this @-rule will only be applied if the current page matches some condition.
```
@media (min-width: 801px) {  /*只有在页面宽度超过801像素时才会应用。*/
  body {
    margin: 0 auto;
    width: 800px;
  }
}   
```

7. Text style:

(1) Changes based on fonts

font：, , , , , . font-stylefont-variantfont-weightfont-stretchfont-size/line-heightfont-family

font-family (required): The font style, which can be customized, can also be expressed in the form of "Italics", but there are 5 types by default , and .serif, sans-serif，monospace，cursivefantasy，为防止用到的字体没有，可以并列使用

font-size (required): font size, try to set the size of the body first, so that all content can be adjusted based on this. Available px, em, rem (several times), %, small/big;

font-weight: font weight, normal/bold, lighter/bolder, and an integer between 100-900 can also be used to set the weight.

font-style: font style, italic (oblique)/normal (remove oblique)/oblique (simulate oblique).

(2) Text-based changes

color: The color of the text, which can be represented by words such as red, or #000000.

text-decoration: text decoration, underline (underline)/overline (overline)/line-through (crossing)/none (remove the original underline).

text-transform: text transformation, uppercase (to uppercase)/lowercase (to lowercase)/capticalize (only the first letter is capitalized)/full-width ( to convert all glyphs into fixed-width squares )/none.

text-shadow: Add a shadow to the text, horizontal offset distance to the right (left is negative) + vertical offset distance (downward is negative) + blur radius + color (text-shadow: 5px 5px 4px red;) .

text-align: text alignment, center/right/left/justify (adaptive, changing the distance between words, equal to the line width)

line-height: Line height, directly add the value 1.5 or other.

Day 3 - css text styles

Guess you like