Cascading Style Sheets (CSS, каскадные таблицы стилей) – это набор параметров и свойств, который служит для оформления электронного документа HTML (XHTML). Каскадные таблицы стилей (CSS) преимущественно используются для задания шрифта, цвета, расположения представления документа. CSS призван увеличить доступность документа и его “гибкость”; облегчить пользователям серфинг и восприятие сайта (единообразное оформление всех страниц, преемственность между страницами), а также уменьшить сложность и повторяемость в структурном содержимом. Иными словами, нам без CSS не обойтись Методы использования CSS. Таблица связанных стилей. Все стили, использующиеся на сайте (или даже на нескольких сайтах) можно хранить в одном специальном файле с расширением css, ссылка на который помещается во всех документах сайта. При изменении одного этого файла, меняется стиль на всех страницах, связанных с этим файлом. Для подключения файла css к документу в <HEAD> прописывается тег <LINK>: Код: <head> <link rel=”stylesheet” type=”text/css” href=”style. css”> <link rel=”stylesheet” type=”text/css” href=”http://www. armadaboard. com/main. css”> </head> Здесь href задает путь к CSS-файлу (относительный или абсолютный). Пример файла со стилем ( style. css ): Код: H1 { color: #8A2BE2; font-family: Arial; text-align: center } H2 { color: #800000; font-family: Verdana; text-align: left } В документе, к которому подключен такой файл, при заключении текста в теги H1 или H2, к нему(тексту) будет применяться соответствующее форматирование. Таблица глобальных стилей Кроме этого свойства CSS можно описывать не в отдельном файле, а в самом документе с помощью тега <STYLE>: Код: <style type=”text/css”> H1 { color: #8A2BE2; font-family: Arial; text-align: center } </style> Здесь определен стиль тега <H1>, который можно использовать на данной веб-странице. Внутренние стили Можно также определять стиль только для конкретного тега: Код: <H1 style=” color: #8A2BE2; font-family: Arial; “>Текст</H1> Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. При этом первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. Синтаксис CSS CSS имеет следующий синтаксис: селектор { свойство1: значение; свойство2: значение; … } CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции. Некоторые возможные свойства селекторов и их значения Код: font-family: Arial, Verdana (Семейство шрифта) font-size: 80% (Размер шрифта) font-weight: normal (Ширина шрифта) color: #800000 (Цвет текста) background: #FFE4E1 (Цвет фона) text-align: justify (Выравнивание по ширине) font-style: italic (Курсив) Классы Классы удобно использовать, когда хочется задать несколько стилей для одного тега. Синтаксис задания стиля будет следующий: тег. имя_класса { свойство1: значение; свойство2: значение; … } Синтаксис использования заданного стиля: <тег class=”имя_класса”>Текст</тег> Пример: Код: <html> <head> <style type=”text/css”> P { color: red; font-style: italic } P. class1 { color: blue; text-align: justify } P. class2 { color: black } </style> </head> <body> <p>Текст будет написан курсивом красного цвета </p> <p class=”class1″>Текст будет написан курсивом синего цвета и выровнен по ширине</p> <p class=”class2″>Текст будет написан курсивом черного цвета</p> </body> </html> Можно, также создавать классы, не привязывая их к определенному тегу: Код: <style type=”text/css”> .class3 { color: blue } </style> <b class=”class3″>Текст синего цвета</b> Идентификаторы Идентификатор позволяет управлять стилем элемента динамически. Синтаксис задания стиля идентификатора: #Имя_идентификатора { свойство1: значение; свойство2: значение; … } Синтаксис использования заданного стиля: <тег id=”Имя_идентификатора”>Текст</тег> Пример: Код: <html> <head> <style type=”text/css”> #id1 { color: red } </style> </head> <body> <p id=”id1″>Текст крастого цвета</p> </body> </html> Как и при использовании классов, идентификаторы также можно определять только для конкретного тега. Синтаксис при этомбудет следующий: Тег#Имя идентификатора { свойство1: значение; свойство2: значение; … } Пример: Код: <html> <head> <style type=”text/css”> P { color: green } P#id2 { color: red; } </style> </head> <body> <p> Текст зеленого цвета </p> <p id=”id2″>Текст красного цвета</p> </body> </html>
| Автор Annita | другие статьи |