HTML5 and CSS3 Basic Course reading notes 2015/11/28

Seventh Chapter

1. CSS Classification

(1) Control the properties of the basic format: font-size and color

(2) Controlling the layout properties: position and float

(3) Controlling where to change the page's print control elements

(4) Controlling the dynamic properties of item display and disappearance

(5) Creating drop-down lists and other interactive components

2. New features of CSS3

Fillet, shadow effect, text shadow, custom font, rotated text, translucent background color, multi-image background, gradient, and more

3. Basic format

Note that the previous line has not been finished, to the next line to be empty even characters

Note: H1 is called a selector (H1 and {preferably separated by a space), {} is called a declaration block

Tip: You can add spaces and tabs, and enter to increase the readability of your code.

4. Add comments

/******* Comment Content **********/

5. Inheritance

The child element will attribute the parent element

Properties that can be inherited: p128

6. Cascade

When conflicts occur: ID selector > class selector > Normal selector

Define!important attributes, most important

such as p {Color:orange!important;}

7, the value of the property

1, Inherit (Inherit) IE8 before IE does not support

For example: Some properties cannot be inherited, for example: border

A borer has been set for the article element

p {borer:inherit;}

2. Pre-defined values

3. Length and percentage

The length must include the unit (EM,PX): The unit length of an EM is approximately equal to the font size of the corresponding (parent) element.

Percent: relative to parent element

4, Pure Digital

Only a few attributes are not with units, for example: Line-height, Z-index, opacity

For example: The line-height:1.5 value is multiplied by the font size to get the row height

5. URL

6. CSS Color p133

Hex, RGB, HSL, RGBA, HSLA (the latter two have a certain degree of transparency)

(1) hex format p134

Color: #59007f;

(2) RGB

Color:rgb (89,0,127);

Represented by a number in 0-255

(3) RGBA (IE9 Browser not supported)

The closer the Alpha is to 0, the more transparent and 1 is completely opaque.

For example: Bockground-color:rgba (89,0,127,1);

(4) HSL hue (hue) saturation (saturation) lightness (brightness)

Example: COLOR:HSL (282, 100%, 25%);

(5) HSLA (not supported by IE9 prior to the browser)

Example: Color:hsla (95,100%,28%,.4);

Eighth Chapter

1. Link to an external style sheet

Note: The URL is relative to the location of the style sheet on the server

Earlier versions required adding type= "Text/css"

2. Embedded style sheet

<style></style>

3. Application of inline type

For example:

Note: Inline style level is higher than other styles

3. Stacking and ordering of styles

The higher the style priority that appears later

Nineth Chapter

1. Focus on common selectors

Attention:

(1), context selection (descendant selector)

H1 em {

color:red;

}

This style applies only to the EM element in the H1 element

Article.architect p {

color:red;

}

Descendant element p under article elements belonging to the Arichitect class

Note: Styles are implemented regardless of the first generation

(2) Child element Selector

. Architect > P

{

color:red;

}

Note: Only the next generation P elements of architect are selected

(3) Pseudo-class selector

a:link{

color:red;

}

(4) attribute, value selector

a[title]{

color:red;

}

All a elements with the title attribute

Several cases p165

(5), wildcard selector

* {

color:red;

}

Note: Try to use less, back to the browser loading speed is slow

2. class selector and ID selector

Attention:

h1.news{

color:red;

}

H1 elements belonging to the news class

3. Select elements to format by neighboring sibling elements

. Architect P+p{

color:red;

}

Apply: Indent all paragraphs except the first paragraph

4. Common Sibling binding character

H1~H2 {color:red;}

The H2 elements behind any sibling H1 that belong to the same parent element will appear red (they can be directly adjacent or indirectly)

5. Select the last child element after the first one

First-child Last-child (not supported before IE9) pseudo-class selector

Cases:

<ul>

<li></li>

<li></li>

<li></li>

</ul>

li:first-child {color:red;}

li:last-child {color:red;}

Note: Select the LI element that is the first or last child element of the parent element (UL). is not the first or last element of the LI element

. Architect H1:first-child {color:red;} Apply styles only to H1 as the first child element of the architect class element

6. Select the first letter or the first line of an element

: Fist-letter:firt-line Pseudo-Element

The first first letter of the paragraph turns red

7, four pseudo-elements: HTML does not exist elements

: Fist-letter:firt-line:befor:afer

CSS3 is double colon (IE9 can be compatible after):: Fist-letter

Pseudo-class: Applies to a set of HTML elements, and you don't need to label them in the HTML code

(: first-child:link:hover:visited) etc.

8. Select Link Elements by Status

A:link (never activated)

A:visited (The visitor activates the appearance)

A:focus (Activated when the focus is obtained via the Keyboard tab key)

A:hover (activates when the mouse hovers over the link)

A:active (When a visitor activates the link)

Generally in this order

9. Specifying element Groups

H1,

h2{

color:red;

}

10, the complex selector of the wording from the right to the left to see, the more simple the selection of the better

Example: p169

10th Chapter

1. Select font

Font-family:mane;

Note: For font names that contain multiple words, you should enclose them in quotation marks

For example:

Specify an alternate font:

When there is no first font, it is automatically replaced with the following font

2. Create Italic body

Font-style:italic;

Font-style:normal;

3. Create a bold body

Font-weight:bold (100 times times the number of 100-900, 400 for normal, 700 for bold)

Font-weight:narmal;

4. Set the font size

Four units: px percent em REM (IE9 above support)

(1) font-size:35px;

(2) font-size:100% is the same as the default own font

(3) font-size:1.75em 28px/16px the font size to be specified/the font size of the parent element 1em should always be equal to the size of the parent element font

(4) Font-size:1.0625rem; The REM (root em) root element is the HTML element. That is, the font size to be specified relative to the size of the HTML font/size of the root element = value

Specify a specific font size: Font-size:xx-small, X-small, small, medium, large, X-large, Xx-large

5, set the row height

line-height:1.75;

Note: The line height does not have a unit, the specific calculation method is: The current element's font size * number

6, simultaneously set

font:100% Geneva,bold, Italic;

Note: Use font précis-writers be sure to include font size (font-size) and Font (font-family) First font size, then font

7. Set the color

Color: #7d717c;

Color:rgb (15,35,67);

Color:rgba (14,45,67,.01);

8 Setting the background

(1) Set the background color:

Background-color: #686a63;

(2) Use background image as background:

Background-image:url;

(3) Repeat background image

Background-repeat:direction (repeat\repeat-x\repeat-y\no-repeat);

(4) control whether the background image scrolls with the page

Background-attachement:fixed/scroll (default)

(5) Specify the location of the background image: the absolute distance from the upper-left corner (14px 20px) or a percentage or (Left,center,right top,center,bottom)

Background-positon:right Bottom;

(6) Understanding CSS3 More background control

Background-clip and Background-origin control the range and start position of the display

9. Control Spacing

(1) Word spacing (increased distance) word-spacing:4px or 5em

(2) kerning (reducing distance) letter-spacing:4px or 5em

10. Increase Indent

Text-indent:1.5em or 18px;

Note: Inline elements are not effective by default. However, you can use the Display:block property

11. Align the books

Text-align:left/right/center

Note: Inline elements are not effective by default. However, you can use the Display:block property

12, modify the case of the text

Text-transform:uppercase (uppercase)/lowercase (lowercase);

13. Use Small Caps

Font-variant:samll-caps;

Font-variant:none;

14. Modifier text

Text-decoration:underline (underline)/overline (underline)/line-through (strikethrough)/none;

15. Set Blank attribute: Let the browser display the amount of space lattice

White-space:nowrap;

HTML5 and CSS3 Basic Course reading notes 2015/11/28