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


<STYLE TYPE="text/css">

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

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


</ 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


<style type="text/css">


@ Import url (; ->

</ 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


Ab {font-size: 14pt}

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

p.cd {color: blue}


   <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


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


   <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


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!


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)






Color and background properties



Background - image

The Background-the repeat



Text Properties

The Word-spacing







Margin properties





Padding properties





Border properties
Border-top-the width


Border-bottom-the width

Border-left-the width












Classification of property




List-style - image


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


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


Position "10."

The default pointer



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

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.



Path of the url ("")

Repeat-x, repeat-y no-repeat

The Scroll, Fixed

Percentage, length, top, left,

right, bottom

Normal | length

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




Length | percentage



Thin | medium, the thick | length






None | dotted | dash | solid

Border-top-width | color, etc.




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



















<TITLE> Css property </ TITLE>

</ HEAD>


. 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>


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

Foreign Studies University, </ b>


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>


</ 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

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


Xray show only the outline of the object


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 =



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

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

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


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



<title> alpha </ title>


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

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


</ Style>

</ Head>


<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)}


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


<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)}


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



<TITLE> Glow </ TITLE>

</ HEAD>


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

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

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

</ Style>


<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


Syntax: {filter: invert}

Parameters: the filter parameters.

Filename: a6.htm


<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}

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



<TITLE> The light </ the TITLE>

</ HEAD>


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

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


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

<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)}


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



<TITLE> Mask </ TITLE>

</ HEAD>


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


<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 =



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)}


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



<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>


  <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)}


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



<TITLE> A wave </ TITLE>

</ HEAD>

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


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


</ Style>


<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


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>

Shared By:
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.