Введение в CSS

///Введение в CSS

Введение в CSS

Здравствуйте. В прошлой статье мы с вами познакомились с основой сайтостроения — с языком разметки HTML. А сегодня рассмотрим CSS — Cascading Style Sheets или по-русски — каскадные таблицы стилей. И если HTML можно представить в виде кирпичиков, из которых строиться здание вашего сайта, то CSS это его цветной и красивый фасад с декоративными элементами.

Что такое CSS.

В наше время на просторах Сети навряд ли встретится сайт без использования CSS. Итак, что же это такое? На простом языке это информация, содержащая правила оформления элементов веб-страницы. То есть, указывающая, что вот этот заголовок будет размером в 36 пикселей, у картинок будет тонкая рамка, шрифт будет Arial, фон страницы имеет цвет #eeeeee и тому подобное.

Вообще, давайте рассмотрим, как мы можем указать стиль для оформления элемента? Первый способ — это прописать стили прямо в коде HTML. В примере ниже мы выведем на веб-странице слово «Здравствуйте!» Но как оно будет выглядеть!

А как вывести, спросите вы? Об этом написано в статье Знакомство с языком HTML. Там рассказывается, как создать html-страницу и открыть ее в браузере.

Если у вас получилось вот так, то вы молодец!

Селектор. Свойство. Значения.

Какие стили мы указали для тега заголовка первого уровня <h1>?

Размер шрифта font-size 36 пикселей, цвет color зеленый, выравнивание text-align по центру. Все вместе они представляют собой набор свойств и их значений: font-size  —  свойство, а 36px — значение этого свойства, color — свойство, а green — значение. И так далее…

Элемент веб-страницы, к которому мы применяем правило форматирования называется селектором (в нашем случае это  h1), а набор правил — блоком объявления.

Селектор говорит браузеру, какой именно элемент будет стилизован, а в блоке объявления (код в фигурных скобках) перечисляются правила оформления стилей — свойства и их значения. Свойство и значения разделяются двоеточием :. Я не оговорился — значений у свойства может быть несколько. Например, border: solid 1px green; говорит о том, что граница элемента сплошная, толщиной в 1 пиксель и она зеленого цвета.

Встроенные, внутренние, внешние стили. Их приоритет.

Теперь поговорим о приоритетности  применения стилей. Приоритетов три. Самый высокий — у встроенных стилей, применяемых прямо в коде html . Пример встроенного стиля мы привели выше.
Следующим по приоритетности является внутренний стиль. Он объявляется в служебном разделе страницы html, между тегами <head>...</head>

И, наконец, самым низким приоритетом обладает внешний стиль, который прописывается в отдельном файле с расширением .css. Часто он носит имя style.css. Он требует обязательного подключения, то есть указания места своего расположения. Подключается он опять же между тегами  <head>...</head> вот так:

В нашем примере таблица стилей style.css располагается в корневой папке css

А вот так выглядит наше правило в текстовом файле style.css. Кстати, он создается точно также, как страница html прямо  в Блокноте, только имеет имя style и расширение .css

Что на практике будет означать такая приоритетность? Что будет, если, например, мы укажем внутренний стиль для элемента в разделе <head>...</head>, а потом укажем другой стиль (встроенный) для этого же элемента прямо в коде html?  Будет применен встроенный, потому что у него приоритет выше. Надеюсь, вам это понятно? Если нет, напишите в комментариях, разберем подробнее 🙂

Обратите внимание, каждое объявление значения свойства заканчивается точкой с запятой ; !

Комментарии.

Правилом хорошего тона, да и просто в целях понимания, какие стили к каким элементам страниц вы применяете, нужно использовать комментарии прямо в самом файле style.css. Пишутся они между символов /*.....*/  вот так:

 

Я думаю, что на этом первое знакомство с CSS можно закончить, поскольку теории в изучении этого предмета достаточно много и её не вместить в рамки одной статьи. Вы без особого труда сможете самостоятельно изучить CSS. Кстати, упомянутая в прошлой статье htmlbook.ru содержит прекрасные материалы в справочнике по CSS

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

На этом сегодня всё. Если у вас появились вопросы, то вы можете задать их нам в комментариях или через систему личных сообщений, просто зарегистрировавшись на нашем сайте.

С уважением.

4
By | 2018-01-25T20:39:20+00:00 Декабрь 19th, 2017|CSS, Сайтостроение|0 Comments

Leave A Comment

Войти с помощью: