CSS development manual

Posted by john
11/28/2007
Related Tags:
css manuals  css templates  CSS effect  css style  css download  css style sheet  css button  css fillet  css learning  css vertical middling  css games  css menu  css float  xhtml css  CSS Font  CSS Border  css Margin  css Padding  CSS List  CSS Table  css background  css fonts  css borders  what is the css  css editor  css hack  Baidu space css  css transparent  css clear  css Chinese manual  css filter  css rolling  css navigation  css li  css dotted line  css spaced  css files  css form css links css table  css shadow css fonts  css drop-down menu  css position  css css navigation of the book  css language dreamweaver css  asp css  css attributes  css example  css Notes css inheritance  css padding  css gradual  css Auto-trip xhtml css  css grammar  css custom templates  css input  css middling  css important  css ul  css overflow  css entry  css link  css positioning proficient  css background image  css expression  css space  css tab  css map  css display  css margindiv  css bold  css zen garden  css authoritative guides  css  css hover  css mandatory for firms 

  css development manual wrote: nilxin 

  Based on articles: 

  A choice of three styles attribute selector p (color: red;) category selector. P (color: red;) id selector # p (color: red;) 2. TransparentBackground: transparent; prevent definition covering Background Third, Netscape4.X (IE/WINDOWS4.0 previous version) wrong transparent background understanding Background: inhrit in netscape4.x under transparent background will be understood as black Green 4, the default Font options: body () in order Call The default font different platforms 5, how to solve the browser does not support the use of the CSS group selector such as: p, td, ul, ol, li, dl, dt, dd (font-size: small;) 6, the use of netscape4 friendly Rules Body () p, td, ul, ol, li, dl, dt, dd (font-size: small;) 7, methods Heavy details rules: Body () p, td, ul, ol, li, dl , dt, dd (font-size: small;) p () 8.30, content (derivative) 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;) for example:. fancy (color: red;). fancy p (color: blue;) / li.fancy (color: black;) 

  CSS embedded 

   First, outreach 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: @ import for the use of the following IE4.0 browser shielding 2, embedded style sheet: <head> <style type =" text / css "> <! --Body (color: red;) - -> </ style> </ head> Note: To IE3 visited site, we can use the embedded style sheet (proposed in the use of the pages After the success of the shear outreach to the style sheet)  

  CSS layout application mixed 

   Www.i3forum.com a Margin (from the box) Padding (from the border) margin attribute order: on the lower left Right Padding attribute order: left right on the margin: 25px 0 25px 0; initials: margin: 25px 0; II Display Showing attribute (1), none Display Properties (hide). alt (display: none;) <span class="alt"> Content List Part </ span> (2), Display attribute block (block / regional) (Img display: block;) <img href="1.gif"> </ img> block-level elements: the existence of its "box", to follow behind a car back to the default of elements: the flow is part of the back not to follow Enter (3), Display Properties inline distinction block elements, the use of inline state, in accordance with the display shows that three elements, dynamic link attribute: 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) modified text attributes (text-decoration) Text-decoration: underline overline none; Underline: a link Overline underlined: a link on the line None: no connection underscore (2) Dynamic Link Attribute order (LVHA) - LoVe-HA!      (3) IE / WINDOWS camouflage should avoid the use of a deceptive: active properties: a bug will connect four freezing phenomenon, how to set up a high line (line-height) Line-height: 1.5; V. How to set the location of the article (text - align) selectable attributes (left middle right) IE6/WINDOWS BUG will be wrong to the center six documents, fonts, CSS complete application Font: 13px/1.5 Georigia, "New Centeury Schoolbook," Times, serif; seven, set Limits of the pages (1) vertical-align: middle; equivalent <td valign = "middle"> Vertical Alignment settings  (2) background: none equivalent background: url (images/1.gif) repeat; 8, display equipment installed <style type="text/css" media="screen"> media properties  

   HTML4.01 switch to the use of transitional  xhtml1.0 transition 

   (Based on the early core Gecko browser such as: netscpae6.0 Mozilla1.0) in the core Gecko browser CSS gap removal rules are as follows: Img (display: block;) use block-level elements of a Clear gap. Inline (display: inline ;) use of the elements displayed in the pages are as follows: <img class = "inline" alt = "/" /> also available Td img (display: block;) Second, as the default Gecko core img within the processing function, The elements below the default left blank, which is covered by the order to block letters down the outflow of space  

  Box Model, Bug and work areas 

   CSS four areas: content, from the border, Border and the border set up in the use of CSS forms before: (width: 400px; height: 75px;) erroneous interpretations: Form area = 400 px; height: 75px; actually set up the CSS form : Width: 400px height: 75px Content for the entire contents of the box area: Content + padding border * * 2 + 2  

   Failure mode and box solutions: (IE4 to IE5.5/Windows) correctly understand the browser box model (IE6/WIN, IE5/MAC, Netscpae6 +, Mozilla, Chimera, Kmeleon, Opera5 +) Float floating attribute to the use of the two different ID selector connected in the (float: left;) padding for the use of the forms will be using the following solutions:  

  Oprea friendly rules (Box box model) 

   The 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; / * be nice to Opera * /)  

   IE on the blank Bug  

  Solution: indented code <td> <a href="#foo"> <img src="1.gif" alt="/" /> </ a> </ td> 

   IE6/Windows Bug floating on the solution: the use of JavaScript id: content If (document.all & window.attachEvent) Windows.attachEvent ( "onload" fixWinIE); Fuction fixWinIE () (If (doucument.all.cotent. offsetHeight) (Doucument.all.content.style.display = "block";))  

  The embedded Flash Bug: 

  The solution: XHTML embedded in the code below: <object type: "application / x-shockwave-flash" data = "movie.swf" Width = "400px" Height = "300px"> < 

  Parma name = "movie" value = "movie.swf"> </ object> 

  Flash blank failure (IE / WIN 5,5.5,6 Version) 

  The solution: the use of JavaScript doucuemnt to deceive-tested system 
   <script Type="text/javascript">  
   / / [CDATA [  
   If (navigator.mimeTypes & navigator.mimeTypes [ "application / x-shockwave-flash"]) (  
   Doucument.write ( '<object src = "/ media / yourflashmovie.swf"…… </ object ");  
   )  

  Keyword Fahrner: (IE5.x/Winodws provide pseudo-keywords) 

  The solution: P (font-size: x-small; / * flase value for WinIE4 / 5 * / Voice-family: "\") \ "";/* trick WinIE4 / 5 into thinking the rule is over * / Voice - familt: inherit; / * recover from trick * / Font-size: small; / * intended value for better browsers * /) Html> p ( 
   Font-size: small; / * be nice to opera * /)  

  Distinction between alt attributes and attribute title 

  Alt: Notes documents do not show Title: documents do not show that the Notes 

  Improve accessibility (WAI and 508 articles) 

  Bobby's visit testing 

  Http://bobby.watchfire.com website will help you to adapt to 508 or articles WAI 

  Non-users with a choice of mouse 

   The solution: the use of JavaScript <form action="fooaction"> <input type="button" onclick="setActiveStyleSheet('default'); Return false; onkeypress="setActiveStyleSheet('default'); Return false; />  

   Onkeypress for non-users on the mouse equivalent onclick  

  The user can not use JavaScript 

  <noscript> <P class = "vs    15 "> <a href="/daily/1.html"> </ a> </ p> </ noscript> 

  Tabindex attributes connected to provide the quickest way to attribute 

  Tab Shift keys use of the screen reader can quickly search the contents of 

  Regional display and hidden effect 

   The 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 parts:  
   <p> <A href = "/" onclick  = "toggle ( 'outside      2 '); return false; "onmouseover =" changeImages  
   ( 'Ch', '/ i / p / cho.gif'); return ture;  
   Title = "hide or show Relevant Externals (below)."> Toggle Externals </ a> </ p>  
   Definition of CSS rules:  
   <Dl id = "outside      2 "style =" display: none ">  
   <dt> Relevant Externals: </ dt>  
   <dd> <a Href= http://www.somesite.com titile="Description"> Site NameS </ a> </ dd>  
   We write the rules CSS outreach table  
   (# Outside2  
   Display: block;  
   )  

  If you need an Element of the page is not visible but still occupy its space 

   The solution: visibility: hidden;  

   Dynamic Menu (drop-down and start)  

   The drop-down menu solution: http://www.gazingus.org/html/menuDropdown.html  
   Expansion menu solution: http://www.gazingus.org/html/menuExpandable2.html  

   Javascritp script does not support the browser, how to achieve normal browser  

   The solution: In "head> </ head> inserted between  
   <script Type="text/javascritp">  
   <! - / /  
   If (! Doucument.getElementById) (  
   Window.location = http://www.somesite.com/somepage/  
   ) When the browser does not support Javascript, window.location will be redirected to a page or tips do not need Javascript is a pure web script  

  Zhuaitie from: 
  Greenerycn views: very good article, added a lot of things I do not know. Zan! 




Related articles:

Web2.0 technologies, including what
  The concept of the Web2.0, usually a typical case eb2.0 site, with some eb2.0 related technologies that these Web2.0 technologies include: blog (BLOG), RSS, Encyclopedia (Wiki ), net extraction, social networks (SNS), P2P, instant messaging (IM).      Web2.0 Below is a brief intr...
Dreamweaver 4 tips
  How to import data tables DW?    Ojbect pane of Tubalar Data insert a data form, the data from an external file into, such as Microsoft Excel.    This feature is not commonly used.    But properly used can be a great convenience.    He and File> Imp...
Cool 3d and Flash together create 3D titles
  Filed produced titles, many of my friends think of is a three-DS Max, Primiere software.    But for those of us rookie, in order to produce a highly titles go to school so the software is obviously unrealistic.    Then we give up the dream of titles?    No! ...
Flash MX 2004 upgrade AS improvement is key
  July 26, Macromedia Flash MX 2004 release of the upgrade, the new update of the original 2004 document in many BUG, function better, the following excerpt from the upgraded version of Macromedia Flash MX 2004 documents the latest improvements Description:    An increase of more tha...
JS achieve Jump code: multiple domain names at the same space
  <script> Try (if (self.location == "http:// a domain name /") (    Top.location.href = "http:// a domain name / directory";    )    Else if (self.location == "http:// domain b /") (    Top.location.href = "ht...