CSS стили Урок 1
В процессе обучения будем использовать следующий ресурс: http://htmlbook.ru/css
Он содержит справочник всех тегов CSS.
Есть еще справочник html тегов, но их отдельное изучение не целесообразно в связи с тем что без css они практически не используются. Мы их изучим в процессе изучения css.
Рассмотрим структуру html:
html разметка основывается на тегах - ключевых словах заключенных в угловые скобки.Любой документ html начинается с указания языка который мы будем использовать:
<!DOCTYPE HTML>
Далее следует открывающий тег :
<html>
А в самом конце документа соответственно закрывающий тег </html>.
Закрывающий тег содержит дополнительно знак наклонной черты.
Область между тегами, может содержать другие включенные в нее теги.
В частности внутри тега head обязательно должны содержаться соотвественно открывающий и закрывающий теги
<head>
</head>
и
<body>
</body>
Область внутри тега
<head>
</head>используется для указаний браузеру как ему интерпретировать всю страничку целиком.
Например можем указать используемую кодировку:
<meta charset="utf-8">
И заголовок закладки браузера:
<title>заголовок закладки браузера</title>
Внутри тега
<body>
</body>
располагается сами элементы размещающиеся визуально на странице.
Таким образом минимальный код html разметки выглядит следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
</head>
<body>
</body>
</html>
Рассмотрим также теги ссылки на другие странички
<a href="link1.html">Ссылка</a>
и абзаца
<p>
</p>
Обратите внимание, что рядом с заголовком тега могут находится параметры отвечающие за настройки тега, в частности у ссылки это адрес на который указывает ссылка href="link1.html"
href - название атрибута (настройки).
link1.html - название документа на который перенаправится пользователь при клике. Его необходим заключить в кавычки.
text-decoration-color
Позволяет сделать отличным от цвета основного текста цвет линии которая обрамляет ссылки в html верстке.Рассмотрим пример содержащий две ссылки
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Копируем выше приведенный код в текстовый файл, сохраняем с расширением html и открываем при помощи любого современного браузера.
Как мы можем наблюдать цвет линии под текстом ссылки совпадает с цветом самого текста.
Рассмотрим пример, где установим в качестве цвета ссылки зеленый цвет, добавив соответствующий стиль в область стилей в html разметке.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration-color</title>
<style>
a {
text-decoration-color: green;
}
</style>
</head>
<body>
<p>
<a href="link1.html">Ссылка</a>
</p>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Воспользуемся форматом RGB для определения цвета и установим ярко красный цвет
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
<style>
a {
text-decoration-color: #F00;
}
</style>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Тег border
Тег border дает возможность указать цвет, внешний вид и толщину обрамляющей элемент рамки. Значения, определяющие внешний вид рамки могут располагаться в любом порядке, разделяемые знаком пробела. Имеются также теги влияющие на внешний вид любой из частей рамки левой, правой, верхней, нижней. Для этого достаточно добавить к тегу знак дефис и соответвующее название стороны на английском языке - это еще четыре независимых тега.
Воспользуемся предыдущим примером, но добавим для наглядности еще один абзац с ссылкой:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
<style>
a {
text-decoration-color: #F00;
}
</style>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<p>
<a href="link1.html">Ссылка для рамки</a>
</p>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Заключим средний абзац в блок div:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
<style>
a {
text-decoration-color: #F00;
}
</style>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<div>
<p>
<a href="link1.html">Ссылка с рамкой</a>
</p>
</div>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Добавим атрибут class с любым на наш вкус именем:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
<style>
a {
text-decoration-color: #F00;
}
</style>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<div class="border-for-link">
<p>
<a href="link1.html">Ссылка с рамкой</a>
</p>
</div>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
Чтобы определить рамку добавим следующие стили для созданного нами класса:
.border-for-link {
border: 3px solid #00D; /* Определяем границу */
background: red; /* Установим цвет фона */
padding: 12px; /* Укажем отступ, определяющий растояние до рамки */
}
Итоговый код будет выглядеть следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS тег text-decoration-color</title>
<style>
a {
text-decoration-color: #F00;
}
.border-for-link {
border: 3px solid #00D; /* Определяем границу */
background: red; /* Установим цвет фона */
padding: 12px; /* Укажем отступ, определяющий растояние до рамки */
}
</style>
</head>
<body>
<h1>CSS тег text-decoration-color</h1>
<p>
<a href="link1.html">Ссылка</a>
</p>
<div class="border-for-link">
<p>
<a href="link1.html">Ссылка с рамкой</a>
</p>
</div>
<p>
<a href="link1.html">Еще одна ссылка</a>
</p>
</body>
</html>
