Благодетели сайта

CSS

CSS - Cascading Style Sheets — система предоставляющая возможность написания внешнего вида документа языком разметки.

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

После выхода CSS, к сожалению разработчики браузеров не сразу отреагировали и включили возможность корректного отображения каскадных таблиц стилей, поэтому долгое время CSS не использовали, так как не все браузеры могли отображать стили. К счастью на данный момент, все разработчики браузеров включили возможность поддержки CSS 2.1, но все же имеются различии в отображении CSS в разных браузерах. Отсюда вывод, верстать документ HTML в CSS надо, но очень аккуратно и вдумчиво и знать какие свойства стилей будут работать, а какие нет, поэтому время от времени необходимо тестировать верстку в различных браузерах.

Структурно, таблица стилей выглядит так:

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

после имени стиля, в обязательном порядке идет фигурная скобка «{» открывающая «контейнер» со свойствами, после завершения построения свойств со значениями, идет закрывающая фигурная скобка «}». После каждого свойства, перед значением идет двоеточие «:», свойство и значение закрываются точкой с запятой «;», после последнего свайства, перед закрывающей фигурной скобкой, точку с запятой ставить не обязательно, но при интенсивной верстке такой способ может сильно навредить, так как не всегда уследишь за этим знаком, поэтому рекомендуется точку с запятой ставить всегда.

Каждое свойство CSS имеет собственное применение в элементам документа, например свойства для текста бесполезно применять к картинке и наоборот.

Вот так выглядят каскадные таблицы стилей:

H1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size: 16px;
}

p {
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-indent:10px;
}

в этом примере описан заголовок первого уровня H1 и текстовый тег P. Заголовок будет отображаться шрифтом Verdana или Geneva, если Verdana отсутствует в системе пользователя, в случае отсутствия этих двух шрифтов, то будет выведен любой шрифт из семейства sans-serif. Размер нашего заголовка будет иметь 16 пикселей. Параграф P отображается шрифтом Trebuchet MS, а зачем название шрифта заключили в кавычки, ведь в первом примере этого нет? В кавычки заключаются шрифты имеющие в своем названии два слова, это нужно для того, что бы браузер правильно читал названия шрифтов. Затем идет процесс отображения текста в параграфе, тем же методом как и в заголовке. Размер текста 12 пикселей. Отступ от края первой буквы нашего текста будет 10 пикселей.