Главная » Языки программирования

Link States

Содержание
  1. Create links in css
  2. CSS Links
  3. Styling Links
  4. Example
  5. Example
  6. Text Decoration
  7. Example
  8. Background Color
  9. Example
  10. Link Buttons
  11. Example
  12. More Examples
  13. Example
  14. Example
  15. Example
  16. COLOR PICKER
  17. Report Error
  18. Thank You For Helping Us!
  19. HTML Links
  20. HTML Links — Hyperlinks
  21. HTML Links — Syntax
  22. Example
  23. HTML Links — The target Attribute
  24. Example
  25. Absolute URLs vs. Relative URLs
  26. Example
  27. Absolute URLs
  28. Relative URLs
  29. HTML Links — Use an Image as a Link
  30. Example
  31. Link to an Email Address
  32. Example
  33. Button as a Link
  34. Example
  35. Link Titles
  36. CSS Links Tutorial with Examples
  37. 1- CSS Link States
  38. 2- CSS text-decoration
  39. 3- CSS Link Button
  40. View more Tutorials:
  • CSS Text Formatting
  • CSS text-align-last Property
  • CSS text-decoration Property
  • CSS text-decoration-color Property
  • CSS text-decoration-line Property
  • CSS text-decoration-style Property
  • CSS text-indent Property
  • CSS text-justify Property
  • CSS text-overflow Property
  • CSS text-transform Property
  • CSS text-shadow Property
  • CSS letter-spacing Property
  • CSS line-height Property
  • CSS direction Property
  • CSS word-spacing Property
  • CSS Grid Layout Module
  • CSS column-gap Property
  • CSS gap Property
  • CSS grid Property
  • CSS grid-area Property
  • CSS grid-auto-columns Property
  • CSS grid-auto-flow Property
  • CSS grid-auto-rows Property
  • CSS grid-column Property
  • CSS grid-column-end Property
  • CSS grid-column-gap Property
  • CSS grid-column-start Property
  • CSS grid-gap Property
  • CSS grid-row Property
  • CSS grid-row-end Property
  • CSS grid-row-gap Property
  • CSS grid-row-start Property
  • CSS grid-template Property
  • CSS grid-template-areas Property
  • CSS grid-template-columns Property
  • CSS grid-template-rows Property
  • Write an Interview Experience
  • Share Your Campus Experience
  • CSS Tutorial
  • CSS Introduction
  • CSS Syntax
  • CSS Comments
  • CSS Colors
  • CSS Borders
  • CSS Margins and Padding
  • CSS Height and Width
  • CSS Outline
  • CSS Fonts
  • CSS Icons
  • CSS Links
  • CSS Lists
  • CSS Tables
  • CSS Display property
  • CSS max-width Property
  • CSS Positioning Elements
  • CSS z-index Property
  • CSS Overflow
  • CSS Float
  • CSS Align
  • CSS Combinators
  • CSS Pseudo-classes
  • CSS Pseudo Elements
  • CSS Opacity / Transparency
  • CSS DropDowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Counters
  • CSS Website Layout
  • CSS Units
  • CSS | Specificity
  • How to apply !important in CSS?
  • CSS Text Formatting
  • CSS text-align-last Property
  • CSS text-decoration Property
  • CSS text-decoration-color Property
  • CSS text-decoration-line Property
  • CSS text-decoration-style Property
  • CSS text-indent Property
  • CSS text-justify Property
  • CSS text-overflow Property
  • CSS text-transform Property
  • CSS text-shadow Property
  • CSS letter-spacing Property
  • CSS line-height Property
  • CSS direction Property
  • CSS word-spacing Property
  • CSS Grid Layout Module
  • CSS column-gap Property
  • CSS gap Property
  • CSS grid Property
  • CSS grid-area Property
  • CSS grid-auto-columns Property
  • CSS grid-auto-flow Property
  • CSS grid-auto-rows Property
  • CSS grid-column Property
  • CSS grid-column-end Property
  • CSS grid-column-gap Property
  • CSS grid-column-start Property
  • CSS grid-gap Property
  • CSS grid-row Property
  • CSS grid-row-end Property
  • CSS grid-row-gap Property
  • CSS grid-row-start Property
  • CSS grid-template Property
  • CSS grid-template-areas Property
  • CSS grid-template-columns Property
  • CSS grid-template-rows Property
