Lesson 22-Use of Basic CSS Properties

HEAD basic properties

Language properties

<!-- Chinese -->
<html lang="zh-Hans">
<!-- Simplified Chinese -->
<html lang="zh-cmn-Hans">
<!-- Traditional Chinese -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">

Character encoding

  • Use utf-8 encoding without BOM as the file format;
  • The meta that specifies the character encoding must be the first direct child element of head;
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>

IE compatibility mode

Prefer the latest versions of IE and Chrome Kernel
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO Optimization

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

  • viewport: generally refers to the size of the browser window content area, excluding toolbars, tabs, etc.
  • width: browser width, the width of the visible area of ​​the page in the output device;
  • device-width: device resolution width, the visible width of the output device screen;
  • initial-scale: initial zoom ratio;
  • maximum-scale: maximum zoom ratio;

For mobile device optimization, set the width of the visible area and the initial zoom ratio.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS Icons

  • apple-touch-icon The image is automatically processed into rounded corners and highlights;
  • apple-touch-icon-precomposed prohibits the system from automatically adding effects, and directly displays the original design image;
<!-- iPhone and iTouch, default 57x57 pixels, must have -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad, 72x72 pixels, can be absent, but recommended -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone and Retina iTouch, 114x114 pixels, can be absent, but recommended -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad, 144x144 pixels, optional but recommended -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

When no favicon is specified, most browsers will request favicon.ico in the root directory of the Web Server. To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods:

  • Place the favicon.ico file in the root directory of the Web Server;
  • Use link to specify favicon;
<link rel="shortcut icon" href="path/to/favicon.ico">

HEAD standard template

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, email@gmail.com">

    <!-- Add viewport for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS Icon -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>

CSS meta attributes

  • keywords: author / description / keywords / generator / revised / others associate the content attribute with a name.
  • content: ‘xxx’ defines meta information related to the http-equiv or name attribute
  • http-equiv: content-type / expire / refresh / set-cookie; associates the content attribute with the HTTP header.

CSS custom fonts

  • TrueTpe (.ttf) format: [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+]
  • OpenType (.otf) format: [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+]
  • Web Open Font Format (.woff) format: [IE9+, Firefox3.5+, Chrome6+, Safari3.6+, Opera11.1+]
  • Embedded Open Type (.eot) format: IE exclusive format, browsers that support this font include [IE4+]
  • SVG (.svg) format: [Chrome4+, Safari3.1+, Opera10.0+, iOS Mobile Safari3.2+】
    In @font-face, we need at least .woff and .eot fonts, and even .svg fonts to support more browser versions.

@font-face syntax rules

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];}
@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
        url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
        url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}

CSS units

There is only one unit in HTML, which is pixel px, so the unit can be omitted, but it is different in CSS.
<font color="#0000FF">**The unit in CSS must be written** because it has no default unit. </font>

Absolute units

1 in=2.54cm=25.4mm=72pt=6pc.

The meaning of various units:

  • in: Inches (1 inch = 2.54 centimeters)
  • cm: Centimeters
  • mm: Millimeters
  • pt: Points, or pounds (1 point = 1/72 inch)
  • pc: Picas (1 picas = 12 points)

Relative units

px: Pixels
em: Printing unit equivalent to 12 points
%: Percentage, relative to the size of the surrounding text

Why is pixel px a relative unit? This is also easy to understand. For example, the size of a computer screen is constant, but we can make it display different resolutions. At different resolutions, the length of a single pixel is definitely different.

font font properties

In CSS, there are many non-layout styles (not related to layout), including: font, line height, color, size, background, border, scrolling, line break, decorative attributes (bold, italic, underline), etc.

In this section, let’s talk about font properties first.
In CSS styles, common font properties are as follows:

p{
    font-size: 50px; /*font size*/
    line-height: 30px; /*line height*/
    font-family: Thin round, bold; /*font type: if there is no thin round, it will display the black body, if there is no black body, it will display the default*/
    font-style: italic ; /*italic means italic, normal means no tilt*/
    font-weight: bold; /*bold*/
    font-variant: small-caps; /*lowercase becomes uppercase*/
}

Line height

In CSS, all lines have line height. The padding of the box model is definitely not directly applied to text, but to the “line”.

In the above picture, we set the line height to 30px, 30px * 5 = 150px. By checking the inspect element, the height of this p tag is indeed 150px. And we found that we did not set the height of this p tag, and it was obviously the content that made it taller.

From a vertical perspective, the text is centered in its own line. For example, if the text is 14px and the line height is 24px, then the padding is 5px:

In order to strictly ensure that the text is centered in the line, our engineers have a convention: Line height and font size are generally even numbers. This ensures that their difference is an even number and can be divided by 2.

How to vertically center a single line of text

