CSS Development Manual

css| Development Manual

Basic article:

One or three types of style selectors

Property selector p {color:red;}

Class selector. p {color:red;}

ID selector #p {color:red;}

Second, transparent

Background:transparent; Prevent the definition background from being overwritten

Third, netscape4.x (ie/windows4.0 previous version) under the transparent background of the error understanding

Background:inhrit; The transparent background under netscape4.x will be interpreted as black and green

Four, font default selection:

Body {font-family: "Lucida Grande", Verdana,lucida,arial,helvetica,sans-serif;}

Call the default font for different platforms sequentially

V. How to solve the old browser does not support the situation of CSS

Use a group selector for example: p,td,ul,ol,li,dl,dt,dd {Font-size:small}

Vi. use of Netscape4 friendly rules

body {Font-family:verdana,sans-serif;}

P,TD,UL,OL,LI,DL,DT,DD {font-size:small;}

Method overload Detail rule:

body {Font-family:verdana,sans-serif;}

P,TD,UL,OL,LI,DL,DT,DD {font-size:small;}

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

Viii. content (derivation) selector

Li strong {font-style:italic; Font-weight:normal}

For example: Strong {color:red} h2{color:red;} strong H2 {Color:blue;}

For example: #sidebar {color:red} #sidebar p {color:blue}

Example:. Fancy {color:red}. Fancy p {color:blue;}/li.fancy {color:black;}

CSS Embedding

One, external style sheet:

<link rel= "StyleSheet" href= "/css/basic.css" type= "Text/css" media= "All" >

<style type= "Text/css" media= "all>

@import url ("/styles/mystylesheet.css");

</style>

Note: Use @import to mask the IE4.0 of the following browsers

Second, embedded style sheet:

<style type= "Text/css" >

<!--

body {color:red;}

-->

</style>

Note: In order to access the site under IE3, we can use an inline style sheet (it is recommended that you cut to the outer style sheet after using inline success on the page)

CSS Mixed Layout application

Www.i3forum.com

First, Margin (frame distance) padding (border distance)

Margin Property Set Order: Upper left and lower right

Padding Property Set Order: Upper left and lower right

margin:25px 0 25px 0;

Abbreviation: margin:25px 0;

Two, display displays the property to set

(1), display property None (hidden)

. alt {Display:none;}

<span class= "alt" >content List part</span>

(2), display property block (blocks/area)

Img {display:block;}

</ Img>

Block-level element: There is a "box" of its own, followed by a default carriage return

Inline element: is part of a stream, followed by a carriage return

(3), display property inline

Distinguishes the block element, which is displayed in an inline element when using the inline state

Third, dynamic Link property settings:

a:link {

Font-weight:bold;

Text-decoration:none;

Color: #c30;

Background:transparent;

}

a:visited {

Font-weight:bold;

Text-decoration:none;

Color: #c30;

Background:transparent;

}

a:hover {

Font-weight:bold;

Text-decoration:underline;

Color: #f60;

Background:transparent;

}

a:active {

Font-weight:bold;

Text-decoration:none;

Color: #f90;

Background:transparent;

}

(1) text-decorated attributes (text-decoration)

Text-decoration:underline overline None;

Underline: The link is underlined

Overline: underlined when connected

None: No underline when connected

(2) Dynamic Connection Property Order

(LVHA)-love-ha!

(3) Camouflage and deception of ie/windows

You should avoid using the A:active property: A freeze occurs when a bug is connected

Iv. how to set up line height (line-height)

line-height:1.5;

V. How to set the position of the article (text-align)

Selectable properties (left middle right)

Ie6/windows bug causes document to be centered

The complete CSS application for fonts

font:13px/1.5 Georigia, "New Centeury schoolbook", Times,serif;

Seven, set the page dividing line

(1) Vertical-align:middle; Equal to <TD valign= "middle" > Setting vertical alignment

(2) Background:none equals Background:url (images/1.gif) repeat;

Setting Up Display equipment

<style type= "text/css" media= "screen" > Media properties

Convert to XHTML1.0 transition using HTML4.01 Transitional

(Early Gecko core based browsers such as: netscpae6.0 Mozilla1.0)

First, clear the CSS gap in the Gecko Core browser

The rules are as follows:

IMG {Display:block} uses block-level elements to clear gaps

. inline {Display:inline} Use inline element display method

The page is as follows:

Also available

Td img {display:block;}

Second, in the Gecko core img default as an inline function processing

There is a default left blank below the inline element, which is the space to flow out of the included block of letters

box models, bugs, and workspaces

CSS four areas: content, border margins, boundaries, and margins

Before you use CSS to set up a table:

{width:400px; height:75px;}

