Css Tutorial

Document Sample
Css Tutorial Powered By Docstoc
					Css Tutorial

CSS stands for Cascading Style Sheet. Translated as "cascading style sheets".

Is used for (enhanced) to control page styles and allows the separation of style

information and web content of a markup language.

First, the stylesheet declaration:

1) embedded style sheet

2) insert the style sheet

3) hyperlink stylesheet declaration file

4) other sites link to the stylesheet declaration file




An embedded style sheet

Add to the following logo on the page head

<HEAD>

<STYLE TYPE="text/css">

      H1 {font-size: 40pt; Color: red}

      P {font-size: 12pt; line-height: 20pt}

</ STYLE>

</ HEAD>

2 Insert a style sheet

Directly in the page tab

<H1    STYLE="font-family:      楷 体 _gb2312;        font-size:   40pt;   Color:red">

Guangdong University of Foreign Studies </ H1,
Hyperlink stylesheet declaration file

Establish samp.css file, as follows:

H1 {font-family: Arial; font-size: 40pt; Color: red}

P {font-size: 12pt; line-height: 20pt}

Html file, together with the following statement:

<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">




4 is also import a style file, with a third similar

<head>

<style type="text/css">

<-

@ Import url (http://192.168.235.8/samp.css); ->

</ Style>

</ Head>




Second, the CSS format

Selector {property: value of 1; property 2: value 2; ...}

The wildcard character: * {} See css.chm file.

1 HTML tag

, h1 {color: red}
the h2, p, td {color: blue; font-size: 16pt}

2 class selectors:

Select a character can have different CLASS (class), thus allowing the same

element have different styles

Definition:

Ab {font-size: 14pt}

Ac {font-size: 16pt; color: red}

p.cd {color: blue}

Use:

   <H1 Class=ab> Guangdong University of Foreign Studies </ H1>

   <table> <tr> <td class=ab> Guangdong Foreign Studies University </ td> </

tr> </ table>

   <H1 Class=ac> Guangdong University of Foreign Studies </ H1>

   the <p class=cd> Guangdong University of Foreign Studies </ p>

3 ID select the symbol:

ID selector to define the composition of each element individually. This symbol

should be used sparingly, because the ID selector character very restrictive

and can only separate the definition of the style of an element, is generally

used only in exceptional circumstances.

An ID assigned by using the indicator "#" in front of the name

Definition:

# Ab {font-size: 14pt}
# Ac {font-size: 16pt; color: red}

Use:

   <H1 Id=ab> Guangdong University of Foreign Studies </ H1>

   <table> <tr> <td id=ab> Guangdong Foreign Studies University </ td> </ tr>

</ table>

   <H1 Id=ac> Guangdong University of Foreign Studies </ H1>




Four pseudo-classes and pseudo elements

Pseudo-classes and pseudo-elements are special classes and elements that

can automatically identify support CSS browser.

The pseudo-classes to distinguish different types of elements (for example,

visited links (access connections) and the active links (to activate the

connection) describes the type of the two anchors (anchors)). The

pseudo-element refers to the part of the elements, for example, the first letter

of the paragraph.

The form of a pseudo-class or pseudo-element rules such as:

Selector: pseudo-class {property: value}

Selector: pseudo-element {property: value}

The pseudo-classes and pseudo-elements are not applied the HTML CLASS

attribute to specify. General class can be used in conjunction with

pseudo-classes and pseudo-elements, as follows:

Selector. Categories: pseudo-class {property: value} or selector. Categories:
pseudo-element {property: value}

Commonly used pseudo-class

a: link {color: # FF0000; text-decoration: none} / * unvisited links * /

a: visited {color: # 00FF00; text-decoration: none} / * visited links * /

a: hover {color: # FF00FF; text-decoration: underline} / * mouse on the link * /

a: active {color: # 0000FF; text-decoration: underline} / * active links * /




The same page exist a variety of links style settings are as follows:

. Class a: link

Class name: a: link




Quote

the <a class=类名 1 href=""> xx </ a>

the <a class=类名 2 href=""> xx </ a>




First-line pseudo-elements

Usually in newspaper articles, such as the Wall Street Journal, the first line of

text will be in bold printed body and all caps to show.

P: the first-line {font-weight: bold}

First-letter pseudo-elements

First-letter pseudo-element is used to increase the drop caps and other effects.

The first letter containing the specified value selector text will display in
accordance with the specified value. A first letter pseudo-element can be used

for any block-level elements. For example:

P: first-letter {font-size: 300%; float: left}

Cascading sequence

When using multiple style sheets, style sheets need to compete for control of

specific selectors. In these cases, there is always the rules of the style sheet

can gain control. The following characteristics will determine the result of

mutually exclusive style sheets.

! Important to enhance the application of priority of the specified style rules

Rules can be specified! Important especially important. One especially

important style will take precedence over confrontation with the same weight

style. Similarly, when the Web page creators and readers are specified rules,

the rules of the web page creators will go beyond the reader's. The following is

an example of! Important statement:

BODY {background: url (bar.gif) white; background - repeat: repeat-x!

Important}

Third, the unit of length

Relative length units

em element height of the font. Relative to the size of the font of the text within

the current object.

Settings such as font size of text within the current line is not human, as

opposed to the browser's default font size.
ex the letter "x" height. Relative to the height of the character "x". Half of this

height is usually the font size.

Such as the current line within the text font size is not man-made settings,

relative to the browser's default font size.

px pixels. Pixels (Pixel).

The pixel is relative to the monitor screen resolution. For example, the user of

WONDOWS resolution is 96 pixels / inch. MAC users use the resolution is 72

pixels / inch.

% Percentage

Absolute unit of length

in inches (1 inch = 2.54 cm).

cm cm.

mm mm.

pt pounds (1 pound = 1/72 in.). Points (the Point).

1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc pickup (one pickup = 12 pounds).




Fourth, the CSS property list

Attribute name
Font attributes (Font)

font-family

font-style

font-variant

font-weight

font-size




Color and background properties

Color

Background-color

Background - image

The Background-the repeat

Background-attachment

Background-position




Text Properties

The Word-spacing

Letter-spacing

Text-decoration
Vertical-align




Text-transform




Text-align

Text-indent

Line-height




Margin properties

Margin-top

Margin-right

Margin-bottom

Margin-left




Padding properties

Padding-top

Padding-right

Padding-bottom

Padding-left




Border properties
Border-top-the width

Border-right-width

Border-bottom-the width

Border-left-the width

Border-width

Border-color

Border-style

Border-top

Border-right

Border-bottom

Border-left

Width

Height

Float

Clear




Classification of property

Display

White-space

List-style-type

List-style - image

List-style-position
List-style




Properties of the mouse (Cursor)

The meaning of the Cursor property




What font

Font whether italic

Whether to use the upper case of body

Thickness of the font

Font size




Define the foreground color

Define the background color

Define the background pattern

Repeat mode

Set rolling

Initial position
The spacing between words

The spacing between the letters

The decorative style of the text




Vertical position




Text conversion




Alignment

The first line indented

Lines of text




The top margin

The right side margin

Bottom margins

The left side margin




Top padding
Right padding

The bottom of the fill distance

Left padding




The top border width

The right border width

Width of the bottom of the border

The left border width

First define the width

Set the border color

Set the border style

One definition of the top

One definition of the right side of

One definition of the bottom of the

One definition of the left side of

Define the width of the property

Define the height property

Text Wrapping

Which side of the surround
Specifies whether to display

How to handle blank

Add item number

Plus pattern

Second-row starting position

One definition list




Automatic

Position "10."

The default pointer

Hand

Mobile

Arrow toward the right side of

Arrow toward the top right of the

Arrow toward the the top left

Arrow towards the top

Arrow towards the bottom right of the

Arrow towards the bottom left of the

Arrow towards the bottom

Arrow toward the left of

Text "I"-shaped
Wait

To help property values




All fonts

Normal, italic, oblique

Normal, small-caps

Normal, bold, bolder, lithter

Of Absolute-size, the relative-size, length, percentage, etc.




Color

Color

Path of the url ("")

Repeat-x, repeat-y no-repeat

The Scroll, Fixed

Percentage, length, top, left,

right, bottom




Normal | length

Ditto
None | underline | overline | line-

through | of blink

Baseline | sub | super | top | text-top | middle | bottom | text-bottom |

Capitalize | uppercase |

lowercase | none

Left | right | center | justify

| Length

Normal | | |




Length | percentage | the auto

Ditto

Ditto

Ditto




Length | percentage

Ditto

Ditto

Ditto
Thin | medium, the thick | length

Ditto

Ditto

Ditto

Ditto

Color

None | dotted | dash | solid

Border-top-width | color, etc.

Ditto

Ditto

Ditto

Length | percentage | the auto

Length | auto

Left | right | none

Left | right | none | both




Block, inline, list-item, none

Normal, pre, nowrap

Disc circle, square, etc.

| None
Inside, outside

||




Auto

Crosshair

Default

Hand

Move

e-resize

Ne-resize

Nw-resize

n-resize

Se-resize

Sw-resize

s-resize

w-resize

Text

Wait

Help




<HTML>
<HEAD>

<TITLE> Css property </ TITLE>

</ HEAD>

<style>

. Ab1

{Font-size: 2pc; color = green;

font-weight: bold;

Word-spacing: 10;

Letter-spacing: 10;

Text-decoration: line-through;

Text-indent: 2em;

Line-height: 35pt;

cursor: the Crosshair

}

Ab2 {font-size: 3pc; color = green; font-weight: 800}

Ac1 {font-size: 12pt; color = red;}

p.cd {color: blue; font-size: 18pt}

. Ab {font-size: 14pt; color = yellow; background: 236B8E}

. Ac {font-size: 14pt; color = blue; background: 5F9F9F}




A: link {color: # 660 033; Text-decoration: none;}

A: active {color: blue; Text-decoration: none;}
A: visited {color: gray; Text-decoration: none;}

a: hover {color: # FF0000; text-decoration: underline;}

p: first-letter {font-size: 60pt; float: left}

</ Style>




<BODY>

    the <b class=ab1> Guangdong University of Foreign Studies Guangdong

Foreign Studies University, </ b>

        <H1>

The <A HREF="http://www.gdufs.edu.cn"> Guangdong University of Foreign

Studies </ A>

</ H1>

    <table> <tr> <td class=ab1> Guangdong Foreign Studies University </ td>

</ tr> </ table>

    <H1 Class=ac1> Guangdong University of Foreign Studies </ H1>

    the <p class=cd> Guangdong University of Foreign Studies </ p>

<TABLE Border=1>

<TR Class=ab>

<Th> Name </ Th>

<Th> Math </ Th>

<Th> Language </ Th>

<Th> English </ Th>
</ TR>

<TR Class=ac>

<TD> Joe Smith </ TD>

<TD> 90 </ TD>

<TD> 89 </ TD>

<TD> 78 </ TD>

</ TR>

<TR Class=ab>

<TD> John Doe </ TD>

<TD> 88 </ TD>

<TD> 99 </ TD>

<TD> 96 </ TD>

</ TR>

<TR Class=ac>

<TD> Wang </ TD>

<TD> 90 </ TD>

<TD> 89 </ TD>

<TD> 78 </ TD>

</ TR>

</ TABLE>

</ BODY>

</ HTML>
Five, css filters

Stylesheet filter is actually a new extension of the style sheet, the syntax of

using this technique is simple visual filters and transition effects to add a

standard HTML elements, such as images, text, and other some object, add

some changes for the page. If you have some script language, filter effects

with similar javascript script code to do some combination, you can have a

powerful filter of style sheets and scripts together to establish dynamic

interactive documentation tools.

Visualization filter attribute can only be used in the HTML control elements.

The so-called HTML control elements is defined in the page of a rectangular

space, the browser window can display space. The following is a list of HTML

and legal controls and their descriptions.

Note: Only supported IE4.0 or above, if it is a different browser, then .......




Element Description

The main elements of the BODY web documents, all the visible range in

<BODY> element

BUTTON form field button "send (submit)", "Reset (reset)" and other forms

DIV defines a region on the page height, width, or absolute position of this

region is known

IMG of picture elements, by specifying the "src" attribute to specify the image
source

INPUT form field

The MARQUEE move subtitle effect

The SPAN defines a region on the page height, width, or absolute position of

this region is known

TABLE table

TD table data cell

TEXTAREA text area

TFOOT multi-line input text box

TH table header cell

The THEAD form title

TR form line




Filter property sheet supported by IE4.0 or above

Filter effects description

Alpha set transparency

Blur to establish a fuzzy effect

Chroma is set to the specified color transparent

The DropShadow to establish an offset of the image profile, cast shadows

FlipH level inversion

FlipV vertical inversion

Glow is the outer boundary of the object to increase the luminous efficiency
Gray reduce the color of the picture

Invert the color, saturation and brightness values reversal to establish a

negative effect

Light on an object, light projection

Mask for an object the establishment of a transparent film

Shadow establish a solid outline of the object, the shadow effects

Wave X-axis and Y-axis direction using a sine wave pattern to disrupt the

picture

Xray show only the outline of the object




Syntax:

the filter the: filtername (the parameters)




Alpha set transparency

Syntax: {the FILTER: ALPHA (opacity = opacity, finishopacity = finishopacity,

style = style, the startx = the startx, starty = starty finishx = finishx finishy =

finishy)}




Parameters:

Opacity represents the beginning of the image transparency, its default value

is from 0 to 100, 0 represents completely transparent, 100 means completely
opaque;

FinishOpacity is an optional parameter, you can use them to specify the end of

the transparency, if you want to set up the transparent effect of the gradient,

the scope is 0-100;

Style said that the shape characteristics of the transparent region,

Where "0" as the representative of the shape of "1" represents linear. "2"

stands for radial, "3" represents the rectangle;

startx said X coordinate of the gradient transparency effects at the beginning of

starty on behalf of Transparency in gradients at the beginning of the Y

coordinates,

finishx on behalf of Transparency in gradients at the end of the X coordinate

finishy said Transparency in gradients at the end of Y coordinates.

Filename: a00.htm

<html>

<head>

<title> alpha </ title>

<style>

div {position: absolute; left: 20; top: 70; width: 150:}

img {position: absolute; top: 20; left: 40; the filter: alpha (opacity = 90, style =

1)}

</ Style>

</ Head>
<body>

<div>

<p style="font-size:48pt; font-weight:bold; color:blue"> Beautiful </ p>

</ Div>

<img src="rose2.jpg" width=450>

</ Body>

</ Html>




Blur to produce fast-moving objects blur effect

Syntax: {the filter: blur (add = add, direction = direction, strength = strength)}




Parameters:

add is used to specify the image is changed to the blurring effect of the

impressionist blur effect clockwise direction, its value should be ture or false;

direction parameter is used to set the vague direction, where 0 degrees

represents straight up, every 45 degrees as a unit, the default value is to the

left of 270 degrees;

strength parameter represents the number of pixels width will be the fuzzy

influence the default parameter value is 5 pixels, and the parameter values can

only use integer to specify.

Filename: a2.htm

<HTML>
<HEAD>

<TITLE> Blur fliph flipv </ TITLE>

</ HEAD>

<BODY Background="bg3.gif">

<IMG SRC="f1.gif">

<IMG SRC="f1.gif" style="filter:blur(strength=10)">

<IMG SRC="f1.gif" style="filter:blur(strength=50)">

<IMG SRC="f1.gif"" style="filter:blur(strength=100)">

<IMG SRC="dog1.gif">

<IMG SRC="dog1.gif" style="filter:fliph">

<IMG SRC="dog1.gif" style="filter:flipv">

<IMG SRC="dog1.gif" style="filter:fliph() flipv()">

</ BODY>

</ HTML>

Fliph generated about the opposite of the image

Flipv produce up and down the opposite picture

Syntax: {filter: filph} {filter: filpv}




Parameters; this filter is not with parameters {the filter: filph} is flipped

horizontally, {filter: filpv} vertical flip.
Glow in the objects around the edge of the halo-like

Syntax: {filter: glow (color = color strength. = Strength)}

Parameters:

color parameters and shadow color parameters of the filter function is almost

the same, but the color parameter is used to set a luminous color;

strength parameter is used to specify the luminous intensity, its value is 1-255

for any integer.




FILEname: a4.htm

<HTML>

<HEAD>

<TITLE> Glow </ TITLE>

</ HEAD>

<style>

. Glow1 {filter: glow (color = # FF00CC, strength = 10); width: 400}

. Glow2 {filter: glow (strength = 3); width: 400}

. Glow3 {filter: glow (color = # CCFFCC, strength = 50);}

</ Style>

<BODY>

<H1> No effect </ H1>

<h1 class="glow1"> flame effect </ H1>

<h1 class="glow2"> neon effect </ H1>
<IMG SRC="f2.gif">

<IMG SRC="f2.gif" class="glow3">

</ BODY>

</ HTML>

Gray color images into grayscale

Syntax: {filter: gray}

Parameters: the filter parameters.




Invert Inverts the image's hue, saturation and brightness, resulting in negative

effects

Syntax: {filter: invert}

Parameters: the filter parameters.

Filename: a6.htm

<BODY>

<IMG SRC="rose2.jpg" width=200>

<IMG SRC="rose2.jpg" width=200 border=1 style="filter:gray">

<IMG SRC="rose2.jpg" width=200 border=1 style="filter:invert">

</ BODY>




Light the light source involved in object

Syntax: {filter: light}

Parameters:
Once the object definition "light" filter properties, we can call it "method

(Method)" to set or change properties

This filter is available:

The AddAmbient method is used to join surrounded by the light source,

AddCone method is used to join the cone-shaped light source,

MoveLight method is used to move the light source

Changstrength method is used to change the intensity of the light source,

Changcolor method is used to change the light color,

The Clear method is used to clear all of the light source.

Filename: a02.htm

<HTML>

<HEAD>

<TITLE> The light </ the TITLE>

</ HEAD>




<BODY>

<IMG SRC="rose2.jpg" WIDTH="200">




<IMG              SRC="rose2.jpg"           WIDTH="200"            ID="light1"

style="filter:light(enabled=1)">

<IMG              SRC="rose2.jpg"           WIDTH="200"            ID="light2"

style="filter:light(enabled=1)">
<script language="Javascript">

light1.filters [0]. addcone (300,2,5,100,100,0,255,0,35,25);

light2.filters [0]. addcone (30,2,5,100,100,0,200,200,80,25);




</ Script>

</ BODY>

</ HTML>




Mask is another object to produce an image transparent mask

Syntax: {filter: mask (color = color)}

Parameters:

The color parameters to cover the color of the object surface, for example, if

the mask color is green, then it should set the color = blue.

Filename: a7.htm

<HTML>

<HEAD>

<TITLE> Mask </ TITLE>

</ HEAD>

<style>

Mask {filter: mask (color = # 808.04 thousand); width: 180;}
</ Style>




<BODY>

<H1> Without membrane text </ H1>

The <H1 class="mask"> coated text </ H1>

</ BODY>

</ HTML>




The DropShadow produce a drop shadow

Syntax: {the filter: dropshadow (color = color, offx = offx, offy = offy, positive =

positive)}

Parameters:

Color parameters in the filter represents the color of the cast shadows,

offx said horizontal direction of the shadow offset.

offy said the offset of the shadow of the vertical direction,

Positive parameter is a Boolean value, its value to TRUE for any

non-transparent pixels to create the visible projection, If FASLE, for the

transparent pixels of transparency effects.

Shadow produce three-dimensional shadow

Syntax: {the filter: shadow (color = color, direction = direction)}

Parameters:

The background color represents the projection of the value instead of English
letters, such as projection background is red, you should set color = the red;

The direction parameter is used to set the projection direction, if the value is 0,

then, represents the vertical projection, in addition to this value every 45

degrees as a unit, its default value is to the left 270 degrees.




Filename: a3.htm

<HTML>

<HEAD>

<TITLE> Shadow </ TITLE>

</ HEAD>

<style type=text/css>

The Shadow {filter: the Shadow (Color = # 009 900, the Direction = 45,

strength = 15);}

. DropShadow {filter: dropShadow (color = red, offX = 3, offY = 3); width: 400}

</ Style>

<BODY>

  <h1 class="dropShadow"> drop shawow shadow effects </ h1>

   <h1 class='shadow' style="width=400"> shawow shadow effects </ h1>

<h2 style= "filter:shadow (color=red, direction=145); width=400"> shawow

shadow effects </ H2>

    <img src=mx.gif width=134 height=250 class=Shadow>

</ BODY>
</ HTML>




Wave wave deformation in the horizontal or vertical direction

Syntax: {the filter: wave, (add = add, freq = freq, lightstrength = strength, phase

= phase, strength = strength)}

Parameters:

The add parameter is a Boolean value, it is used to indicate whether or not to

object in accordance with the waveform patterns disrupted;

freq parameter is used to set the ripple frequency is specified on the object, a

total need to generate the number of complete corrugated;

lightstrength parameters can be set to enhance the effect of the ripple of light

and shadow, and its value in the range between 0-100;

phase parameter is used to set the offset of the sine wave,

strength is set the sine wave amplitude size.




Filename: A8.htm

<HTML>

<HEAD>

<TITLE> A wave </ TITLE>

</ HEAD>

<style>
. Aa {filter: wave (add = true, freq = 8, lightstrength = 80, phase = 5; strength =

120)}

. Bb {filter: wave (add = false, freq = 3, lightstrength = 20, phase = 5; strength =

120)}

</ Style>




<BODY>

<H1> Wave effects </ H1>

<IMG SRC="rose2.jpg" width=200>

<IMG SRC="rose2.jpg" width=200 border=1 class=aa>

<IMG SRC="rose2.jpg" width=200 border=1 class=bb>

</ BODY>

</ HTML>

The XRay produce the contours of the object, like exposure to X-ray

Syntax: {filter: xray}

Parameters: the filter itself does not contain parameters.

Filename: A9.htm

<BODY>

The normal effect of <H1> </ H1>

<IMG SRC="rose2.jpg" width=200>




<H1> Xray effect </ H1>
<IMG SRC="rose2.jpg" width=200 border=1 style="filter:xray">




<H1> Negative effects </ H1>

<IMG SRC="rose2.jpg" width=200 border=1 style="filter:invert">




</ BODY>

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:17
posted:2/15/2012
language:
pages:36
Description: CSS is Cascading Style Sheet of the abbreviations. Translation "cascading style sheets". Is used to (enhancement) control and allows web page style will style information and web content of the separation of a markup language.