Меню
Спросить
*.{ }

Урок 2. Краски

29 октября 2015
Урок 2. Краски

Сегодня задаем стили первому уроку HTML. Расставим примерно наши блоки, раскрасим страничку и поиграем со шрифтами.

BODY

Задаем элементу body такие свойства:
1. Внешние отступы:0px;
2. Внутренние отступы:0px;
3. Фон элемента:окрашиваем картинкой
Более подробно по третьему пункту, можно покопать самому в гугле или же открыть отдельную статью на нашем сайте =).

  1. body{
  2. margin:0px;
  3. padding:0px;
  4. background:url(image/body.png);
  5. }

.HEADER

Стили для блока div с классом header:
1. Фон элемента: просто цвет, в данном случае какой-то фиолетово-розовый, пурпурный что-ли;
2. Цвет шрифта:белый;
3. Размер шрифта:36pt;
4. Позиционирование:абсолютное;
5. Относительно верха:0px;
6. Относительно левого края:0px;
7. Относительно правого края:0px;

  1. .header{
  2. /*border:1px solid red;*/
  3. background:purple;
  4. color:white;
  5. font-size:36pt;
  6. position:absolute;
  7. top:0px;
  8. left:0px;
  9. right:0px;
  10. }

.HEADER_TEXT

Стили для элемента div с классом header_text:
1. Ширина:300px;
2. Внешние отступы со всех сторон:10px;
3. Прижать к краю:к левому;
4. Положение текста:по центру;

  1. .header_text{
  2. /*border:1px solid red;*/
  3. width:300px;
  4. margin:10px;
  5. float:left;
  6. text-align:center;
  7. }

.NAVIGATE

Стили для элемента ul с классом navigate:
1. Позиционирование:абсолютное;
2. Положение относительно верха:150px;
3. Прижать к краю:к левому;
4. Цвет фона:аналогично .header;
5. Цвет шрифта:белый;
6. Размер шрифта:20px;

  1. .navigate{
  2. /*border:1px solid red;*/
  3. position:absolute;
  4. top:150px;
  5. float:left;
  6. background:purple;
  7. color:white;
  8. font-size:20px;
  9. }

LI

Стили для элемента li, который находится у родителя с классом navigate, то есть его родитель это ul с классом navigate. Почему родитель? Потому что он находится внутри него :D.
1. Внутренние отступы со всех сторон:5px;
2. Внешние отступы со всех сторон:5px;

  1. .navigate li {
  2. /*border:1px solid red;*/
  3. padding:5px;
  4. margin:5px;
  5. }

.CONTENT

Стили для элемента div с классом content:
1. Позиционирование:абсолютное;
2. Относительно верха:130px;
3. Относительно левого края:300px;
4. Ширина:1000px;
5. Цвет фона:пурпурный;
6. Цвет шрифта:белый;

  1. .content{
  2. /*border:1px solid red;*/
  3. position:absolute;
  4. top:130px;
  5. left:300px;
  6. width:1000px;
  7. background:purple;
  8. color:white;
  9. }

.FOOTER

Стили для элемента div с классом footer:
1. Позиционирование:абсолютное;
2. Цвет фона:все таки пурпурный;
3. Цвет шрифта:все еще белый;
4. Ширина:1000px;

  1. .footer{
  2. /*border:1px solid red;*/
  3. position:absolute;
  4. background:purple;
  5. color:white;
  6. width:1000px;
  7. }

Заключение

Итак, у вас должно получиться похожее на это, но ни кто не запрещает играть с другими цифрами, или цветами, или вообще капитально другие стили использовать =)

Было

Страница html

Стало

Страница html

Учитесь читать код, не копировать, писать вручную, пишите, добавляя по одному свойству, и смотрите изменения, происходящие с элементами, так быстрее поймете и научитесь =).
Всем спасибо!

Следующая статьяПредыдущая статья