Before learning a new subject, we need to know what it is, why it is used, and how it is used, which is often called “3W” (What, why, how).

What is CSS?

Cascading Style Sheets (CSS) is a computer language for expressing the styles of documents such as HTML or XML. It is a standard Style sheet language for describing the presentation of web pages, i.e. layout and format.

Since web pages are made up of HTML structures, we can guess the “whys” from the “whys”, that is, the relationship between CSS and HTML.

Why CSS?

In the study of “Graphic HTML” let us know that HTML can build the skeleton of a web page, although there are some style attributes, but are extremely simple. If we want to draw a beautiful page, then we can’t do without CSS. It has the layout of the page, color, background, width, height, font control, so that the page according to your art design layout more beautiful. Here’s a comparison:

How to Use CSS

Before using CSS, we need to understand the rules of use, that is, syntax.

Selector {property 1: property value; Attribute 2: Attribute value}Copy the code

Now that we know the basic syntax of CSS, let’s look at how it works with HTML, or how HTML uses CSS to make itself beautiful.

CSS can be added to HTML in four ways

  • Inline style: used in HTML elementsstyleattribute
  • Internal style sheets: in the header of HTML documents<head>Area to use<style>Element to contain CSS
  • External references: External CSS files are used
  • @import URL (): Use the @import directive (an AT rule) (note that the @import directive must appear before other styles in the stylesheet, otherwise the stylesheet referenced by @import will not be loaded)

Example: the index. HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        @import url("./import.css");
    </style>
    <link rel="stylesheet" href="./index.css">
    <style>
        .internal-style {
            font-style: italic; color:burlywood;
        }
    </style>
</head>
<body>
    <div style="font-style: italic; color: blueviolet;">Inline style - Uses the "style" attribute in HTML elements</div>
    <div class="internal-style">Internal style sheet - in HTML document header</div>
    <div class="external-style">External references - Use external CSS files</div>
    <div class="import">Test the import method import</div>
</body>
</html>
Copy the code

import.css

.import{ color: blue; }
Copy the code

index.css

.external-style { 
    font-style: italic; 
    color: red;
}
Copy the code

Before learning

Before you can formally learn CSS, you need to understand some basic CSS concepts, such as inheritance, cascading, numeric values, and color values. Here is the introduction of a simple concept, convenient for later learning understanding, not to do in-depth explanation.

inheritance

An ancestor element in CSS passes the value of the CSS property to the child element. For example, if the body sets the font to ‘Song Times’, then the CSS property is applied to all the descendants of the body element.

CSS has many inheritable properties: for example, the color, font, and size associated with text

CSS also has many non-inheritable properties, such as borders, margins, margins, and so on.

cascading

Cascading is cascading in a cascading style sheet (CSS), which is the process of cascading styles across the document hierarchy in order to allow the browser to determine which value to use from multiple sources for a particular attribute value of a tag.

Cascade priority:

Inline style > Embed Style > Link style > Default Style

A numeric value

There are two main types of numerical values: absolute and relative

Absolute value and examples
The absolute value The unit for The sample
inches in height:6in
cm cm height:6cm
mm mm height:6mm
point pt height:6ipt
pickup pc height:6pc
pixel px height:6px
Relative values and examples
Relative to the value The unit for The sample
Em em Height: 1.2 em
Ex ex height:6ex
The percentage % height:10%

Em and ex are both units of font size. Em represents the width of the letter M in a font. Ex is equal to the height of letter X in the given font.

Commonly used: px, em, %

Color value

  • Color: for example, red
  • Hexadecimal colors: such as #RRGGBB or #RGB
  • RGB color values (R, G, B) : e.g. RGB (25,25,25)
  • RGB percentage values (R%,G%,B%) : e.g. RGB (1%, 2%, 80%)
  • HSL(Hue, saturation %, Brightness) : Format: HSL(0,0%,0%)
  • Alpha channel: Both RGB and HSL support Alpha in formats called RGBA and HSLA, respectively

From above, we have a simple idea of 3W CSS. Obviously, CSS is not all that it needs. In the following articles, we will learn how CSS works and the apis it provides, covering selectors, fonts, box models, backgrounds and borders, positioning, and more.

If my blog is helpful to you, if you like my blog content, please “like” “comment” “collection” one key three! I heard that 👉 praise 👈 people will not be too bad luck, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Your support is what keeps me going. Don’t forget to follow me at 👉 and 👈!

Personal wechat: IOTzzh Public account: Front-end Wechat personal website: www.iotzzh.com