Basic syntax for HTML--CSS 1

All CSS code in the page needs to be written to the <style></style> tag.

The Type property of the style label should select Text/css, but the type attribute can be omitted.

1. CSS Common Selector

The CSS modifies all the labels on the page and must be selected with the help of a selector.
The selector can write many pairs of CSS properties, with {} package: each attribute name and attribute value between: delimited, many pairs of attributes, must be used;

selector {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
｝

1-1. Tag Selector

Syntax: HTML tag name {}
Role: You can select all HTML tags that have the same name as the selector in the page.

li{    color:red;    font-size:24px;}

1-2. Class Selector

Syntax:. Class Name {}
Call: Use class= "class name" to invoke selector on a label that needs to invoke a selector style

Priority: Class Selector > tag Selector, two conflicts, high priority effect

Note: If you need two class names, separate them with a space

. first{    Color:blue;}

1-3. ID Selector

notation: #id名 {}
Call: A tag that needs to call a style, starting with a id= "ID name"

priority: ID selector >class selector

Note: The same ID cannot appear on a page

#one {    background-color:yellow;}

"The difference between the class selector and the ID selector"
1. Different wording: class selector. Declaration, ID Selector # declaration
2. Different priority: ID selector >class Selector
3, the scope of the different: class selector can be called multiple times, the ID selector can only be used once.


Naming conventions for selectors
1, can only have letters, numbers, underscores, minus the composition;
2, the beginning can not be a number, it can not be only a minus sign

General naming requires semantics, using combinations of English words and numbers.

1-4. Universal Selector

notation: *{}
Function: You can select all the HTML tags in the page
Priority: Lowest!!!

*{    Color:orange;}

1-5. Set Selector

notation: selector 1, selector 2, selector 3,......, selector n{}
Effective rules: Multiple selectors take the set, as long as the label satisfies any one of the selectors, the style can take effect.

li,.first{    color:red;}

1-6. Intersection Selector

Wording: Selector 1 selector 2 ... Selector n{} All selectors are next to each other and are not delimited
Effective rule: Multiple selectors intersect, you must meet the requirements of all selectors in order to take effect

Li. first{                }

1-7. Descendant Selector

Wording: Selector 1 selector 2 ... Selector n{} selector space split between selectors
Effective rule: As long as satisfied, the latter selector is the descendant of the previous selector, it will be effective.
(descendants include descendants, grandchildren, great-grandchild ...) ）

In layman's words: as long as the latter selector, in the previous selector can be.

Div span{}

1-8. Descendant Selector

notation: selector 1> selector 2>......> selector n{} selector with > delimited
Effective rule: must be satisfied, the latter selector is a direct descendant of the previous selector, in order to take effect. (the middle cannot be separated from any label)

div>span{}

[Pseudo class Selector]
Writing: Pseudo-class selectors, used after the selector: delimited, immediately after the pseudo-class state;
Eg: . a:link. a:visited. a:hover. a:active

2, the Pseudo-class status of hyperlinks:
: link--No Access status: visited--visited status
: hover--Mouse Pointing state: active--activates selected state (mouse point is not loose)

Note: When multiple pseudo-class states of hyperlinks exist at the same time, they must be in the order of Link--visited--hover--active,
Doing so will cause some selectors to not take effect.

3, the Pseudo-class state of input:
: hover:focus--Get focus Status: Active

Note: Multiple states of input exist at the same time and must be in the order above.

4, other tags, basically only use: hover state.

2. How to import CSS and priority weight

2-1, priority of the weight
1, the first principle of CSS effective is: near priority! That is, which selector acts on the innermost label, the selector takes effect;
2. When the selector is acting on the same layer, it can be calculated according to the priority weight:
ID selector *100>class Selector *10> Tag Selector * *

Note: The set selector is equivalent to multiple selectors being disassembled, so the precedence of the set selector cannot be summed

3, when the selector action on the same layer, and priority weights equal, write in the last selector to take effect

2-2, the introduction of three ways of CSS
1, inline style sheet: directly in the HTML tag, using style= "" Way reference;
<div style= "height:100px; "></div>
Advantages: Flexible use, the highest priority weight;
Disadvantage: does not conform to the "content and performance" requirements of the separation, not conducive to style reuse;
2. Internal style sheet: In Features: To a certain extent, the realization of the separation of HTML and CSS, but the separation is not thorough enough, there is no way to multi-page common style.
3. External style sheet: The CSS is written in a separate CSS file and associated with the HTML file.
Advantages: The complete separation of HTML and CSS, in line with the specification, is conducive to multi-page reuse unified style.

Two ways to 2-2-1 and import CSS files
1. In the

Introduce an external CSS style sheet:
Rel: Select stylesheet
Type: Select Text/css, you can omit
HREF: The path of the CSS file that represents the link

<rel= "stylesheet"  type= "text/css"  href= "css/02 -css.css "/>

2. Use @import Import in Style tab

@import url ("Css/02-css.css");

[The difference between the two ways of importing]

①link belongs to the standard HTML tag, while @import is not a standard label;
②link can be compatible with all low-version browsers, while @import is only available after CSS2;
③link is to link up the two files, bridge the role, and @import equivalent to the CSS file copied into the HTML file;
④link will be in the process of loading HTML files, side link CSS file;
and @import will import the CSS file after all the HTML files have been loaded.

3. CSS Common text attributes

The color representation in ^css ^
① A word that uses color directly: Red Green Blue
The ② uses the color hexadecimal 丨 to denote: #ffffff
Six-digit, 22-grouping, respectively, indicating the ratio of red, green and blue;
③ using RGB (0~255,0~255,0~255) three digits, respectively, the ratio of red, green, blue;
④rgba (): Fourth digit indicates transparency.

Width:200px;height:200px;background-color:rgb (255,255,255);

3-1. CSS Common text attributes

1, Font size class:
①font-weight: Font weight, bold-bold, normal-Normal, lighter-fine body
You can also use the 100~900 value, 400 means that normal,700 represents bold
②font-style: Font style. italic-tilt, normal-normal
③font-size: Can write pixel units px, can also write%
200% = twice times the default size of the browser (16px) =32px
④font-family: Font family (font family).
>>> can write the font name directly or write the system column name directly.
>>> Common fonts: serif-liner Body sans-serif-non-liner body
Font-family can receive multiple values, separated by commas. The first one is preferred,
>>> If you don't have this font, use it backwards. Typically, the last value puts the font family name:
eg:fongt-family: "Microsoft Ya Black", "Song Body", Sans-serif;
⑤font abbreviated form:
>>> order must be font-weight font-style font-size/line-height font-family
>>> different attributes separated by a space;
>>>font-size/line-height must be a group, used/delimited
>>>font-family multiple fonts, separated by commas
Eg:font:bold Ding italic 32px/50px "Microsoft Ya Black", serif;

2. Font Color
①color: Font color can be word, 16 binary, RGB, etc.
②opacity: Transparency, selectable value 0-1
[The difference between RGBA and opacity]
The >>>rgba itself can set the color, while the opacity must be used with other color properties
>>>rgba only the color of the current element is set to transparent;
Opacity, however, makes all text, backgrounds, and sub-elements in the current element transparent.
3. Line spacing, alignment, other classes
①line-height: Row height. Can write pixel units, can write numbers directly (indicating the number of default leading times)
Can write% (indicates the percentage of default leading)
>>> High Importance: Let single-line text center vertically in Div
Sets the height of the row higher than the Div, and allows the single-line text to be centered vertically. (Very popular)
②text-algin: Sets the horizontal alignment of row-level elements within a range; left, center, right
③letter-spacing: Character spacing, distance between words and words
④text-decoration: Text retouching;
underline-underline, overline-underline, line-through-strikethrough, none

⑤overflow: Sets how the text is displayed beyond the region.
>>>overflow:hidden; Out-of-range text chanting does not appear;
>>>overflow:scroll: The horizontal vertical scroll bar will be displayed regardless of the number of words;
>>>overflow:auto: Automatic, default effect. Text more display scroll bar, less text does not show scroll bar
>>> you can use Overflow-x and overflow-y to modify the scroll bars in two directions individually.
Overflow-x: scroll;overflow-y: Hidden;

⑥text-overflow: Set the display mode of extra text at the end of line;
>>>clip: Extra text clipping off ellipsis: Extra text shows ellipsis
>>> show ellipsis need to cooperate with white-space:nowrap;
>>>"Focus" set the end of the line display ellipsis (three lines of code, indispensable)

Overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

⑦white-space:nowrap; Set the end of Chinese line, keep the line display

⑧text-indent: First line indent.

⑨-webkit-text-stroke: Text stroke.
-webkit-represents a friend of the WebKit kernel browser in effect, common with chrome, safari

⑩text-shadow: Text shadow, with four attribute values, space-delimited
>>> horizontal shadow Distance, positive number: Indicates shadow right SHIFT, negative: Indicates left shift of shadow, left negative right positive
>>> vertical shadow Distance, positive number: Indicates a shadow Move down, negative number: Indicates the shadow moves up;
>>> shadow blur distance, 0 means the shadow is not blurred;
>>> shadow color;
Abbreviated form:text-shadow:2px 2px 2px blue;

#div {                font-weight:bold;                Font-style:italic;                Font-size:;                Font-family:serif;                Font:bold Italic 16px/50px "Microsoft Jas Black", serif;                background-color:red;                opacity:0.5;                line-height:20px;                Text-align:center;                letter-spacing:5px;                Text-decoration:underline;                Overflow:auto;                White-space:nowrap;                text-overflow:ellipsis;                text-indent:20px;                -WEBKIT-TEXT-STROKE:0.5PX Blue;                text-shadow:2px 2px 2px blue;            }

3-2, CSS common background properties

1, Background-color: Background color

2, Background-image: Background map. Use the URL ("") to select the background picture.
Background and background colors are both present, and backgrounds are overlaid with the back color.

3, Background-repeat: The repeating way of the background map,
No-repeat: Uneven, repeat: tiling, repeat-x: Tiling along the x-axis, repeat-y: tiling along the y-axis

4, Background-size: The size of the background map
[Specify the width height of the wording]
>>> width height designation, can write PX, can also write% (percentage of parent container width high)
>>> when writing two attributes, indicate width, height, respectively
>>> when a property is written, the width is expressed, and the height is equal to the zoom

[Other properties]
>>>contain: The picture is scaled until it is 100% wide or higher on the upper side of the high school.
(May cause shorter side <100%, picture cannot cover all areas)
>>>cover: The picture is scaled until it is scaled to 100% on the smaller side of the wide or high school.
(may result in larger side >100%, picture out of range display not complete)

5, Background-position: Background image offset
>>> designated location: Left/center/right Top/center/bottom
When only one value is written, the other is centered by default.
>>> Specify coordinates: Two properties representing vertical displacements of horizontal displacements, respectively
The value of the ① coordinate, which can be PX units or percentages
② When writing pixel units:
Horizontal: Positive right shift negative shift left, vertical direction: Positive shift negative move up;
(left negative right positive upper negative positive)
③ When writing% percentages: generally only positive numbers.
Indicates that the parent container removes the width of the picture and the distribution of the remaining white space.
eg:background-position:30% the width of the picture in horizontal direction, 3:7 points remaining area

            #div2 {                width:25px;                height:25px;                /*background-color:yellow;*/                background-image:url ("Img/icon.gif");                White-space:nowrap;                text-indent:30px;                line-height:25px;                Background-position: -133px 0px;            }            #div3 {                width:24px;                height:28px;                Background-image:url ("Img/icon.gif");                White-space:nowrap;                text-indent:30px;                background-position:0px-170px;            }            #div4 {                width:42px;                height:19px;                Background-image:url ("Img/icon.gif");                text-indent:9px;                font-size:14px;                White-space:nowrap;                line-height:16px;                background-position:0px-30px;            }

※ There's a little bit of knowledge here.

List-style: Modify the style of the small black dots;
None, go spot the little dots.
URL () You can use a URL to import a small picture, as a list of the identity symbols

Float: Floats can be implemented so that block-level elements are displayed in a row

Basic syntax for HTML--CSS 1