<HTML><Head> <MetaCharSet= "utf-8"> <title>selectors, links, box models, Show hidden elements</title><style>A:link{Color:Red;}a:visited{Color:Black;}a:hover{Color:Blue;}a:active{Color:Green;} </style> </Head><Body><!--Link Settings - <ulstyle= "list-style:none"><Li><ahref="#"ID= "link">A:link the style red before the link is not accessed</a></Li><Li><ahref= "http://www.baidu.com"ID= "visited">a:visited link visited style black</a></Li><Li><ahref="#">a:hover Mouse hover over a linked style blue</a></Li><Li><ahref="#"style= "text-decoration:none">the link to the a:active activity, which is the link to the focus (E.G. Click the left mouse Button) green</a></Li></ul><HR/><!--Selection Character -CSS selector------six choices wildcard with selector (*) * {color:red; }<BR/>type selector (html tag) a{text-decoration:none;}<BR/>contains selectors (spaces) Li span{color:red; font-weight:bold;} <BR/>ID selector (#) #p1 {color:red;}<BR/>class Selector (.). Center {text-align:center; width:200px; Border:solid 1px #ccc;}<BR/>pseudo-class selector (:) a:linka:visiteda:hovera:active<BR/><HR/><!--Box Model -Box Model<BR/>describes a rectangular box formed by an HTML Element. <BR/>margin (margin) margin:20px 15px 10px 5px;<BR/>Border (border) Border: [border-style] [border-width] [border-color] Border:solid 5px #ccc;<BR/>If you need to precisely control the style of each border, you can set the following properties: Border-left-style/border-left-width/border-left-color<BR/>border-style values are: none, dashed, dotted, double, groove, inset, outset, ridge, Solid<BR/>internal margin (padding) padding:10px 20px;<BR/>width and height (width/height) <BR/><BR/>Offset Amount<BR>--------------------------------------------<BR/>| margin ______________________________ |<BR/>| | border ______________________ | |<BR/>| | | padding __________ | | |<BR/>| | | | | | | |<BR/>| | | | | | | |<BR/>| | | | | | | |<BR/>| | | |_________| | | |<BR/>| | |_____________________| | |<BR/>| |_____________________________| |<BR/>| |<BR/> --------------------------------------------<BR/><HR/><!--Show hidden elements -Display<BR/>--block<BR/>--the Default value of the block Object. The new row is added after the Object. <BR/>--none<BR/>--hide Objects. Hidden objects do not occupy the physical space. <BR/>--inline<BR/>--the Default value of the inline Object. The row is not added after the Object. <BR/><BR/>Visibility<BR/>--visible<BR/>--object Visibility<BR/>--hidden<BR/>--object hidden, hidden objects occupy physical space<BR/><BR/>display:none; the difference from visibility:hidden? <BR/>display:none; do not occupy page space<BR/>visibility:hidden; occupy page space<BR/><BR/></Body></HTML>
CSS selector, link, box model, Show hidden elements