Wrong understanding: Table Area =400px; height:75px;

Actually the table for CSS settings:

width:400px height:75px Content

Then the area of the whole box is: content+padding*2+border*2

Box mode failure and Solution: (IE4 to Ie5.5/windows)

Correct understanding of box-mode browsers

(ie6/win,ie5/mac,netscpae6+,mozilla,chimera,kmeleon,opera5+)

Float float properties are used to connect in two different ID selectors

{float:left;}

For tables using padding, the following workaround is used:

Oprea Friendly Rules (box-like model)

Solution:

#nav

{

width:151px;/* False value for Ie4-5.x/win * *

voice-family: "}\" ";

Voice-family:inherit;

width:100px; /* Actual value for conformant browsers * *

}

Html>body #nav {

width:100px;/* to Opera * *

}

A blank bug on IE

Workaround: Indent code, <td><a href= "#foo" ></a></td>

Floating bugs on the ie6/windows

Workaround: Use JavaScript ID Name: Content

If (document.all && window.attachevent)

Windows.attachevent ("onload", Fixwinie);

Fuction Fixwinie () {

If (doucument.all.cotent.offsetHeight) {

doucument.all.content.style.display= "Block";

}

}

Bugs embedded in Flash:

WORKAROUND: Embed the following code in XHTML:

<object type: "Application/x-shockwave-flash" Data= "movie.swf"

Width= "400px" height= "300px" >

<parma name= "movie" value= "movie.swf" >

</object>

Flash blank Fault (ie/win 5,5.5,6 Version)

Workaround: Use JavaScript doucuemnt to trick the system

<script type= "Text/javascript" >

[cdata[

If (navigator.mimetypes && navigator.mimetypes["Application/x-shockwave-flash"]) {

Doucument.write (' <object src=http://www.webjx.com/htmldata/2005-09-14/"/media/yourflashmovie.swf" ... </ object>);

}

　　

Keyword Fahrner method: (Ie5.x/winodws provides pseudo key font size)

Solution:

P

Font-size:x-small;

/* Flase value for WINIE4/5 * *

voice-family: "}\" ";

/* Trick WINIE4/5 into thinking the ' rule ' over * *

Voice-familt:inherit;

/* Recover from Trick * *

Font-size:small;

/* Intended value for better browsers * *

}

html>p {
Font-size:small;

* Is nice to opera * *

}

Distinguish between the Alt attribute and the Title property

ALT: note Document not displayed

Title: Display document without comment

Increased accessibility (Wai and Section 508)

The accessibility test of Bobby

Http://bobby.watchfire.com

can help you adapt the Web page to Wai or Section 508

Provides a choice for non-mouse users

Workaround: Use JavaScript

<form action= "Fooaction" >

<input type= "button" onclick= "Setactivestylesheet" (' Default ');

return false; onkeypress= "Setactivestylesheet (' Default ');

return false; />

onkeypress for non-mouse users is equivalent to onclick for users who cannot use JavaScript

<noscript>

<p class= "Vs15" ><a href= "/daily/1.html" ></a></p>

</noscript>

The TabIndex property provides a quick way to connect to a property a screen reader that uses the tab SHIFT key to quickly query for relevant content area display and hide effects

Solution:

Http://www.zeldman.com/j/nu.js

Function Toggle (Targeted) {

If (Doucument.getelementbyid) {

Targeted = Doucument.getelementbyid (targeted);

If (Target.style.display = "";

} else {

Target.style.display = "None";

}

XHTML section:

<p><a href= "/" onclick= "Toggle (' Outside2 '); return false;" Onmouseover= "changeimages

(' ch ', '/i/p/cho.gif '); return ture;

Title= "Hide or show relevant externals (below)." > Toggle externals </a></p>

To define a CSS rule:

<DL id= "Outside2" style= "Display:none;" >

<dt>relevant externals:</dt>

<dd><a href=http://www.somesite.com titile= "Description" >site names</a></dd>

We write the rules in the CSS outreach table

#outside2 {

Display:block;

}

If you need an element that is not visible on the page but still needs to occupy space

Solution: Visibility:hidden;

Dynamic menu (Drop-down and expand)

Pull-down Menu Solution: http://www.gazingus.org/html/menuDropdown.html

Expanded Menu Solution: http://www.gazingus.org/html/menuExpandable2.html

Browsers that do not support JAVASCRITP scripts, how to achieve normal browsing

WORKAROUND: Insert between

<script type= "TEXT/JAVASCRITP" >

<!--//

If (!doucument.getelementbyid) {

Window.location = http://www.somesite.com/somepage/

}

When the browser does not support JavaScript, window.location jumps to a hint page or a plain Web page that does not require JavaScript scripting