<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
/** represents select all elements */
#d6 {font-size:14px;
Color: #000;
Font-family:georgia, "Times New Roman", Times, serif;
Font-weight:bold;
}
#d div{color: #3F0;}
span,div{Text-decoration:underline}
div.c1{Text-align:center}
#p1 {width:300px;
height:300px;
Background-color: #303;
position:fixed;
right:0px;
bottom:0px;
Opacity:0.5;-moz-opacity:0.5;filter:alpha (OPACITY=50);
box-shadow:100 100px #000000;}
. l2{Float:right;}
#z1 {width:200px; height:50px;
Background-color: #6FC;
Text-align:center;
Vertical-align:middle;
line-height:60px;}
. z2{Float:left;
width:40px; height:50px;
Background-color: #F09;
Color: #000;}
</style>
<body>
<div id= "D" style= "border:5px solid #F69;" > Generation II Generation III ASDE
<div> Next Generation </div>
<div> descendants two </div>
</div>
<div><marquee direction= "left" style= "Z-INDEX:+10;" > Scrolling Effects </marquee></div>
<div><marquee direction= "Right" style= "z-index:-5" ></marquee></div >
<span>
<mark> Apple </mark><!--keyword effects, special handling, default yellow, late use style to change-the company released the IPONE7, the headphones were spit groove
</span>
<div id= "D8" style= "font-size:20px" > Accurate control </div>
<div class= "C1" > First </div>
<div class= "C1" > Second </div>
<div class= "C1" > Third </div>
<div class= "C1" > Fourth </div>
<div class= "C1" > Fifth </div>
<div class= "C1" > Sixth </div>
<span> this is span1</span>.
<span> this is span1</span>.
<span> this is span1</span>.
<span> this is span1</span>.
<span> this is span1</span>.
<span> this is span1</span>.
<div>
Format of the style:
Style name: The value of the style
Multiple styles separated by semicolons
Priority of the selector:
Tag Selector (span div) >* (All)
Clasa Selector > tag Selector
ID selector >class Selector
Id>class> label >*
</div>
<div id= "d5" style= "width:300px; height:200px; Background-color: #6F9; Position:absolute; left:500px; top:80px; z-index:-2; " ><b> Test Text </b></div>
<div id= "d6" style= "text-decoration:none; font-size:36px; " > Hello
<a style= "Text-decoration:none" href= "1.jpg" > Hyperlinks </a>
</div>
<br>
<div id= "N1" style= "width:600px; height:600px; Background-color: #000; border:5px solid #609; Color: #FFF; box-shadow:0 0 50px #000000; " > Mobile Computer The cost of the first woman 40 enlighten
<div style= "width:400px; height:400px; Background-color: #6F0; margin:100px 100px 100px 100px; border:1px solid #0CF; box-shadow:0 0 50px #33FF00; " >
<div style= "width:0px; height:0px;
margin:100px 100px 100px 100px;
border-top:100px solid #0CF;
border-bottom:100px solid #6FF;
border-left:100px solid #F30;
border-right:100px solid #0FF;
box-shadow:0 0 50px #FFFF00; " >
</div>
</div>
</div>
<ul style= "list-style:outside;" >
<li> looks okay haha </li>
<li> looks okay haha </li>
<li> looks okay haha </li>
<li> looks okay haha </li>
</ul>
<div id= "P1" ></div>
<div id= "L1" >
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
<div class= "L2" ></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id= "Z1" >
<div class= "Z2" > A </div>
<div class= "Z2" > Two </div>
<div class= "Z2" > Three </div>
<div class= "Z2" > Four </div>
<div class= "Z2" > Five </div>
</div>
</body>
CSS style for learning notes (selector background font border absolute/relative, fixed position and layered flow, etc.)