References, selectors, properties for getting Started with CSS (three-sixths)

CSS Getting Started Tutorial three-sixths articles

No way, I live teaching small partner CSS Primer, properties, ready to say positioning, they shout stop, hold not ... So write it first, three-sixths, 23333333.

Key points	explain
Reference	How to use a defined CSS style
Selector Selector	Indicates the label of the defined style
Property	What is defined when a style is defined
Positioning	How to place labels in a specific location (next article)
Box model	Interview Classics (next article)
Show	How to display labels and labels layout (next article)

Reference

1. Inline

   The style attribute of the open label or self-closing label is indicated by the corresponding CSS definition content, which is referred to inline, as follows:

   <div style=‘color: red;‘>普通内容</div>

   Related effects See: Codepen

2. Internal label

   Define the content of the style tag under the head tag, which is referred to as an internal label, as follows:

   Related effects See: Codepen

3. External links

   Define the link Tag property under the Head tab, which is referred to as an external link, as follows:

   <link rel=‘stylesheet‘ href=‘anypath/any.css‘>

   ANY.CSS content is as follows:

   #out-link {    color: blue;}

   The corresponding applicable tags are as follows:

   <div id=‘out-link‘>普通内容</div>

   Related effects See: Codepen

The above are three kinds of reference methods, not including JS

Selector Selector

2. ID Selector

   Uniqueness, in principle the entire file has only one ID name and cannot be duplicated

   The id attribute of any tag whose property value is its unique ID, which is no longer available for other tags.

   Such as:

   <div id=‘first-id‘>xxx</div>

   The CSS selector expression is as follows:

   #first-id {}

   Expression Keywords: #

4. Class Selector

   The class property of any tag, whose attribute value is its class, is shared with other tags and is defined with all the same class tags.

   Such as:

   <div class=‘first-class‘>xxx</div>

   The CSS selector expression is as follows:

   .first-class {}

   Expression keywords:.

6. Tag Selector

   The label name of any label itself is its selector, as the label is reusable, so the tag selector is used for all tags.

   The CSS selector expression is as follows:

   div {}

   Expression keywords: none

8. Pseudo class

   Pseudo-class is not a selector, but because it's unique, here's a look.

   On the basis of the selector selection, the relevant CSS properties are defined for some of the properties of the tag, such as hover (during mouse coverage), active (during activation), and so on.

   The CSS selector expression is as follows:

   div:hover {    color: yellow;}

   Related effects See: Codepen

   Expression keywords:: Features

Property

Properties are specific styles of CSS style customization, such as the custom width height, width and height, respectively.

The same properties in different positioning in the display will have different performance, here is not expressed too much, here the attributes are broadly divided into four categories, as follows:

2. Inheritable Properties

   Normal tags may have sub-labels, so when defining inheritable attributes for a generic tag, if the child tag does not define a property that overrides the parent definition, the value of the parent property, such as the font label, is inherited.

   If the following code relationship exists:

   <div class=‘father‘>    我是父级标签    <div class=‘son‘>        我是子级标签        <div class=‘grandson‘>            我是孙子标签        </div>    </div></div>

   Define CSS as follows:

   .father {    color: purple;}

   Related effects See: Codepen

4. Non-inheritable properties

   The non-inheritance is better understood, that is, only for their own effective.
   If the following code relationship exists:

   <div class=‘father‘>    我是父级标签    <div class=‘son‘>        我是子级标签        <div class=‘grandson‘>            我是孙子标签        </div>    </div></div>

   Define CSS as follows:

   .father1 {    border: 1px solid red;}

   Related effects See: Codepen

6. Positioning-related properties

   The next chapter will say, here only the main related properties:

   • Position (positioning mode)
   • Top (distance from above)
   • Right (distance distance from)
   • Bottom (distance from below)
   • Left (distance from distance)

8. Properties associated with the display

   The next chapter will say that the main related properties are only mentioned here:

   • Display (Show mode)
   • Width (wide)
   • Height (altitude)
   • Flex (Flexible)
   • Other flex-related

Full Test code

<! DOCTYPE html>

Thank you for reading, if you have any help, deeply honored.

If you have any questions, please leave a message.

If you think the article is good, please also pay attention to, thank you

References, selectors, properties for getting Started with CSS (three-sixths)