Tips: If a paragraph of text has only one line, if you set line height = box height at this time, you can ensure that the single line of text is vertically centered. This is easy to understand.

The above tips are only applicable to vertical centering of single-line text, not multiple lines. If you want to vertically center multiple lines of text, you also need to calculate the padding of the box. The calculation method is as follows:

vertical-align: middle; property

vertical-align: middle; /*Specifies the vertical alignment of inline or table-cell elements. */

Font size, line height, font attributes

(1) Font size:

font-size:14px;

(2) Line height:

line-height:24px;

(3) Font: (font-family means “font”, family means “family”)

font-family:"Microsoft YaHei";

We can write the bold attribute and the above three attributes together: (bold, font size, line height, font family)

Format:

font: bold font size/line height/font

Example:

font: 400 14px/24px "Microsoft YaHei";

PS: 400 is nominal, 700 is bold.

The above properties can be written in series, but there is a requirement that the font property must have at least font size, otherwise the series will be invalid (equivalent to no such line of code).

2. Description of font properties:

(1) Not all fonts can be used on the web page, because the font depends on whether it is installed on the user’s computer. For example, if you set:

font-family: "Microsoft YaHei";

In the above code, if the user’s Windows computer does not have this font, it will become Songti.

In the page, we generally use: Microsoft YaHei, Songti, and Heiti for Chinese. For English, we use: Arial and Times New Roman. If other fonts are needed on the page, you need to install the font separately or cut the picture.

(2) In order to prevent the user’s computer from not having the Microsoft YaHei font, you need to use the English comma to provide alternative fonts. As follows: (multiple alternatives can be selected)

font-family: "Microsoft YaHei","Times New Roman";

The above code means: If the user’s computer does not have the Microsoft YaHei font installed, then it will be Songti.

(3) We must put the English font first, so that all Chinese characters cannot match the English font and will automatically change to the Chinese font at the back:

font-family: "Times New Roman","Microsoft YaHei","SongTi";

The above code means that English will use the Times New Roman font, and Chinese will use the Microsoft YaHei font (because the Times New Roman font designed by Americans is not for Chinese, so Chinese will use the Microsoft YaHei font at the back). For example, for the text smyhvaeHaHaHa, smyhvae will use the Times New Roman font, and HaHaHa will use the Microsoft YaHei font.

However, if we write the Chinese font first: (wrong writing)

font-family: "Microsoft YaHei","Times New Roman","SongTi";

The above code will cause both Chinese and English to use the Microsoft YaHei font.

(4) All Chinese fonts have English aliases.

English aliases of Microsoft YaHei:

 font-family: "Microsoft YaHei";

English alias of Songti:

font-family: "SimSun";

So, when we combine the three attributes of font size, line height and font, we can also write:

font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

(5) Line height can be expressed as a percentage of the font size.

Generally speaking, the percentage is greater than 100%, because the line height must be greater than the font size.

For example, font:12px/200% "Songti" is equivalent to font:12px/24px "Songti". 200% can be understood as twice the line height in Word.

Conversely, font:16px/48px "Songti"; is equivalent to font:16px/300% "Songti".

Font bold attribute

.div {
    font-weight: normal; /*Normal*/
    font-weight: bold; /*Bold*/
    font-weight: 100;
    font-weight: 200;
    font-weight: 900;
}

When setting whether the font is bold, the attribute value can be filled in with bold fonts such as normal and bold, or directly filled in with numbers such as 100 to 900. The value of normal is equivalent to 400, and the value of bold is equivalent to 700.

Text attributes

In CSS styles, common text attributes include the following:

  • letter-spacing: 0.5cm ; Spacing between individual letters
  • word-spacing: 1cm; Spacing between words
  • text-decoration: none; Font decoration: none Remove underline, underline, line-through, overline
  • text-transform: lowercase; Word font case. Uppercase uppercase, lowercase lowercase
  • color:red; Font color
  • text-align: center; Alignment in the current container. The property value can be: left, right, center (<font color="#0000FF">in the middle of the current container), justify
  • text-transform: lowercase; The font case of the word. The property value can be: uppercase (uppercase words), lowercase (lowercase words), capitalize (capitalize the first letter of each word)

Border properties

CSS3 provides a new set of properties that can be used to embed borders in the form of images. In this way, borders can be customized.

  1. border-image-source //Introduce background image address
  2. border-image-slice //Cut and introduce background image
  3. border-image-width //Width of border image
  4. border-image-repeat //Arrangement of border background image 5.border-image-outset //Border background expansion 6.border-image //Abbreviation of the above five attributes

List attributes

ul li{
    list-style-image:url(images/2.gif); /*Set to image before list item*/
    margin-left:80px; /*Public attribute*/
}

