1. Advanced CSS skills
1.1 wizard diagram
Sprite technology is mainly used for background pictures, which is to integrate multiple small background pictures into a large picture
- When moving a background picture, you can only use background position
- The moving distance is the x and y coordinates of the target image
- The value is negative
- When using sprite images, the size and position of each background image should be measured accurately
1.2 Font Icon
Font icons show icons, which are essentially fonts
advantage:
- Lightweight: an icon font is smaller than a series of images. As long as the font is loaded, the icon will be rendered, reducing server requests
- Flexibility: the essence is text. You can change the color, size, transparency effect, etc. at will
- Compatibility: almost all browsers are supported
(1) Font icon download:
Download website:
- Icomoon font: https://icomoon.io/
- Ali iconfont font library: http://www.iconfont.cn/
Steps:
- Open the website, click IcoMoon App, select the icon and click license font
- Click download
(2) Introduction of Font Icon:
- Put the fonts folder in the download package under the root directory of the page
- Globally declare fonts in CSS styles (bring font files into the page through CSS)
- Get the declaration in the style.css file of the extracted file
statement
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c9i3f2');
src: url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?c9i3f2') format('truetype'),
url('fonts/icomoon.woff?c9i3f2') format('woff'),
url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
Specific usage:
<!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>Font Icon</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c9i3f2');
src: url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?c9i3f2') format('truetype'), url('fonts/icomoon.woff?c9i3f2') format('woff'), url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span::after {
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
</body>
span the icon in the box is the icon in the lower right corner of the figure below:
(3) Font Icon append:
Steps:
- Open the website, click IcoMoon App and select the icon
- Click import Icons and select the selection.json file to open it
- Select the icon to append and click ascend font
- download
- Delete old files and add newly downloaded files
1.3 CSS triangle
(1) Isosceles triangle
Syntax example:
div {
width: 0;
height: 0;
line-height: 0; /*Care compatibility*/
font-size: 0;
border: 10px solid transparent;
border-left-color: red; /*Left triangle*/
}
effect:
(2) Right triangle
Syntax example:
div {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px 8px 0 0; /*Increase the upper border and set the lower left border to 0*/
}
effect:
1.4 user interface style
User interface style: change some user action styles
(1) Change user mouse style
Sets or retrieves which system predefined cursor shape the mouse pointer moves over the object
Syntax example:
li { cursor: pointer;}
| Attribute value | describe |
|---|---|
| default | Xiaobai (default) |
| pointer | Little hand |
| move | move |
| text | text |
| not-allowed | prohibit |
(2) Cancel form outline and prevent dragging text fields
Cancel form outline:
- Add Outline: 0 to the form; Or outline: none; You can remove the default blue border
input {outline: none;}
Prevent dragging text fields:
- Add hot size: none to the text field; You can prevent dragging text fields
textarea { resize: none; }
1.5 center alignment of inline blocks and text
Vertical align attribute: sets the vertical alignment between the picture or form (in-line element) and the text
Note: only valid for inline elements or inline block elements
Syntax:
vertical-align: baseline | top | middle | bottom ;
| value | describe |
|---|---|
| baseline | By default, the element is placed on the baseline of the parent element |
| top | Align the top of the element with the top of the highest element in the row |
| middle | Place the element in the middle of the parent element |
| bottom | Align the top of the element with the top of the lowest element in the row |
Special note: the solution of the blank gap at the bottom of the picture
- Add vertical align: middle | top | bottom, etc. to the picture
- Convert the picture into a block level element display: block;
1.6 ellipsis display of overflow text
(1) Single line text overflow display ellipsis
white-space: nowrap; /*Force text to appear on one line*/ overflow: hidden; /*Hidden beyond*/ text-overflow: ellipsis; /*Replace the excess with an ellipsis*/
(2) Multiline text overflow display ellipsis
Multi line text overflow display ellipsis has a large compatibility problem, which is suitable for webKit browser or mobile terminal
overflow: hidden; /*Hidden beyond*/ text-overflow: ellipsis; /*Replace the excess with an ellipsis*/ display: -webkit-box; /*Elastic box model display*/ -webkit-line-clamp: 2; /*Limit the number of lines of text in a block element*/ -webkit-box-orient: vertical; /*Sets or retrieves the arrangement of the child elements of the expansion box object*/
1.7 common layout skills
(1) Application of negative margin value
- Move the margin of each box to the left -1px just to press the border of the adjacent box
- When the mouse passes a box, you can raise the level of the current box (if there is no positioning, add relative positioning; if there is positioning, add z-index)
li:hover {
position: relative; /*Relative positioning*/
border: 1px solid red;
}
Or:
li:hover {
z-index: 1;
border: 1px solid red;
}
(2) The text is cleverly used around floating elements
Floating elements do not hold text
Left floating effect of picture box:
(3) Clever use of inline block elements
- By default, there is a distance between two block elements in a row, which has its own size
- Add text align: Center to the parent of the inline block element; You can center the entire inline block element horizontally
effect:
1.8 CSS initialization
Example:
/*Clear the inside and outside margins of all labels*/
* {
margin: 0;
padding: 0;
}
/*Italicized text does not tilt*/
em,
i {
font-style: normal;
}
/*Remove the dot of li*/
li {
list-style: none;
}
img {
border: 0; /*Take care of the lower version browser: the picture contains the border of the link*/
vertical-align: middle; /*Cancel the problem of blank gap at the bottom of the picture*/
}
/*Defines the mouse style as pointer when the mouse passes the button button*/
button {
cursor: pointer;
}
/*The color of all links, underline*/
a {
color: #666;
text-decoration: none;
}
/*The mouse turns green after the link*/
a:hover {
color: green;
}
/*All button s, input s and specified fonts*/
button,
input {
font-family:Microsoft YaHei,Hei ti SC;
}
/*Specifies some element styles for the body*/
body {
-webkit-font-smoothing: antialiased; /*Anti aliasing for clearer text display*/
background-color: #fff;
font: 12px/1.5 Microsoft YaHei;
color
}
/*Clear float*/
.clearfix: after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*IE6,7 proper*/
}
2. New features of CSS
be careful:
- The new CSS3 feature has compatibility problems, which is only supported by IE9 +
- The support of mobile terminal is better than that of PC terminal
- At this stage, we mainly learn: new selector, box model and other features
2.1 selector
(1) Attribute selector
The attribute selector can select the element according to the specific attribute of the element, and can realize the function without the help of class or id selector.
| Selector | explain |
|---|---|
| E[att] | Select the E element with att attribute |
| E[att="val"] | Select the E element with att attribute and attribute value equal to val |
| E[att^="val"] | Select the E element with att attribute and attribute value starting with val |
| E[att$="val"] | Select the E element with att attribute and attribute value ending with val |
| E[att*="val"] | Select the E element with att attribute and val in the attribute value |
be careful:
- The weight of class selector, attribute selector and pseudo class selector is 10
(2) Structure pseudo class selector
The structure pseudo class selector mainly selects elements according to the document structure, which is often used to select child elements according to the parent selector.
| Selector | explain |
|---|---|
| E:first-child | Matches the first child element E in the parent element |
| E:last-child | Matches the last E element in the parent element |
| E:nth-child(n) | Match the nth child element E in the parent element |
| E:first-of-type | Specifies the first of type E |
| E:last-of-type | Specifies the last of type E |
| E:nth-of-type(n) | Specifies the n th of type E |
nth-child(n):
- n can be numbers, keywords and formulas
- If n is a number, it is to select the nth child element, in which the number starts from 1
- n can be Keywords: even, odd
- N can be a formula: if n is a formula, it will be calculated from 0, but the number of elements 0 or beyond will be ignored
The difference between nth child (n) and nth of type (n):
- Nth child (n) will arrange the serial numbers of all boxes. When executing, first look at nth child (n), and then go back to the box in front of nth child (n). If it matches, you can choose. If it doesn't match, you don't choose
- Nth of type (n) arranges the box numbers of the specified elements. When executing, first find the nth of the left and right specified elements
(3) Pseudo element selector
Pseudo element selector can help us use CSS to create new tag elements without HTML tags and simplify HTML structure.
Syntax:
element::before{}
Basic usage:
div::before {
display: inline-block; /*In order to define the width and height of the box*/
content: ''; /* '' The middle content can be edited freely*/
width: 30px;
height: 30px;
background: pink;
}
| Selector | explain |
|---|---|
| ::before | Insert content before the inside of the element |
| ::after | Insert content after the inside of the element |
- before and after create an element, but it is not an inline element
- The newly created element cannot be found in the document tree
- before and after must have content attribute
- Before creates an element before the parent element content, and after inserts an element after the parent element content
- Pseudo elements have the same weight of 1 in the parent element selector and label selector
2.2 box model border box
CSS3 can specify the box model through box sizing, which has two values: content box and border box. This changes the way the box size is calculated.
- Box sizing: content box box size is width + padding + border
- Box sizing: the size of the border box box is width
- If we change the box model to box sizing: border box, the padding and border will not support the large box (provided that the padding and border will not exceed the width)
Used in development:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.3 filter and calc
(1) The picture becomes blurred
CSS filter: apply graphic effects such as blur or color offset to elements
Syntax:
filter: function();
Example:
filter: blur(5px); /* blur Function: fuzzy processing, the larger the value, the more fuzzy*/
(2) Calculate box width: clac function
calc function: performs some calculations when declaring CSS attribute values
Syntax:
width: calc(100% - 20px); /*You can use + - * / for calculations*/
2.4 transition
transition attribute makes CSS have animation effect, which is often used with: hover.
Syntax:
transition: The attributes to transition take time. When does the motion curve begin;
- Properties: the CSS properties you want to change, such as width, height, background color and inner and outer margins, can be changed. If you want all properties to change, you can write an all transition
- Time spent: the unit is seconds and must be written
- Motion curve: the default is ease, which can be omitted. linear constant speed, ease gradually slows down, ease in acceleration, ease out deceleration, ease in out acceleration first and then deceleration
- When to start: the unit is seconds, the default is 0s, which can be omitted
3. New features of common HTML5
The new features of HTML5 have compatibility problems, which are basically supported by versions above IE9 +
3.1 labels
(1) Semantic label
- These tags are mainly for search engines
- You can use multiple times in a page
- In IE9, these elements need to be converted into block level elements
- There is no compatibility problem at the mobile terminal
<header>: Head label <nav>: Navigation tab <article>: Content label <section>: Define an area of the document <aside>: Sidebar label <footer>: Tail label
(2) Video tag video
Without using plug-ins, you can play video format files natively
video Tags: video compatibility
| browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes (starting with Firefox 21) | yes | yes |
| Safari | yes | no | no |
| Opera | yes | yes | yes |
Syntax:
<video src="File address" controls="controls"></video>
Compatibility writing:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
video common properties:
| attribute | value | describe |
|---|---|---|
| autoplay | autoplay | Video ready automatic playback (Google browser needs to add muted attribute) |
| controls | controls | Want users to display playback controls |
| width | pixel | Set player width |
| height | pixel | Set player height |
| loop | loop | Loop Playback |
| preload | auto (pre loaded video), none (video should not be loaded) | Specifies whether the video is preloaded (this attribute is ignored if autoplay is present) |
| src | url | Video URL address |
| poster | imgurl | Loading waiting picture |
| muted | muted | Mute play |
(3) Audio tag audio
Audio label compatibility:
| browser | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | yes | no |
| Opera | yes | yes | yes |
Syntax:
<audio src="File address" controls="controls"> </audio>
Compatibility writing:
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
</audio>
Common audio attributes:
| attribute | value | describe |
|---|---|---|
| autoplay | autoplay | Audio ready auto play |
| controls | controls | Want users to display playback controls |
| loop | loop | Loop Playback |
| src | url | Audio URL address |
3.2 input form
input type:
| Attribute value | explain |
|---|---|
| type="email" | Restricted user input must be Email type |
| type="url" | Restrict user input must be of URL type |
| type="date" | Date type |
| type="time" | Time type |
| type="month" | Month type |
| type="week" | Week type |
| type="number" | Number type |
| type="tel" | phone number |
| type="search" | Search box |
| type="color" | Generate a color selection form |
Form properties:
| attribute | value | explain |
|---|---|---|
| required | required | If the form has this attribute, it means that some content cannot be empty |
| placeholder | Prompt text | The prompt information of the form will not be displayed if there is a default value |
| autofocus | autofocus | Auto focus attribute, auto focus to the specified form after page loading |
| autocomplete | off / on | When the user starts typing in the field, the browser should display the options filled in the field based on the previously entered values. It is opened by default. It needs to be placed in the form with the name attribute and submitted successfully |
| multiple | multiple | You can submit multiple files |