CSS (Cascading Style Sheets — каскадные таблицы стилей) – способ видоизменения частей документов, созданных при помощи языка разметки. В чём это заключается?
Язык гипертекстовой разметки HTML предполагает форматирование содержимого тегов с помощью определённых параметров. Так, например, тег font, показывающий, что с этого места начинается текст, обладает такими параметрами как размер шрифта, его вид, цвет и так далее. А теперь представьте, что вам надо применить одни и те же параметры к тексту на разных страницах. И вот вы начали просматривать коды ваших страниц в поисках того самого кода, чтоб текст был однотипным. Если у вас две три страницы – это уже проблематично сделать, а что если больше? В таком случае целесообразно применение таблиц стилей CSS.
Стилем будет называться набор правил форматирования, который предназначен для быстрого изменения внешнего вида элементов html-документа. Другой положительной особенностью использования таблиц стилей является то, что один стиль можно применить в нескольких документах одновременно.
А поскольку стили CSS могут храниться в отдельном – не встроенном в html-документ – файле (см статью), то скорость загрузки сайта будет выше. Скажу по этому поводу только то, что все браузеры – программы, преобразующие html-документы в текстовое и графическое представление – кэшируют такие файлы css, в результате чего скорость загрузки увеличивается.
Стиль CSS имеет следующую структуру:
элемент html-документа.имя стиля (здесь имя указывать, если вы применяете стили с внешнего файла.)
{
параметр форматирования элемента : значение параметра;
}
Обращаю внимание, что не следует терять ни одного фрагмента вышеуказанной записи, будь то фигурные скобки, параметр, двоеточие, значение, точка с запятой. В противном случае элемент будет некорректно отображён в браузере.
Пример.
Рассмотрим построение таблицы с использованием CSS.
При создании таблицы в html-языке используется тег table, и он - тег - обладает следующими параметрами border - толщина границ таблицы, align - выравнивание содержимого таблицы, width - ширина, height - высота таблицы.
В самом html-документе эти все параметры будут отнесены к тегу table следующим образом
<table align="left" border="2 px" height="300 px"></table>
Т.е. получается, что у нас таблица шириной 400 пикс, с высотой 300 пикс , содержимое будет выровнено полевой стороне, толщина границ 2 пикс. А теперь представьте, что у вас все страницы сайта содержат таблицу с такими же параметрами. Вы будеште к каждой странице в коде прописывать все эти параметры?! Зачем, когда можно прописать стиль во внешнем файле. То есть:
table.example
{
width : 400px;
height : 300px;
align : left ;
border : 2px;
}
А в документе мы пропишем
<html>
<head>
<title>
</title>
<link href="/example/example.css" rel="stylesheet" type="text/css" />
<head>
<body>
<table class=’example’>
</table>
</body>
</html>
Подробней о том, как осуществляется подключение CSS можно прочитать в статье Интеграция CSS в HTML-документ
Оригинал статьи размещён на форуме дизайн студии Зелёная ива. Статья Основы CSS
Язык гипертекстовой разметки HTML предполагает форматирование содержимого тегов с помощью определённых параметров. Так, например, тег font, показывающий, что с этого места начинается текст, обладает такими параметрами как размер шрифта, его вид, цвет и так далее. А теперь представьте, что вам надо применить одни и те же параметры к тексту на разных страницах. И вот вы начали просматривать коды ваших страниц в поисках того самого кода, чтоб текст был однотипным. Если у вас две три страницы – это уже проблематично сделать, а что если больше? В таком случае целесообразно применение таблиц стилей CSS.
Стилем будет называться набор правил форматирования, который предназначен для быстрого изменения внешнего вида элементов html-документа. Другой положительной особенностью использования таблиц стилей является то, что один стиль можно применить в нескольких документах одновременно.
А поскольку стили CSS могут храниться в отдельном – не встроенном в html-документ – файле (см статью), то скорость загрузки сайта будет выше. Скажу по этому поводу только то, что все браузеры – программы, преобразующие html-документы в текстовое и графическое представление – кэшируют такие файлы css, в результате чего скорость загрузки увеличивается.
Стиль CSS имеет следующую структуру:
элемент html-документа.имя стиля (здесь имя указывать, если вы применяете стили с внешнего файла.)
{
параметр форматирования элемента : значение параметра;
}
Обращаю внимание, что не следует терять ни одного фрагмента вышеуказанной записи, будь то фигурные скобки, параметр, двоеточие, значение, точка с запятой. В противном случае элемент будет некорректно отображён в браузере.
Пример.
Рассмотрим построение таблицы с использованием CSS.
При создании таблицы в html-языке используется тег table, и он - тег - обладает следующими параметрами border - толщина границ таблицы, align - выравнивание содержимого таблицы, width - ширина, height - высота таблицы.
В самом html-документе эти все параметры будут отнесены к тегу table следующим образом
<table align="left" border="2 px" height="300 px"></table>
Т.е. получается, что у нас таблица шириной 400 пикс, с высотой 300 пикс , содержимое будет выровнено полевой стороне, толщина границ 2 пикс. А теперь представьте, что у вас все страницы сайта содержат таблицу с такими же параметрами. Вы будеште к каждой странице в коде прописывать все эти параметры?! Зачем, когда можно прописать стиль во внешнем файле. То есть:
table.example
{
width : 400px;
height : 300px;
align : left ;
border : 2px;
}
А в документе мы пропишем
<html>
<head>
<title>
</title>
<link href="/example/example.css" rel="stylesheet" type="text/css" />
<head>
<body>
<table class=’example’>
</table>
</body>
</html>
Подробней о том, как осуществляется подключение CSS можно прочитать в статье Интеграция CSS в HTML-документ
Оригинал статьи размещён на форуме дизайн студии Зелёная ива. Статья Основы CSS
Комментариев нет:
Отправить комментарий