Окончательная сборка

На этом шаге мы соберем все стили, которые использовались в нашем html-документе, и перенесем их в отдельный файл mysite7.css. Этот навык понадобится в дальнейшем, когда у вас будет много документов, много стилей и когда их трудно будет запомнить и согласовать в разбросанном виде.

(C o p y r i g h t) a r u l . r u
Следует отметить следующее.
В голову документа добавлен тэг LINK, который подключает к нашему файлу mysite7.html таблицу стилей mysite7.css:

  <link rel="stylesheet" href="mysite7.css">

Элементам DIV каркаса присвоены id="wrap" и id="main" для того, чтобы описать их стили в файле стилей.
 

(C o p y r i g h t) a r u l . r u
В процессе переноса стилей появилась пара новых обозначений, о которых не говорилось.

Это расширенный класс в файле mysite7.html в элементе pg-footer, который записывается так

  class="foot  left"

Имя класса c пробелом означает, что на стили класса foot накладываются стили класса left

И еще новый селектор в файле mysite7.css, когда два класса записаны слитно без пробела

  .foot.left { .. }

Эта запись означает, что данные стили применяются к элементам
класса foot, расширенного классом left (как раз для того случая, когда class="foot left").

(C o p y r i g h t) a r u l . r u
Файлы mysite7.html, mysite7.css
 
(C o p y r i g h t) a r u l . r u

* * *

Итак, вы создали свою первую страницу своими собственными руками. При этом получили определенные знания о процессе создания html-документа, об элементах HTML и стилях CSS уже на практике.
Теперь вы можете двигаться далее, изучая HTML и CSS
на сайте webref.ru.
Можете смотреть исходный код страниц понравившихся вам сайтов и уже осмысленно разбираться, как там решается та или иная дизайнерская идея. Если что-то непонятно, придется выяснять, разбираться.
Так постепенно, если при этом будете создавать что-то свое, вы освоите мастерство верстки html-страниц.

(C o p y r i g h t) a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

2 комментариев к записи “Окончательная сборка”

  1. Aum Mau сказал:

    Интересно! А где можно про всякие таки штучки типа :hover почитать? Или все экспериментальным путем выясняется?

  2. admin сказал:

    :hover — http://webref.ru/css/hover
    псевдоклассы — http://htmlbook.ru/samcss/psevdoklassy

Оставить комментарий