Стиль css ссылки – CSS-ссылки

14.05.2020 Facebook Twitter LinkedIn Google+ Советы художника

Содержание

Свойства ссылок | htmlbook.ru

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками
СвойствоОписание
A:linkОпределяет стиль для обычной непосещенной ссылки.
A:visitedОпределяет стиль для посещенной ссылки.
A:activeОпределяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hoverОпределяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { 
    text-decoration: none; /* Убирает подчеркивание для ссылок */
   } 
   A:visited { text-decoration: none; } 
   A:active { text-decoration: none; }
   A:hover {
    text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
    color: red; /* Цвет ссылки */
   } 
  </style>
 </head> 
 <body>
    <p><a href="1.html">Пример ссылки</a></p>
 </body> 
</html>

Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
   <style type="text/css">
    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }
    A:hover { 
     text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
     color: red; /* Цвет ссылки */
   } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { text-decoration: none; }
   A:visited { text-decoration: none; }
   A:active { text-decoration: none; }
   A:hover { 
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: red; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { color: blue; text-decoration: none; }
   A:hover { color: red; text-decoration: underline; }
   .link { color: blue; }
  </style>
 </head>
 <body>
  <p><a href="1.html"><span>Ссылка</span></a></p>
 </body>
</html>

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере  6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.

Пример 5. Ссылки разных цветов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }
  </style>
 </head>
 <body>
  <p>| <a href="1.html">Ссылка 1</a> | 
   <a href="2.html">Ссылка 2</a> | 
   <a href="3.html">Ссылка 3</a> |</p>
  </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Разные ссылки на одной странице

htmlbook.ru

Стили ссылок в CSS, примеры создания ссылок CSS

В одном из уроков рассказывалось, как сделать ссылку в HTML. В этом уроке мы поговорим о том какие стили ссылок используются в CSS и на примерах научимся с ними работать.

Как задать стиль ссылке в CSS?

В CSS можно изменить любое свойство ссылок (цвет, шрифт, цвет фона). Также для ссылок можно настроить стили, в зависимости от их состояния:

  • a:link — не посещенная ссылка;
  • a:visited — посещенная ссылка;
  • a:hover — ссылка, над которой находится курсор мыши;
  • a:active — ссылка в момент щелчка мыши.

Пример:

