CSS второй урок

CSS второй урок

На этом уроке мы разберемся как правильно оформлять стили.

Практики сегодня не будет, но этот урок очень важен, что бы потом не возникали вопросы. Сейчас я объясню все теоретически и если что то будет не понятно то потом на практике все встанет на свои места.

CSS, как и любой другой язык программирования, имеет свои правила заполнения. Отличие CSS от HTML в том, что в нем нет тег, атрибутов, а только одни лишь правила, в которых указываются, как будет выглядеть HTML документ (цвет, размер текста, фон, позиция блоков и т.д.).

Как видно на рисунке, сначала пишем «селектор». То есть, указываем, к  какому html тегу (тегам) нужно применить правило (тег, ID, класс).
В фигурных скобках указываем правила « { тут правила CSS } ». Правила складываются из «свойства» и «значения».
Основные «свойства» и «значения» мы рассмотрим во всех остальных уроках из категории «Основы CSS».

Пример правила CSS:

Правило задавалось к тегу <body>. В итоге, на всех страницах цвет фона веб-страницы будет «#cc0000».

Вот пример что пишется на странице в HTML и что должно быть в файле CSS 

В HTML закголовок:

1

<H2>Заголовок</H2>

В CSS размер шрифта заголовка:

1

H2 {font-size: 18px;}

- для ID

В HTML область подвала:

1

<div id="footer">блок</div>

В CSSразмер блока подвала:

1

#footer {width: 200px;}

- для класса (class)

В HTML текст в блоке подвала:

1

<p class="footer-text">текст</p>

В CSS параметры текста в подвале:

1

.footer-text {font-size: 18px;}

 

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

На этом сегодня все, подписывайтесь на мой блог и Вы будете проинформированы о выходе новых уроков.

Все уроки Вы можете посмотреть в разделе "Все новости"