Введение в CSS, методы использования.
Введение в CSS. Для каскадных таблиц стилей применяется три метода использования, встраивать в тег как на примерах в предыдущей страницы, выносить в тег HEAD или использовать внешний файл. Но об всем по порядку.
Встроиные таблицы стилей(InLine), этот тип встраивается в тег при помощи атрибута style:
<b style="font-family:'Times New Roman', verdana, sans-serif; font-size:12pt; color:#000000; ">
Обратите внимание на синтаксис, для HTML регистр букв значения не имеет, но все-же лучше все атрибуты и свойства писать в нижнем регистре(маленькими буквами), за исключением например имен шрифтов, для них регистр имеет значение, потому что verdana и Verdana это два разных шрифта!!!
Также все правила в атрибуте должны быть помещены в кавычки style="правила" style='правила', оба варианта правильных.
Каждое правило должно быть отделено от другого точкой с запятой, style="правило1; правило2; правило3", за исключением правила которое ставим последним, после него точку с запятой можно не ставить.
Обратите внимание на то как я расставил кавычки, все правила я поместил в двойные кавычки, а имя шрифта "Times New Roman" в одинарные, это потому что в имени шрифта есть пробелы и такие значения нужно помещать в кавычки. В свою очередь кавычки должны чередоваться, т.е. если все правила помещаются в двойные(как в моем примере) , то значения правил помещаются в одинарные или наоборот.
Кстати атрибут style является устаревшим и его можно использовать в документах типа transitional, а в Strict и HTML-5 нет!
Глобальные таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Введение в CSS</title>
<STYLE type="text/css">
BODY { font-size:12pt; color: blue }
BODY { font-family:'Times New Roman', verdana, sans-serif; }
</STYLE>
</head>
<body>
текст синего цвета, размер текста 12пунков, шрифт Times New Roman, если его нет то verdana, если и этого нет то sans-serif(шрифт по умолчанию).
</body>
</html>
Этот метод использования CSS, заключается в том чтобы в тег HEAD поместить тег-контейнер STYLE с атрибутом type который говорит браузеру что текст помещенный в этот контейнер нужно обрабатывать как каскадные таблицы стилей(CSS). В середину контейнера помещаются правила.
Внешние таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Внешние таблицы стилей</title>
<LINK rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
контент
</body>
</html>
Методы использования внешних каскадных таблиц стилей заключается в том, что правила пишутся в файле с расширением ".css" т.е. file.css и вставляются в HTML(xml xhtml) при помощи тега LINK, который в свою очередь указывает путь атрибутом href к file.css . Файлы стилей создаются и редактируются обычным текстовым редактором, имена этих файлов произвольные, но чаще всего называют style.css. В один ХТМЛ-файл можно подгрузить 2 или более файлов стилей.
П.С. Говорить об встроенных стилях нет смысла потому что они есть устаревшими, лучше использовать глобальные. А еще лучше использовать внешние, особенно если вы уже знаете PHP или в ближайшем времени собираетесь его изучить хотя-бы потому что там есть родительские документы(создается шаблон сайта а потом режется на 2-3 куска сам HTML-код, и уже инклюйдится(вставляется) в сами страницы,). Это позволит изменить дизайн сайта всего 2-3 файлами, и не придется редактировать все страницы. Тоже самое происходит с внешними стилями, вы можете изменить визуальное представление сайта редактированием всего одного файла(style.css).
