Web Pre-learning 2017.6.15

CSS---presentation layer, modifying and expressing HTML documents, in order to solve the problem of separation of structure layer and presentation layer.
Greatly improves productivity through CSS and facilitates staff maintenance and management
CSS: Cascading style sheets, currently using the most extensive version of CSS for CSS2, the latest version is CSS3

----------------------------------------------------------------
Where to place a CSS
1 embedded
CSS inside we call HTML tags as HTML elements
Drop location: Embed CSS code directly into HTML elements
Syntax: <tag style= "CSS Property 1:css Property Value 1;css Property 2:css property value 2; ..." ></tag>
<tag style= "CSS Property 1:css Property Value 1;css Property 2:css property value 2; ..."/>

Scope: Acts on the current label only

2 Implant Type
Grammar:
<style>
selector {
CSS Property 1:css property value 1;
CSS Property 2:css property value 2;
...
}
</style>
Placement: Placed inside the head tag and introduced by a pair of style tags
Scope: Acts on the current HTML page

3 Outer-Joint:
Placement: A link tag is introduced to the external cascading style sheet, and the link tag must be placed inside the head tag
Syntax: <link rel= "stylesheet" type= "text/css" href= "relative path"/>
Scope: Public, any HTML page can be introduced, once introduced can affect the current page style

Precedence order of CSS placement positions
Embedded with the highest priority
Implant-to-inline near-label preferred

----------------------------------------------------------------

Syntax for two CSS

Syntax: <tag style= "CSS Property 1:css Property Value 1;css Property 2:css property value 2; ..." ></tag>
<tag style= "CSS Property 1:css Property Value 1;css Property 2:css property value 2; ..."/>

Grammar:
<style>
selector {
CSS Property 1:css property value 1;
CSS Property 2:css property value 2;
...
}
</style>

Selector 1{
CSS Property 1:css property value 1;
CSS Property 2:css property value 2;
...
}

Selector 2{
CSS Property 1:css property value 1;
CSS Property 2:css property value 2;
...
}
After each CSS property and property value, it is separated by a semicolon to indicate that the CSS code ends

----------------------------------------------------------------

Three-CSS Selector

Selector: The corresponding HTML element can be found by selecting

Selector Categories: Simple selector, relationship selector, property selector, Pseudo-class selector, pseudo-object selector, combo selector
Selectors can also be called selectors

1 Simple Selector

A tag Selector
Tag name {CSS code}--->div{CSS code}

B class selector (class selector)
<p class= "PTag" ></p>
Ps:body and body inside all elements have class this HTML attribute, class's property value we call it class name
. class Name {CSS code}--->.ptag{CSS code}
A set of styles is defined by a class name, as long as the class name is referenced within the HTML element, and the style will have an effect on the element.

How to take the class name: the class name can only be composed of numbers, letters, underscores, but cannot start with a number
1tag---> Errors
Tag1 navtagname navtagname nav_tag_name nav-tag-name nav-tag-name1 ...

Recommended way: A word tag1 nav-tag-name, the name of the class must be well-known to see the meaning

<div class= "Header-container" ></div>

PS: Class name can be repeated

C ID Selector
<p id= "Idname" ></p>

#id名 {CSS code}----> #idName {CSS Code}

Ps:body and body inside all elements have id this HTML attribute, id attribute value We call it ID name

ID Characteristics: Unique, that is, the ID name can not be duplicated, the equivalent of our social Security number

How to take the ID name: the class name can only be composed of numbers, letters, underscores, but cannot start with a number
1tag---> Errors
Tag1 navtagname navtagname nav_tag_name nav-tag-name nav-tag-name1 ...

Recommended way: A word tag1 navtagname, the ID name must be well-known to see the meaning
Try to use the Hump naming method: First word all lowercase, second word and above first letter capitalized
ID Selector We try not to use the CSS inside

D Global Selector (*)
*{CSS Code}---> allows all elements of the current page to have an effect on the style defined within the global selector

------The order of precedence for simple selectors-------
ID selector >class Selector > tag Selector > Global Selector

2 Combo Selector
A tag name. Class Name
<div class= "Header-container" ></div>
div.header-container{CSS Code}

b Tag name #id name
<div id= "Headercontainer" ></div>
div#headercontainer{CSS Code}

C comma selector (,)
<p></p>
<span></span>
p,span{CSS Code}
Summary: Selector 1, selector 2 ... {CSS code}----> Let selector 1, selector 2, etc. share this set of styles

3 Relationship Selector
A adjacent selector (e+f)----E, F refers to all CSS selectors, and selects the F element following the E element

b descendant selector (e>f)----Select all F elements in the E element

C descendant selector (E F)----Select all F elements inside the E element

----------------------------------------------------------------
--------
| CSS2 Properties |
--------
A text
1 Horizontal alignment
Text-align:left/right/center
You can also have the horizontal alignment of IMG, input, etc.

2 Vertical alignment
Vertical-align:top (top)/bottom (bottom)/middle (center)
More for Table

3 Setting the row height
line-height:50px/10%;
If you have text centered vertically with the container, set the value of Line-height to the same height as the container. Applies to single-line text only

4 Indent in first line
text-indent:50px;

5 content Wrapping (CSS3)
Word-break:break-all;---Allow line wrapping within a word
Word-break:keep-all; line wrapping only in spaces or hyphens (-)

6 Word Spacing
word-spacing:10px, the gap between words and words is 10px, as long as there is a space to think of the beginning of a word

7 Word Spacing
LETTER-SPACING:5PX: Set the gap between words (characters) 5px

8 Setting the Font color
Color: colour;

9 Setting the conversion of size letters
Text-transform:none/capitalize/uppercase/lowercase;
Capitalize: Capitalize the first letter of each word
Uppercase: Converts all letters of a word to uppercase
Lowercase: Converts all letters of a word to lowercase

10 Text Decoration
Text-decoration:none/underline/line-through/overline;
None: Do not add or remove text decorations
Underline: Add underline
Line-through: Add Strikethrough
Overline: Add an underscore

If you want to remove the A-label default underline, set Text-decoration:none;

Properties of two fonts
1 Setting the Font size
font-size:50px;

2 font style
Font-style:italic (Italic)

3 Font Bold
Font-weight:bold;

4 Setting the Font type
font-family: "Blackbody"

5 Setting a small capital letter
Font-variant:small-caps;

Three-border property (border)
border-width:5px; Set the thickness of the border
border-color:red; Set the color of the border
Border-style:solid (solid line)/dotted (dot line)/dashed (block line); Set border style

Abbreviation:
border: thickness style color;

If you add a border to one side: top Right bottom left
border-top-width:5px;
border-top-color:red;
Border-top-style:solid;
Abbreviation:
Border-top: Thickness style color;

Four container width and Height properties (width/height)
width:300px/20%;
height:300px/20%;

-----Supplement----
Common block-level elements: Div ul li ol dt DD hn p Table Form ...
Block-level element features: can be automatically wrapped, can be directly set the width of the high

Common inline (inline) elements: span a B i s u select option ...
Features of inline elements: no direct effect on width height, no automatic line wrapping

Common empty elements: Link meta br hr input img ...
Empty element Features: No content in the start tag closed, input, IMG, HR, etc. can be directly set wide

Web Pre-learning 2017.6.15