CSS Links
With CSS, links can be styled in many different ways.
Styling Links
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;
>
Link Buttons
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):
COLOR PICKER
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.
WEBTEORETIK
Когда человеку тяжело,
это часто означает,
что он идёт к успеху.
Подключение медиа-запросов
Категория: Адаптивная верстка Просмотров: 12428 Коментариев: 4 Дата: 2017-02-05 Добавил: admin
В этой статье будет рассказано то, без чего не возможна адаптивная верстка, т.е. без свойства тега viewport. Благодаря этому тегу окно просмотра изменяется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера. Если раньше все страницы были рассчитаны только для компьютеров и имели статический дизайн и фиксированный размер, то сейчас требуется адаптировать страницы под все мобильные устройства, т.е. под их размеры экранов.
Тег viewport — представляет собой элемент, предоставляющий браузеру инструкции о том, как контролировать размеры страниц и их масштабирование.
Значение мета тега можно записать двумя способами:
Способ 1:
Значение width=device-width в мета теге, информирует браузер о том, что область просмотра контента равна ширине экрана мобильного устройства.
Способ 2:
Можно задать данное значение и следующим образом, к примеру: width=480px:
Так задавать значение не рекомендуется, из-за того, что различные смартфоны могут иметь различную ширину экрана. Поэтому, рекомендуется использовать запись, которая показана в первом варианте. После указания данного мета тега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и адаптировать наш сайт. Но для того что бы начать это делать разберемся как указывать (подключать) медиа-запросы к CSS файлу.
1. Способ.
Где styles это название каталога, в котором располагается уже сам файл style.css, в котором мы и делаем медиа-запрос.
@media screen and (max-width:размер экрана в px)
Еще про медиа-запросы можно найти тут.
2. Способ.
В этом способе мы можем использовать много CSS файлов со стилями, которые подключаются только при определённом заданном размере экрана. И так подключается данный файл вот таким образом:
В HTML между тегами и указываем подключение стилей как обычно, через тег .
Далее указываем атрибут media где прописываем, что only (Все) — screen (возможные значения экрана) — у которых ширина экрана меньше или равна 700px будет применяться файл (style.css) с стилями которые будет содержать этот файл.
И третий способ, это где наши медиа-запросы подключаются через @import и делается это следующим образом:
@import url(style.css) (max-width:700px);
И так, что тут происходит: мы указываем импортируемый файл со стилями style.css и затем указываем ширину при которой он будет использоваться. Я рекомендую использовать LINK для удобства, т.к. всегда нужно помнить, что @import нужно всегда размещать в самом верху блока стилей, в противном случае их импорта не произойдет.