CSS стили Урок 1

CSS стили Урок 1
19 Января 2020

В процессе обучения будем использовать следующий ресурс: 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>




Короткая ссылка на новость: http://webprogr.ru/~wLGaC

Последние новости

MPS
MPS
MRP
MRP
DRP
DRP
Рейтинг@Mail.ru