CSS+ day1

Inline, inline, external styles, basic selectors for CSS (class selectors, ID selectors, Font font weight font width font style font-family Color text-align text-indent text-decoration

CSS three ways to introduce, CSS web beautician,

Css basic selectors

CSS text style, CSS debugging tool

Shortcut syntax,

Js is a magician, CSS is a beautician,

Css Sets the layout and Css styles.

1. Inline type,, and control scope is a label.

test1

test1

2. Internal stylesheets are better than inline stylesheets, separating structure from style. In theory you can put it anywhere in HTML, but it’s better to put it in head. The scope of control is a page. The style label inside the Head label

Selector {color:red;

} h2 { color:blue; font-size: 30px; } 

<h3 style="color: red; font-size:30px">test1</h3> <h2 style="color: red; font-size:30px">test1</h2> <! -- Inline Style, Tag Properties -->Copy the code

3. External style sheet style sharing, complete separation of structure and style. Preferably, the scope of control is a site. Introduce files, HTML files, CSS files to make connections. Structure and style separation, style sharing, multiple HTML files can call the same CSS.

4. Code style. H3 {color: red; font-size: 10px; }

All attribute value keywords are lowercase letters, and attribute strings allow case.

4. Style rules

/* selector space/h3 {/ semicolon end, line with space, */ color: red; font-size: 10px; }

5.CSS selector (CSS base selector + composite selector)

Main function: the page element selects the choice label to use, wants the label to select out.

CSS basic selector tag selector: all tags, all selected.

< h3 > come on,,,, < / h3 > < h3 > come on,,,, < / h3 > < h3 > come on,,,, < / h3 > < span > come on,,,, < / span > < h3 > come on,,,, < / h3 > < h3 > come on,,,, < / h3 >Copy the code

H3 {/* end with a semicolon, */ color: red; font-size: 10px; }

span { color:green; }

Class selector: Classes are used the most. Points. The class name is custom. Multiple class names, calling multiple classes within a tag with only one class.class. The name of the class {

}

G
o
o
g
l
e

.blue { font-size: 100px; color: blue; }

.red { font-size: 100px; color: red; }

.yellow { font-size:100px; color: yellow; }

.green { font-size:100px; color:green; }

.font100 { font-size: 100px; }

.blue { color: blue; }

.red { color: red; }

.yellow { color: yellow; }

.green { color:green; }

G
o
o
g
l
e

Id selector: Similar to the class selector, but different, ID is unique, the name is similar to the class selector, ID is similar to the number of times the class selector can be used multiple times, id selector unique can only be used once.

Class selector. Write the most styles. Id selector, js collocation most.

Wildcard selector: represents all tags. / All tags reduce page response speed. */ is not recommended

Basic selector: 1. Tag selector can not select a paragraph, can not differentiate selection.

2. Class selector. You can select one or more class selectors. Dot. Equivalent to the name on the id card. …

3. Id selector. Only one label can be selected at a time. Equivalent to id card number. # # #

4. Wildcard * ID and wildcard cannot be used arbitrarily. * * *

  1. Use general selectors as little as possible. 2. Use id selectors as little as possible.

CSS text styles,

1. Font style: Set the font. Font size. 2. CSS appearance attributes add styles to page elements. 3. Use common emment syntax 4. Be able to debug using developer tools code.

Font style, font-size font size font-family font font-weight font style. Font Sets the font style comprehensively

Id > class

Relative length unit em px Absolute length unit mm pt The default is 16px generally you need to specify the entire page size for the body.

body { font-size: 100px; }

font-family

Order, if there is, it will not be executed backwards. Use your computer’s default font. Chinese requires quotation marks, but English generally does not. If multiple words require quotation marks, special symbols need quotation marks. Multiple fonts need to be separated by commas.

Font-size: 100px; Font-family :Arial, “Microsoft Yahei”, “Microsoft Yahei”, “Black “; Font-family: arial, sans-serif; }

Unicode to write Chinese, because XP does not support Chinese like Microsoft Yahei. 1. Plan 1 is in English. 2. Scheme 2 uses Unicode Chinese.

1. Bold You can use bold labels. B strong 2. CSS Normal Normal Bold Bolder Light Number. 100 200 Bold 700== Bold no unit. Use numbers. 400 ==noraml

Font-style The font style is slanted

font-style: italic; Tilt the font - style: normal; normalCopy the code

The comprehensive writing of font is separated by Spaces. I’ll do it exactly in that order. Font-family: arial, sans-serif; font-size: 16px

Font-style Fong-weight font-size font-family

Font: ITALic 700 20px;Copy the code

Font: 20px “Microsoft Yahei “;

CSS appearance property color,

Color :red; Hexadecimal is the most commonly used. 3.RGB code RGB (255,0,0)

Text-align Indicates the horizontal text alignment

Line height should be 7-8 pixels larger than the size.

line-height: 30px; Line spacing

The first line indent em is a multiple of the width. 1em is a multiple of the character width,

text-indent: 2em; The first line indentation

Text-decoration: Remove the underline. none, underline, blink,overline,line-through.

Emment grammar

1.! Div + TAB label ➕+ TAB 3.div*4 4. Parent and child ul> Li 5 Brother + div + p