Introduction of the CSS

These are inline style (inline style), internal style sheet (inline style), external style sheet (connect external style), and import external style.

< span style = “color: RGB (51, 51, 51); Style attribute: Style attribute value…” >

2. Internal style sheet: selector {style name 1: style value 1; Style name 2: style value 2; }

CSS comment

CSS comments: /* code */

CSS selectors

1. Tag selector:

CSS label selectors are used to declare labels.

~

< I >

/* Write: */<style>
     h2{
            color: red
        }
 </style>      
Copy the code

2. Universal selector:

A generic selector is a special selector, denoted by an asterisk (*), that applies to all elements.

/* Write: */<style>* {color: red;
        }
    </style>
Copy the code

ID selector:

The ID selector styles the element of the given ID, and is supported by all major browsers. Identified with a “#” prefix, followed by the id name of the specified element.

Syntax: Tag name #id{attribute 1: value 1; Attribute 2: value 2; . }

/ * write * /<style>
                  #bf{
                   color: red;
                 }
             </style>
Copy the code

Class selectors are similar to id selectors in that instead of using “#”, they use “. Instead of referring to an ID attribute, you refer to a class value.

Syntax: Tag name #id{attribute 1: value 1; Attribute 2: value 2; . }

/ * write * /<style>
  .bf{
            color: red;
        }
</style>
Copy the code

5. Property selector

Attribute selector, you can specify an element, or you can specify both an attribute value and its corresponding attribute value.

Selector [attribute name = attribute value]

  • The selector [attribute name = attribute value] matches exactly
  • Selector [attribute name ^= attribute value] starts with a match
  • The selector [property name $= property value] ends with a match
  • The selector [attribute name *= attribute value] contains matches
/* Write: */<style>
        li[abc=qw]{
            font-size: 30px;
        }
        li[abc^=qw]{
            background-color: rgb(178.205.207);
        }
        li[abc$=er]{
            color: red;
        }
        li[abc*=w]{
            text-align: center;
        }
    </style>
Copy the code

6. Descendant selector

Descendant selectors are also known as inclusion selectors. Descendant selectors can be selected as descendants of an element. How to write: put the outer label in front and the inner label behind.

Syntax: E1 E2 {attribute 1: attribute value 1; Attribute 2: Attribute value 2; . }

/* Write: */<style>
    div span{
            font-size: 40px;
            color: red;
        }
</style>        
Copy the code

7. Child selector

Child element selectors can only select elements that are children of an element. Child element selectors use curly braces. I’m just looking for my children.

Syntax: E > F {attribute 1: attribute value 1; Attribute 2: Attribute value 2; . }

/* Write: */<style>
    div>span{
            background-color: yellowgreen;
        }
 </style>       
Copy the code

8. Adjacent selector

Both elements have the same parent and are closely followed by each other.

Syntax: E + F {attribute 1: attribute value 1; Attribute 2: Attribute value 2; . }

/* Write: */<style>
  li+li{
            color:springgreen;
        }
</style>
Copy the code
Relation: Parent element: contains other elements directly, and this element is the parent element of the containing element. Ancestor element: contains other elements, and this element is the parent element of the containing element. Child element: Contains the element directly, and this included element is the descendant element of the containing element: The contained element is the descendant of the contained elementCopy the code

Pseudoclass selectors

Automatic recognition of the special selector, its maximum selector can define different style effects for different hyperlinks.

Common pseudo-class selectors:

Hover: hover: link

Syntax: Selector: pseudo-class {attribute 1: attribute value 1; Attribute 2: Attribute value 2; . }

/* a:visited{color: red; } a:link{ color: rosybrown; } a:hover{ font-size: 30px; }</style>
Copy the code

10. Pseudo-element selectors

Pseudo-element selector ::first-line adds a style to the first line of content of an element ::first-letter Adds a style to the first letter of an element ::before Adds content before an element. Used with content ::after adds content after an element Used in conjunction with contentCopy the code
Writing:<style>
   p::first-line{
            color:darkblue;
        }
        p::first-letter{
            font-size: 40px;
        }
        p::before{
            /* content: "This is the first content "; * /
            content:"【";
        }
        p::after{
            /* content: "This is the content after the text "; * /
            content:"】";
        }
    </style>
Copy the code

11. Selector grouping

I want h2 paragraphs p elements to be gray, so I can sort them by selector.

Syntax: h2, P

H1,p{color: red; }Copy the code

The priority of the selector

In order of the type of selector from lowest to highest:

  • Element selectors (labels) and pseudo-element selectors
  • Class selectors, property selectors, and pseudo-class selectors
  • The ID selector

From lowest to highest in order of introduction:

  • External style
  • Internal style
  • Inline style

CSS unit

Size of the unit

  • % : percentage. It describes the percentage relative to the parent element. If 50%, it is half of the parent element.
  • P: pixel
  • Em: size of the current element. The default browser font size is 16px, 2em = px

background

  • background-colorSets the background color of the element. The value of the property is the color value or keyword.
/* background-color: red; /* background-color: transparent; Transparent meaning, default;Copy the code
  • background-imageProperty to set one or more background images for an element.
> syntax: background - image: url (path) | none. >. / indicates the previous program./ indicates the current directory. None: Indicates that background images are not displayedCopy the code
  • background-repeatDefines how the background image repeats. The background image can be along the horizontal axis, the vertical axis.
'repeat' : tile in both horizontal and vertical directions. 'no-repeat' : not tiled, the background image is displayed only once. 'repeat - x' : only horizontal 'repeat - y' : only vertical 'round' : automatically scale until it fits to fill the entire container 'space' : the image is repeated as much as possible, but not clipped.Copy the code
  • background-attachmentDefines the background image scroll.
/* Property value */ scroll (scroll) Fixed inherit (inherit) Scroll: the background image will move along the scroll axis of the pageCopy the code
  • background-positionControls the position of the background image within the element.
