CSS for the front-end base

First, CSS syntax

1. CSS Instances

Each CSS style consists of two components: selectors and declarations. Declarations also include property and property values. End with a semicolon after each declaration.

2. CSS Annotations

/* This is a comment */

Introduction of several methods of CSS

1. Inline style

Inline is a CSS style that is set in the Style property of the tag. Large-scale use is not recommended.

2. Internal style

Embedded is a set of CSS styles that are written in the

<! DOCTYPE html>{            background-color: greenyellow;        }     </style>

3. External style

The external style is that the CSS is written in a separate file and then introduced into the page. It is recommended to use this method.

#href中的内容是导入的文件名, written in the body.

Third, CSS Selector

1. Basic Selector

<1> element Selector

{color:"Red";}

<2>id Selector

{            color: red;        }     </style>

<3> class Selector

/* use the class selector to set the size of the text */  {    font-size: 14px;} /* set the P tag and have the text color red with the class name C1 */  {    color: red;}

<4> Universal Selector

/* set the contents of all labels to white */  {    color: White;}

2. Combination Selector

1. Descendant Selector

/* set the font color for a tag inside Div */  {    color: green;}

/* set the font color for a tag inside Div */  {    color: green;}

2. Son Selector

/* Select all the parents are <div> elements <p> elements */  {    font-family:Arial Black, arial-black, cursive;}

3. Adjacent Selector

/* Select all <p> elements immediately following the <div> element */  {    margin: 10px;     Color: deeppink;     font-weight: bold;}

4. Brother Selector

/* Select all the sibling div tags behind the div, set the boundary line/border, solid refers to the border as solid, followed by the color of the border */  {    border: 5px solid royalblue;}

3. Attribute Selector

/* used to select an element with the specified attribute */  {    color: red;} /* used to select an element with the specified attributes and values */  {    color: mediumspringgreen;}

4. Grouping and nesting

1. Grouping

When the styles of multiple elements are the same, we do not need to repeatedly set the style for each element, and we can set the element style uniformly by using a comma-separated grouping selector between multiple selectors.

/* unify the code for DIV tags and p tags to set the font to red */  {    color: red;}

2. Nesting

/* A variety of selectors can be mixed, for example, to set the font color of all P tag contents inside a label containing the C1 class to red.  */{    color: red;}

5. Pseudo-Class Selector

/*non-visited links*/A:link{Color:Red}/*visited links--links that have been visited will change color*/a:visited{Color:#eee;}/*The mouse moves to the link and changes to the set color when moved to the top*/a:hover{Color:#fff;}/*Selected Link--the mouse is selected to become the color of the setting*/a:active{Color:Green;}/*Input field style when getting focus*/Input:focus{Outline:None;Background-color:Darkmagenta;}

6. Pseudo Element Selector

1, first-letter commonly used to set the first letter special style:

{    font-size: 16px;     color: blueviolet;}

2. Before insert content before each <p> element

{    content: ' * * * ';     color: lawngreen;}

3. After after each <p> element insert content

{    content:"1149102771";     color:skyblue;}

Supplemental: Before and after are used to clear floats.

7, the priority of selectors

1. CSS Inheritance

Inheritance is a major feature of CSS, and it is dependent on the ancestor-descendant relationship. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a body-defined font color value is also applied to the text of a paragraph. (There are also some attributes that cannot be inherited, such as: Border,margin,padding,background, etc.). ）

2, the priority of selectors

inline style + ID selector + class selector + element selector

1000 100 10 1

The inherited priority weight is 0

Besides, you can also add! Import mode to force the style to take effect, but is not recommended for use. Because if too much to use! Import makes the style file confusing and difficult to maintain. (No need to use it!) Import

8. CSS Properties Related

1. The Width property can set the widths for the elements.

The Height property can set heights for an element.

Block-level labels to set the width, the width of the inline label is determined by the content.

2. Font properties

<1> text Font

Font-family can save multiple font names as a "fallback" system. If the browser does not support the first font, it will try the next one. The browser uses the first value it recognizes.

　　

　　

CSS for the front-end base