There is also an abbreviated attribute called list-style, which is used to write the above multiple attributes in one declaration.

Overflow attribute: How to deal with content that exceeds the range

The attribute value of the overflow attribute can be:

  • visible: default value. Excess content will not be cut or scrolled, and all will be displayed.
  • hidden: Do not display content that exceeds the object size.
  • auto: If the content does not exceed, do not display the scroll bar; if the content exceeds, display the scroll bar.
  • scroll: On Windows platform, regardless of whether the content exceeds, always display the scroll bar. On Mac platform, it is the same as the auto attribute.

For the different attribute values ​​above, let’s take a look at the effect:
For example:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

 <style type="text/css">

  div{
   width: 100px;
   height: 100px;
   background-color: #00cc66;
   margin-right: 100px;
   float: left;
  }

  #div1{
   overflow: auto;/*The browser will handle the excess.*/
  }
  #div2{
   overflow: visible;/*The excess will be displayed*/
  }

  #div3{
   overflow: hidden;/*The excess part will be cut off*/
  }

 </style>

 </head>

 <body>

 <div id="div1">It's actually very simple, it's actually very natural. The love between two people is shared by two people. It's actually not difficult. You are too pessimistic. You don't share it with anyone behind a wall. I don't want to embarrass you. You don't need to give me an answer anymore</div>
    <div id="div2">It's actually very simple, it's actually very natural. The love between two people is shared by two people. It's actually not difficult. You are too pessimistic. You don't share it with anyone behind a wall. I don't want to embarrass you. You don't need to give me an answer anymore</div>
    <div id="div3">It's actually very simple, it's actually very natural. The love between two people is shared by two people. It's actually not difficult. You are too pessimistic. You don't share it with anyone behind a wall. I don't want to embarrass you. You don't need to give me an answer anymore</div>
 </body>
</html>

Mouse properties

The mouse property cursor has the following property values:

  • auto: Default value. The browser automatically determines the mouse cursor type based on the current situation.
  • pointer: IE6.0, a hand cursor with one finger raised. Just like when a user normally moves the cursor over a hyperlink.
  • hand: Same as pointer: A hand cursor with one finger raised. Just like when a user normally moves the cursor over a hyperlink.

For example, I want the cursor to display a hand shape when the mouse is placed on that label. The code is as follows:

p:hover{
    cursor: pointer;
}

There are also the following properties: (Don’t remember them, just check them when you need them)

  • all-scroll :　 IE6.0 has four arrows, up, down, left, and right, with a dot in the middle. It is used to indicate that the page can be scrolled in any direction, up, down, left, or right.
  • col-resize :　 IE6.0 has two arrows, left and right, with a cursor separated by a vertical line in the middle. Used to indicate that an item or title bar can be resized horizontally.
  • crosshair :　 A simple crosshair cursor.
  • default :　 The default cursor for the client platform. Usually an arrow.
  • hand :　 A hand cursor with one finger raised. Like a user would normally move the cursor over a hyperlink.
  • move :　 A crosshair cursor. Used to indicate that an object can be moved.
  • help :　 An arrow with a question mark. Used to indicate that help information is available.
  • no-drop :　 IE6.0 A hand cursor with a circle with a slash through it. Used to indicate that the dragged object is not allowed to be dropped at the current cursor position.
  • not-allowed :　 IE6.0 The forbidden sign (a circle with a slash through it) cursor. Used to indicate that the requested operation is not allowed.
  • progress :　 IE6.0 An arrow cursor with an hourglass. Used to indicate that a process is running in the background.
  • row-resize :　 IE6.0 cursor with two arrows, one above and one below, separated by a horizontal line. Used to indicate that an item or title bar can be resized vertically.
  • text :　 Cursor used to indicate editable horizontal text. Usually in the shape of a capital I.
  • vertical-text :　 IE6.0 cursor used to indicate editable vertical text. Usually in the shape of a capital I rotated 90 degrees.
  • wait :　 Cursor used to indicate that the program is busy and the user needs to wait. Usually in the shape of an hourglass or watch.
  • *-resize :　 Arrow cursor used to indicate the direction in which an object can be resized.
  • w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
  • url ( url ) :　 IE6.0 user-defined cursor. Use an absolute or relative url address to specify the cursor file (suffix .cur or .ani ).

Background properties

Common background properties of background

In css2.1, the common background properties are as follows: (often used, remember)

  • background-color:#ff99ff; Set the background color of the element.
  • background-image:url(images/2.gif); Set the image as the background.
  • background-repeat: no-repeat; Set whether and how the background image is repeated, and the default is to tile it. (Important)
  • no-repeat Do not tile;
  • repeat-x Tiles horizontally;
  • repeat-y Tiles vertically.
  • background-position:center top; Set the position of the background image in the current container.
  • background-attachment:scroll; Set whether the background image moves with the scroll bar.

