Front-end (E) - CSS beautification of the page

1. Page landscaping reason

• Effective delivery page information
• Beautify the page, the page pretty, in order to attract users
• Highlighting the theme of the page
• Improve the user experience

2. span tag

• Role: For focused word to use span set up
• font-size values
  xx-small: minimal
  x-small: smaller
  small: Small
  medium: normal (default), adjusted according Font
  large: a large
  x-large: a large
  xx-large: Maximum
  also particularly desirable length unit value
• Example:
  

3. Font Style

• Font properties

(. 1) font-Family : Set Font Type

(2) font-size : Set Font Size

• font-size value may be an absolute value or a relative value ;
• -size font: 12px ; Set Object particular font size 12px
• -size font: XX-Small ; text size set to a minimum
• size-font: Small ; set the text font size is small
• -size font: X-Large ; provided object font size larger
• -size font: larger ; font sets the object size large
• -size font: Smaller ; relative to the parent container for the font size is relatively decreased
• -size font: 50% ; relative to the parent container be adjusted in a font size of 50% the size of the
• -size font: 150% ; relative to the parent container be adjusted font size 150% size

(3) font-style : Set font style

• normal: normal text display
• italic: Text in italics
• oblique: displaying text italic

(4) font-weight : Set font weight

• Keyword 100 to 900 specifies nine degrees bold font. If a bold font built these levels, these numbers are mapped directly to a predefined level, 100 corresponding to the smallest font transform (Lighter) , 900 corresponding to the coarsest font transform (Bolder) . 400 is equivalent to Normal , and 700 equivalent to Bold .

(5) Color : Set the font color

(6) font : Set in a statement font of all properties

• The example code
  
• operation result
  

4. Text Styles

• Color : word in the RGB: 0 ~ F.
  the RGBA wherein A: 0 ~ 1

• align = left-text : horizontal alignment , center / leftmost / rightmost

• indent-text : 2em paragraph indent the first line (two characters)

• height : 300px by height of the block

• height-Line : 300px by lines of text high
  height and high consistency row blocks, can be centered vertically

• Decoration-text : underline Underline

• Decoration-text: Line-dash line through the

• text-decoration: scribing the overline

• text-decoration: none the removed (on / in) scribe

• vertical-align: middle horizontal alignment (two elements a, b)

• text-shadow: shadow color, horizontal offset, vertical offset, shading radius

• The example code
  

• operation result
  

The pseudo class Hyperlink

• CSS pseudo-classes are used to add special effects to some selectors, simply put, it is that you do not define this class, but it does come as a class, using the pseudo-class to add a variety of effects for our element
• Under normal circumstances, a {}, a: hover {} When this code is to add a label of a selector effect, this effect hover over a tag to be triggered
• The example code
  
• operation result
  

6. List

• style-List :
  none remove origin
  circle open circles
  decimal numbers
  square square
• background-image: url ( "... / images / r.gif") set the background image
• REPEAT-background : NO-REPEAT how to set a background image repeat, NO-REPEAT represent background image only once
• position-background : 236px 2px Set Photos Location
• The example code
  
• operation result
  

7. Background

• Div is one of Html tags, div has split content effect, div and CSS style allows web pages to achieve the effect of various styles
  div tag replaces the previous table label layout
  is usually one pair did not set any style div, a separate line
• background-image attribute with a background image
  format: background-image: URL ( "image path")
  of the background elements occupies the entire size of the element, including padding and border, but not margins
  default background image is located elements of the upper left corner , and repeated in the horizontal and vertical directions
• background-repeat attribute defines the tile mode image
  REPEAT : default background image is repeated in the horizontal and vertical directions
  REPEAT-X : in the background image is repeated horizontally
  REPEAT-Y : in the background image is repeated vertically
  no-repeat : the background image is displayed only once
• The example code
  
• operation result
  

8. Gradient

• It allows you to display a smooth transition between two or more colors designated
  
  CSS3 defines two types of gradients (Gradients):
  (. 1) a linear gradient (Linear Gradients) - the Up / Down / Left / Right / diagonal direction

  • 格式一： background-image: linear-gradient(direction, color-stop1, color-stop2, …)

  • direction : the default top-down linear gradient; to right from left to right represent the linear gradient; to bottom right to start from the top left to bottom right represents the linear gradient

  • 格式二：background-image: linear-gradient(angle, color-stop1, color-stop2)

  • angle : refers to the angle between the horizontal line and the gradient , the counterclockwise direction calculation. In other words, 0deg will create a from the bottom to the gradient , 90deg will create a gradient from left to right

  (2) a radial gradient (Radial Gradients) - defined by their center

• Examples of codes (linear gradient)
  

• operation result
  

9. Box Model

(1) Introduction

margin: margins , setting a distance between the elements in the page element vv
padding: padding , the padding and margins dividing line, for separating the element
border: border , for controlling content and the distance between the border

• Calculation box: this element in the end how much?
  margin + border + padding + content width

(2) Border

• Properties: border thickness (width) , border style (style) , border color (color)
• The example code
  
• Operating results
  
  (3) inside and outside margins
• Margins (margin) of the bonus: centering elements
  margin: Auto 0 ; 0 down to about automatically, so that the middle
  margin: 0 1px 2px 3px; clockwise direction (right lower left)
• Padding (padding) Similarly
• Case Code
  
• Operating results
  
  (4) rounded corners
• border-radius rounded corners to add elements , may be disposed on four corners rounded element (having no attribute inheritance)
• Parameters as: top left lower left upper right lower right, clockwise
• Circles: Fillet Radius =
• Presentation
  
  (5) shadow
• box-shadow property to add one or more shadow frame
• Format: Box-Shadow: H-V-Shadow Color Shadow Blur Spread the inset from
  H-Shadow: Required. Position of the horizontal shadow . Negative values are allowed
  v-shadow: Required. The vertical position of the shadow . Allow negative
  blur: Optional. Fuzzy distance
  spread: optional. Shadow size
  color: optional. Color of the shadow. See CSS color value
  inset: Optional. The outer shadow (OUTSET) to inner shadow
• display: block this element is displayed as a block-level element, with a line break before and after this element will
• Show