CSS styles, layouts, box models

---restore content starts---

CSS content:

Common styles: Font color background

Layout: Floating positioning label Properties

Label box model: Margin border

Animations: Rotating Gradients

Note: CSS path from CSS file

HTML and JS lead paths from the HTML file.

Style:

Font:　

font-size Font size

Instance:

p {    font-size:14px;}

Use EM to set the font size

Browser default text size is 16px

1em=16px

　　

font-family Font Series

Instance:

p{  font-family: "Times New Roman", Georgia,serif;}

　　

Font-style font style

Instance:

P.normal {
Font-style:normal
}p.italic {
Font-style:italic
}p.oblique {
Font-style:oblique
}

Property value:

　　

font-weight Font weight

Instance:

P.normal {
Font-weight:normal;
}p.thick {
Font-weight:bold;
}p.thicker {
font-weight:900;
}

Property value:

Text:

Text color: Color

• Hexadecimal values-such as: #ff0000
• An RGB value-such as: rgb (255,0,0)
• Name of the color-such as: Red

Instance:

Body {
color:red;
}H1 {
Color: #00ff00;
}H2 {
Color:rgb (255,0,0);
}

Text alignment:text-align

Text arrangement properties are used to set the horizontal alignment of text.

Text can be centered or aligned to the left or right, justified.

When Text-align is set to "justify", each line is expanded to equal width, left and right margin are aligned (e.g. magazines and newspapers)

Instance:

H1 {
Text-align:center;
}p.date {
Text-align:right;
}p.main {
text-align:justify;
}

Text decoration: Thetext-decoration property is used to set or remove decorations for text.

From a design point of view, the Text-decoration property is primarily used to remove the underline of a link:

Instance:

A
Text-decoration:none;
}

None to remove underline

h1 {    text-decoration:overline;} h2 {    Text-decoration:line-through;} h3 {    text-decoration:underline;}

The overline is underlined;

Line-through to delete line;

Underline is underlined

Text conversion:

Text-transform

Text conversion properties are used to specify uppercase and lowercase letters in a text.

Can be used to turn all words into uppercase or lowercase letters, or capitalize the first letter of each word.

Instance:

p.uppercase {    text-transform:uppercase;} p.lowercase {    text-transform:lowercase;} p.capitalize {    text-transform:capitalize;}

Text indent:

Text-index

The text indent property is used to specify the indentation of the first line of text.

Instance:

p {
text-indent:50px;
}

line-height Line height

Instance:

p.small{line-height:10px}p.big{line-height:30px}

vertical-align Setting the vertical alignment of elements

Instance:

img{Vertical-align:text-top;}

background :background

Background color:background-color

Instance:

Body {    background-color: #b0c4de;}

Background Image:background-image

Instance:

Body {    Background-image:url (' paper.gif ');}

Background image horizontal OR vertical tiling:background-image-repeat-x/y

Example: tiling horizontally

body{    background-image:url (' gradient2.png ');    Background-repeat:repeat-x;}

Background image setting positioning and uneven paving

Instance:

body{    background-image:url (' img_tree.png ');    Background-repeat:no-repeat;}

You can use the background-position property to change the position of the image in the background:

Instance:

body{    background-image:url (' img_tree.png ');    Background-repeat:no-repeat;    Background-position:right top;}

Background Shorthand properties:

Instance:

Body {    background: #ffffff url (' img_tree.png ') No-repeat right top;}

　

When you use the Shorthand property, the order of the property values is:

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

　　

Layout:

Floating

　　　　Float: Sets the width height of the label for the element to be floated and the parent tag

Instance:

img{    Float:right;}

Property value:

Clear float: Clear

Instance:

. text_line{    Clear:both;}

　　

　Positioning:

postion

Property: Fixed Relative absolute
Top bottom Left right:100px
　　fixed: Relative to window positioning does not care whether nesting

Instance:

<! DOCTYPE html>  <b> Note: </b> 
 IE7 and IE8 support only one! DOCTYPE specifies a fixed value. 
 </p> <p>some text</p> 
 <p>some text</p> 
 <p>some text</p> 
 <p>some text</p> 
 <p>some text</p> 
 <p>some text</p> 
 <p& Gt Some text</p> 
 <p>some text</p> 
 <p>some text</p> 
 <p>some text</ P> 
 <p>some text</p> 
 <p>some text</p><p>some text</p> </body> 
The result is; does not float with the page
　

　　Absolute: Absolute Positioning
Position body relative to label
The final label is the body relative to the nearest parent tag with the poistion attribute
Instance:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<style>
H2
{
Position:absolute;
left:100px;
top:150px;
}
</style>
<body>
<p> with absolute positioning, an element can be placed anywhere on the page. Below the title, place the page at the left and the top of the page PX element. .</p>
</body>
The result is: The distance is not changed with the window size

　　relative: relative to its own position is also commonly used in fine-tuning and parent tags
Instance:
h2.pos_left{    position:relative;    left:-20px;}
Bottom
Example: Set the bottom edge of the image to 5px above the base of the element:
img{    Position:absolute;    bottom:5px;}
Cursor Cursors Properties:
Top
Example: Set the top edge of an image to a position 5 pixels below its containing element's top edge
img{    Position:absolute;    top:5px;}
Left : The property specifies the right edge of the element. This property defines the offset between the left margin boundary of the anchored element and the left boundary of its containing block.
Right : The property specifies the left edge of the element. This property defines the offset between the right margin boundary of the anchored element and the right boundary of its containing block.

Label Properties Display:block Inline-block Inline
Display:none can hide an element, and hidden elements do not occupy any space. In other words, the element is not only hidden, but also the space that the element originally occupies will disappear from the page layout.
Instance:
<! DOCTYPE html>
The result is:
　
Visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.
Instance:
<! DOCTYPE html>
The result is:
　
A block element is an element that occupies the full width and is a newline character before and after.
Examples of block elements:

 
   

  
    
 
     
 
     
<p>
 
     
<div>
 
    
 
   
Inline elements require only the necessary width and do not force line breaks.
Examples of inline elements:

 
   

  
    
 
     
<span>
 
     
<a>
 
    
 
   
Example: displaying list items as inline elements
Li {    display:inline;}
The following example takes a span element as a block element:
span {    display:block;}
　　
---restore content ends---
CSS styles, layouts, box models