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!!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS Style summary

Introduction of the CSS

CSS comment

CSS selectors

~

The priority of the selector

CSS unit

background

Font text style

The box model

CSS Style summary

Introduction of the CSS

CSS comment

CSS selectors

~

The priority of the selector

CSS unit

background

Font text style

The box model

Related Posts

Vue3 Exports the XLSX data table

Front-end buried point scheme and link tracing realize topology

– React-connect using forwardRef problem.