Читайте также:  Http dekanat bsu edu ru blocks bsu portfolio index php

Источник

With CSS, links can be styled in many different ways.

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • a:link — a normal, unvisited link
  • a:visited — a link the user has visited
  • a:hover — a link when the user mouses over it
  • a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self — Default. Opens the document in the same window/tab as it was clicked
  • _blank — Opens the document in a new window or tab
  • _parent — Opens the document in the parent frame
  • _top — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

To use an image as a link, just put the tag inside the tag:

Example

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

Example

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

Tip: Learn more about JavaScript in our JavaScript Tutorial.

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Источник

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

Link is one of the important components of a page. CSS helps you to set up the style for link and highlights the link’s status.

The unvisited status is also referred to as link status, which the default status of a link. It shows that a user never visits the address given by this link.

If a user has ever visited an address, it will save a log in browser’s History. However, browsers also allow users to delete all these history logs.

This status indicates that the user has visited the address given by the link, in other words, a record of this visit in the browser’s History exists.

This is the state when a user moves the mouse pointer over the link. Use the pseudo :hover class to set up style for this state.

Status when a user focuses on a link, for example, the user presses TAB to focus to this link or call HTMLElement.focus() to focus to this link. Use the pseudo :focus class to set up the style for this status.

The status of a link when it is being activated, specifically, the user presses the mouse on the link but does not release the mouse. It is noted that after the user releases the mouse, the link switch to the Focus status.

 /* unvisited link */ a:link, .link < color: red; >/* visited link */ a:visited, .visited < color: green; >/* mouse over link */ a:hover, .hover < color: hotpink; >/* focus link */ a:focus, .focus < color: blue; font-weight: none; >/* selected link */ a:active, .active
 a < outline: none; text-decoration: none; padding: 2px 1px 0; >a:link < color: #265301; >a:visited < color: #437A16; >a:focus < border-bottom: 1px solid; background: #BAE498; >a:hover < border-bottom: 1px solid; background: #CDFEAA; >a:active
       
CSS Link State Example:
 
There are several browsers available, such as Mozilla Firefox, Google Chrome, and Microsoft Edge.

2- CSS text-decoration

By default, links usually have an «underline». We often use CSS text-decoration with the none value to remove this «underline».

 a:link < text-decoration: none; >a:visited < text-decoration: none; >a:hover < text-decoration: underline; background-color: #BAE498; >a:focus < text-decoration: underline; font-weight: normal; >a:active
       
CSS text-decoration
 This is a Link

Below is an advanced example, combining several CSS properties to make a link look like a button.

       
Link Button
 
Apple Facebook Google

View more Tutorials:

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.

  • * * Write quicker HTML5 and CSS 3; productivity hacks with emmet
  • Learning CSS
  • HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects
  • HTML 5 and CSS 3 — tricks and workarounds
  • Ultimate HTML and CSS course for Absolute Beginners 2015
  • HTML CSS JavaScript: Most popular ways to code HTML CSS JS
  • CSS3 Master Series: CSS Animations, Transforms & Transitions
  • CSS Development (with CSS3!)
  • Web Design for Beginners: Real World Coding in HTML & CSS
  • A Web Development Crash Course in HTML5 and CSS3
  • * * Master the Basics of HTML5 & CSS3: Beginner Web Development
  • Create Beautiful Websites with CSS3
  • Mastering CSS3 Colors
  • CSS3 MasterClass — Transformations And Animations
  • * * Beginner Photoshop to HTML5 and CSS3
  • CSS and CSS3 Advanced
  • CSS3: Video QuickStart Guide
  • * * Mastering CSS 3.0 Selectors
  • Step-by-step HTML and CSS for Absolute Beginners
  • Learn Html5 & CSS3 from scratch
  • HTML5 and CSS for Beginner To Expert
  • Create Android and iOS App using HTML, CSS and JS
  • Build Real World Websites from Scratch using HTML5 and CSS3
  • HTML CSS Easy steps to create a web template from scratch
  • HTML5 & CSS3 Site Design

Источник

Оцените статью
© 2024 Программирование