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 selector | effect | characteristic | Usage | usage |
|---|---|---|---|---|
| tag chooser | You can select all the same tags in html, such as P | No differentiated choice | More | p {color: red;} |
| Class selector | One or more labels can be selected | You can choose according to your needs | A lot | .nav {color: red font35;} |
| id selector | Only one label can be selected at a time | The id attribute can only appear once in each html document | Generally used with js | #nav {color: red} |
| Wildcard selector | Select all labels | No differentiated choice | Use 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.