2021-11-02 first day of learning CSS

1.CSS introduction

1.1 limitations of HTML

Only the elements of the web page can be displayed, and the appearance style cannot be modified. It is ugly.

1.2 CSS - Web beautician

CSS is short for cascading style sheets * *, also known as CSS style sheets and cascading style sheets.

CSS, like HTML, is also a markup language.

CSS is mainly used to set the text content (font, size, alignment, etc.) in the HTML page, the shape of the picture, as well as the layout and appearance display style of the layout.

CSS can beautify HTML, make HTML more beautiful and make page layout simpler.

summary
1.HTML is mainly used for structure and element content display;

2.CSS beautifies HTML and layout pages;

3. The greatest value of CSS: HTML focuses on the presentation of structure, and the style is handed over to CSS, that is, the structure is separated from the style.

1.3 CSS syntax specification

CSS rules consist of two main parts: selectors and one or more declarations.

**selector**: Select who to modify the style for;
**statement**: What to change.
For example: h1 {color:red;
         font-size:12px;}

1. Attributes and attribute values appear in the form of key value pairs;

2. Attribute is the style attribute set for the specified object, such as font size, text color, etc;

3. Attribute and attribute value are separated by English ":" colon;

4. The selector and declaration are written in the head tag.

<!DOCTYPE html>
<html lang="zh-CN">
<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>experience CSS grammatical norm</title>
    <style>
        /* Selector {style} */
        /* Change the style for who {change what style} */
        p {
            color: red;
            /* Changed the text size to 12 pixels */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>I little interesting</p>
</body>
</html>

1.4 CSS code style

1.4.1 style and format writing

1. Compact format

h3 {color: deeppink;font-size: 20px;}

2. Expansion format (more advocated)

h3 {
color: deeppink;
font-size: 20px;
}

1.4.2 style case

Except in special cases, attribute names, attribute values and keywords all use lowercase letters.

1.4.3 space specification

1. Leave a space before the attribute value and after the colon;

2. Leave a space between the selector and the braces.

2.CSS basic selector

Function: select different labels according to different needs.

Classification: selectors are divided into two categories: basic selectors and compound selectors.

2.1 foundation selector

1. The basic selector is composed of a single selector;

2. The basic selector includes label selector, class selector, id selector and wildcard selector.

Base selectoreffectcharacteristicUsageusage
tag chooser You can select all the same tags in html, such as PNo differentiated choiceMorep {color: red;}
Class selector One or more labels can be selectedYou can choose according to your needsA lot.nav {color: red font35;}
id selector Only one label can be selected at a timeThe id attribute can only appear once in each html documentGenerally used with js#nav {color: red}
Wildcard selectorSelect all labelsNo differentiated choiceUse under special circumstances* {color: red;}

2.1.1 label selector

Function: select all tags of a certain type, such as all div tags and all span tags.

Advantages: it can quickly set the style for the same type of labels in the page.

Disadvantages: you cannot design differentiated styles. You can only select all current labels.

2.1.2 class selector (most commonly used in development)

Function: select different labels for differentiation, and select one or several labels separately.

.Class name{
		Attribute 1: attribute value 1;
		......
	}

For example, all HTML elements of the red class will be red.

<!DOCTYPE html>
<html lang="zh-CN">
<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>Class selector </title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">Ice rain</li>
        <li>Seminal margin</li>
        <li>Li Xianglan</li>
        <li>Rare words</li>
        <li>Jiangnan sytle</li>
    </ul>
</body>
</html>

A class red is defined in the style tag. Calling this class in the body tag is a bit like a function call.

be careful
1. Be sure to note that there is a small black dot in front of the class name;

2. The class name can be defined at will. Except for the tag name (which becomes the tag selector), any name can be used;

3. When the class name is very long, it can be separated by a short horizontal bar;

4. Do not use pure numbers, Chinese names, etc., and try to use English letters.

2.1.2.1 multi class name

Function: assign multiple class names to a label, so as to achieve more selection purposes.

grammar

Shape such as
<div class="red font20">Arthur</div>

be careful
1. Multiple class names must be separated by spaces;

2.1.3 id selector

grammar

#id name{
		Attribute 1: attribute value 1;
		......
		} 

The difference between id selector and class selector
1. Class selector is like a person's name. A person can have multiple names, and a name can also be used by multiple people;

2.id selector is like the ID number of a person, it is unique and cannot be reused.

2.1.4 wildcard selector

In CSS, the wildcard selector is defined with "*", which means to select all elements in the page.

grammar

* {
   Attribute 1: attribute value 1;
   ......
  }

be careful
1. The wildcard selector does not need to be called to automatically use styles for all elements;

2. It can only be used under special circumstances.

Tags: html css

Posted on Tue, 02 Nov 2021 12:30:41 -0400 by psr540