Apply CSS Complete manual!

Css

font-family Properties:

Each machine is equipped with a variety of fonts, the browser will use the default font to browse the Web page, such as the Simplified Chinese version of the Windows kanji default is the song, the English default is Arial. Using the Font-family property, you can specify what font the browser uses to interpret the Web page.

font-family Syntax Example:

h2 {Font-family:times,impact,sans-serif}

The description is as follows:

Helvetica is the font name that the browser looks for first, and use it if you have it. If the Helvetica font is not found, it looks for the impact font and uses it if found. If none of the above two fonts are found, the browse uses Sans-serif (common fonts). It's a good idea to add a generic font to the font list when you can't guarantee that the font viewer you listed will be installed. Therefore, we advocate the use of the most basic font to make Web pages, such as Chinese in the song, English with Arial, so that your Web page will not be because the browser does not use the appropriate font interpretation and changed.

Other related content:

• Common fonts have the following categories, where cursive and fantasy are not supported by NC:
  • "Serif" (e.g. times);
  • "Sans-serif" (e.g. Helvetica);
  • "Cursive" (e.g. comic Sans);
  • "Fantasy" (e.g. Western);
  • "Monospace" (e.g. Courier)
• other things to use:
  • If there is a space in the name of a font, such as "Times New Roman", enclose the font in quotation marks in a CSS statement.
  • Example: Body {font-family: "Times New Roman", serif}
  • If the statement is already in double quotes, the font name is demoted to single quotes.
  • Example: <p style= "font-family: ' Times New Roman ', serif" >
  • If the statement includes other CSS rules, the font description should be at the end.
  • Example: H2 {color:red;margin:10px;font-family: "Times New Roman", serif}

  Inheritance:

  　　inheritance : That is, when a child element does not have a style defined, it takes the style definition of the previous level element.

  　　Priority : It's easy to understand priorities based on inheritance. The most recent style has the highest precedence. Like what:

  CSS in

  But in the HTML statement the following definition:<p> to display text in <i><font face= "Times" > here </font></I></P> In this case, the style sheet requires a impact font, and the font tag requires the Times font, and the end browser uses the times. As a CSS standard-setting, CSS needs to be prioritized, and they think the example above should use impact fonts. Browsers can be used to take care of the user's old habits, using fonts in the font tag, although font is no longer advocated.
  
  　　A better approach--association:
  
  　　I don't have the reason to discard the font tag, I just know it's a trend. Obviously CSS provides a better way to avoid you using the font tag like the example above, which is: Association . You can include the following line in the CSS definition of the head section: The space between P I {font-family:times}/*p and I cannot be less than * *

  In HTML: <P> to display the text in <I> here </I></p>

  Although you do not use the font face, but according to the head part of the CSS definition, the P tag in the I tag using the font must be the times. Note that the line CSS style only works on the i tag in the P tag .

  Size Control Method:

  Here are three ways to control the size of text:

  • Use size units, pt (dots), px (pixels), EM, and other units;
  • Use keywords (xx-small,x-small,small,medium,large,x-large,xx-large);
  • Use proportional parameters (150%, etc.).

  For example:
  
  

  • p {font-size:12pt};
  • p {Font-size:large};
  • p {font-size:200%};

    font style:

  • Italic p {Font-style:italic};
  • Bold p {Font-weight:bold};

  In terms of weight setting, there are lighter (lighter) and bolder (heavier), and you can use the number 100,200 to 900 heaviest.

  Both font style and character weight have a common parameter normal, and once set to normal, the character weight and style settings are canceled.

  font-variant:

  Font-variant can reduce the normal text size by half and then capitalize:

  • h2 {Font-variant:small-caps}

  Text-transform:

  Full Control of letter capitalization:

  • All caps: h2 {text-transform:uppercase};
  • All lowercase: h2 {text-transform:lowercase};
  • Capitalize the first letter of the word: H2 {text-transform:capitalize};
  • Cancel all settings: h2 {Text-transform:none};

  TE xt-decoration:

  Which day you have a whim, want to link without underlining, now you can do:

  • Text underline: A:link{text-decoration:underline};
  • Text underline: A:link{text-decoration:overline};
  • Text Delete line: A:link{text-decoration:line-through};
  • Text flashing: A:link{text-decoration:blink};
  • Do not have any effect: A:link{text-decoration:none}

    Word spacing:

    You can adjust the distance between words by using the character spacing attribute word-spacing.

    • h2 {WORD-SPACING:5PT}
    Letter spacing:

    Using the letter spacing attribute letter-spacing, you can adjust the distance between each letter in a word.

    • h2 {LETTER-SPACING:10PT};
    Row Height:

    Different from the kerning is the line spacing line-height, which adjusts the vertical distance between rows and lines, and has three ways to set:

    • Value: h3 {font-size:12pt; line-height:2};/* here line-height=2x12pt=24pt * *
    • Length unit: h3 {font-size:12pt; line-height:24pt};
    • Ratio: h3 {font-size:12pt; line-height:200%};

    Either the kerning or the letter spacing or line spacing has a common parameter: normal, once you set it to normal, you want the browser to use the default value.

    Horizontal alignment:

    You can control the horizontal alignment of a paragraph by using the text alignment attribute Text-align:

    • h2 {Text-align:center}
    • h2 {Text-align:left}
    • h2 {Text-align:right}

    This property can be used for <P>,
    Vertical alignment:

    With the vertical alignment attribute vwrtical-align, you can control the vertical position of the object (including text or graphics) relative to the parent:

    • h2 {Vertical-align:top}
    • h2 {Vertical-align:text-top}
    • h2 {Vertical-align:bottom}
    • h2 {Vertical-align:text-bottom}
    • h2 {Vertical-align:baseline}
    • h2 {Vertical-align:middle}
    • H2 {vertical-align:sub}/* Superscript * *
    • H2 {vertical-align:super}/* Subscript * *

    These properties of the specific alignment effect, I hope we have to test themselves.
    
    First Line indent:

    First line indent text-indent, often used in document typesetting:

    • h3 {text-indent:24pt};the concept of a container:

      According to the CSS on the page style definition, all the elements on the page are placed in a container, this container is called box. Box also includes:

      • element itself;
      • Spaces around the element; (padding)
      • A bounding rectangle around the element's space; (border)
      • The margin outside the border. (margin)
      Four margins:

      Margin is used to set up, right, down, left, margin:

      • Body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
      • The body {margin:10px 20px 30px 40px}/* effect is the same as the above mode * *

      The above parameter values can also be other length units (such as: Pt,em, etc.) or proportions.
      
      Top, bottom, left, right space padding:

      Padding is used to set the space padding range, which is the same as the margin property:

      • h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
        left:40px};
      • h3 {margin:10px 20px 30px 40px}
       border:

      Border can be set a number of properties, including color and width, the key is to specify the width of each side and the color of each side.

      • The border width border-width can be thin,medium,thick or length values:
        • h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
        • h3 {border-width:2px 4px 6px 8px}/* is the same as above * *

        • P {border-top-width:thin;border-right-width:medium;border-bottom-
          Width:thick;border-left-width:none};
        • p {Border-width:thin medium thick none}/* is the same as above, the left box will not show * *
          
          

      • Border color Border-color definition methods are similar to width definitions, and color values can also be in RGB values (such as #ff00ff):
        • h3 {border-color:red Blue yellow green}/*: red; right: blue; under: yellow; Left: Green *
        • h3 {border-color:red Blue}/*, down: red; right, left: blue;
        • h3 {border-color: #ff00ff}/* all borders are #ff00ff color * *
          
          

      • The line style border-style of the border line, with nine keywords to describe:
        • None//does not draw a border, regardless of the thickness of the border * *
        • Dotted/* dotted line with dots/*
        • Dash/* Dotted line with dash * *
        • Solid/* Solid Line * *
        • Double/Dual Solid line * *
        • Groove/*3d Groove Form * *
        • Ridge/*3d Ridge Form * *
        • Inset/*3d Inline * *
        • Outset/*3D outer inlay * *
        The method is similar to the thickness and color, and is no longer spoken.

      • The color, thickness, and line style of a border can be defined in a single statement. Cases:
        • H1 {border-top:5px solid red}
      So many parameters, so many combinations, to be handy, not a few kungfu to practice is impossible to achieve.

    Background color:
    
    

    Background-color, with which you can specify the background color of the entire page, or a single word. In traditional HTML, it's a hassle to apply a background color to a piece of text, to put text in a table and then set the background of the table. CSS makes it very easy.

    P.colorback {background-color: #ff0000}

    The color can be a color name (such as red), a hexadecimal number (such as #ff0000), an RGB value (such as RGB (255,0,0)).

    background Picture:

    Background-image, which can be used to specify the background picture of the entire page (put it inside the body tag), or it can be a single word.

    • Background-repeat whether to cycle the background
      • P {background-repeat:no-repeat;background-image:url (background.gif)}/* does not cycle * *
      • P {background-repeat:repeat;background-image:url (background.gif)}/* Cycle * *
    • Background-attachment whether the background is fixed
      • Body {background-attachment:scroll;background-image:url (background.gif)}/* scrolling with text * *
      • Body {background-attachment:fixed;background-image:url (background.gif)}/* Fixed not move *

    P.colorback {background-color: #ff0000}

    The color can be a color name (such as red), a hexadecimal number (such as #ff0000), an RGB value (such as RGB (255,0,0)).
    
    

    Background positioning:

    Background-position is used to set the location of the background:
    
    

    • P {background-position:top;background-image:url (background.gif)};

    
    Background-position its parameters can be keywords, length, scale values.
    
    

    • keywords;
      • Top//Background image aligned with foreground object
      • Bottom/* Background image is aligned to the bottom of the foreground object * *
      • Left//Background image is aligned to the right of the foreground object * *
      • Right//Background image aligned with foreground object
      • Center/* With any of the previous four combinations, into horizontal or vertical center * *
        
        
    • Length number;
      • Can be any of the previously learned length units (Pt,px,ems ...), for example:
        p{background-position:100px 50px;
        Background-image:url (Background.gif)} represents a level of 100 pixels from the top left corner and a vertical 50 pixel position.
        
        
    • Proportional value;
      • For example: p{background-position:85% 50%;
        Background-image:url (Background.gif)}
        Represents the position from the right 85% of the distance paragraph, and the vertical distance from the top 50% of the paragraph.