The attribute value can be: scroll (the opposite of the fixed attribute, the default attribute), fixed (the background will be fixed and will not be scrolled away by the scroll bar).

  • There is also a comprehensive attribute called background, which is used to write the above multiple attributes in one declaration.

In CSS3, some new background attributes are added:

  • background-origin
  • background-clip background clipping
  • background-size resizing
  • multiple backgrounds

The above attributes are often used and need to be remembered. Now we will explain them one by one.

background-color: background color representation method

In CSS2.1, there are three ways to represent colors: words, RGB representation, and hexadecimal representation.

For example, red can be represented in the following three ways:

 background-color: red;
 background-color: rgb(255,0,0);
 background-color: #ff0000;

In CSS3, there is a new way to express colors: RGBA or HSLA.
RGBA and HSLA can be applied to all places where colors are used.
The following are introduced separately.

Expressed with English words

Colors that can be expressed with English words are simple colors, such as red, green, blue, orange, gray, etc. Code example:

background-color: red;

RGB representation

RGB represents the three primary colors of red, green, and blue.

In an optical display, each pixel is composed of three primary color luminous elements, which are adjusted to different colors by different brightness. The values ​​of r, g, and b range from 0 to 255, for a total of 256 values.

For example, red:

background-color: rgb(255,0,0);

Black：

background-color: rgb(0,0,0);

Colors can be superimposed, for example yellow is the superposition of red and green:

background-color: rgb(255,255,0);

RGBA Notation

background-color: rgba(0, 0, 255, 0.3);
border: 30px solid rgba(0, 255, 0, 0.3);

Code explanation:

  • RGBA means: Red, Green, Blue, Alpha.
  • The value range of R, G, B is: 0~255; the value range of transparency is 0~1.

RGB color mode:

  • All colors in nature can be obtained by combining the wavelengths of red, green, and blue (RGB) with different intensities. This is what people often call the principle of three primary colors.
  • The RGB primary colors are also called additive color mode, because when we add different wavelengths of light together, we can get different mixed colors. For example: red + green = yellow, red + blue = purple, green + blue = cyan.
  • In digital video, 8-bit encoding of each of the three primary colors of RGB constitutes about 16.78 million colors, which is what we often call true color. All display devices use the RGB color mode.
  • RGB has 256 levels (0-255) of brightness each. The 256 levels of RGB color can combine a total of about 16.78 million colors, that is, 256×256×256=16777216.

Hexadecimal notation

For example, red:

background-color: #ff0000;

PS: All values ​​starting with # are in hexadecimal.

Here, we need to learn how to convert between hexadecimal and decimal. Here are a few examples.

Question: What is the decimal equivalent of 28 in hexadecimal?

Answer: 2*16+8 = 40.

What is the decimal equivalent of af in hexadecimal?

Answer: 10 * 16 + 15 = 175

So, #ff0000 is equal to rgb(255,0,0).

background-color: #123456; is equivalent to background-color: rgb(18,52,86);

Hexadecimal can be simplified to 3 digits, and all forms of #aabbcc can be simplified to #abc. Here are some examples:

For example:

 background-color:#ff0000;

Equivalent to:

background-color:#f00;

For example:

background-color:#112233;

Equivalent to:

background-color:#123;

However, for example, the following cannot be simplified:

background-color:#222333;

For another example, the following cannot be simplified:

background-color:#123123;

Several common color abbreviations can be remembered. As follows:

#000 black
#fff white
#f00 red
#222 dark gray
#333 gray
#ccc light gray

HSLA notation

Example:

background-color: hsla(240,50%,50%,0.4);

Explanation:

  • H Hue, range 0~360. 0 or 360 means red, 120 means green, 240 means blue.
  • S Saturation, range 0%~100%. The larger the value, the brighter.
  • L Brightness, range 0%~100%. The maximum brightness is white, the minimum brightness is black.
  • A Transparency, range 0~1.

Other ways to set transparency:

(1) opacity: 0.3; will set the transparency of the entire box and its sub-boxes. In other words, when the box is set to semi-transparent, it will affect the sub-boxes inside.
(2) background: transparent; can set transparency separately, but it is set to be completely transparent (transparency cannot be adjusted).

background-repeat attribute

background-repeat:no-repeat; sets whether the background image is repeated and how it is repeated. The default is to tile it fully. The attribute value can be:

  • no-repeat (do not tile)
  • repeat-x (tiled horizontally)
  • repeat-y (tiled vertically)

This attribute is also frequently used during development. Let’s see the effect by setting different attribute values:

(1) When this attribute is not added: (that is, by default) (the background image will be tiled fully)
PS: The padding area also has a background image.
(2) When the attribute value is no-repeat (do not tile):
(3) When the attribute value is repeat-x (tiled horizontally):

