Learning notes on Web front end development 07--HTML and CSS

Posted by phpknight on Sun, 21 Nov 2021 10:31:04 +0100

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

  1. When moving a background picture, you can only use background position
  2. The moving distance is the x and y coordinates of the target image
  3. The value is negative
  4. 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


  • 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/


  1. Open the website, click IcoMoon App, select the icon and click license font
  2. Click download

(2) Introduction of Font Icon:

  1. Put the fonts folder in the download package under the root directory of the page
  2. Globally declare fonts in CSS styles (bring font files into the page through CSS)
  3. Get the declaration in the style.css file of the extracted file


@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">

    <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>
        @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';


span the icon in the box is the icon in the lower right corner of the figure below:

(3) Font Icon append:


  1. Open the website, click IcoMoon App and select the icon
  2. Click import Icons and select the selection.json file to open it
  3. Select the icon to append and click ascend font
  4. download
  5. 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*/


(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*/


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 valuedescribe
defaultXiaobai (default)
pointerLittle hand

(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


vertical-align: baseline | top | middle | bottom ;
baselineBy default, the element is placed on the baseline of the parent element
topAlign the top of the element with the top of the highest element in the row
middlePlace the element in the middle of the parent element
bottomAlign 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

  1. Add vertical align: middle | top | bottom, etc. to the picture
  2. 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

  1. Move the margin of each box to the left -1px just to press the border of the adjacent box
  2. 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;


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


1.8 CSS initialization


/*Clear the inside and outside margins of all labels*/
* {
  margin: 0;
  padding: 0;
/*Italicized text does not tilt*/
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*/
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;
/*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.

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.

E:first-childMatches the first child element E in the parent element
E:last-childMatches 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-typeSpecifies the first of type E
E:last-of-typeSpecifies the last of type E
E:nth-of-type(n)Specifies the n th of type E


  • 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.



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;
::beforeInsert content before the inside of the element
::afterInsert 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


filter: function();   


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


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.


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

Internet Exploreryesnono
Firefoxyes (starting with Firefox 21)yesyes


<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 common properties:

autoplayautoplayVideo ready automatic playback (Google browser needs to add muted attribute)
controlscontrolsWant users to display playback controls
widthpixelSet player width
heightpixelSet player height
looploopLoop Playback
preloadauto (pre loaded video), none (video should not be loaded)Specifies whether the video is preloaded (this attribute is ignored if autoplay is present)
srcurlVideo URL address
posterimgurlLoading waiting picture
mutedmutedMute play

(3) Audio tag audio

Audio label compatibility:

Internet Exploreryesnono


<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">

Common audio attributes:

autoplayautoplayAudio ready auto play
controlscontrolsWant users to display playback controls
looploopLoop Playback
srcurlAudio URL address

3.2 input form

input type:

Attribute valueexplain
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:

requiredrequiredIf the form has this attribute, it means that some content cannot be empty
placeholderPrompt textThe prompt information of the form will not be displayed if there is a default value
autofocusautofocusAuto focus attribute, auto focus to the specified form after page loading
autocompleteoff / onWhen 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
multiplemultipleYou can submit multiple files

Topics: html5 html css