Summary of css knowledge points

Summary of CSS knowledge points

1. From the perspective of the form of CSS style code insertion, it can be basically divided into the following three types: inline, embedded and external link.

a. Inline css style:

<p style="color:red;font-size:12px">This text is red. </p>

b. Embedded CSS styles:

<style type="text/css">
    span{
         color:red;
    }
</style>

c. External link css style:

<link href="base.css" rel="stylesheet" type="text/css" />

The location of the <link> tag is generally written within the <head> tag.

2. Priority of styles:

Between basic selectors: ID selector > class selector > tag selector;

Between style sheets: Inline styles > Inline styles > External styles;

Between CSS styles: in the same selector, two identical declarations, the latter one will override the former style;

3. Set the highest priority:

When we are doing web page code, some special cases need to have the highest priority for some style settings, we can use !important to solve it.

p{color:red!important;}

Note: !important should be written before the semicolon.

4. Some special properties of text:

a.font-style property normal - the text is displayed normally; italic - the text is italicized; oblique - the text is displayed obliquely.

b.font-variant property set small capital letters font-variant:small-caps;

c.font-size-adjust property sets different font sizes font-size-adjust: 0.60;

5. Some properties of paragraphs:

a. Indent text-indent: 2em; Note: 2em means twice the size of the text;

b. Text spacing, letter spacing settings letter-spacing: 5px;

c. Word spacing settings word-spacing: 5px;

d. The text is aligned at both ends text-align:justify;

e. Delete text decoration text-decoration:none;

f. Set the middle line of the text text-decoration:line-through;

g. text shadow text-shadow: xy shadow color; This property can have 4 values, of which the first 2 are required values, used to specify the extension distance of the shadow, the value is the length value, and negative values are allowed, where x is The offset value of the horizontal shadow, y is the offset value of the vertical shadow. The last two values are optional. Shadow is used to specify the blur value of the shadow, that is, the distance of the blur effect. Negative values are not allowed. color specifies the color of the shadow.

h. Text transform: text-transform: capitalize; Defines that each word in the text starts with a capital letter.

text-transform:uppercase; defines the text to have only uppercase letters;

text-transform:lowercase; defines that the text has only lowercase letters;

6. Background properties:

a. Whether the background image is fixed or scrolls with the rest of the page background-attachment:fixed;

b. Set the starting position of the background background-position: 10% 10%;

c. Set the background image to show once background-repeat:no-repeat;

7. css layout model

In web pages, elements have three layout models: flow model, floating model, layer model;

a. Flow model: Flow is the default top-down layout mode of web pages. That is to say, the HTML page elements of the web page in the default state all distribute the web page content according to the flow model.

Two characteristics of the flow model:

The first point is that block elements will extend vertically in order from top to bottom in the containing element, because by default, the width of block elements is 100%. In fact, block elements take their place in rows. For example, the block element label (div, h1, p) width is displayed as 100%.

The second point is that under the flow model, inline elements are displayed horizontally from left to right within the containing element. Inline element tags a, span, em, strong are all inline elements.

b. Floating model: Any element cannot be floated by default, but it can be defined as floating with CSS, such as div, p, table, img and other elements can be defined as floating. The following code can display two div elements in one line.

Note: When setting float, you must first set the width of the block element, and the sum of the widths of several elements that need to be floated must be smaller than the width of the container element.

c. Layer model: Like the very popular layer editing function in the image software PhotoShop, each layer can be precisely positioned for operations.

Layer models come in three forms:

Absolute Positioning (position: absolute)
Relative Positioning (position: relative)
Fixed Positioning (position: fixed)

Summary of css knowledge points

Guess you like