In fact, this attribute has a wide range of uses. For example, a designer designs an image with a width of only 1px and a vertical gradient color. Then we use this property to tile it horizontally, and you can see that the entire page is gradient.

Search “Tile background” on the search engine and you will find that periodic images can be tiled in this way.
(4) When the attribute value is repeat-y (vertical tiling):

background-position attribute

The background-position attribute refers to the background positioning attribute. The formula is as follows:

When describing the attribute value, there are two ways: describe it in pixels and describe it in words. The following introduces them respectively.

1. Describe the attribute value in pixel value:

The format is as follows:

background-position: right offset downward offset;

The attribute value can be positive or negative. For example: 100px 200px, -50px -120px.

2. Use words to describe attribute values:

The format is as follows:

background-position: words describing left and right words describing top and bottom;
  • Words describing left and right: left, center, right
  • Words describing top and bottom: top, center, bottom

For example, right center means to put the image in the middle of the right; center center means to put the image in the middle.

For example, bottom means that the bottom edge of the image is aligned with the bottom edge of the parent (understand it well).

In fact, we achieve the display effect by using this image as the background image of the website. Just add the following attributes to the body tag:

body{
    background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}

In the above code, if the background-position attribute is not added, the background image will be in the upper left corner of the browser by default (which looks ugly); after adding this attribute, the image will be in the middle of the browser horizontally.

Scenario 2: (Full-width banner)

Many websites have banner images on their homepages (the full-screen large image at the top of the website is called “Full-width banner“), which requires a particularly large horizontal width. For example, if the designer gives you a 1920*465 super-large banner image, if we insert this banner image directly into the web page as an img tag, there will be problems: first, the image is not in the middle of the web page; second, a horizontal scroll bar will definitely appear.

The correct way is to use the banner image as the background image of the div. In this way, the part of the background image that exceeds the div will automatically overflow. The properties that need to be set for the div are as follows:

div{
    height: 465px;
    background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}

In the code above, we set the height of the div (the height is the height of the banner image), and there is no need to set the width (because the width will automatically occupy the entire line).

background-attachment attribute

  • background-attachment:scroll; Sets whether the background image is fixed. The attribute value can be:
  • fixed (the background will be fixed and will not be scrolled away by the scroll bar).
  • scroll (the opposite of the fixed attribute, the default attribute)

background comprehensive attribute

The background attribute is a comprehensive attribute like border, and multiple attributes can be written together.

Example 1:

background:red url(1.jpg) no-repeat 100px 100px fixed;

Equivalent to:

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

In the future, we can use small attributes to stack large attributes.

In the above attributes, you can omit any part of them.

For example, for the following attributes:

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

background-size attribute: background size

background-size attribute: set the size of the background image.

Format example:

/* Specific values ​​of width and height */
background-size: 500px 500px;

/* Percentage of width and height (relative to the size of the container) */
background-size: 50% 50%; // If the two attribute values ​​are the same, it can be abbreviated as: background-size: 50%;

background-size: 100% auto; // You can experiment with this attribute yourself.

/* cover: The image always fills the container and keeps the aspect ratio unchanged. If there is any excess part of the image, the excess part will be hidden. */
background-size: cover;

/* contain: Display the image completely in the container and keep the aspect ratio unchanged. It may cause part of the container to be blank. */
background-size: contain;

Here we reiterate the property values ​​cover and contain:

  • cover: The image always fills the container and ensures the aspect ratio remains unchanged. If there is any part of the image that exceeds the container, the excess part will be hidden.
  • contain: Display the image completely in the container and ensure the aspect ratio remains unchanged. This may cause some areas of the container to be left blank.

