CSS Additional Knowledge Supplement (9): border graphics, Web fonts, Web font icons, CSS sprites, cursor attributes

Jump directory

Chapter Knowledge Points
CSS Encounter (1) Know CSS, write CSS styles, CSS comments, common CSS properties
CSS additional knowledge supplement (2) link element , computer system, CSS representation color, Chorme debugging tool, browser rendering process
CSS properties and selectors (3) CSS text properties, CSS font properties, CSS common selectors
Characteristics of CSS properties (four) Inheritance of CSS properties, cascading of CSS properties, types of CSS properties , display attribute, element hiding, overflow attribute, CSS ineffective skills
CSS box model (five) Know the box model, content width/height , inner margin padding, border/rounded corner border, outer margin margin, box and text shadow, box-sizing
CSS setting background (six) Background-(image, repeat, size, position, attachment), background, background-image and img comparison
The use of CSS advanced elements (seven) List elements, table elements, table merging, form elements, common attributes of forms
Emme syntax t and structural pseudo-classes of CSS (eight) Understanding Emmet, common Emmet syntax, common structural pseudo-classes, use of negative pseudo-classes
CSS additional knowledge supplement (nine) border graphics, Web Web fonts, Web font icons, CSS sprites, cursor attributes
CSS element positioning (10) Standard flow layout, understanding element positioning, static Positioning, relative positioning, fixed positioning, absolute positioning, sticky positioning, z-index Rules, floating cases, high collapse, clear floating, layout scheme comparison
CSS flex layout (12) Understanding flex layout, flex layout Understanding, flex-container attribute, flex-item attribute

1. border graphics

1.1 The shape of the border

  • Preface: border is mainly used to add a border to the box, but we can also use the characteristics of the border to achieve some shapes during development

  • The specific range occupied by the four direction borders of the border

  • Use the border property to draw ===> triangle

.box {<!-- -->
      /* 1. We need to set box-sizing to border-box */
      box-sizing: border-box;
      width: 100px;
      height: 100px;

      /* 2. Due to changing the box model - the size of the border will not change the size of the box, so the thickness of the border is set to half of the box */
      border: 50px solid transparent;
      border-top-color: orange;

      /* 3. Can rotate, change some rotation centers */
      transform-origin: 50% 25%;
      transform: rotate(90deg);
    }
  • Summary: We can make a lot of pictures by using the characteristics of border or CSS. You can refer to the following website ==> https://css-tricks.com/the-shapes-of-css/#top -of-site

2. Web fonts

2.1 Understanding web fonts

We used font-family to set the font used before. We can provide one or more fonts and let the browser find the fonts available on the system by itself. However, the choice of fonts is very limited, and some customization requirements cannot be performed.

  1. Web-safe font: the font that comes with the system
  2. Web Fonts: Get the fonts you want to use through some channels

2.2 How Web Fonts work

  • How Web Fonts Work
    1. First, we need to obtain the fonts to be used through some channels
      • For some paid fonts, we need to obtain the corresponding authorization
      • For fonts customized by some companies, designers are required to design
      • For some free fonts, we need to obtain the corresponding font files;
    2. Secondly, use Web Fonts in CSS code
    3. Finally, when deploying static resources, deploy HTML/CSS/JavaScript/Font together in the static server
  • Viewing Web Fonts from the User’s Perspective
    1. When browsing a webpage, because there are font files introduced in the code, font files will be downloaded together;
    2. The browser will search, parse and use the corresponding font in the downloaded font file according to the used font
    3. Use the corresponding font to display the content in the browser

2.3 Using Web Fonts

  • Operation steps:
    1. Download a font from the font world website: https://www.fonts.net.cn/
    2. Put the font into the corresponding directory
    3. Use @font-face (for loading a custom font) to import fonts and set the format
    4. use fonts

2.4 Compatibility of Web Fonts

Different web-fonts fonts will have different suffixes, and the compatibility with many browsers is also different, so we need to prepare fonts in various formats.

  • Common fonts
font suffix supplement
TrueType .ttf
OpenType .otf Create On top of TrueType fonts
Embedded OpenType .eot Compressed version of OpenType fonts
SVG font .svg .svgz
Show Web Open Font Format web open font
td>

