The greatest contribution of CSS: Liberate HTML from style, realize that HTML focuses on the presentation of structure, and the style is handed over to CSS.
1.1 what is CSS
CSS (Cascading style sheets) Cascading style sheets (Cascading style sheets).
It is mainly used by users to set the text content (font, size, alignment), the shape of the picture (width, height, border, margin, etc.) and the layout of the layout in the HTML page.
Based on HTML, CSS provides rich functions, such as font color background control and overall typesetting, and can also set different styles for different browsers.
1.2 CSS style rules
selector{ Attribute name: attribute value; Attribute name: attribute value; }
Style rules:
1. Select the HTML object that the user specifies the role of CSS style, and the specific style set by the object is in curly brackets;
2. Attributes and attribute values appear in the form of key value pairs
3 property is the style property set for the specified object
4 the separator between attribute and attribute value must be an English colon
5 multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment
2. Font style properties of CSS2.1 font size
Used to set the size of the font. The value of this property can use relative length units or absolute length units. px is recommended
Relative length: px pixels em relative to the font size of the text
Absolute length: Inch cm cm mm pt po in t
2.2 font: font family
Set font common font: Song typeface, Microsoft elegant black typeface
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> p{ font-size: 20px; font-family: "Regular script"; } li{ font-size: 20px; font-family: "Regular script,Blackbody,Tahoma, Microsoft YaHei"; } </style> </head> <body> <p> Style rules: <ol> <li>Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces;</li> <li>Properties and property values appear as key value pairs</li> <li>Property is the style property set on the specified object</li> <li>The separator between property and property value must be an English colon</li> <li>Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li> </ol> </p> </body> </html>
2.2.1 Unicode font of CSS
If the font uses a Chinese name, if the character set used when saving is inconsistent, Chinese garbled code will appear. Alternatives at this time
1 use English instead
font-family: "Micrisoft Yahei";
2 use uncoide instead
2.3 font weight
For bold font, you can use labels: b and strong
It can also be implemented using css
/* normal bold lighter,100--900 integer 400 Equivalent to normal 700 Equivalent to bold */ font-weight: 400;
2.4 font-style
The font style property is mainly used to specify italic text.
This property can set three values:
- normal - text is displayed normally
- italic - text is displayed in italics
- oblique - text is "Italic" (Italic is very similar to italic, but less supported)
font-style: oblique;
2.5 comprehensive setting of font attributes
font:font-style font-weight font-size font-famliy;
font: italic bold 20px "Regular script";
Note that the above syntax order should be followed when making comprehensive settings, and the order is not changeable
The default value can be used for unnecessary attributes, but the font size and font famliy attributes must be retained, otherwise the setting of font will not work
3 selector (key)3.1 label selector (element selector)
Tag selector refers to using HTML tag name as selector, classifying by tag name, and specifying unified CSS style for a tag in the page
<ol> <li>Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces;</li> <li>Properties and property values appear as key value pairs</li> <li>Property is the style property set on the specified object</li> <li>The separator between property and property value must be an English colon</li> <li>Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li> </ol> <ul> <li>watermelon</li> <li>Banana</li> <li>Apple</li> <li>orange</li> </ul>
li{ font: italic bold 20px "Regular script"; color: bisque; }
Syntax: tag name
The biggest advantage of tag selector is that it can quickly use a unified style for the same type of elements in the page. At the same time, this is also his disadvantage, which can not carry out differentiated design for similar elements
Type 3.2 selector
The class selector is identified by "." followed by the class name. The syntax format is:
. class name
The class attribute class = "class name" of the tag used when using
<ol> <li>Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces;</li> <li>Properties and property values appear as key value pairs</li> <li>Property is the style property set on the specified object</li> <li>The separator between property and property value must be an English colon</li> <li>Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li> </ol> <ul> <li>watermelon</li> <li>Banana</li> <li>Apple</li> <li>orange</li> </ul>
<style type="text/css"> .font-style{ font-size: 20px; font-family: "Regular script"; font-weight: 700; } </style>
The greatest advantage of class selectors is that they can define separate or identical styles for element objects
Tips:
1 when the class name is long or composed of multiple words, you can use the middle line to name it
2 underline is not recommended
3 do not use pure numbers, Chinese names, etc. try to use English words
Case: implementing goole's logo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .font-style{ font-size: 100px; font-family: 'Courier New', Courier, monospace; font-weight: 800; } .blue{ color: blue; } .red{ color: red; } .gold{ color: gold; } .green{ color: green; } </style></head><body> <div> <span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span> </div></body></html>
3.3 multi class name selector
You can assign multiple class names to the tag to select more
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .size{ font-size: 100px; } .famliy{ font-family: 'Courier New', Courier, monospace; } .blue{ color: blue; } .red{ color: red; } .gold{ color: gold; } .green{ color: green; } </style></head><body> <div> <span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span> </div></body></html>
3.4 ID selector
The id of the id selector is "#", followed by the name value of the id attribute of the element with the id name. Almost all elements have an id attribute, and the id attribute value cannot be repeated
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #col{ font-size: 20px; font-family: "Regular script"; } #li1{ color: blue; } #Li2 < / style > < / head > < body > < ol id = "col" > < Li id = "Li1" > selector the HTML object that the user specifies the role of CSS style, and the specific style set by the object is in curly brackets</ Li > < Li id = "Li2" > attributes and attribute values appear as key value pairs</li> < Li id = "Li3" > attribute is the style attribute set for the specified object</li> < Li id = "LI4" > the separator between attribute and attribute value must be an English colon</li> < Li id = "li5" > multiple key value pairs are distinguished by semicolons in English. Pay attention to indentation and alignment</li> </ ol></body></html>
The biggest difference between id selectors and class selectors lies in the number of times they are used: id selectors can only be used once, and class selectors can be used multiple times
3.5 wildcard selector
The wildcard selector is "*", indicating that its selection range is the widest and can match all elements in the page
In the layout setting of the page, you generally need to clear the internal and external margins to achieve the purpose of free layout
/* Eliminate the inside and outside margins of the page */ *{ margin: 0; padding: 0; }
3.6 pseudo class selector
Pseudo class selectors are used to add special effects to some selectors. For example, add special effects to links.
3.6.1 link pseudo class selector
/* Mouse passing */ a:hover{ color: blue; } /* Selected link */ a:active{ color: red; } /* Unreached links */ a:link{ color: green; } /* Visited links */ a:visited{ color:gold }
3.6.2 structure (position) pseudo class selector
/* First child element */ li:first-child{ color: pink; } /* Last child element */ li:last-child{ color:aqua; } /* Select a child element at a specific location */ li:nth-child(3){ color: brown; } /* Select elements in odd positions */ li:nth-child(odd){ color:chartreuse; } /* Select elements in even positions */ li:nth-child(even){ color: red; }
3.6.3 target pseudo class selector
: target target pseudo class selector can be used to select the currently active target element
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /* Eliminate the inside and outside margins of the page */ *{ margin: 0; padding: 0; } #col{ font-size: 20px; font-family: "Regular script"; } /* First child element */ li:first-child{ color: pink; } /* Last child element */ li:last-child{ color:aqua; } /* Select a child element at a specific location */ li:nth-child(3){ color: brown; } /* Select elements in odd positions */ li:nth-child(odd){ color:chartreuse; } /* Select elements in even positions */ li:nth-child(even){ color: red; } /* Target pseudo class selector */ #zb:target{ color: deeppink; } </style></head><body> <ol id="col"> <li id="li1" >Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces</li> <li id="li2">Properties and property values appear as key value pairs</li> <li id="li3">Property is the style property set on the specified object</li> <li id="li4">The separator between property and property value must be an English colon</li> <li id="li5">Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li> </ol> <!-- click a Label connected to h1 label h1 namely a Link target for --> <h1 id="zb">Zhongbei University</h1> <a href="#ZB "> Zhongbei</a></body></html>4 CSS appearance properties
4.1 color text color (foreground color)
Value method of color:
1. Predefined color value: red green blue;
2 hexadecimal, 6 hexadecimal, every two digits represent a color #F3F102; #FFF represents white #000 represents black
3 rgb is expressed as rgb(255,0,0). The value range of each digit is 0-255. You can also use percentage to express rgb(100%,0%,0%)
4.2 line height
The expression of line spacing: ps em percentage% px is the most used
In general, the best line spacing is 7-8 pixels larger than the font size
<p> color Value selection method: 1 predefined color values: red green blue； 2 Hexadecimal, 6-digit hexadecimal, every two digits represent a color \#F3F102; #FFF Indicates white #000 indicates Black 3. RGB indicates rgb(255,0,0). The value range of each digit is 0-255. You can also use percentage to indicate RGB (100%, 0%, 0%)</p>
p{ font-size: 14px; line-height: 22px; }
4.3 horizontal alignment text align
Value: left right center
4.4 indent text indent in the first line
The unit can be em, and the percentage 1em is the width of a word. Negative values are allowed
4.5 letter spacing
Sets the distance between characters
4.6 word spacing
Defining the distance between English words is not valid for Chinese
Both word spacing and letter spacing can be used in English
4.7 translucency of color
/* a It is used to set the value range of transparency to 0-1 */ background-color: rgba(255,0,0,0.1);5 introduction of CSS
5.1 inline style sheet
Set the style of the element through the style attribute of the label
<p style="color: blue;">
Each element has a style attribute value, which is also a key value pair. At the same time, multiple key value pairs are separated by semicolons
5.2 internal style sheet (embedded)
The CSS code set is written in the head tag of the HTML document and defined by the style tag
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /* Eliminate the inside and outside margins of the page */ *{ margin: 0; padding: 0; } #col{ font-size: 20px; font-family: "Regular script"; } /* First child element */ li:first-child{ color: pink; } /* Last child element */ li:last-child{ color:aqua; } /* Select a child element at a specific location */ li:nth-child(3){ color: brown; } /* Select elements in odd positions */ li:nth-child(odd){ color:chartreuse; } /* Select elements in even positions */ li:nth-child(even){ color: rgb(100%,0%,0%); } /* Target pseudo class selector */ #ZB: target P </style></head>
It can be placed anywhere, but it is generally placed in the head
5.3 recommended methods of external style sheet (external type)
Write the style in a special style writing file outside the current html file. The extension of this file is. css, and then import the style file into the html document that needs to use the style sheet
<!-- Importing external style files href Define external css Path to file --> <link rel="stylesheet" href="style.css">
style.css
/* Eliminate the inside and outside margins of the page */*{ margin: 0; padding: 0;}#col{ font-size: 20px; font-family: "Regular script";}/* First child element */li:first-child{ color: pink;}/* Last child element */li:last-child{ color:aqua;}/* Select a child element at a specific location */li:nth-child(3){ color: brown;}/* Select elements in odd positions */li:nth-child(odd){ color:chartreuse;}/* Select elements in even positions */li:nth-child(even){ color: rgb(100%,0%,0%);}/* Target pseudo class selector */#ZB: target p
Write styles directly in css files instead of style tags
HTML tags are generally divided into block tags and inline tags. They are also called block elements and inline elements
6.1 block elements
Each block element usually has one or more rows. You can set its width, height, alignment and other properties. It is often used to build the layout and structure of web pages.
Common block elements:
Title label: h1-h6
Paragraph label: p
Quick tag: the most typical block level element of div
List label: ol li ul
characteristic:
1 always start with a new line
2. The outer margin and inner margin of row height can be controlled
3 the default width is 100% of the container
4 can accommodate inline elements and other block elements
6.2 inline elements
It does not occupy an independent area. It only depends on the size of its own font and the size of the image to support the structure. Generally, properties such as width and height alignment can not be set. It is often used to control the text style of the page
Common inline elements: a strong B em i s ins u span is the representative of the most typical inline elements
characteristic:
1 is on the same line as adjacent elements
2 setting the width and height is invalid, but the inner margin can be set, and the outer margin can only be set in the horizontal direction, and the vertical direction is invalid
3 the default width is the width of the content
4 inline elements can only contain text or other inline elements
6.3 inline block element
Inline block elements: img input td although they appear as inline elements, they have some characteristics of block elements:
You can set the width, height, and alignment
characteristic:
- On the same line as adjacent elements, but there will be a gap between them
- The default width is the width of its own content
- Height row height, outer margin and inner margin can be controlled
6.4 conversion of label display mode
1. Convert block level label to inline label display:inline
2. In line element conversion block element display:block
3 convert to inline block element display: inline block
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ background-color: gainsboro; } li{ display: inline-block; width: 200px; height: 50px; line-height: 50px; text-align:center } a{ display: inline-block; /* Remove underline from hyperlinks */ text-decoration: none; color:gray; width: 200px; height: 50px; } a:hover{ background-color: black; } </style></head><body> <div> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Browser Side</a></li> <li><a href="#">Server Side</a></li> <li><a href="#">Programing</a></li> </ul> </div></body></html>7 compound selector for CSS
Composite selectors are composed of two or more basic selectors in different ways in order to select more accurate and fine target elements.
7.1 intersection selector
The intersection selector is composed of two selectors, the first is the label selector and the second is the class selector. There can be no space between the two selectors
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> p.red{ color:red } </style></head><body> <p>gules</p> <p >gules</p> <p>gules</p> <div>gules</div> <div>gules</div> <div>gules</div> <p>blue</p> <p>blue</p> <p>blue</p></body></html>
Intersection selector is and
7.2 union selector
Union selectors are linked by commas. Any form of selector (id selector, label selector, class selector) can be a part of union selector. If some selectors define exactly the same or partially the same style, you can use the union selector to style them
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> p ,.red,span{ color:red } </style></head><body> <p>gules</p> <p >gules</p> <p>gules</p> <div>gules</div> <div>gules</div> <div>gules</div> <p>blue</p> <p>blue</p> <p>blue</p> <span>Union selector</span></body></html>
Union selectors are and, which means that all selectors separated by commas will execute the style
7.3 offspring selection
The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .nav a{ color: pink; } .person ul li{ color: aquamarine; } </style></head><body> <div> <a href="#">home page</a> <a href="#">product</a> <a href="#">Personal Center</a> </div> <a href="#">html</a> <a href="#">CSS</a> <a href="#"> JavaScript < / a > < UL > < li > watermelon < / Li > < li > Orange < / Li > < li > grape < / Li > < / UL > < div class =" person " "> < UL > < li > Zhang San < / Li > < li > Li Si < / Li > < li > Wang Wu < / Li > < ol > < li > steamed bread < / Li > < li > rice < / Li > < li > steamed stuffed bun < / Li > < / ol > < / UL > < / div ></body></html>
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-fpvqccuq-163583487560) (assert / image-20210810151552805. PNG)]
7.4 sub element selector
The child element selector can only select elements that are children of an element. The writing method is to write the parent element in front, and the child element in the back, followed by a > symbol in the middle. Note that a space should be reserved on both sides of the symbol
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .nav a{ color: pink; } /* Child Selector */ ul > li{ color: aquamarine; } </style></head><body> <div> <a href="#">home page</a> <a href="#">product</a> <a href="#">Personal Center</a> </div> <a href="#">html</a> <a href="#">CSS</a> <a href="#"> JavaScript < / a > < UL > < li > watermelon < / Li > < li > Orange < / Li > < li > grape < / Li > < / UL > < div class =" person " "> < UL > < li > Zhang San < / Li > < li > Li Si < / Li > < li > Wang Wu < / Li > < ol > < li > steamed bread < / Li > < li > rice < / Li > < li > steamed stuffed bun < / Li > < / ol > < / UL > < / div ></body></html>
practice
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /* Without modifying the html code, complete the following task 1. The link login is red. 2. The color of the text in the main navigation bar is green. 3. The text in the main navigation bar and side navigation bar is 16px and Microsoft YaHei 4 collection. The font of this site is required to be bold */ </style></head><body> <div> <ul> <li>Company home page</li> <li>Company profile</li> <li>Company products</li> <li>About us</li> </ul> <div>Collect this site</div> </div> <div> <div> Left navigation bar </div> <div><a href="#"> login < / a > < / div > < / div > < / body > < / HTML > L8 attribute selector
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-gzhgk77e-163583487563) (assert / image-202108101550144033. PNG)]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /* Gets all elements that have the type attribute */ li[type]{ border: 1px solid gray; } /* Gets an element whose type attribute is equal to a value */ li[type="vegetable"]{ background-color: green; } /* Select the element whose type attribute value contains a word */ li[type~="hot"]{ font-size: 30px; } /* Gets a property value that begins with a character */ li[color^="green"]{ background-color: orange; } /* Gets the element whose attribute value ends with a character */ li[type$='t']{ color: hotpink; font-weight: 900; } /* An element whose attribute value has a certain character */ li[type*="ea"]{ font-family: "Regular script"; } /* What does the attribute value begin with */ li[price|="very"]{ background-color: darkblue; } </style></head><body> <ul> <li type="fruit" color="green">watermelon</li> <li type="vegetable" color= "greenyellow">Broccoli</li> <li type="meat">beef</li> <li type="meat hot">pork</li> <li type="drink hot">cola</li> <li type="drink hot">Sprite</li> <li price="very-cheap">red wine</li> <li price="very">Baijiu</li> </ul></body></html>9 pseudo element selector
1 E:: the first word or word of the first letter text
2 e:: first line of text
3 e::selection selected text line
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> p::first-letter{ font-size: 20px; color: hotpink; } p::first-line{ color:skyblue; } p::selection{ color: orange; } </style></head><body> <p> The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. </p></body></html>
4 E:: before and E:: after
Create an element at the start and end positions inside the E element. The element is an inline element and must be used in combination with the content attribute
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> p::first-letter{ font-size: 20px; color: hotpink; } p::first-line{ color:skyblue; } p::selection{ color: orange; } p::before{ content: "This is the beginning of the paragraph"; } p::after{ content: "End of paragraph"; } </style></head><body> <p> The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and the middle is separated by a space. Of course, if the labels are nested, the inner label is called the descendant of the outer label. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags. The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags. </p></body></html>10 background background-colorbackground color background-imageBackground picturebackground-repeatTilebackground-positionPosition of backgroundbackground-attachmentWhether the background scrolls
<style type="text/css"> body{ /* The value can be none. No background url directly follows the path of the picture */ background-image: url(imgs/2.jpg); /* no-repeat Do not tile repeat-x tile X-axis default repeat-y tile Y-axis repeat */ background-repeat: no-repeat; /* The value can be top but left right center, or expressed in percentage or length unit */ background-position: -10% ; /* fixed The background image fixed scroll scrolls with the scrolling of the window */ background-attachment: scroll; height: 2000px; background: rgba(0,0,0,0.3); } </style>11 three features of CSS
11.1 lamination
The so-called cascade refers to the superposition of multiple css styles
11.2 inheritance of CSS
Inheritance means that the child element inherits some styles of the parent element, such as text color, font size, etc
div{ color: red; } </style></head><body> <div> <p> Zhongbei University </p> </div></body>
11.3 priority of CSS
When multiple styles act on the same element, there may be a problem that the style is overwritten
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ /* The value can be none. No background url directly follows the path of the picture */ background-image: url(imgs/2.jpg); /* no-repeat Do not tile repeat-x tile X-axis default repeat-y tile Y-axis repeat */ background-repeat: no-repeat; /* The value can be top but left right center, or expressed in percentage or length unit */ background-position: -10% ; /* fixed The background image fixed scroll scrolls with the scrolling of the window */ background-attachment: scroll; height: 2000px; background: rgba(0,0,0,0.3); } /* Priority: in line style > internal style [id selection > class selector > label selector] > external style! important you can add attributes to the back of the style to increase the priority, which is the highest priority of the current style */ div { background-color: green; color: red; width: 200px; height: 200px; } #D . C < / style > < / head > < body > < div id = "d" class = "C" style = "background color: blue;" > < p > Zhongbei University < / P > < / div ></body></html>12 box model (focus of CSS)
CSS has three modules: box model, floating positioning.
The so-called box model regards the elements in the HTML page as a rectangular box, that is, a container for content. Each rectangle is composed of the content padding, border and margin of the element.
The essence of a web page: the process of putting web page elements such as text and pictures into a box and putting them together using css is web page layout.
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-vwv3ua0u-163583487566) (assert / image-20210810171440383. PNG)]
Each box not only has its own size and position, but also affects the size and position of other boxes
12.1 box border
border : border-width || border-style|| border-color
Border style border style:
none: no border, ignoring the width of the border
Solid: solid line
Dashed: dashed line
Dotted: dotted line
Double: double solid line
Table border settings:
div{ width: 200px; height: 200px; background-color: antiquewhite; /* style */ border-top-style: dashed; border-bottom-style: dotted; border-left-style: solid; border-right-style: double; /* width */ border-top-width: 2px; border-bottom-width: 4px; border-left-width: 6px; border-right-width: 8px; /* The color can also be divided into up, down, left and right */ /* The comprehensive writing method of the top border, width style and color order cannot be disordered*/ /* The borders in other directions can also be written according to the above comprehensive writing method */ border-top: 1px solid red; /* Comprehensive setting of style 1 value, 2 values on four sides (the first value is up and down, the second value is about) 3 values (the first value is up and down, the second value is about, and the third value is down) 4 values are assigned clockwise from top to bottom, right to left*/ border-style: solid double dotted dashed; border-width: 4px 8px 16px 32px; border-color: red green yellow blue; }
Merge of table borders
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> table{ width: 500px; height: 300px; border: 1px solid black; /* Represents a merge border */ border-collapse: collapse; } td{ border: 1px solid red; } th{ border: 1px solid red; } </style></head><body> <!-- cellspacing Just set the distance between cells to 0 --> <table cellspacing=0> <thead> <tr > <th >Title 1 </th> <th>Title 2 </th> <th>Title 3 </th> <th>Title 4 </th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>4.3</td> <td>4.4</td> </tr> </tbody> </table></body></html>
Rounded border
Border radius: horizontal radius / vertical radius
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /* When line height = height of the container, the content is centered from top to bottom */ div{ width: 200px; height: 200px; border: 1px solid red; margin: 10px 40px; /* horizontally */ text-align: center; line-height: 200px; } div:first-child{ border-radius: 20px 50px; } div:nth-child(2){ border-radius: 20px; } div:nth-child(3){ border-radius: 15px 0; } /* When the radius is half of the border, it is a circle */ div:nth-child(4){ border-radius: 100px; } div:nth-child(5){ border-radius: 50%; } div:nth-child(6){ border-radius: 100px 0; } </style></head><body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div></body></html>
Think about how to draw an ellipse