HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Есть несколько элементов, которых нет в HTML, но они есть на странице (к примеру первая буква слова) их называют псевдоэлементами. Псевдоэлементам тоже можно задавать стиль.

К псевдоэлементам относят:

first-letter - стиль для первой буквы слова. Пример:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <p>
    Это текст параграфа, и первую букву мы выделили красным цветом.
    </p>
  </body>
</html>

Перекрасим первую букву параграфа в красный цвет, пишем:

 

p:first-letter{
  color:red;
}

 

Получаем:

Цвет первой буквы first-letter

first-line - стиль для первой строки абзаца. Перекрасим первую строку абзаца в синий цвет. Пишем: 

 

p:first-letter{
  color:red;
}
p:first-line{
  color:blue;
}

 

Получаем:

Цвет первого абзаца first-line

Псевдоклассы

В CSS всего четыре псевдо-класса, псевдо-классы позволяют работать с ссылками. У ссылок бывает четыре состояния:

простая

активная

посещенная

на которую наведен курсор

Чтоб описать стиль для этих ссылок существуют псевдоклассы:

a:link - стиль простой ссылки

a:active - стиль активной ссылки

a:visited - стиль посещенной ссылки

a:hover - стиль ссылки, на которую наведен курсор

По умолчанию ссылки всегда синего цвета и подчеркнуты. Давайте потренируемся:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <a href="#">ссылка</a>
  </body>
</html>

 

Ссылка по умолчанию выглядит так:

 стандартная ссылка

Изменим цвет ссылке на зеленый и уберем подчеркивание:

 

a{
  color:green;
  text-decoration:none;
}

text-decoration - отвечает за подчеркивание, а значение none говорит, что подчеркивать не надо.

 

 изменим цвет ссылке и уберем подчеркивание

Пойдем дальше и изменим стиль ссылки, на которую навели курсор. Пусть она изменит цвет на красный: 

 

a{
  color:green;
  text-decoration:none;
}
a:hover{
  color:red;
}

 

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

HTML шаблоны сайтов

Скачать бесплатно HTML шаблоны сайта с нами легко!

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

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

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

Бесплатные HTML шаблоны