Code example: (The size of this image itself is 1080 * 1350)

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .img_wrap {
   display: flex;
  }

  .img {
   width: 200px;
   height: 200px;
   border:1px solid red;
   background: url(http://img.smyhvae.com/20191006_1330.jpg) no-repeat;
   margin-right: 20px;
  }

  .div1 {
   background-size: cover;
  }
  .div2{
   background-size: contain;
  }
 </style>
</head>

<body>
 <section class="img_wrap">
  <div class="img div1"></div>
  <div class="img div2"></div>

 </section>
</body>

</html>

On the basis of the above code, add a background-position: center property, and the image will be centered in the container:

Background origin: background-origin property

background-origin property: Controls where the background starts to be displayed.

Format example:

/* Display the background image from the padding-box inner margin */
background-origin: padding-box; //Default value

/* Display the background image from the border-box border */
background-origin: border-box;

/* Display the background image from the content-box content area */
background-origin: content-box;

If the property value is set to border-box, the border part will also display the image.

background-clip property

Format example:
background-clip: content-box; The part that exceeds the border box will be clipped. The property value can be:

  • border-box The part that exceeds the border-box will be clipped
  • padding-box The part that exceeds the padding-box will be clipped
  • content-box The part that exceeds the content-box will be clipped

Suppose now there is such a property setting:

background-origin: border-box;
background-clip: content-box;

The above code means that the background image starts loading from the border part, but the part that exceeds the content area will be clipped.

Set multiple backgrounds at the same time

We can set multiple backgrounds for a box at the same time, separated by commas. It can be used for adaptive layout.

Code example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            height: 416px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 给Add multiple backgrounds to the box. Write them according to the background syntax format. Use commas to separate multiple backgrounds. */
            background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Gradient: background-image

Gradient is a relatively colorful feature in CSS3. Through gradient, we can achieve many dazzling effects, effectively reduce the number of images used, and have strong adaptability and scalability.

Gradients are divided into:

  • Linear gradient: produces a gradient effect along a straight line in one direction.
  • Radial gradient: produces a gradient effect from a center point along around.
  • Repeated gradient.

Linear gradient

Format:

background-image: linear-gradient(direction, start color, end color);
background-image: linear-gradient(to right, yellow, green);

Parameter explanation:

  • Direction can be: to left, to right, to top, to bottom, angle 30deg (refers to 30° clockwise).

Format example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #000;
        }

       /* Syntax:
        linear-gradient(direction, start color, end color);
        Direction: to left to right to top to bottom 　Angle　30deg
        start color
        end color
        */
        div:nth-child(1) {
            background-image: linear-gradient(to right, yellow, green);
        }

        /* If the direction is not specified, the default direction is: from top to bottom */
        div:nth-child(2) {
            background-image: linear-gradient(yellow, green);
        }

        /* Direction can specify angle */
        div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(135deg, yellow, green);
        }

        /* Yellow starts to appear at 0%, red starts to appear at 40%, green starts to appear at 70%, and blue starts to appear at 100%. */
        div:nth-child(4) {
            background-image: linear-gradient(to right,
            yellow 0%,
            red 40%,
            green 70%,
            blue 100%);

        }

        /* There is a sudden change between colors */
        div:nth-child(5) {
            background-image: linear-gradient(45deg,
            yellow 0%,
            yellow 25%,
            blue 25%,
            blue 50%,
            red 50%,
            red 75%,
            green 75%,
            green 100%
            );
        }

        div:nth-child(6) {
            background-image: linear-gradient(to right,
            #000 0%,
            #000 25%,
            #fff 25%,
            #fff 50%,
            #000 50%,
            #000 75%,
            #fff 75%,
            #fff 100%
            );

        }

    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Example: Button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f8fcd4;
        }

        .nav {
            width: 800px;
            text-align: center;
            padding-top: 50px;
            margin: 0 auto;
        }

        /*Set the basic style of the button*/
        .nav a {
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            border: 1px solid #e59500;
            background-color: #FFB700;
            background-image: linear-gradient(
                    to bottom,
                    #FFB700 0%,
                    #FF8C00 100%
            );
        }

    </style>
</head>
<body>
<div class="nav">
   <a href="javascript:;">Navigation 1</a>
    <a href="javascript:;">Navigation 2</a>
    <a href="javascript:;">Navigation 3</a>
    <a href="javascript:;">Navigation 4</a>
    <a href="javascript:;">Navigation 5</a>
    <a href="javascript:;">Navigation 6</a>
</div>
</body>
</html>

Radial gradient

Format:

background-image: radial-gradient(radial radius, center position, start color, end color);
background-image: radial-gradient(100px at center,yellow,green);

Explanation: Gradient around the center point, the radius is 150px, and the gradient is from yellow to green.

The center point can be: at left right center bottom top. If the unit is pixels, the center point refers to the upper left corner of the box.

