ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Оформление текста при помощи CSS

.

syiyiОформление текста при помощи CSS

Всем доброго времени суток и хорошего настроения!
Мы продолжаем изучать HTML разметку. Сегодня мы с вами познакомимся с таблицами стилей CSS и запомним парочку основных правил по ним.

Таблицы стилей нужны для того, чтобы ваш сайт не выглядел как документ Word, хотя и документ Word можно оформить лучше, чем сайт без CSS. Опять повторюсь, что излагаю все без воды. И хочу сразу вывести свое определение CSS, запомните раз и навсегда, что HTML и CSS — это не языки программирования, никакой программы, верстая сайт мы с вами не пишем. Так вот, мое определение: CSS — это фотошоп словами! Кто хорошо владеет этим графическим редактором, должен сразу меня понять. Вот смотрите: в ФШ вы добавляете на рабочую область какой-то объект, вам нужно добавить реалистичности, к примеру, и вы идете в «Настройки стилей слоя», там вы играете с ползунками теней, обводки, градиентов и т.д. При написании стилей CSS, вы делаете тоже самое, только используя определенные строгие правила и без ползунков.

Поехали

Сейчас, я хочу задать шаблон, как пишутся эти стили, чтобы вы хоть как-то представили с чем мы работаем.

Помните в предыдущем уроке, мы уже создавали маленький сайтик:

 

 

Так вот я хочу на примере работы с тегом заголовка H1, вам показать как нужно задавать стили CSS, я хочу добавить тень к заголовку и выровнять его по центру, вот что я должен написать:

А теперь как это будет выглядеть на самом деле:

То- есть:

Это и есть простой шаблон.

 

Как можно написать стили?

 

А теперь посмотрим как можно писать эти стили.

Запомните, наличие фигурных скобок "{}", двоеточия «:» и точки с запятой «;» — обязательно так, как я показал выше!

Существует три основных варианта написания:

Это первый.

Это второй — каждый объект на своей строчке.

И третий.

Помните мы с вами говорили о атрибутах в HTML? Так вот в самом теле тега можно указать стили, а делается это вот так(покажу сразу реальный пример):

 

То есть используем атрибут style, а в кавычках пишем сами стили.

 

Классы и идентификаторы

 

Очень важно знать, что это такое, потому что без них все веб-мастера просто бы сходили с ума от огромного объема работы.

 

Классы

 

Итак, представим ситуацию: у нас на сайте есть один заголовок «H1» и два абзаца «P», наша задача — перекрасить заголовок и второй абзац в синий цвет.

 

 

Но прописать стили для тегов «H1» и «P» — не вариант, так как перекрасятся два тега абзаца, а нам так не надо.

В этом случае используются классы. Что мы делаем: для нужных нам тегов мы задаем класс, ну допустим «rabbit», почему rabbit? -Что бы было понятно, что имя класса может быть абсолютно любым.

Делается это указанием для нужных тегов атрибутов с именем класса, то есть:

А дальше уже в CSS задаем нужные нам стили для имени класса, имя пишется на месте объекта, то есть вместо тега, обратите внимание, что перед именем класса всегда ставиться точка!

Теперь заголовок и второй абзац будут синими!

 

Идентификаторы

 

По сути это тоже самое, вся работа с идентификаторами аналогична работе с классами, существует только одно отличие: идентификатор может быть задан только один раз и только для одного объекта на всей HTML-странице.

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

 

 

На этот раз у нас — кошка!

Что касается стилей: все тоже самое, только вместо точки мы ставим решетку!

Надеюсь, с этим проблем не будет.

Все существующие стили узнаем на htmlbook, с ним мы встречались в предыдущем уроке:

Вроде, все что хотел сказать, сказал! На этом знакомство с CSS можно считать завершенным! В следующем уроке мы сверстаем свой первый сайт, используя полученные данные здесь!

Если у вас сейчас каша в голове, не переживайте, когда мы будем верстать сайт, у вас все разложиться по полочкам! У меня тоже так сначала было =)
БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *