Home > Developer > Web Develop

Web front-end---css (2)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Chapter one four ways to introduce CSS

1. In-line
Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

<p style="background-color:rebeccapurple">hello yuan</p><strong> <br></strong>

2. Embedded

Embedded is a set of CSS styles that are written in the 

"UTF-8">    <title>Title</title>    <style>        p{            background#2b99ff;         }    </style>
3. Link-type
<link href="mystyle.css" rel="stylesheet " Type="text/css"/>
4. Import Type
Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the 
<style type="text/css">                     @importmystyle.css "; Note here the path           to the. css file </style>
Attention:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.
Common properties for two CSS 1 color properties
 
 

  
   
   
 
    1234567 
    <div style="color:blueviolet">ppppp</div><div style="color:#ffee33">ppppp</div><div style="color:rgb(255,0,0)">ppppp</div><div style="color:rgba(255,0,0,0.5)">ppppp</div> 
   
 
  
 
 
2 Font Properties
 
 

  
   
   
 
    1234567 
    font-size: 20px/50%/largerfont-family:‘Lucida Bright‘font-weight: lighter/bold/border/
="font-style: oblique">老男孩</h1>
 
   
 
  
 
 
3 Background Properties
background-color:cornflowerbluebackground-image:url ('1.jpg'); Background-repeat:no-repeat; (repeat: Tiled full) Background-position:right Top (20px 20px);(landscape: Left Center right) (portrait: Top center bottom)      shorthand:<body style="background:20px 20px no-repeat #ff4 URL (' 1.jpg ')">              <div style="width:300px;height:300px;background:20px 20px no-repeat #ff4 url (' 1.jpg ')
As shown in the following code:
The Background property also defines the length and width of the picture, whether it repeats, and the position of the picture.
4.block and Inline-block, inline

 
 
    
  
  
       
   
    1. The two concepts of block and inline are abbreviated, complete and exact, block-level elements (block-level elements) and inline elements (inline elements). Block elements are usually separated by a separate line, and the inline element does not produce a newline, and a series of inline elements are displayed in a row until the row is full.
      2.  
   
    2. In general, the HTML element has its own layout level (block element or inline element): 
    
         
     
      • Common block-level elements are DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL etc.
        •  
     
      • Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.
        •  
    
      3.  
   
    3. The block element can contain both the block element and the inline element, but the inline element can only contain inline elements. Note that this is a general statement that each specific element can contain elements that are also specific, so specific to individual elements, this rule is not applicable. For example, the P element can contain only inline elements, not block elements.
      4.  
   
    4. In general, you can change the layout level of an element by setting the Display:inline and Display:block.
      5.  
  
    
 
 
The difference between the two:

 
 
    
  
  
       
   
    • Display:block
      •  
  
    
 
 

 
 
    
  
  
       
   
    1.  
    
         
     
      1. The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
        2.  
     
      2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
        3.  
     
      3. The block element can set the margin and padding properties.
        4.  
    
      2.  
  
    
 
 

 
 
    
  
  
       
   
    • Display:inline
      •  
  
    
 
 

 
 
    
  
  
       
   
    1.  
    
         
     
      1. The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
        2.  
     
      2. The inline element setting width,height property is invalid.
        3.  
     
      3. The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.
        4.  
    
      2.  
  
    
 
 

 
 
    
  
  
       
   
    • Display:inline-block
      •  
  
    
 
 

 
 
    
  
  
       
   
    1.  
    
         
     
      1. In simple terms, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.
        2.  
    
      2.  
  
    
 
 
5.position positioning
The position attribute places the element in a static, relative, absolute, or fixed position.
The possible values are shown in the following table:

 
 
 
  
   
   
 
    value 
    Description 
   
 
   
 
    Static 
    Default. An element with a position set to static, which is always in the position given by the page stream (the static element ignores any top, bottom, left, or right declarations). 
   
 
   
 
    Relative 
    The position is set to an element of relative and can be moved to a location relative to its normal position, so "left:20" moves the element to a position 20 pixels to the left of the element's normal position. 
   
 
   
 
    Absolute 
    An element with a position set to absolute, which can be positioned relative to the specified coordinates of the element that contains it. The position of this element can be specified by the "left", "Top", "right" and "bottom" properties. 
   
 
   
 
    Fixed 
    The position is set to the fixed element and can be positioned relative to the specified coordinates of the browser window. The position of this element can be specified by the "left", "Top", "right" and "bottom" properties. The elements remain in that position, regardless of whether the window is scrolled or not. Works in IE7 (Strict mode). 
   
 
   
 
 
Web front-end---css (2)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
best books for front end web development front end web developer jobs atlanta ga complete front end web developer bootcamp 14 projects download javascript and jquery interactive front end web development javascript and jquery interactive front end web development pdf best way to learn front end web development web 2 web

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More