CSS series style sheet teaching "link attribute overview 』

Source: Internet
Author: User
· A/* All hyperlink */

· A: Link/* hyperlink text format */

· A: visited/* link text format browsed */

· A: active/* Format of pressing the link */

· A: hover/* move the mouse to the link */

· Mouse and cursor style:

· Cross-shaped cursor: crosshair

· Arrow down cursor: S-resize

· Cross arrow cursor: Move

· Arrow toward right cursor: E-resize

· Add a question mark (cursor: Help)

· Arrow toward left cursor: W-resize

· Arrow up cursor: N-resize

· Arrow toward top right cursor: NE-resize

· Arrow toward top left cursor: NW-resize

· Text I-type cursor: Text

· Arrow oblique lower right cursor: Se-resize

· The Arrow is skewed to the lower left. cursor: Sw-resize

· Funnel cursor: Wait

· Cursor pattern (IE6) P {cursor: URL ("cursor file name. cur"), text ;}

Link style example:
Apply "text attribute" to create a hyperlink
In English, the oecspace is in bold, and the mouse moves to see the sample effect. Click Next to view the syntax.

Apply "border property" to create a hyperlink
Move the mouse down the border to see the sample effect, and click View syntax.

Link style Example 3 three-dimensional button Effect
Click to see the sample effect and view syntax

Simple text links can be converted into special three-dimensional buttons with only CSS.
Width: 2 cm;/* link width range */
Indicates the width range of the link text, that is, the size of the button effect.
If you do not set this line of button, it will become irregular according to your link text.
Copy the syntax below between You will see that all links on the web page will become three-dimensional buttons!

Different mouse moves and links are set for the same webpage:
Generally, use a: hover/* move the mouse to the link */to reference this action only for all links on the webpage.
How can I move multiple hovers to a link on a webpage? Let's take a look !!
Multi-link effect: copy the syntax here

The mouse and cursor style can be applied to any label. For example:
Entire webpage body {cursor: E-resize}
All Tables {cursor: E-resize}

Use a pattern mouse cursor for example:
Body {cursor: URL ("mything. cur"), URL ("mything. cur"), text ;}
When the first cursor in the cursor list cannot be processed, it is replaced by the second cursor.
If you cannot process any defined cursor, the cursor will be displayed in general text (the pattern mouse cursor is written as the W3C standard)
| X | mostly write cursor: URL (img/Cu * _ * 4. * NI). This is incorrect.

CSS series style sheets 』:
· Border-top: 1px solid # 6699cc;/* upper box line */

· Border-bottom: 1px solid # 6699cc;/* bottom line */

· Border-left: 1px solid # 6699cc;/* Left box line */

· Border-Right: 1px solid # 6699cc;/* right frame line */

·
The above is the recommended writing method, but the general method can also be used as follows:

· Border-top-color: #369/* set the top color of the upper frame line */

· Border-top-width: 1px/* set the top width of the upper box line */

· Border-top-style: solid/* set the top style of the upper box line */

·
Other box style

· Solid/* solid box */

· Dotted/* dotted box */

· Double/* double box */

· Groove/* three-dimensional convex box */

· Ridge/* three-dimensional convex box */

· Inset/* concave box */

· Outset/* convex box */

Related Article

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.