①.Emmet syntax
The predecessor of Emmet grammar is Zen codinng, which uses abbreviations to improve the writing speed of html/css. This grammar has been integrated inside Vscode
- Quickly generate HTML structure
- Generate a label: directly enter the label name and press Tab/Enter
- If you want to add multiple identical tags, add * quantity after the tag name, you can quickly get the corresponding number of tags
- If there is a parent-child relationship label, you can use > for example ul > li
- If there is a sibling relationship, you can use + for example div + p
- If you generate a class name or an id name, just write .demo or #two directly
- If the generated class names are in order, you can use the auto-increment symbol $
- If you want the content displayed by default in the label, use { }
<body>
<!-- label name + Enter Automatically generate tag pairs-->
<div></div>
<table></table>
<!-- label name*Specific quantity Generate corresponding quantity of labels -->
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- Labels for parent-child relationships can use > Represents a hierarchical relationship -->
<!-- ul>li -->
<lu>
<li></li>
</lu>
<!-- table>tr>td -->
<table>
<tr>
<td></td>
</tr>
</table>
<!-- Sibling relationship labels are used for + Represents a hierarchical relationship -->
<!-- p+span -->
<p></p>
<span></span>
<!-- class name/id named tags ./# Just declare it -->
<!-- div.imgs -->
<div class="imgs"></div>
<!-- table#data -->
<table id="data"></table>
<!-- ul>li#two -->
<ul>
<li id="two"></li>
</ul>
<!-- If to generate incremental class name/id first name use $*quantity./#name -->
<!-- div.demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- p#graph$*3 -->
<p id="graph1"></p>
<p id="graph2"></p>
<p id="graph3"></p>
<!-- Write text inside by default when generating tags {} -->
<!-- div{written text} -->
<p>12345</p>
<!-- div{Word}*num -->
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<!-- p{$}*3 -->
<p>1</p>
<p>2</p>
<p>3</p>
</body>
- Quickly generate CSS styles
CSS takes the form of shorthand
- Such as w200→width: 200px;
- lh26→line-height: 26px;
<style>
.one {
/* w100 */
width: 100px;
/* lh40 */
line-height: 40;
/* ti2em */
text-indent: 2em;
/* tdn */
text-decoration: none;
/* Just add the acronym and the corresponding value */
}
</style>
- Quick format code
- Shortcut shift + alt + F
②.CSS composite selector
In CSS, selectors can be divided into base selector and compound selectors
Composite selectors are built on the basis of basic selectors and are formed by combining basic selectors.
- Compound selectors can select target elements more accurately and efficiently
- A compound selector is a combination of two or more base selectors in different ways
- Commonly used compound selectors include: descendant selectors, child selectors, union selectors, pseudo-class selectors, etc.
- Descendant selector
Also known as the containment selector, it can select the child elements of the parent element
parent element child element ... { style CSS }
i.e. selects the tags of all child elements within the parent element
Notice:
- Separate the parent and child elements with a space
- The final selection is the label of the child element
- If you need to locate the tags of grandchildren or smaller generations, you can find them step by step.
- Elements can be any base selector
<head>
...
<style>
/* Modify the style of all li in ul */
ul li {
color: red;
font-size: 20px;
}
/* Modify the style of all a in all li in ul */
ul li a {
color: gray;
font-size: 25px;
text-decoration: none;
}
/* Pick out the a in all li's in the second ul */
.nav li a {
font-size: 12px;
}
</style>
</head>
<body>
<ul>
this is the parent element
<li>This is the child element</li>
<li>This is the child element</li>
<li>This is the child element</li>
<li> <a href="#">This is the grandchild</a> </li>
</ul>
<ul class="nav">
<li>This is child element 1</li>
<li>This is child element 2</li>
<li>This is child element 3</li>
<li>This is child element 4</li>
<li> 1<a href="#">This is grandchild element 1</a> </li>
<li> 2<a href="#">This is grandchild element 2</a> </li>
<li> 3<a href="#">This is grandchild element 3</a> </li>
</ul>
</body>
- child selector
Also known as a child element selector, it can only select the nearest child element of an element
parent element > child element { CSS }
Indicates that all direct descendant child elements of the parent element are selected
Parent Son Selector
<head>
...
<style>
/* Select all the child elements a in the div, */
.nav>a {
color: royalblue;
font-size: large;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Child element</a>
<p> <a href="#">Sun element</a> </p>
</div>
</body>
practise
<!--1:Change the text linked in the code below to red-->
<div class="nav">
<ul>
<li> <a href="#">Baidu</a></li>
<li> <a href="#">Sohu</a></li>
</div>
<!--1:will be below"big elbow"Text changed to red-->
<div class="hot">
<a href="#">Big Elbow</a>
<ul>
<li><a href="#">Pig Head</a></li>
<li><a href="#">Pi gt ail</a></li>
</ul>
</div>
<head>
...
<style>
/* 1:Change the text linked in the code below to red */
.nav ul li a {
color: red;
}
/* 1:Change the "big elbow" text below to red */
.hot>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Baidu</a></li>
<li><a href="#">Sohu</a></li>
</ul>
</div>
<div class="hot">
<a href="#">Big Elbow</a>
<ul>
<li><a href="#">Pig Head</a></li>
<li><a href="#">Pi gt ail</a></li>
</ul>
</div>
</body>
- Union selector
Union selectors can select multiple groups of tags while defining the same style for them, usually used for collective declarations
element1, element 2 { CSS }
By dividing different basic selectors in English, the union selection effect element 1 and element 2 can be achieved.
- The agreed syntax specification, the different elements of the union selector are generally written vertically
- It must be noted that the last selector does not need to be added,
<head>
...
<style>
/* Requirement 1: Change Xiong Da and Xiong Er to brown font 32px */
div,
p {
color: brown;
font-size: 32px;
}
/* Requirement 2: Change Xiong Er and Peppa Pig to pink font 22px */
div,
p,
.pig>li {
color: pink;
font-size: 22px;
}
</style>
</head>
<body>
<div>big bear</div>
<p>Bear Two</p>
<span>Bald Strong</span>
<ul class="pig">
<li>Peppa Pig</li>
<li>piggy george</li>
<li>Daddy Pig</li>
</ul>
</body>
- Pseudo-class selector
Pseudo-class selectors are used to add some special effects to some selectors, such as adding special effects to links, or selecting the first and nth elements
Syntax features: use : for example: hover,first-child
There are many pseudo-class selectors, such as link pseudo-class, structure pseudo-class, form pseudo-class, etc.
Link pseudo-class selector
| Selector | illustrate |
|---|---|
| a:link | Select all unvisited links |
| a:visited | Select all links already visited |
| a:hover | Select the link the mouse pointer is over |
| a:active | select all() links that are not up when the mouse is down |
<head>
...
<style>
a:link {
color: red;
text-decoration: none;
font-size: 20px;
}
a:visited {
color: gray;
font-size: 16px;
}
a:hover {
background-color: rgb(255, 186, 174);
font-size: 21px;
}
a:active {
color: yellow;
font-size: 18px;
}
</style>
</head>
<body>
<p><a href="../03-CSS(1)/10-News page case/index.html">link 1</a></p>
<p><a href="../03-CSS(1)/08-text attribute.html">link 2</a></p>
<p><a href="05-union selector.html">link 3</a></p>
<p><a href="04-small exercise.html">link 4</a></p>
<p><a href="03-child element selector.html">link 5</a></p>
</body>
Note: if the a:link statement fails, in chrome Clear browsing historyCtrl + shift + Del
- In order to ensure that the selectors take effect, please write each selector in the order of LVHA a:link a:visited a:hover a:active
- Because the <a> link will have a default style in the browser, the style that wants to define a must be specified separately (modifying the parent element Attributes alone is invalid)
The writing method in actual work generally only defines the usual state of the link and the state of the mouse passing through.
a {
color: #000;
text-decoration: none;
}
a:hover {
color: blue;
}
:focus pseudo-class selector
The focus pseudo-class selector is used to get the focus (cursor) form element
In general, <input> class form elements can only be obtained, so this Selector is mainly for form elements.
<head>
...
<style>
input:focus {
background-color: green;
}
input:hover {
box-sizing: border-box;
background-color: greenyellow;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="button" name="" id="">
</body>
Compound selector summary
| Selector | effect | feature | usage | Symbol-level usage |
|---|---|---|---|---|
| descendant selector | Used to select descendant elements | Can be a child/grandchild | more | space separated |
| child selector | most recent offspring | Only my own son | less | greater-than-sign |
| union selector | select elements of different classes | a style of collective statement | more | comma separated, vertical |
| Connection pseudo-class selector | Filter connections with different states | related to connection | more | Remember LVHA , a{} , a:hover |
| :focus selector | form to get cursor | related to the form | less | Remember input:focus usage |
③. CSS element display mode
Introduction:
The display mode of an element is how the element (label) is displayed, for example, <div> occupies a line by itself, for example, a line can put multiple <span>s, etc.
Classification:
HTML elements are generally divided into two types: block elements and inline elements.
- block element
Common block elements are <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc. Among them, the <div> tag is a typical block element
Features of the block element:
- own line
- Height, width, margins and padding can be controlled by yourself
- The width defaults to 100% of the container (parent width)
- A block element is a container and box that can contain inline or block-level elements
Notice:
- Block-level elements are not allowed in text-type elements
The <p> tag is mainly used to store text, so block level element s cannot be placed in the <p> tag, especially <div>
Similarly, <h1>~<h6>, etc. are all text-based block-level tags, and block level element s cannot be placed in them.
- Inline elements
Common inline element s are <a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>, etc., among which <span> Labels are the most classic inline elements, and sometimes become inline elements
Characteristics of inline elements:
- Adjacent elements are on a line, and a line can display multiple inline elements
- Direct setting of height and width is invalid
- The default width is the width of the element content itself
- Inline elements can only hold text or other inline elements
Notice:
- No more links can be placed inside the link <a>
- In special cases, the block level element can be placed in <a>, but in this case, it is safest to convert the mode to <a>
- Inline block element
There are several special tags <img/>, <input/>, <td> in inline element, they have the characteristics of block element and inline element at the same time
Also known in some places as an inline block element
Characteristics of inline block elements:
- and adjacent inline (inline block) elements on one line, but there will be gaps between them, and one line can display multiple (inline features)
- The default width is the width of its own content (inline feature)
- Height, line height, margin and padding can be controlled (block features)
- Element classification summary
| element pattern | element arrangement | set style | default width | containment relationship |
|---|---|---|---|---|
| block level element | A line can put a block-level element | Customizable width and height | 100% of the container | Container level, can contain any tags |
| inline element | A line can hold multiple inline elements | You cannot directly set the width and height | The width and height of the content itself | Holds text or other inline elements |
| Inline block element | Can put multiple in one line | Can set width and height | The width and height of the content itself |
- Element display mode transition
In special cases, we need to convert the display mode of the element
Simple understanding: elements of one schema require characteristics of another schema
For example, if you want to increase the trigger range of link <a>
- Inline elements are converted to block elements display: block;
- Block elements are converted to inline elements display: inline;
- Convert to an inline block element display: inline-block
<head>
...
<style>
a {
/* In order to be able to set the width and height properties of the inline element, convert it to a block element */
display: block;
width: 150px;
height: 40px;
background-color: chartreuse;
margin: 5px;
}
div {
/* To make multiple div elements appear on one line, turn them into inline elements */
display: inline;
background-color: khaki;
}
span {
/* To set the width and height, but want to display more than one line, convert it to an inline block element */
display: inline-block;
width: 150px;
height: 40px;
margin: 5px;
background-color: red;
}
</style>
</head>
<body>
<a href="#">Hyperlink-inline element</a>
<a href="#">Hyperlink-inline element</a>
<div>div-block element</div>
<div>div-block element</div> <br>
<span>span-inline element</span>
<span>span-inline element</span>
</body>
- Vertical centering of single line text
CSS does not directly provide code for vertical centering
But it can be achieved by setting the line height of the text
Set the line height of the text equal to the height of the container
.
principle
- The composition of line height: upper space + text height + lower space
- The upper and lower gaps are equal, and the text is squeezed into the middle of the container
- Line height < box height, the text is on the upper side
- Line height > box height, the text is lower
- Exercise cases
Complete the Xiaomi sidebar as shown below
<!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>practice case-Xiaomi sidebar</title>
<style>
body {
align-content: center;
}
a {
/* convert a to a block element */
display: block;
height: 45px;
width: 240px;
background-color: rgb(83, 87, 88);
text-decoration: none;
font-size: 14px;
font-weight: 400;
color: white;
text-indent: 2em;
line-height: 45px;
}
a:hover {
background-color: rgb(255, 111, 0);
}
</style>
</head>
<body>
<a href="#">Mobile Phone Card</a>
<a href="#">TV Box</a>
<a href="#">Notebook Tablet</a>
<a href="#">Travel Wear</a>
<a href="#">Smart Router</a>
<a href="#">Healthy Children</a>
<a href="#">Headphone Speaker</a>
</body>
</html>
④.CSS background
You can add background styles to elements of a page through the CSS background property
Background properties can be divided into
- background color
- Background picture
- background tiling
- background image position
- background image fixed etc.
- background color
The background-color property defines the background color of the element
In general, the default background color is transparent.
Syntax background-color: color value;
- Background picture
The background image of the element described by the background-image property
In actual development, it is often used in the settings of logo s, small elements, large background images, etc.
The advantage is that it is very easy to control the position (sprite map is also a use scenario)
| parameter value | effect |
|---|---|
| none | no background image (default) |
| url (address) | Specify a background image using a path |
- Background tiling
If you need to set the tiling effect on the background image in the HTML file
The background-repeat property can be used
| parameter value | illustrate |
|---|---|
| repeat | Tile horizontally and vertically (default) |
| no-repeat | no tiling |
| repeat-x | Tiling in the x-axis direction |
| repeat-y | Tiling in the y-axis direction |
Page elements can add background color and background image attributes, but the background image will suppress the background color
- place nouns
Use the background-position property to change the position of the image in the background
Syntax background-position: x y;
Parameters can directly define x and y coordinates, or you can use positional nouns
Notice:
- The center right effect is the same as the right center effect
- If only one location noun is defined and the other is omitted, the other will default to center alignment
| parameter value | illustrate |
|---|---|
| length | Percentage/Length value consisting of a floating point number and a unit identifier |
| position | Positional nouns such as top/center/bottom/left/right |
practice case
Case 1: Realize the display effect of the following figure
<!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>Background Location Case 1</title>
<style>
/* Make the element appear on one line, switch the display mode */
h3 {
display: inline-block;
font-size: 14px;
width: 65px;
height: 24px;
/* Line-height property, aligns the text vertically to the center */
line-height: 24px;
text-indent: 2em;
font-weight: 500;
margin: 5px;
}
/* Add an icon to each element */
.fir {
background-image: url(front page.png);
background-repeat: no-repeat;
background-position: left;
background-size: 24px 24px;
}
.sec {
background-image: url(dynamic.png);
background-repeat: no-repeat;
background-position: left;
background-size: 24px 24px;
}
.thr {
background-image: url(ranking.png);
background-repeat: no-repeat;
background-position: left;
background-size: 24px 24px;
}
/* Set the feedback when the pointer passes */
a {
color: #000;
text-decoration: none;
}
a:hover {
color: rgb(252, 85, 49)
}
</style>
</head>
<body>
<a href="#">
<h3 class="fir">front page</h3>
</a>
<a href="#">
<h3 class="sec">dynamic</h3>
</a>
<a href="#">
<h3 class="thr">ranking</h3>
</a>
</body>
</html>
Case 2: Use the background attribute to display a picture that exceeds the page size and require it to be centered
<!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>Background position exercise 2</title>
<style>
body {
background-image: url(backg.jpeg);
/*Set vertically up, horizontally centered and cancel the image tiling effect*/
background-repeat: no-repeat;
background-position: top;
}
h1 {
font-size: 60px;
text-align: center;
color: white;
font-weight: 500;
margin: 40px;
}
h1:hover {
font-size: 59px;
color: rgb(204, 200, 200);
font-weight: 500;
}
</style>
</head>
<body>
<h1>Large background picture exercise</h1>
</body>
</html>
Background position (exact units)
If you want to define the exact unit in the background-position property, it must be written in the order of x,y coordinates
If only one specific value is specified, then this value specifies the x coordinate, and the y direction is vertically centered by default
mixed unit
The two values of the background-position property can be an exact value and a positional noun, but also note that the first is the x-direction. The second is the y-direction.
- Background image fixed (background attached)
The background-attachment property sets whether the background image is fixed or scrolled with the rest of the page.
Later, you can use this property to do a parallax scrolling effect
| attribute value | illustrate |
|---|---|
| scroll | The background image scrolls as the object content scrolls |
| fixed | background image fixed |
- Mixed writing of background attributes
Similar to the compound writing method of the font property, the background property can also be compounded, which greatly saves the amount of code
The usual writing order is
background: background color, background image address, background tile, background image scrolling, background image position, and so on.
<style>
body {
/* background: Background Color Background Image Address Background Tile Background Image Scroll Background Image Position */
background: black url(backg.jpeg) no-repeat fixed center 40px;
}
</style>
- Translucent background color
CSS3 provides the effect of translucent background color
Syntax background: rgba(r,g,b,α)
Notice:
- Translucent background is only supported by IE9+ browsers
- The current development generally does not pay attention to the compatibility of the browser, you can use it with confidence
- Background summary
| Attributes | effect | value |
|---|---|---|
| background-color | background color | Predefined Values/Hex/RGB Values |
| background-image | Background picture | url (image path) |
| background-repeat | tile style | repeat/no-repeat/repeat-x/repeat-y |
| background-position | background position | length/position are the x and y coordinates respectively |
| background-attachment | background attached | scroll (scrolling)/fixed (fixed) |
| background mix | save code | Color Image Address Tile Style Scrolling Properties Background Position |
| background: rgba(...) | Translucent color | rgba(r,g,b,α) The last value is transparency |
Background image: Commonly used in logo s, small decorative images, or large background images in actual development. The advantage is that it is easy to control the position (sprite image is also a use scenario)