/* horizontal keyword */ left (left) center (right) /* vertical keyword */ top (top) center (center) bottom (bottom)Copy the code

Font text style

  • font-familyFont type. Multiple fonts can be declared simultaneously, separated by commas. Chinese, regular script, need double quotation marks to cause.

Font-family: arial, helvetica, Sans-serif…

H1 {' font-family: 'Helvetica neue', helvetica neue ', Sans-serif; }<h1>Set the font to Chinese color Cloud</h1>
<p>Font according to official script, bold, song style, order set</p>

Copy the code
  • font-sizeSpecifies the font size. the unit used is px.

font-size: 12px;

  • font-weightSpecifies the size of the font
font-weight: normal; /* normal */ font weight: bold; /* * */ font weight: bolder; /* Add bold */ font-weight: lighter; Font weight: 400; /* The number from 100 to 900, the larger the value, the thicker, 400 is normal */Copy the code
  • text-indentDefines the amount of indentation before the first line of text content of a block element.
/* e.g. */ text-indent: 40px;Copy the code
  • line-heightUsed to set the amount of space for multi-line elements, such as the spacing of multiple lines of text.
Normal: indicates the default row height. Height: 20px (" line-height: 20px") > < span style = "font-size: 150%; line-height: 150%; Equivalent to 1.5 line spacing. Value: use a product factor to indicate the line height. "line-height: 1.5" means 1.5 line spacing.Copy the code
  • text-alignYou can control the alignment of text.
/* Attribute value */ left: aligns text to the left, default, right: aligns text to the right. Center: Place text in the middle. Justify: Implements the text effect of both ends.Copy the code
  • font-styleFont style
font-style: normal; /* < font style: italic; /* Italics are generally written and usually occupy less height than unstyled fonts */ font-size: oblique; /* Slants are simply slant versions of regular glyphs */Copy the code

Text-decoration -line Specifies the text decoration

text-decoration: none; /* No text decoration, default value */ text-decoration: underline; /* There is an underline at the bottom of the text */ text-decoration: overline; /* There is a line at the top of the text */ text-decoration: line-through; /* Set text delete line */ text-decoration: blink; /* Set text flashing */Copy the code

The box model

The box model is an abstract model made up of content, padding, border, and margin.

  • paddingPadding area refers to the space between the content of an element and its boundary. This property cannot be negative.
padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; /* Background-color: RGB (255,255,255); /* Padding-right: 20px; /* padding-right: 20px; /* Padding: 20px 30px 40px; /* Padding: 20px 30px 40px 50px; /* Top right, bottom left */Copy the code
  • borderA shorthand property used to set various individual boundary properties.borderCan be used to set the value of one or more of the following properties:border-width.border-style.border-color.
border: none; /* No border */ border-width: 10px; /* border-width: red; /* border-style: solid; /* The 'solid' node ' 'bounding' corresponds to the last 'dashed line'... */ border: 10px solid red; / * * / border width | | style color - right: 10 px solid red; /* Set the border in one direction separately */Copy the code
  • marginGiven the element sets all four (up, down, left, and right) directional margin attributes. This is short for four margin property Settings. The four margin property Settings are:margin-top.margin-right.margin-bottom 和 margin-left. The specified margin is allowed to be negative.
Margin: style /* single-value syntax all edges */ example: margin: 1em; Margin: horizontal /* Binary syntax vertical horizontal */ example: margin: 5% auto; Margin: top horizontal bottom /* horizontal bottom */ example: margin: 1em auto 2em; */ example: margin: 2px 1em 0 auto;Copy the code
/* Note: */ 1. The spacing between the left and right horizontal boxes is the sum of their margins 2. The space between the top and bottom boxes should be whichever is the largest (the larger ones cover up the smaller ones). Two nested boxes, both of which have 'margin-top' whichever is the largest (the larger ones cover the smaller ones)Copy the code

CSS content is too much, for the moment here, there are mistakes welcome to point out, thank you very much!!