Создание дизайна сайта с нуля. Урок 4

Создание дизайна сайта с нуля. Урок 3
К конце третьего урока мы с Вами подготовили содержимое страницы к настройке стилей. В этом уроке мы будет работать с CSS, задавая цвет, шрифты и прочую красоту.
Итак, откройте Ваш файл CSS. 1. Наведем красоту для верхнего блока. В этом блоке нам нужно выделить заголовок h1. Для этого в файл css добавляем следующие строки:
Кодh1 {
color: #EE1E72;  
font-size: 30px;  
width: 100px;  
overflow: visible;
font-style: italic;
line-height: 30px;
padding-left: 50px;
text-indent: -50px;
margin-top:100px;

}
h1:first-line {
  display:block;  
  overflow:visible;
  color: #000;
  font-size: 50px;  
  font-style: normal;
}
В приведенном выше коде использовались следующие свойства CSS: color, font-size, font-style и некоторые другие. Если с настройками шрифта все понятно, то с остальными свойствами, я думаю на данном этапе у Вас возникло недопонимание. Поэтому вывод заголовка именно двумя строчками я выделила в отдельную статью, которую Вы можете прочитать здесь. 2. Левый блок. Его отличительные моменты:2.1. над блоком жирная черная полоса (свойство CSS border-top)2.2. заголовок черного цвета2.3. первая буква заголовка значительно больше2.4. сам текст розового цвета.Чтобы реализовать все это, добавляем в наш файл CSS следующие строки
Код
.left_block h2 {
border-top:15px solid #000;  
color:#000;
font-style:italic;  
margin:0;}
.left_block h2:first-letter {  
font-size:50px;
margin: 0px 2px 0 0;
line-height: 50px;
float: left;}
.left_block .content{color:#EE1E72;}

Я думаю, все строки в этом коде понятны за исключением, может быть выделения первой буквы псевдоэлементом :first-letter. Если для Вас этот элемент в новинку, то ознакомьтесь со следующими материалами:
— определение псевдоэлемента :first-letter — Делаем красивую заглавную букву
3. Средний блок. Он отличается от левого лишь тем, что цвета заголовка и текста меняются местами, а так же тем, что блок располагается немного ниже левого. Для этого мы используем свойство margin.Строку

Код
.middle_block {width:360px; margin: 0px 20px; height:300px;}  

Меняем на  (увеличиваем отступ и убираем настройки высоты — они нам больше не нужны)
Код
.middle_block {width:360px; margin: 50px 20px 0 20px; }

И добавляем строки
Код
.middle_block h2 {border-top:15px solid #000; color:#EE1E72; font-style:italic; margin:0;}
.middle_block h2:first-letter {  
font-size:50px;
margin: 0px 2px 0 0;
line-height: 50px;
float: left;}

Я думаю, что они уже в пояснении не нуждаются. 3. Правый блок.Задаем розовый фон и настройки заголовка
Код
.right_block {width:220px; margin: 0px 40px; background:#f65788;}
.right_block h2 {font-size:26px; text-transform: uppercase;
text-align: center;}

Фон мы задали, используя свойство background А чтобы в заголовке все буквы были заглавными, мы использовали свойство text-transform: uppercase; 
4. У нас остался последний блок footer. В этом блоке у нас весь текст написан курсивом розового цвета.Заменяем в нашем CSS следующий код:

Код
.footer {width:800px; height:300px;}

на
Код
.footer {width:800px; color:#d72b70; font-style: italic;}

Мы убрали настройки высоты, так как они нам больше не нужны, задали цвет шрифта (color) и его стиль (font-style: italic;)
Ну вот и все, что хотелось сделать на этой уроке. В результате, у Вас должен получиться такой файл CSS:
Файл CSS
А сама страница должна выглядеть вот так:
Результат урока 4
Попробуйте, сделайте и покажите нам!На следующем уроке мы будем вставлять изображения и оживлять таким образом наш сайт.Удачи Вам!
Создание дизайна сайта с нуля. Урок 5

Комментарии на Facebook
Поделиться...

Жми «Нравится» и получай только лучшие посты в Facebook ↓