Css+div Web Design

CSS is an indispensable part of Web page production, I will use two blog to show you the basic use of CSS.

The overall structure of the CSS+DIV is summarized as follows:

This blog mainly introduces the basic knowledge of CSS.

first, the concept of CSS;

CSS (cascading style sheets): It is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language). is a markup language that controls the style of a Web page and allows the separation of style information from the content of the Web page.

Second, the use of CSS control page method

There are four methods of CSS control page, inline style, embedded type, link type, import style.

A, in-line style

PS: Inline style is the simplest way to use CSS, but since each tag uses a style, late maintenance costs are high and not recommended.

B, built- in

PS: Suitable for special pages to set the style individually.

C, link-type

PS: Link is the most frequently used and the most practical method.

d, Import type

PS: The biggest benefit of importing is that you can have an HTML file import multiple CSS stylesheets.

E, the priority of the four page control methods: Inline style > Linked > Inline > Import

Third, CSS selector

Selectors are important concepts in CSS, and all markup in the HTML language is controlled by different selectors.

A, Tag Selector.

B, category selector

d, id selector

Four, the text effect

Example:

<span style= "FONT-SIZE:18PX;" ><style>h1{Font-style:italic;} /* Set italic */h1 span{font-style:normal;} /* Set to Standard style */p{font-size:18px;} p.one{Font-style:italic;} p.two{Font-style:oblique;} </style></span>

Key words	Meaning
Font -family	set font style, for example: Arial, italic, etc.
Font -size	Set the font size, in units of in Span lang= "en-US" style= "font-family: New Arial" >,cm,mm, % Span lang= "ZH-CN" style= "font-family: New Arial" > relative value, etc.
color	font-like color, can be red #****** Span lang= "ZH-CN" style= "font-family: New song Body", rgb (*%,*%,*%)
Font -weight	font weight, can be a number, normal etc
Font -style	font is italic : italic
Text-decoration	Font underline, top draw line, strikethrough, etc.
Text-transform	English letter Capitalization problem
Text-align	Alignment
Letter-spacing	Word spacing
Line-height	Line spacing

V: Picture effect

Picture properties In fact there is no special, nothing is a border style, size, on its way, etc., here is not listed, interested classmates and self-view CSS full reference manual.

Here's an example:

<span style= "FONT-SIZE:18PX;" >

Show

vi. Background Settings
1. Background color
Basic syntax:
<span style= "FONT-SIZE:18PX;" >.topbanner{      background-color: #fbc9ba;   /* Set the background color of the banner class */  }  </span>

2. Background image
A, basic syntax:
<span style= "FONT-SIZE:18PX;" > Background-image:url (bg2.jpg);      /* Background image */  </span>
B, background picture repetition
Example:
<span style= "FONT-SIZE:18PX;" >


E, background image location
<span style= "FONT-SIZE:18PX;" >background-position:bottom right;/* background position, lower right */background-position:30% 70%;/* background position, percent */background-position : 300px 25px;/* background position, specific value */</span>

F, fixed background image
<span style= "FONT-SIZE:18PX;" >background-attachment:fixed;/* Fixed background image */</span>


Seven, link effects

 
 
  
 
   
 
    
Property
 
    
Description
 
   
 
   
 
    
A:link
 
    
Style of normal browsing time
 
   
 
   
 
    
a:visited
 
    
The clicked Hyperlink style
 
   
 
   
 
    
A:hover
 
    
The style of the mouse over time
 
   
 
   
 
    
A:active
 
    
The style of the single-machine super-chain
 
   
 
  
 
 

Example:
<span style= "FONT-SIZE:18PX;" >a:link{/* hyperlink Normal style */color: #005799;/* dark blue */text-decoration:none;/* no underline */}a:visited{/* visited hyperlink */color: #000000 */* Black */text-decoration:none;/* no underline */}a:hover{/* mouse over hyperlink */color: #FFFF00;/* Yellow */text-decoration:underline;/* underline * /}</span>

Eight, mouse effects
<span style= "FONT-SIZE:18PX;" >cursor:se-resize;/* changing mouse shape */</span>

Cursor properties Customize a lot of mouse effects you can refer to this chart

Nine, filter
CSS filters can only be used in IE browser, we will do the software as far as possible to the majority of browsers are supported, here is not much to say the knowledge of the filter. The filter's identifier is filter, and in general the same as other CSS statements, interested friends themselves to see the relevant information.

So much for today's content, the next blog will introduce you to the Css+div layout and the mix of CSS and JavaScript, Ajax, and jquery.