Web Front End Learning (1)--into the front-end world

Front-End Basics

2. Front-end development language :

   HTML (Hypertext Markup Language): Hypertext Markup Language;

   CSS (cascading style Sheets): Cascading style sheets;

   JS (JavaScript): scripting language.

   
   

4. Style sheet:

   Inline style sheets, internal style sheets, external style sheets.

   
   

6. style

   Style format: ;

   
   

   common styles:

   border:1px solid red

   border-width:1px

   border-style:solid

   border-color:red

   
   

   keyword: red Yellow Blue white ...

   rgb: (123,12,44)

   hex: #3f3f3f

   
   

8. Box border
   

   BORDER-TOP:1PX Solid Red

   BORDER-RIGHT:1PX Solid Red

   BORDER-BOTTOM:1PX Solid Red

   BORDER-LEFT:1PX Solid Red

   
   

10. Background

    Background-color

    Background-image

    Background-repeat: (no-repeat repeat-x repeat-y repeat Inherit)

    Background-position (top right bottom left 30px 20px 50% 30% inherit)

    Background-attachment: (srcoll fixed inherit)

    Background composite: Blue URL (./a.img) no-repeat 20px 30px fixed;

    
    

12. text setting

    font-weight: (normal bold Bolder lighter 100~900 (normal:400,blod:700) inherit)

    font-style: (Normal italic Oblique inherit)

    font-size: Font size

    line-height: Row height

    font-family: Element font

    font Compound: Font-style font-weight Font-size/line-hight font-family

    
    

14. This setting

    text-align

    text-indent

    text-decoration

    word-spacing

    white-space: (normal pre nowrap pre-wrap pre-line inherit)

    
    

16. hyperlink

    a:link links not visited;

    a:visited the link that has been visited,

    a:hover mouse on the link;

    a:active The moment the link was clicked;

    rule: a:hover must be placed in a: After link and a:visited, a:active must be placed behind a:hover.

    download download: Click to download the address content specified by the href.

    target:_blank _self _parent _top filename

    base Tags: Specify default targets for all links on the

18. padding-top padding-rihgt padding-bottom padding-left

    
    

    padding:15px 20px 18px 25px

    fill: 15px

    right padding: 20px

    P style= "Text-align:left;" -padding: 18px

    left padding: 25px

    
    

    padding:10px 20px 15px

    left/right padding: 20px

    
    

    padding:20px 15px

    up/down fill: 20px

    padding: 15px

    padding (padding): Equivalent to filling the box with thickness , it affects the size of the box.

    
    

19. margin outer margin

    Margin-top margin-rihgt Margin-bottom Margin-left
    

    
    

    margin:15px 20px 18px 25px

    Top margin: 15px

    Right margin: 20px

    Bottom margin: 18px

    Left margin: 25px

    
    

    padding:10px 20px 15px
    

    Top margin: 10px

    Left and right margin: 20px

    Bottom margin: 15px

    
    

    padding:20px 15px

    Up/down margin: 20px

    Left and right margin: 15px

    
    

    padding:100px Auto 0px

    Top margin: 100px

    Left and right margin: center

    Bottom margin: 0px

    
    

21. Box model

    Box size: Margins, borders, padding, content.

    Box width: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;

    Box Height: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;

This article is from "Little Qian gas station" blog, please be sure to keep this source http://cherry360.blog.51cto.com/12176744/1863428

Web Front End Learning (1)--into the front-end world