CSS selector, link, box model, Show hidden elements

Source: Internet
Author: User
Tags visibility

 <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)&nbsp;&nbsp;margin:20px 15px 10px 5px;<BR/>Border (border)&nbsp;&nbsp;Border: [border-style] [border-width] [border-color]&nbsp;&nbsp;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)&nbsp;&nbsp;padding:10px 20px;<BR/>width and height (width/height)&nbsp;&nbsp;<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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.