current position:Home>-CSS-


2022-04-29 19:15:43*The keyboard is broken, and the monthly salary is more than 10

One 、css grammar :

Format :

Selectors { Property name : Property value ; Property name : Property value ;...}

Location :

1、 Inside CSS- Not commonly used :

stay <head></head> in Write your own <style></style> It says selector

2、 inline CSS- Extremely low reusability : Priority over 1、

3、 external CSS- Commonly used :

be not in head It's written inside style 了 , Just create a new one CSS The document says CSS Code , Build your own code HTML It's in the file ; Then put the outside CSS File into this page

 Introduce code <link rel="stylesheet" href="css File path + name " />

Common properties

 written words - Font properties :
 Set the text color        color: green/#cc00ff/rgb(255,0,0);
                  Predefined color values / Hexadecimal /RGB Code 
                  Hexadecimal is used most : I'll use it later PS Extract the color 
 Set text alignment     The word position is centered ( Align center )   text-align: center;
                   Align left - Default            text-align: left;
                   Right alignment                 text-align: right;
 Decorative text    No decorative lines  text-decoration: none;  Default    It can be used to give a Use tags to underline hyperlinks    Usually used to eliminate / Top line 、 Delete line 
          Underline  text-decoration: underline;               a Tag hyperlinks are underlined by default 
          Top line  text-decoration: overline; 
          Delete line  text-decoration: line-through; 
 Set the first line of text to indent     text-indent: 50px;
                   text-indent: 2em;em It's a relative unit , It's the current element (font-size)1 The distance of the size of a text 
                                     If the current element is not sized , Will follow the parent element's 1 The distance of the size of a text    
 Set line spacing          line-height: 26px;
                    Measure the line spacing of text given by others : use FastStone Captuer The tool   Far right - Screen ruler function ; How many pixels can be measured directly px
 Set the font size / font size    font-size: 30px;
 Set the font style        font-family: " Microsoft YaHei /Microsoft YaHei";
                   When multiple Fonts , use , separate ; If there are spaces in a font , To use this font with a single / Wrap in double quotes 
                   Such as :font-family: Arial,'Microsoft YaHei',serif;
                       Use -- It's usually for body Label settings , So the whole page changes 
 Set the text to normal / Italics   font-style: normal; The default value is , The standard font style displayed by the browser      Usually used to keep slanted fonts from slanting 
                  font-style: italic; The browser will display the font style in italics    Usually not 
 Make text bold          font-weight: blod/700;
 Make the text thinner          font-weight: normal/400;   Usually used to make bold fonts not bold , For example, the content of the title label package 

 When there is more than one font- Type properties when 
 Compound attribute ( Saving code )- The order is fixed , You can't change the order   font:font-style font-weight font-size/line-height font-family
                          Specifically, it says CSS Selector   font:italic 700 16px "Microsoft YaHei";
 Those that do not need to be set can be omitted , But there must be font-size and font-family These two properties , Otherwise, you can't use composite attributes to save code 
 Width               width: 300px;
 Height               height:200px;

 Picture position centered          Out of commission  align: center; Only use  padding-left:80px; Offset to the middle position 

 Add a border          
border: 2px solid/dashed/dotted red;   The width of the border   Solid line / Dotted line / Punctate   Border color 
border-radius:5px;                     Rounded border : The larger the value, the rounder 

 Set background color 
1、 Set the background color for the web page 
body {
    background-color: #d0e4fe;
2、 To others ( For example, button. ) Set background color      background-color: #d0e4fe;

 Box model 
 Set the inside margin   padding-top padding-bottom padding-left padding-right   Up, down, left and right inner margins 
 Overall inner margin padding
 Set the margin   margin-top  margin-bottom  margin-left  margin-right    Top, bottom, left and right margins 
 Overall outer margin margin

 Set the horizontal line ( Set the split line that separates the context horizontally )     stay HTML The web page says  <hr />, And then in CSS in 
hr {
    border: 1px dashed deeppink;
    /*  Set the horizontal line  */

Two 、CSS Selectors

1、 Tag name selector

2、class Selectors ( Development is most commonly used )

1) Class list   Class selectors

Use steps :1) Add... To the element to be selected class attribute - Multiple identical labels can be set in different labels at the same time class

                  2) Use selector

2) Many kinds of names   Class selectors


3、id Selectors

Use steps :1) Add to element id attribute -id Attribute Value must be unique , You can only set one

                  2)id Attributes must be written at the beginning of each attribute     

                  3) Use selector

4、 Wildcard selector

 5、 Attribute selector : Select the element according to the different attributes of the tag

1、( Combine 1、2、3、) Group selector

Will be multiple ( Simple ) The elements selected by the selector are grouped together , Uniform style , Intermediate use comma , separate

2、 Descendant selector ( Select all offspring : Son + Grandchildren )

Child selectors ( Select only the offspring : Son )

3、 ... and 、 In line elements and block elements

copyright notice
author[*The keyboard is broken, and the monthly salary is more than 10],Please bring the original link to reprint, thank you.

Random recommended