Текст на странице

Сегодня мы будем заниматься блоком «content», содержащим основной текст страницы.

Сделаем отступы (поля) – 15 пикселей слева и 10 пикселей сверху.

Для этого в файле style.css, добавим свойство margin в инструкцию #content:

Обратите внимание, ширина левого поля (правое в нашем случае равно нулю) будет добавлена к ширине блока «content», поэтому, чтобы не сместился сайдбар значение свойства width нужно уменьшить на величину отступа слева (в нашем случае 575-15=560).

Больше с самим блоком «content» мы ничего делать не будем, поэтому цвет фона можно сделать белым или прозрачным:

Теперь в файле index.html внутрь блока «content» вместо шаблонного текста вставляем свой.
В моем тексте используются  теги заголовков первого (<h1>) и второго (<h2>) уровня, а также тег абзаца (<p>).

<h1>Они находятся под угрозой исчезновения</h1>

<h2>Сайгаки</h2>

<p>В России и Казахстане скоро исчезнет навсегда вид сайгаков. Неограниченная охота  за рогами и мясом этих антилоп сделали свое черное дело и численность животных     сократилась с 50000 до 2500 за последние 10 лет. Это вызвано крахом вместе с СССР      некогда существовавшей контролирующей системы по охране этих редких антилоп.      Сложившиеся условия, когда соотношение самцов и самок у сайгаков сейчас достигло      1/100, привело к неизвестному ранее в науке поведению в среде полигамных животных, самки которых стали конкурировать за самцов.</p>

<h2>Морская игуана</h2>

<p>Несмотря на то, что морские игуаны — единственный вид, которые приспособились кормится только под водой, они не живут в водном пространстве. Они только ныряют за морскими водорослями, которые составляют их основной вид питания. Длинные хвосты игуан служат им мощным пропеллером, а сильные лапы и большие острые когти помогают цепляться за скалы и океанское дно, в то время как они поглощают морские водоросли. Часто можно увидеть большую группу морских игуан, наслаждающихся солнечным светом на скалах, при помощи чего они регулируют температуру своего тела. Океанская вода вокруг Галапагосов, место их обитания, имеет очень низкую температуру из-за холодных подводных     течений. Ныряя в холодную воду, такие животные, как морская игуана, резко теряют температуру тела. Вот почему они падают на скалах, чтобы поглотить тепло по возвращению из моря.</p>


Как видим, внешний вид выведенного текста очень близок к нашему образцу. Поэтому инструкции для тегов <h1>, <h2> и <p> в файле style.css будут короткими. Для заголовков мы укажем размер шрифта (по отношению к основному шрифту на странице), отодвинем подзаголовок (заголовок второго уровня) и текст абзаца от предыдущей строки на 10 пикселей (свойство margin-top) и выровняем сам текст внутри абзаца по ширине (свойство text-align):

В итоге страница должна выглядеть так:

Следующий урок будет последним в теме создания сайта с нуля. Мы закончим оформление подвала (футера) страницы и подведем итоги.

Опубликовал 15th Февраль 2011.
Размещено в Сайт с нуля.
Метки: , , , ,

Комментирование закрыто.

Нужна помощь?