Сегодня: 19 апреля 2024 г., пятница Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 3. Синтаксис CSS

Пусть вас не пугает слово «синтаксис». Оно всего-навсего означает «способ написания тегов», так как теги CSS немного отличаются от тегов HTML.
В обобщенном виде синтаксис CSS выглядит следующим образом:

класс {свойство: значение;}

в англоязычном варианте (а родной язык css все таки английский) это выглядит следующим образом:

selector {property: value;}

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

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

a {font-weight: bold;}

что говорит нам и браузеру - все ссылки должны отображаться жирным шрифтом

или так:

p {font-family:Verdana; font-size:12px; margin:15px; align:Justify;}

- все абзацы должны отображаться шрифтом Verdana, размером 12 пикселей, с отступом от краев документа 15 пикселей и выравниванием по всей ширине документа.

Как вы, наверно заметили, свойство и его значение в css заключаются в фигурные скобки (именно в фигурные и никакие другие!). Свойств, применяемых к классу, может быть великое множество и они могут регламентировать его до мельчайших деталей, например, вот так:

#coolmenu a{
font: bold 13px Verdana; /*Шрифт текста*/
padding: 2px; /*Внутренний отступ текста ссылки от краев ячейки*/
padding-left: 4px;/*Внутренний отступ текста ссылки от левого края ячейки*/
display: block;
width: 100%; /*Ширина ячейки*/
color: #000000; /*Цвет текста*/
text-decoration: none; /*Подчеркивание у ссылок - нет*/
border-bottom: 1px solid gray;
}

Я скопировал этот пример из таблицы стилей сайта freeadvice.ru, прямо с комментариями, которые написаны в таблице для того, чтобы и через длительное время можно было разобраться что здесь к чему.

Кстати, рекомендую и вам, при составлении стилей, особенно стилей, применяемых ко всему сайту, всегда оставлять комментарии. Несмотря на то, что вы пишете код сами, по прошествии времени, бывает сложно вспомнить, что имелось ввиду. Комментарии же дают легкую подсказку. Чтобы браузер не читал их как код, они отделяются специальными символами. Как не трудно догадаться из приведенного примера, эти символы – слеш «/» и звездочка «*».

Кроме того, обратите внимание: множество значений конкретного свойства могут записываться как перечисление через пробел:

{font: bold 13px Verdana;}

в данном примере свойство font (шрифт) имеет три значения: bold (жирный) 13px (13 пикселей) Verdana (название шрифта). Они перечислены одно за другим (последовательность: что идет за чем, значения не имеет). Тот же пример можно записать и по-другому:

}
font: bold;
font: 13px;
font: Verdana;
{

Это тоже правильное написание и браузер поймет его, но, согласитесь, конструкция громоздка и гораздо проще писать и понимать ее так, как в первом примере.

А теперь, для закрепления пройденного материала, небольшое задание для самостоятельной работы: создайте два файла – index.html и style.css* . Код для первого файла вы можете написать сами или скопировать из Урока 5 учебника по HTML. В файле style.css пропишите стили для абзацев, ссылок и других классов HTML на свое усмотрение. Поэкспериментируйте с цветами, размерами шрифта и т.д. Вот пример содержимого файла "style.css", который сделал я:

body {background-color:#FFFFCC;}
p {font-family:Verdana; font-size:12px; margin:15px;}
a {font-family:Verdana; font-size:12px; font-weight:bold; font-color:#996600;}

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

Два необходимых замечания:

После того, как вы сделали изменения в файле, прежде чем смотреть их в браузере, файл необходимо сохранить. То есть: делаете изменения, входите в меню «Файл» - «Сохранить», после этого заходите в браузер и обновляете страницу.
Оба файла – html и css должны быть сохранены в одной папке.

*CSS-файл создается в «Блокноте» аналогично .html-файлу: в меню «Файл» нажимаете на «Сохранить как», в открывшемся окне выбираете пункт «Все файлы» (имеется ввиду «все типы файлов») и вводите его название style.css. Файл может называться и по другому, название "style" дается лишь для примера, а вот расширение .css – обязательно.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментариев к этому уроку пока нет

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.