.woff Build on TrueType font
  • Here we provide a website to produce corresponding font files: https://font.qqe2.com/

2.5 Compatible writing of Web Fonts

  • If we need strong compatibility, we can write it in the following format
    1. This is a fixed way of writing compatibility, we need to write two src
    2. The role of url: specify the path of the resource
    3. The role of format: It is the format used to help browsers quickly identify font files. Among them, the suffix name cannot be used as the identification of the file, it belongs to the encapsulation format, which is different from the encoding format`
@font-face {<!-- -->
      font-family: "fsj";
      src: url("./fonts/fonteditor/240-SSYaLiTi.eot");
      /* IE9 */
      src: url("./fonts/fonteditor/240-SSYaLiTi.eot?#iefix") format("embedded-opentype"),
        /*IE6-IE8*/
        url("./fonts/fonteditor/240-SSYaLiTi.woff") format("woff"),
        /* chrome, firefox */
        url("./fonts/fonteditor/240-SSYaLiTi.ttf") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2 + */
        url("./fonts/fonteditor/240-SSYaLiTi.svg#uxfonteditor") format("svg");
      /*iOS 4.1-*/
    }

3. Web Font Icon

  • Thinking: Fonts can be designed in various shapes, so can the fonts be designed directly as icons?
  • Answer: Of course you can

3.1 Understanding font icons

  • What is a font icon: Originally, we designed fonts only limited to text, but we can design fonts into various shapes and icons as a font-family, such fonts are called fonts icon.
  • Benefits of font icons
    • Zooming in doesn’t distort it, it’s vector
    • Can switch colors arbitrarily
    • When using many icons, the file size is relatively small

3.2 Using font icons

  • Steps for using font icons
  1. Log in to Ali icons: https://www.iconfont.cn/
  2. Add icon to library
  3. Click Download Code, and unzip it to the corresponding font folder after the download is complete
  4. Use the corresponding icon
  • Font icons can be used in two ways
    1. The first method (recommended): directly link iconfont.css to the webpage, and the icon can be used by adding the corresponding class
    2. The second (a bit troublesome): After downloading the file, there is a demo_index.html webpage in the file, which records the code of the downloaded icon. We directly through the character entity to add

4. CSS sprite

4.1 Understanding Sprite Map CSS Sprite

  • What is CSS Sprite: It is a CSS image synthesis technology, which combines various small pictures into one picture, and then uses CSS background positioning to display the corresponding picture part
  • Benefits of Sprite Map
    1. Reduce the number of http requests for web pages, speed up web page response speed, and reduce server pressure
    2. Reduce the total image size
    3. Solve the problem of naming pictures, only need to name a collection of pictures
  • How to make a sprite map: https://www.toptal.com/developers/css/sprite-generator

4.2 Use of Sprite Map

  • Principle of Sprite Map: It is shown by only displaying a small part of the picture, and the displayed part is adjusted by setting background-related properties and other properties.
    1. Set the width and height of the corresponding element
    2. Set a sprite image as a background image
    3. Adjust the position of the background image to display
  • How to quickly get the location of the sprite map: http://www.spritecow.com/
  • Case exercises for sprite diagrams:
<!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>
    .icon {<!-- -->
      display: inline-block;
      background-image: url(./imgs/iconall-sprite.png);
      background-repeat: no-repeat;
    }

    .icon-button {<!-- -->
      background-position: -2px -612px;
      width: 106px;
      height: 106px;
    }
  </style>
</head>

<body>
  <i class="icon icon-button"></i>
</body>

</html>

5. cursor attribute

  • Function: cursor can set the display style of the mouse pointer (cursor) when it is on the element
  • Cursor common values

    • pointer: a small hand, the mouse pointer moves to this link by default

    • text: a vertical line, the default is this style when the mouse pointer moves to the text input box

    • auto: the default value, the browser determines the display style of the pointer according to the context, such as switching the pointer style according to text and non-text

    • default: determined by the operating system, usually a small arrow

    • none: no pointer is displayed on the element