python-day52--front-end HTML, CSS

One, HTML needs to master:

1. IMG Tag properties: src  alt  title  width  height2. A tag property: href  target3. UL label and Li Tag, Both are block-level labels UL attribute (Type:disc  circle  Square  None)4. Table label and TR label and TD label and th tag properties: Border    cell Padding    cellspacing    width    rowspan    colspan5. Form form  input tag: type 6 . Select label option Tag Properties: Multiple  and selected7. Lable Tag Properties: for

Second, the CSS needs to master the first part: Find the label

1.CSS three ways to import:

1. Inline: Commonly used at the bottom of the Site page, the introduction of the site

Cons: HTML and CSS Code blend together, too strong coupling

2. Embedded:<style></style>

3. Link:<link rel="stylesheet" href= " "/>

2.CSS selector:

a basic selector1Tag Selector div{color:red; }        2ID Selector#p2{color:red; }       3class selector. c1{color:red; }       4wildcard selector (learn)*{color:red; } Two Combo selectors1descendant selector. C2 p{color:red; }         2descendant selector. C2>p{color:red; }        3adjacent selectors (learn). C2+p{color:red; }        4Brother Selector (learn). C2~p{color:red; }        5. Multi-element Selector. c2. C3,.C2~. c3{color:red; Background-Color:green; Font-size:15px; }                6.        p.c1{color:red; } represents the choice of a P tag and a C1 class label.7.class='S1 C1'labels can have multiple class names8. Property selector: (Can customize properties)1. [Egon]                           {color:red; }                                        2. [egon='Dog'] {color:red; }                     3.                           P[egon] {color:red; The attribute in the P tag is selected as Egon:<p egon="Dog">asd</p>

3. Pseudo-Class: Pseudo-classes are passed: The purpose of the pseudo-class implementation: decoupling

Anchor pseudo-class:   general and a tag with attributes:: link {color:red;}     The link that has not been contacted is red: hover {color:gray;}　　Mouse hover on link is gray: active {color:green;}　　Access is green: visited {color:gold;} After  the visit is yellow    . outer:hover. Inner1{color:gold;}            Represents the  outer of the descendants of the Inner1 region when hovering at the outer position.            This is the case, only the descendants, other circumstances not　

before after pseudo-class example: p:before{content:"hello"; color:red;}

4. Selector Priority:

Third, the CSS needs to master the second part: property operations

1. Text:

1. Color: Hex/red/RGB 2. Position: Horizontal: Text-align:left/right/center/ Justify vertical:line-height= High 
    3. Pitch: line-height:10px;       　　 4. Text and picture alignment: Vertical-align:middle/top/± number (+ Move down,- move up)          Note: Moving is the picture 5. Be sure to locate the a tag when you operate a tag: text-decoration:n One;  Remove the underline of the A-label 6.font-size:10px;  Font size 7.font-weight:light/bold/ broder  font weight 8.font-style:oblique/Italic   Italic 9. text-indext:30px;   First Line Indent
　　
10.letter-spacing:10px; Letter Spacing

11.word-spacing:20px; Word spacing

2. Internal and external margin padding and margin

padding    inner margin    plus padding box area will become larger padding shorthand: padding:50px up    and     down are              : 50px 20px              up and down : 50px 20px 10px      approx.       : 50px 20px10px 10px ten    right  10 c17/> left margin: the distance between box and box (margin)                            {width:80%;                    margin:0 auto;                           }                           0 indicates up and down distance, auto is                    centered around

3. Border Properties Border

border        plus border, the box area gets bigger.      Properties        :1.border-width            2.border-style            3.border-Color        4. Shorthand:  border:3px solid red;

4. Background properties

1. background-color:red; 2.background-image:url (""); 3.background-repeat:no-repeat/repeat-x/repeat-y;   Picture repeat     4.background-position:center;     (Same as background-Position:center center)    background-position:400px 200px;  The background image is 400px from the left edge and the upper boundary is 200px5. Shorthand: Background:url ("") no-Repeat center;    The center of the picture does not repeat 6. Window small picture when big, move picture, resize in browser

5.display Properties

Dispaly:inline-block     becomes an inline block-level label--- can solve block-level display problems on      one line dispaly:none hide box    Three boxes if the middle box is set Dispaly:none , and it's three no attributes (no border, no padding, no text), then the bottom box will come up    on top

6.overflow Properties

Overflow:hidden/auto/ Scrolloverflow:hidden  resolving overflow issues

7.position positioning

1. position:static  Default position 2. position:fixed   Fixed Position    example:     position:fixed;                  /left/ Bottom/ right:20px     (distance relative to visible window)  3. position:relative;   Relative to their position, and the original location to save the    example:     position:relative;                  top:20px;                  left:200px;    4. Position:absolute;        Relative to the positioned parent, and the original location does not save the   example:     position:absolute;                  top:200px;                  left:200px;                              

8.float Floating Properties: Resolve multiple block-level labels on one line

1. Floating layout position: Look at an element is not a floating element, if it is placed next to each other, if not on a separate line put

2. Clear the float:
1  clear:left;  Clear the left side cannot have floating elements
2  clear:right; Clear the right side of itself cannot have floating elements
3  Clear:both;  clear the left and right sides cannot have floating elements (in order to judge)
4  Parent Collapse problem

python-day52--front-end HTML, CSS