CSS
css is essentially a style sheet
It is mainly composed of selector and declaration, and the declaration part includes attribute and attribute value
CSS comments:
/*notes*/ /* multiline comment */
CSS introduction method:
/*Internal style*/ <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: red; } </style> </head> /*External styles write css code in a separate file and then reference it*/ <link href="mystyle.css" rel="stylesheet" type="text/css"/> /*Inline style*/ <p style="color:red">hello world</p>
CSS selector
Basic selector
/* ID selector */ #id name{ background-color:red; } /* Class selector */ .Class name{ color:red; } /* element selector */ Yuan Su Ming{color:red} /* universal selector */ *{ color:red } /* example */ #id1{ background-color:red; } .c1{ color:red; } p{color:red}
Combination selector
Descendant selector:
/*The a tag that acts inside the div*/ div a{ color:red; }
<div>
<a>
</div>
Son selector
/*Select all < span > elements whose parents are < div > elements*/ div>span{ color:red; } <div> <span></span> </div>
Adjacent selector
/*
Select all the first < p > elements immediately after the < div > element
That is, the first one next to the same level
*/ div+p{ color:green; }
Brother selector
/*All span at the same level*/ div-span{ color:red; } For example: <div></div> <span> <span> <span>
Attribute selector:
/*All label styles with attribute name username*/ [username]{ background-color:red } /*All p label styles with attribute name username*/ p[username]{ background-color:red } /*All label styles with attribute name username="json"*/ [username="json"]{ background-color:red }
Grouping and nesting
Grouping: use comma separated grouping selectors between multiple selectors to set styles uniformly
/* Set div and P labels to red */ div, p{ color:red; }
Nesting: a combination of multiple selectors
/* c1 The style of all p labels inside the class */ .c1 p{ color:red; }
Pseudo class selector
/*Unreachable connections */ a:link{ color:#b7e8b7; } /*Move the mouse over the link*/ a:hover{ color:yellow; } /*When selected*/ a:active{ color: hotpink; } /*Visited links*/ a:visited{ color: #892BCF; }
Pseudo selector element
First letter: it is often used to set special styles for initials
p:first-letter{ font-size: 24px; color: #892BCF; }
Before: insert content before each p element (mostly used to clear floating)
p:before { content:"Level 4 tomorrow"; color:red; }
After: insert content after each p element (mostly used to clear floating)
p:after{ content: "Pass every exam"; color: yellow; }
Priority of selector
css inheritance
/*At this time, all labels on the page will inherit the font color of the body, but the p label will not, because the p label's own style overrides the style of the body*/
body{ color:red; } p{ color: green; }
Priority of selector:
Inline style > ID selector > class selector > element selector
css attribute related
Width and height
The width attribute sets the width for the element
The height attribute sets the height of the element
The width can only be set for block level labels, and the width of inline labels is determined by the content
Font properties
Font family note: multiple font names can be saved as a "fallback" system. When the first font is not supported, the next one will be tried.
body{ font-family: "Microsoft Yahei", Simsun, Arial, sans-serif; }
Font size: font size
p { font-size:24px; /*font-size:inherit; Represents the font size of the inherited parent element }
Font weight: font weight
- normal: default value, standard thickness
- bold: bold
- bolder: thicker
- lighter: finer
- 100 ~ 900: set the specific thickness. 400 is equal to normal and 700 is equal to bold
- inherit: the thickness value of the base parent element font
text color
There are three main ways to express colors:
- Hexadecimal value: for example: #ffffff
- An RGB value: for example: RGB(255,0,0)
- Color name: e.g.: red
- The fourth value of rgba(255,0,0,0.2) is alpha, which refers to the transparency / opacity of color, and its range is 0.0 to 1.0
Text properties
Text alignment: text align
- Align lef t
- Align right
- center align
- justify both ends
Text decoration
- none default
- underline defines a line under the text
- overline defines a line on the text
- Line through defines a line that passes under the text
- inherit inherits the value of the text decoration attribute of the parent element
Note: this attribute is often used to remove the default self dash of the a tag
a{ text-decoration:none; }
First line indent: text indent: 32px
p{ text-indent: 32px; }
Background properties:
div{ width:56%; height: 50%; /*background-color: deepskyblue;*/ /*!* Background picture */ /*background-image: url('J-20 jpg');*/ /*background-repeat: repeat; !* repeat(Default): the background picture tiles the whole div *!*/ /*background-repeat: repeat-x; !* repeat-x: Tile horizontally *!*/ /*background-repeat: repeat-y; !* repeat-y: Tile vertically *!*/ /*background-repeat: no-repeat; !* no-repeat: Not tiled *!*/ /*If there are multiple attribute names with the same prefix, it can be abbreviated to prefix in general*/ background: deepskyblue url("J-20.jpg") no-repeat center; }
The background attachment property sets whether the background image is fixed or scrolls with the rest of the page
1. sroll# default: the background image is not fixed and will scroll as the page scrolls
2. fixed # the background image will not move when the page scrolls
3. inherit inherits the setting of the attribute from the parent element
frame
Border properties: border thickness, style, color
.c1{ border-width:2px; border-style:solid; border-color:red; } /*It can also be abbreviated as*/ .c1{ border: 2px solid red; }
/*Different styles can be set on the four sides of the border, and the four prefixes are as follows:
border-top
border-right
border-bottom
border-left
*/
Border style: border style
1. none , no border
2. Dotted dotted border
3. Dashed rectangle dashed border
4. Solid solid border
Fillet attribute: border radius
display attribute
1. none: not displayed in the browser
2. Block: it has the characteristics of block level elements. If the width is set, the remaining part will be filled with margin
3. Inline: display of inline elements
4. Inline block: make elements have the characteristics of both inline elements and block level elements
Note: the difference between display: none # and possibility: hidden:
The former can hide an element without taking up any space
The latter can hide an element, but the hidden element still occupies the original space of the element and still affects the layout
css box model
- Margin: outer margin, used to control the distance between elements
- Padding: inner padding, used to control the distance between the content and the border
- Border: border of border, inner margin and outer margin of content
- Content: box conten t, displaying text and graphics
Note: there are four common abbreviations for margin and padding:
- Provide a parameter for four sides, for example: padding / margin: 5px
- Two parameters are provided, the first is up and down, and the second is left and right. For example: padding / margin: 5px 10px
- Three parameters are provided, the first is up, the second is left and right, and the third is down. For example: padding / margin: 5px 10px 3px
- Four parameters are provided, which will be in the order of top right, bottom left. For example: padding / margin: 5px 10px 3px 4PX
float attribute
No matter what kind of floating element it is, it will generate a block level box, which has two characteristics:
- A floating box can move left and right until its outer edge touches the border containing the box or another floating box
- Since the floating box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the floating box does not exist.
Attribute value:
- Left: left
- Right: right
- none: default value, not floating
Note: floating will have an impact (which will cause the parent label to collapse) as shown in the following figure (collapse figure on the top and no collapse figure on the bottom):
<!--example--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { border: 3px black solid; } #d2{ width: 100px; height: 100px; background-color: deepskyblue; /*display: none;*/ float: left; } #d3{ width: 100px; height: 100px; background-color: yellowgreen; /*display: inline-block;*/ float: left; } /*Methods to solve collapse*/ .clearfix:after{ content: ''; display: block; clear: both; } </style> </head> <body> <div id="d1" class="clearfix"> <div id="d2">222</div> <div id="d3">333</div> </div> </body>
</html>
General solution to floating effects:
.clearfix:after{ content:''; display:block; cear:both; }
clear attribute
- Left: floating elements are not allowed on the left
- Right: floating elements are not allowed on the right
- Both: floating elements are not allowed on both sides
- none: default value. Floating elements are allowed on the left and right sides
- Inherit: inherit attribute values from parent elements
Overflow overflow attribute
- visible: by default, the overflow content will be rendered outside the element box
- Hidden: the default value. Overflow content will be hidden
- Scroll: the content will be trimmed and the scroll bar will be displayed. You can see all the content by scrolling through the scroll bar
- auto: like scroll, it is also viewed through the scroll bar
- Inherit: inherit the overflow attribute of the parent element
overflow application case (round head):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ margin: auto; width: 100px; height: 100px; border-radius: 50%; border:5px solid deepskyblue; overflow: hidden; } div>img{ max-width: 100%; } </style> </head> <body> <div id="d1"> <img src="J-20.jpg"> </div> </body> </html>
location:
1. static: default value, no positioning, and the left and top equivalents of label objects do not work
2. Relative: relative positioning, which offsets the position based on its original position and attributes such as top, right, bottom and left
Note: left means moving from left to right
The main usage of this positioning: it is convenient for absolute positioning elements to find references
3. Absolute: absolute positioning: offset the positioning (i.e. starting position) with the ancestor element closest to you and with positioning enabled,
If there is no positioned parent element, the body element is used for positioning.
Note: if the parent element sets the position attribute, such as position:relative, the child element will be offset with the upper left corner of the parent element as the starting point
4. Fixed: fixed. You can directly use the top, right, bottom, left and other attributes to locate with the window as the reference point, and will not scroll with the scroll bar
Mainly used in: small ads on the right, back to the top button, etc
Examples of positioning:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d2{ width: 300px; height: 300px; background-color: #892BCF; left: 200px; top: 200px; position: relative; } #d3{ width: 100px; height: 100px; background-color: #1ba91b; left: 300px; top: 300px; position: absolute; } #d4{ width: 100px; height: 50px; border: 3px solid black; bottom: 20px; right: 30px; position: fixed; } </style> </head> <body> <div id="d2"> <div id="d3"></div> </div> <div id="d4">Back to the top</div> </body> </html>
Out of document flow (document flow refers to the original location, and out of document flow refers to not retaining the original location)
- Absolute positioning
- Fixed positioning
- float
Do not detach from document flow:
- Relative positioning
z-index attribute
Sets the stacking order of objects. eg: Baidu login interface
Three layer structure: 1. The bottom layer is the one where the normal text content (z=0) is farthest from the user
2. Middle layer of black transparent area (z=99)
3. The white registration area (z=100) is the layer closest to the user
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } #d2{ position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: black; opacity: 0.4; } #d3{ width: 300px; height: 200px; position: fixed; left: 40%; top: 40%; background-color: white; } </style> </head> <body> <div id="d1">hello world</div> <div id="d2"></div> <div id="d3"> <p>Registration interface</p> <label> username: <input type="text"> </label> <label> password: <input type="password"> </label> <p> <input type=submit> </p> </div> </body> </html>
Transparency: opacity
It is used to define the transparency effect. The value range is 0 ~ 1. 0 is completely transparent and 1 is completely opaque
The difference between opacity and rgba:
- rgba can only affect color
- opacity can modify the color and font