CSS

css major usage scenarios is to beautify the web page, use the page layout
css i.e., Cascading Style Sheets (Cascading Style Sheets) short
css mainly used to set text (font, size, alignment) HTML page, picture shape (width and height, border style, margin, etc.) as well as the layout and appearance of the layout display style.
css rule consists of two main parts: selectors and one or more statements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01-css体验语法</title>
    <style>
        /* 选择器 {样式} */
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>生活很美好</p>
</body>
</html>

The introduction of css way

(1) an inline style: style attribute
(2) page level styles: using the style tag (tag on the head)
(3) into css file: using a link tag incorporated within the head

<link rel="stylesheet" href="css/index.css">

css coding style

1. The writing style format

Expanded format

	p {
           color: red;
           font-size: 12px;
      }

2. Style sensitive style

All lowercase

3. Style Space Style

Attribute value of the front, behind the colon, one space
Select (tags) and the retention braces intermediate spaces

css selector

css foundation selector

Tag selector (selector element)

Use HTML tag name as a selector
Advantages: can quickly set up a unified style for the page in the same type of label

Disadvantages: can not differentiate style design, only select all of the current tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 选择器 {样式} */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>生活很美好</p>
    <div>life is shit</div>
</body>
</html>

Class selector (common)

Differentiation can select a different label, selected from a single or a few labels

note

The long name or phrase in a single line to be used to select a naming
Do not use pure digital, and other Chinese name, try to use letters to represent
Names to be meaningful, make sure that people know at a glance purpose of this class name ( here my code does not meet specifications )
Naming convention: Web front-end development specification manual .doc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-类选择器</title>
    <style>
        /* 选择器 {样式} */
        .ii {
            color: green;
        }
        .dd {
            color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li class="ii">おはよう</li>
        <li class="ii">こんにちは</li>
        <li>こんにちは</li>
    </ul>
    <div class="dd">今まで</div>
</body>
</html>

Here Insert Picture Description

Exercise 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习1</title>
    <style>
        .pink {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .yellow {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="pink">いち</div>
    <div class="yellow">に</div>
    <div class="pink">さん</div>
</body>
</html>

Here Insert Picture Description

Multi-class name class selector to use

Class names with a space between the divided
Multi-class names used in the development scene
- (1) may be the same Deyang City into a class inside some of the label elements
- (2) These labels can call the public class, and then call their own unique class
- (3) to save css code, but also easy to modify the unified

Exercise 1 -> code changes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习1</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .pink {           
            background-color: pink;
        }
        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box pink">いち</div>
    <div class="box yellow">に</div>
    <div class="box pink">さん</div>
</body>
</html>

id selector (and generally with js)

Is marked with a specific id of the HTML element specifies a particular style

id attribute can appear only once in each HTML document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-id选择器</title>
    <style>
        #springgreen {
            color:springgreen;
        }
    </style>
</head>
<body>
    <div id="springgreen">よん/し</div>
</body>
</html>

Wildcard selector

Select the page represents all elements (tags)
Special circumstances apply (Clear labels inside and outside margins)
```
* {
	margin: 0;
	padding: 0;
}
```

css compound selector (to be supplemented ..)

Derived selector (children and grandchildren are included)

.a p .span {}

Child element selector

.a > span {}

Attribute selectors

[]

[class = a] {}
[class ^= a] {}    //a开头
[class $= a] {}    //a结尾

Pseudo class selector

Pseudo-element selector

Weights

！important	Row	id	class / attribute / pseudo-element	label	Wildcard
∞	1000	100	10	1	0

Set Color

1.	color:red;
2.	color:#ff0000;          //rgb饱和度
3.	color:rgb(255,255,255）

frame

border： 1px solid #000;
==> border-width: 1px;
	border-style: solid;
	border-color: #000;

css font properties

CSS Fonts (font) attribute is used to define the font family, size, weight, and type style (such as italics).

g Google the default font - Microsoft elegant black

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-id选择器</title>
    <style>
       #first {
           font-family: '微软雅黑'
       }
       #second {
           font-family:'Courier New', Courier, monospace
       }
       #third {
           font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
       }
    </style>
</head>
<body>
    <h3 id="first">微软雅黑</h3>
    <h3 id="second">第二种</h3>
    <h3 id="third">第三种</h3>

</body>
</html>

p72

LuckyGuyy

Published 53 original articles · won praise 13 · views 2271

Private letter concerns

CSS (continuously updated ..)

Article Directory

CSS