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

В предыдущих уроков мы использовали свойство цвета - color. Свойство color задает цвет текста внутри элемента и оно является наследуемым. Рассмотрим на примере:

 

<html>
  <head>
    <title>css color (цвет)</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Здесь текст параграфа.</p>
    Здесь просто текст.
  </body>
</html>

 

Задаем стиль для body:

 

body{
  color:green;
}

 

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

 

body{
  color:green;
}
h1{
  color:red;
}

 

Ура! Цвет заголовка красный. До этого он был зеленым, потому что унаследовал свойство color от - body.

Т.е. если у элемента не задано свойство color, то оно наследуется от старшего элемента у которого это свойство задано.

Дерево элементов схематично можно отобразить так:

В этом примере для h1 и p предок это элемент body, а для body элемент html. Это принцип наследования.

Цвет можно задавать разными способами:

Именные цвета (red, blue и тп)

Шестнадцатеричные коды цветов (#FF0000)

Десятичные коды цвета в модели RGB (rgb(255, 0, 0))

Пример:

 

body{
  color:green;
}
h1{
  color:#FF0000;
}
h2{
  color:rgb(255,0,0);
}

 

 Фон - background

При помощи background можно задать фон не только странице, но и любому другому элементу. Пример:

 

<html>
  <head>
    <title>css background (фон)</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    Здесь содержимое документа
  </body>
</html>

 

 

 

body{
  background-color:#243CED;
  color:yellow;
}

 

 background-color - задает цвет фона. По умолчанию background-color не наследуется, но если указать значение inherit, то становится наследуемым.

 

background-image - задает фоновое изображение. Пример:

 

body{
  background-image: url(/picture.gif);         <---- Путь к файлу указывается относительно таблицы стилей!
  background-color:#243CED;
  color:yellow;
}

 

 css повторять изображение по горизонтали и вертикали

Мы задали оба свойства: background-image и background-color. Это нужно для случай, если изображение окажется недоступным и тогда будет отображаться фоновый цвет. Когда Вы задаете оба свойства фоновое изображение лежит поверх фонового цвета.

background-repeat - повторения фонового изображения. В качестве изображения можно использовать полноценное изображение или однопиксельную полосу (точку) которая заполнит собой все пространство. Background-repeat указывает, повторять ли изображение и как его повторять. Возможны 4 варианта:

repeat - повторять изображение по горизонтали и вертикали

repeat-x - повторять изображение по горизонтали

repeat-y - повторять изображение по вертикали

no-repeat - не повторять изображение

По умолчанию установлено значение repeat. Давайте посмотрим на остальные значения:

 

body{
  background-image: url(/picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  color:yellow;
}

 

css не повторять изображение

 

 

body{
  background-image: url(/picture.gif);
  background-repeat:repeat-x;
  background-color:#243CED;
  color:yellow;
}

 

css повторять изображение по горизонтали

 

 

body{
  background-image: url(/picture.gif);
  background-repeat:repeat-y;
  background-color:#243CED;
  color:yellow;
}

 

css повторять изображение по вертикали

 

background-attachment - указывает, должно ли изображение прокручиваться или должно оставаться неподвижным. Может иметь два значения:

scroll - фон прокручивается вместе с текстом. Это значение установлено по умолчанию.

fixed - фоновое изображение фиксируется и во время прокрутки текста фон остается неподвижным.

 

Пример:

body{
  background-image: url(/picture.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#243CED;
  color:yellow;
}

 

background-position - задает расположение элемента относительно окна браузера. Пример:

body{
  background-image: url(/picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:50px 50px;
  color:yellow;
}

 css расположение элемента относительно окна браузера

 Выравниваем изображение по горизонтали - по центру, а по вертикали - по верхнему краю страницы: 

body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow;
}

  Выравниваем изображение по центру

 

Ключевые слова для выравнивания:

left -по левому краю

center -по центру

right - по правому краю

top - по верхнему краю

bottom - по нижнему краю

Сокращенная запись для свойств background

В CSS для некоторых свойств возможна сокращенная запись. Для сокращения значения всех свойств перечисляются через пробел в произвольном порядке. Вот пример: 

body{
  background: url(/picture.gif) no-repeat #33CCFF center top;
  color:yellow;
}

 

 

 

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

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

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

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

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

HTML шаблоны