a:link {font-size:12px; color:#ff0000;}
a:visited {font-size:12px; color:#00ff00;}
a:hover {font-size:12px; color:#ff00ff;}
a:active {font-size:12px; color:#0000ff;}

При формировании стилей ссылок следует соблюдать правила:

1. «a:hover» должен определяться только после «a:link» и «a:visited»;
2. «a:active» должен определяться после «a:hover».

При оформлении текста ссылки используют также свойства:

1. text-decoration — задает подчеркивание текста ссылки.

Атрибуты:

  • blink — устанавливает мигающий текст;
  • line-through — создает перечеркнутый текст;
  • overline — линия проходит над текстом;
  • underline — устанавливает подчеркнутый текст;
  • none — отменяет все заданные по умолчанию эффекты;
  • inherit — значение наследуется у родителя.

Пример:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

2. background-color — задает цвет фона ссылок.

Пример:

a:link {background-color:#b2аа99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#gg704d;}
a:active {background-color:#ff7ddd;}

Таким образом, мы рассмотрели стили ссылок в CSS. При создании сайта знать, как работать со ссылками просто необходимо. Стили CSS позволяют предать ссылкам определенное визуальное отображение, что также весьма полезно.

siteblogger.ru

СSS Ссылки

С помощью CSS, стили cсылок могут быть разные.

Текст ссылки Текст ссылки Кнопка ссылки Кнопка ссылки

Стили Ссылок

Ссылки могут быть оформлены в любом свойстве CSS, например:( color, font-family, background и т.п.).

Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.

Четыре сотояния ссылок:

  • a:link — по умолчанию, непосещенная ссылка
  • a:visited — ссылку посетил пользователь
  • a:hover — при наведении курсора мыши на ссылку
  • a:active — на данный момент ссылка нажата

Пример

/* непросмотренная ссылка */
a:link {
   color: red;
}

/* просмотренная ссылка */

a:visited {
   color: green;
}

/* наведение мыши на ссылку */
a:hover {
   color: hotpink;
}

/* активная ссылка */
a:active {
   color: blue;
}

Редактор кода »

При определении стиля для нескольких состояний ссылок, есть некоторые правила порядка:

  • a:hover Должно происходить после a:link и a:visited
  • a:active Должно происходить после a:hover

Оформление Текста

Своиство text-decoration в основном используется, чтобы удалить подчеркивание ссылок:

Пример

a:link {
   text-decoration: none;
}

a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

a:active {
   text-decoration: underline;
}

Редактор кода »

Цвет Фона

Свойство background-color может использоваться, чтобы указать цвет фона для ссылки:

Пример

a:link {
   background-color: yellow;
}

a:visited {
   background-color: cyan;

}

a:hover {
   background-color: lightgreen;
}

a:active {
   background-color: hotpink;
}

Редактор кода »

Дополнительно — Кнопка Ссылки

Этот пример демонстрирует более сложный пример, где мы сочетаем в себе несколько свойств CSS для отображения ссылки в виде блока/кнопок:

Пример

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;
}

Редактор кода »

Еще Примеры

Добавлять различные стили для гиперссылок
Этот пример демонстрирует, как добавить стили для гиперссылок.

Дополнительно — создать ссылку как кнопку в рамке
Еще один пример, как создать, блок/кнопки.

Изменить курсор
Свойство cursor определяет вид курсора на дисплее.
Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылки).

Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »

schoolsw3.com

Свойства и оформление ссылок в CSS

CSS дает возможность по особенному оформлять ссылки на страницах веб-сайта. Эта особенность заключается в том, что ссылки оформляются разными способами в зависимости от состояния, в котором они находятся.

Ссылки могут находиться в 4 состояниях:

Свойства

В каком состоянии будет ссылка

a:linkобычная ссылка, которую пользователь еще не посетил
a:visitedссылка, которую уже посетил пользователь
a:hoverсостояние ссылки, на которую пользователь навел курсор мышки
a:activeактивная ссылка, на которую нажал пользователь

Теперь перейдем непосредственно к самому оформлению ссылок.

Цвет ссылки в css.

С помощью CSS вы можете добавить к каждому свойству цвет ссылки. Смотрите оформление на примере:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {color:#006400;} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>

Разъяснение:

a:link – это свойство ссылки;
color:#006400; — это оформление ссылки, которое ставится между скобками {}.

Результат:

○ не посещенная ссылка a:link будет зеленого цвета;
○ посещенная ссылка a:visited будет желтого цвета;
○ ссылка, при наведении на нее мышкой, a:hover будет красного цвета;
○ нажатая ссылка a:active будет серого цвета.

Цвет фона ссылки в css.

Этот метод часто используется для создания меню или кнопок на веб-сайтах. Для этого воспользуемся правилом background-color.
Для примера пропишем правило background-color для свойства a:link и a:hover.

Пример:


<html>
 <head>
 <title>Свойства и оформление ссылок в CSS</title>
 <style>
a:link {
color:#ffffff;
background-color:#000000;
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover
{color:#000000;
background-color:#FF704D;
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
 </style>
 </head>
 <body>
 <p><a href="#">ссылка</a></p>
 </body>
</html>

Результат:

Если навести курсор мышки на ссылку, то цвет фона ссылки изменится.

Как изменить размер ссылки?

Здесь тоже ничего сложного нет. Для того, чтобы изменялся размер ссылки при наведении на нее мышкой, воспользуемся правилом font-size для свойства a:hover.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {color:#006400;} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover
{color:#FF0000;
font-size: 25px;
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>

Результат:

Если навести курсор мышки на ссылку, тогда ее размер увеличится на 25 пикселей (размер можете выставлять на ваше усмотрение).

Ссылка без подчеркивания.

Также CSS дает возможность сделать ссылку без подчеркивания. Для этого воспользуемся правилом text-decoration для свойства a:link.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {
color:#006400;
text-decoration:none; /* убираем подчеркивание */
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>

Результат:

Ссылка отображается в виде простого слова, без какого-либо подчеркивания.

Если вы хотите сделать, чтобы при наведении курсора появлялось подчеркивание, тогда добавьте правило text-decoration для свойства a:hover.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {
color:#006400;
text-decoration:none; /* уберем подчеркивание */
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {
color:#FF0000;
text-decoration: underline; /* ссылка будет подчеркнутой */
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>

Изменение цвета подчеркивания.

Не знаю, пригодится ли вам этот метод  для сайта, но для общего развития вам нужно это знать.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
A:link { color: #0000FF; text-decoration: none; }
A:hover { color: #cc0000; text-decoration: underline; }
.link { color: #0000FF; }
</style>
</head>
<body>
<p><a href="#"><span>Ссылка</span></a></p>
</body>
</html>

Результат:

Цвет ссылки при наведении на нее мышкой, не изменится, но зато появится подчеркивание другим цветом.

Ссылки разных цветов и размеров.

Бывают такие ситуации, когда на одной странице веб-сайта необходимо использовать ссылки разного цвета и размера.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style type="text/css">
A { font-size: 18px; color: #cc0000; }
A.link1 { font-size: 15px; color:#228B22; }
A.link2 { font-size: 12px; color: #0000FF; }
</style>
</head>
<body>
<p>| <a href="#">Ссылка 1</a> |
<a href="#">Ссылка 2</a> |
<a href="#">Ссылка 3</a> |</p>
</body>
</html>

Результат:

Как сделать изображение ссылкой?

Заменить текстовую ссылку можно изображением (рисунком). Изображение должно быть прописано в коде между тегами <a> и </a>, смотрите в примере.

Пример:


<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style type="text/css">
A IMG { border: 0; } /* убрать рамку для всех изображений */
</style>
</head>
<body>
<p><a href="#"><img src="images/kartinka.gif"
height="40" alt="изображение в качестве ссылки"></a></p>
</body>
</html>

Результат:

Результат, я думаю, и так всем ясен. Картинка становится активной ссылкой.
Этот метод можно использовать для графического меню или кнопок на веб-сайте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, для начинающих, основы

bloggood.ru

CSS стили ссылок,создание ссылок с помощью каскадных таблиц стилей,псевдоклассы CSS для придания ссылкам нужного внешнего вида

Позволю себе напомнить Вам, что ссылки одна из важнейших составляющих интернета. Попробуйте представить себе сайт без навигации, браузер без адресной строки и панели закладок, или электронную книгу без страницы с содержанием. Можно продолжить перечисление, но думаю, Вы и сами понимаете всю важность гиперссылок. Я уже писал о создании ссылок с помощью языка HTML. Однако, CSS стили позволяют более удобно проводить различные манипуляции с созданием ссылок и оформлением их внешнего вида.

CSS стили ссылок для работы используют псевдоклассы — это классы CSS, с помощью которых возможно динамическое изменение состояния веб-объектов во времени, или под воздействием посетителей. Применение псевдоклассов для изменения внешнего вида ссылки в определённый момент — характернейший пример работы последних. Вот основные из таких псевдоклассов (в примере сразу показан и листинг написания):

  • А:hover { параметр: значение; } — вид ссылки при наведённом курсоре мыши.
  • active — вид активной ссылки.
  • visited — вид посещённой ссылки.
  • link — ссылку ещё не посещали (по умолчанию).

Посмотрим, как это выглядит в коде и на скриншоте:

<html>
<head>
<title>hover</title>
<style type=»text/css»>
a:link {
color: #ff50dc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #018000;
}
a:visited {
color: #ff7625;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href=»#»>Неактивная ссылка</a></p>
<p><a href=»#»>Ссылка при наведённом курсоре</a></p>
<p><a href=»#»>Посещённая ссылка</a></p>
</body>
</html>

На рисунке видно, что убрано подчёркивание в непосешённых и посещённых ссылках, а при наведении курсора мыши подчёркивание появляется.

Теперь позволю себе напомнить понятие состояния ссылок.

  • Ссылка считается активной в момент нажатия на нее курсором мышки, данный момент очень незначителен по времени, и я не вижу смысла в применении данного значения.
  • Посещённой ссылка становится после перехода по ней на указанный адрес.
  • Неактивная ссылка — это ссылка в своём обычном состоянии, когда с ней не производится никаких действий.
  • Ну, и ссылка в момент наведения на неё курсора в объяснении не нуждается.

Управление ссылками с помощью стилей CSS возможно и без использования псевдоклассов. Делается это с помощью обращения CSS стилей ссылок к тегу А. Данный приём используется для задания ссылкам одинаковых параметров при любых состояниях (при желании не выделять ссылки из всего текста), или для определения лишь неактивных ссылок, с последующим использованием псевдоклассов. Допускается применение сокращённой записи при задании свойств CSS для тега А. Давайте посмотрим пример:

<html>
<head>
<title>link</title>
<style type=»text/css»>
a {color:black; text-decoration:none;}
a:hover {
text-decoration: none;
color: #018000;
background-color: #ffe7d8
}
a:visited {
color: #ff7625;
text-decoration:line-through;
}
</style>
</head>
<body>
<p><a href=»#»>Неактивная ссылка</a></p>
<p><a href=»##»>Ссылка при наведённом курсоре</a></p>
<p><a href=»###»>Посещённая ссылка</a></p>
</body>
</html>

Применение других параметров CSS стилей к оформлению ссылок, расположенных, например в составе меню, различных отступов, рамок, фонов и т.п. будет рассмотрено отдельно. А пока всё.

prostoyblog.ru

CSS стиль ссылки — свойства и оформление анкора

О том, что представляют собой ссылки в HTML, я уже подробно рассказал. С точки зрения CSS работать с тегом <a> можно, как и с любым другим HTML-тегом. Для ссылок в таблицах стилей предусмотрено четыре специальных псевдокласса. От классов псевдоклассы отличаются тем, что по факту они прикреплены не к тегам, а к событиям или правилам. Изменить рамку поля, в которое сейчас вводится текст, подчеркнуть красным неправильно заполненные поля формы, задать отдельное оформление тексту, написанному на другом языке — всё это и многое другое могут псевдоклассы. От прочих типов селекторов они отличаются двоеточием в начале: :read-only.

Так вот, для оформления ссылок используется четыре псевдокласса:

  • :link — ссылка, по которой ещё не переходили.
  • :hover — ссылка, над которой сейчас находится курсор мыши.
  • :active — ссылка, которую в данный момент нажимает пользователь.
  • :visited — посещённая ссылка, то есть та, по которой уже переходили.

Всё остальное — уже изученный и ещё не пройденный материал, имеющий к ссылкам такое же отношение, как и к другим элементам HTML.

Код ниже демонстрирует оформление ссылок в зависимости от перечисленных выше четырёх событий.

<!DOCTYPE html>
<html>
<head>
    <title>Ссылки</title>
    <style type="text/css">
	a:link {
	 color: #DC143C;
	}
	a:hover {
	 color: #FF00FF;
	 text-decoration: none;
	 font-size: 18px;
	}
	a:active {
	 color: #FFFF00;
	 text-decoration: overline;
	}
	a:visited{
	 color: #228B22;
	 text-decoration: none;
	}
	</style>
</head>
<body>
<a href="#">Ссылка, ведущая сама на себя. Подведите к ней курсор, подержите нажатой кнопку мыши, отпустите. Всё это время наблюдайте за изменениями.</a>
</body>
</html>

Разберём стилевое оформление.

color: цвет — меняет цвет ссылки в зависимости от того, нажали её или нет, только подвели к ней курсор или уже по ней перешли.

text-decoration: none; — убирает заданное ссылкам по умолчанию подчёркивание текста.

font-size: 18px; — меняет размер шрифта ссылки в момент, когда к ней подводится курсор. В момент нажатия ссылки размер шрифта не меняется и остаётся равным 18px, так как пользователь, нажимая ссылку, по-прежнему не убирает с неё курсор мыши, а псевдоклассу :active другой размер шрифта не задан.

text-decoration: overline; — зато свойству :active задано отличное от псевдокласса :hover правило декорирования текста. Именно поэтому в момент нажатия ссылки появляется надчёркивание, тогда как при наведении курсора без щелчка ничего нет.

Полезные ссылки:

www.seostop.ru

HTML Стили

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента </p>:

Пример: применение стилей к элементу <p>

Текст с атрибутом style
<p>
Текст с атрибутом style</p>

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

  • Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.
  • Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега <style>, который обычно располагается в разделе <head> HTML-документа .
  • Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.

Давайте познакомимся со всеми тремя способами на конкретных примерах.

Внешняя таблица стилей

Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам. Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.

CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:

p {
  color: red;
}

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.

Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:

<link href="styles/style.css" rel="stylesheet" type="text/css">

Пример: Внешняя таблица стилей

Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внешняя таблица стилей</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
  <body> 
    <p>Текст первый</p>
    <p>Текст второй</p>
    <p>Текст третий</p> 
  </body>
</html>

Внутренняя таблица стилей

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

<style type="text/css">
body {
    background-color:palegreen;
}
h2{
   color: blue;
   font-family:verdana;
}
p{
   font-size:20px;
   color:red;
}
</style>

Пример: Внутренняя таблица стилей

Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внутренняя таблица стилей</title>
<style type="text/css">
body {
    background-color:palegreen;
}
h2{
   color: blue;
   font-family:verdana;
}
p{
   font-size:20px;
   color:red;
   text-align:center;
}
</style>
</head>
  <body> 
    <h2>Заголовок</h2>
    <p>Текст первый</p>
    <p>Текст второй</p>
    <p>Текст третий</p> 
  </body>
</html>

В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h2>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.

Встроенный стиль

Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

<p>Параграф</p>

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.

В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:

Пример: Приоритетность стилей

Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Встроенный стиль</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
    background-color:palegreen;
}
h2{
   color: blue;
   font-family:verdana;
}
p{
   font-size:20px;
   color:coral;
}
</style>
</head>
  <body> 
    <h2>Заголовок</h2>
    <p>Текст первый</p>
    <p>Текст второй</p>
    <p>Текст третий</p> 
  </body>
</html>
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления.

Задачи

  • Выравнивание текста по центру

    Используя встроенный стиль к параграфу выровняйте текст по центру.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Выравнивание текста по центру</title>  
 </head>
 <body>
  <p>Это параграф.</p>
 </body>
</html>

  • Цвет фона страницы

    Измените цвет фона всей HTML-страницы на «khaki».

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Цвет фона страницы</title> 
  <style>
    body {background-color:palegreen;}
    h2{color: blue;}
    p{color:coral;}
  </style> 
 </head>
 <body>
  <h2>Заголовок</h2> 
  <p>Параграф</p>
 </body>
</html>

  • Тип шрифта для страницы

    Установите тип шрифта для всех элементов HTML-страницы «verdana».

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Тип шрифта для страницы</title>  
 <style>
    body {background-color:khaki;}
    h2{color: blue;}
    p{color:coral;}
  </style> 
 </head>
 <body>
  <h2>Заголовок</h2> 
  <p>Параграф</p>
 </body>
</html>

  • Внешняя таблица стилей

    В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Внешняя таблица стилей</title>  
 </head>
 <body>
    <p>Параграф первый</p>
    <p>Параграф второй</p>
    <p>Параграф третий</p>
 </body>
</html>

Please enable JavaScript to view the comments powered by Disqus.

wm-school.ru

Comments
Leave Comment