Что такое CSS и его преимущества для HTML страницы?
Это язык стилей, который позволяет отделить внешний вид html страницы от её содержания. Принят консорциумом W3C в декабре 1996 года в качестве стандарта.
Конкретный пример использования css стилей
Допустим, Вы хотите, что бы текст в абзацах отображался шрифтом Times. Без использования CSS потребовалось бы вокруг каждого абзаца текста вставить тег <font> с именем шрифта Times.
Примерно так:<html> <body> <font size="10" face="Times"> <p> Какой нибудь текст </p> </font> </body> </html>
А теперь, предположим, будет у Вас сто станиц, и необходимо изменить шрифт на Verdana.
Неприятная ситуация ведь потребуется на каждой странице, для каждого абзаца, поменять имя шрифта с Times на Verdana.
С помощью CSS можно вынести стиль отображения текста абзацев в отдельный файл стилей
Обычно его называют style.css
p{
font-size: 10;
font-family: 'Verdana';
}
Теперь в этом файле, в одном месте, Вы можете задать и, следовательно, изменить стиль текста абзаца, сразу для всех страниц сайта.
Способы подключения css
Что бы подключить файл стилей к странице, надо вставить тег <link> с адресом файла в секцию <head>.
В итоге код страницы будет выглядеть так:
<html> <head> <link href="http://site.ru/style.css" rel="stylesheet" type="text/css" /> </head> <body> <p> Какой нибудь текст </p> </body> </html>
Ещё один способ, подключить css-файл прямо в коде страницы.
<html>
<head>
<style type="text/css">
p{
font-size: 10;
font-family: 'Verdana';
}
</style>
</head>
<body>
<p> Любой текст </p>
</body>
</html>
Подключение файла не единственный способ применения стилей css к html-документу.
Можно вставить правила оформления прямо внутри тегов, это делается при помощи атрибута style, он еще называется встроенным стилем. Этот атрибут имеет самый высокий приоритет, но применим только к одному какому-нибудь элементу. Код web-страницы будет выглядеть примерно так:
<html> <body> <p style="font-size: 10;font-family: 'Verdana';"> Какой нибудь текст </p> </body> </html>
Новичкам будет полезна CSS песочница — cssdesk.com, тут можно писать код с подсветкой синтаксиса.
И сразу видеть результат сбоку.
По окончанию экспериментов можно сохранить полученный HTML и CSS.