Of course, there are various other parameters. Format example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px;
            float: left;
        }
        /*
        Radial gradient:
        radial-gradient (radial radius, center position, start color, end color);
        Center point position: at left right center bottom top
        */

        /* Radial radius is 100px, center point is in the middle*/
        div:nth-child(1) {
            background-image: radial-gradient(100px at center, yellow, green);
        }

        /*Center point is in the upper left corner*/
        div:nth-child(3) {
            background-image: radial-gradient(at left top, yellow, green);
        }

        div:nth-child(2) {
            background-image: radial-gradient(at 50px 50px, yellow, green);
        }

        /*Set different color gradients*/
        div:nth-child(4) {
            background-image: radial-gradient(100px at center,
            yellow 0%,
            green 30%,
            blue 60%,
            red 100%);
        }

        /*If the radius of the radiation is different in width and height, it is an ellipse.*/
        div:nth-child(5) {
            background-image: radial-gradient(100px 50px at center, yellow, green);
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

Example: Generate a button using the properties of radial gradient and border radius. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Gradient</title>
    <style>

        div:nth-child(1) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
            background-image: radial-gradient(
                    200px at 100px 100px,
                    rgba(0, 0, 0, 0),
                    rgba(0, 0, 0, 0.5)
            );
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

The transparency set for the second div is from 0 to 0.5. If the transparency is set from 0 to 0, the style does not change, and it is the same as the first div. If the transparency is set from 1 to 1, the box is completely black.

clip-path: clip out part of the element for display

The clip-path attribute can create a clipping area where only part of the element can be displayed. The part inside the area is displayed, and the part outside the area is hidden.

Although clip-path is not a background attribute, this attribute is very powerful, but it is often used in conjunction with background attributes to achieve some effects.

Example: (Enlarge the clipped area when the mouse hovers)

.div1 {
    width: 320px;
    height: 320px;
    border: 1px solid red;
    background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
    background-size: cover;

    /* Cut out the circular area */
    clip-path: circle(50px at 100px 100px);
    transition: clip-path .4s;
}
.div1:hover{
    /* When the mouse hovers, a larger circle is cropped */
    clip-path: circle(80px at 100px 100px);
}

The advantage of the clip-path attribute is that even if any clipping is done, the container’s placeholder size remains unchanged. For example, in the code above, the container’s placeholder size is always 320px * 320px. This also makes it easier for us to create some animation effects.

clip-path: polygon() example:

In addition, through clip-path: (svg), you can import svg vector graphics to achieve rounded corners for iOS icons. I won’t go into detail here.

Summary of basic CSS functional attributes

For beginners of CSS, you will definitely find it difficult to remember so many styles, and it is easy to forget them even if you remember them. In fact, we don’t need to remember so many styles at the beginning. It is true that we will forget them even if we remember them. At the beginning, we only need to remember some commonly used ones, and then slowly contact and learn some advanced ones in the process of use. This is a reliable gradual process. The following are some common CSS attributes for reference only

There are 8 “text” attributes

  1. “Font” (font-family). When setting, you need to consider whether the font is available in the browser.
  2. “Size” (font-size), pay attention to the measurement unit.
  3. “Thickness” (font-weight), in addition to normal, bold, bolder, lighter, there are 9 settings that use pixels as the measurement unit.
  4. “Style” (font-style), that is, the font.
  5. “Line height” (line-height), is the line spacing. Note that the line spacing can only be expressed as the font size value.
  6. “Deformation” (font-variant), you can display the normal text in half the size and in uppercase, but IE does not currently support this attribute.
  7. “Case” (text-transform), this attribute can easily control the case of letters, including capitalize, uppercase, lowercase and none (all inherited text and transformation parameters are ignored, and the text will be displayed in normal form).
  8. “Decoration” (text-decoration), used to control the display form of link text, including underline, no underline, line-through, blink and none (none, so that none of the above effects will occur). But IE4 does not support text blinking.

There are 6 “background” attributes

  1. “Background color” (background-color), set the background color.
  2. “Background image” (background-image), set the background image of the web page.
  3. “Repeat” (background-repeat), control the tiling method of the background image, there are 4 options: no-repeat, repeat (repeat, tiled horizontally and vertically), horizontal repeat (repeat-X, image tiled horizontally) and vertical repeat (repeat-Y, tiled vertically).
  4. “Attachment” (background-attachment), used to control whether the background image will scroll with the page. There are fixed (fixed, when the text scrolls, the background image remains fixed) and scrolling There are two options: scroll (the background image scrolls with the text content).
  5. “Horizontal position” (background-position), determine the horizontal position of the background image. There are left alignment (left), right alignment (right), top (top), bottom (bottom), center (center) and value (customizing the starting position of the background image allows users to have more precise control over the position of the background image)
  6. “Vertical position” (background-position), determine the vertical position of the background image. There are left alignment (left), right alignment (right), top (top), bottom (bottom), center (center) and value (customizing the starting position of the background image allows users to have more precise control over the position of the background image)

There are 6 “Block” attributes

  1. “Word-spacing” is mainly used to control the distance between words. There are two options: normal and value (custom spacing value). When selecting value, the available units are inches (in), centimeters (cm), millimeters (mm), points (pt), 12pt characters (pc), font height (em), font x height (ex) pixels (px).
  2. “Letter-spacing” has a similar function to character spacing, and there are also two options: normal and value (custom spacing value).
  3. “Vertical-align” controls the vertical position of text or images relative to their parent element. If a 2×3 pixel GIF image is vertically aligned with the top of its parent element text, the GIF image will be displayed on top of the line of text. There are 9 options: baseline (align the baseline of the element with the baseline of the parent element), subscript (sub, display the element as a subscript), superscript (super, display the element as a superscript), top (top, align the top of the element with the highest parent element), text-top (text-top, align the top of the element with the top of the parent element’s text), middle (middle, align the midpoint of the element with the midpoint of the parent element), bottom (bottom, align the bottom of the element with the lowest parent element) and value (custom).
  4. “Text alignment” (text-align), set the horizontal alignment of the block. There are 4 options: left, right, center and justify.
  5. “Text indent” (text-indent), control the indentation of the block.
  6. “White-space”, in HTML, spaces are omitted; in CSS, the attribute (white-space) is used to control the input of spaces. There are 3 options: normal, pre, and nowrap.

There are 6 “box” attributes

  1. “width” determines the width of the box itself, so that the width of the box does not depend on the amount of content it contains.
  2. “height” determines the height of the box itself.
  3. “float” sets the floating effect of block elements.
  4. “clear” is used to clear the set floating effect.
  5. “margin” controls the size of the margin around the border. It contains 4 attributes: margin-top controls the width of the top margin, margin-right controls the width of the right margin, margin-bottom controls the width of the bottom margin, and margin-left controls the width of the left margin.
  6. “Border” (padding), determines the amount of space padding around the block element, which contains 4 attributes “padding-top controls the width of the upper blank, padding-right controls the width of the right blank, padding-bottom controls the width of the lower blank, padding-left controls the width of the left blank.

There are 3 attributes of “border”

  1. “Width” (border-width), controls the width of the border, which is divided into 4 attributes: border-top-width top border width, border-right-width right border width, border-bottom-width bottom border width, border-left-width left border width.
  2. “Color” (border-color), set the color of each border. If you want to display different colors on the four sides of the border, you can list them separately in the settings. For example, p{: #ff0000 #009900 #0000ff #55cc00}, the browser interprets the four colors as: top border, right border, bottom border and left border (clockwise from the top).
  3. “Style” (border-style), set the border style, there are 9 types: none, dotted, dotted, dashed, solid, double, grove, ridge, inset and outset.

There are 3 attributes in the “list” property

  1. “Type” (list-style-type), which determines the symbol used before each item in the list. There are 8 types: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha and upper-alpha.
  2. “Item image” (list-style-image), which replaces the symbol in front of the list with a graphic.
  3. “Position” (list-style-position), which is used to describe the position of the list. There are two options: outside and inside.

There are 6 “positioning” attributes

  1. “Type” (position), used to determine the type of positioning, there are 3 options: absolute, relative and static.
  2. “Z-index”, used to control the stacking order of block elements in a web page, and can set overlapping effects for elements. The parameter value of this attribute uses a pure integer. When the value is 0, the element is at the bottom layer, which is suitable for elements with absolute or relative positioning.
  3. “Visibility” (visibility) Use this attribute to hide elements in a web page. There are 3 options: inherit (inherit the visibility setting of the parent element), visible (visible) and hidden (hidden).
  4. “Overflow” (overflow), after determining the height and width of the element, if the area of ​​the element cannot fully display the content of the element, this attribute will work. There are 4 options: visible (expand the area to display all content), hidden (hide the content that exceeds the range), scroll (scroll, display a scroll bar on the right side of the element) and auto (auto, display the scroll bar when the content exceeds the element area).
  5. “Positioning”. When the absolute positioning type is determined for the element, this group of attributes determines the specific position of the element in the web page. This group of attributes contains 4 sub-attributes, namely “left” (the attribute name is “left”, which controls the starting position on the left side of the element),
  6. “Top” (the attribute name is “top”, which controls the starting position on the top of the element), “width” or “height” (the same as the “width” or “height” attributes in the “box” class attribute panel). “Clip”. When the element is specified as an absolute positioning type, this attribute can cut the element area into various shapes, but currently only square is provided. The attribute value is rect(top right bottom left), that is: rect(top right bottom left), and the unit of the attribute value is any length unit.

There are 3 “Extended” attributes

  1. “Pagination”, two of which are used to set page breaks for printed pages. “Before” (page-break-before); “After” (page-break-after). “Visual Effects”, two of which are used to apply special effects to elements in the web page.
  2. “Cursor” (cusor), you can specify the cursor shape to be used on a certain element. There are 15 options, representing various shapes of the mouse in the Windows operating system. In addition, it can also specify the URL address of the pointer icon;
  3. “Filter” (fiter), you can apply various wonderful filter effects to elements in the web page, including 16 filters in total.
Course: Master HTML5 and CSS3: From Beginner to Advanced Developer
Share your love

Trending now

Exploring Web 3D Core Technologies Development
WebRTC Advanced Guide：Media, Transport & Architecture
WebSocket Deep Guide：Building High-Performance Realtime Systems
Micro Frontends & Serverless: Modular Web Development