Сделай Сам Свою Работу на 5

Тема 17. CSS (Cascading Style Sheets) - каскадные таблицы стилей





 

CSS – это набор стандартов, которые регулируют некоторые методы применения элементов стиля к страницам HTML. Стиль включает в себя все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. С помощью CSS вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми. И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк.

Способы применения CSS к документу HTML:

- Встроенный (inline). Этот способ позволяет к любому тэгу HTML добавить стиль. Использование встроенного способа CSS позволяет максимально контролировать все свойства WEB-страницы. Предположим, вам необходимо задать внешний вид отдельного абзаца. Для этого вам необходимо добавить атрибут style к тегу абзаца.

- Внедренный (embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега "style", помещенного внутри раздела "head" страницы HTML, в код вставляются атрибуты стиля (шрифт, размер шрифта, цвет текста и ссылок и т.д.), которые будут применяться ко всей странице.



- Связанный (linked или External) Связанная таблица стилей – мощный инструмент, позволяющий создавать образцы стилей (master styles), которые можно применять ко всему узлу. Любая страница, связанная с этим документом, будет использовать указанные стили.

 

Краткая история CSS

 

Принятые Консорциумом W3C в декабре 1996 года в качестве стандарта CSS первого уровня были огромным шагом вперед, поскольку позволяли отделить содержание Web-страницы (текст, изображения и т.д.) от ее форматирования (макет и характеристики текста, например, информация о шрифтах). После этого язык HTML снова стал функционально-ориентированным (а не ориентированным на форму), что, однако, не мешало пользователям почти полностью контролировать вид страницы. В мае 1998 года был принят стандарт CSS2, позволяющий разработчикам осуществлять контроль над Web-страницами на более высоком уровне. Этот стандарт основан на CSS первого уровня и включает некоторые новые функции, в частности, возможность точно располагать элементы и объекты Web-страницы, а также звуковые таблицы стилей, позволяющие специальному программному обеспечению считывать содержимое Web-страницы.



 

Введение в CSS

 

Описание необходимых элементов языка разметки гипертекста – сложное и утомительное занятие. Представьте себе, что разрабатываемая вами web-страничка содержит десять абзацев текста, которые необходимо расположить по всей ширине окна браузера, и двадцать иллюстрации, которые нужно выровнять по центру экрана. Это означает, что вы должны будете десять раз записать в коде html-докумета теги <Р> ALIGiN="JUSTIFY></P> и двадцать раз – теги <CENTER> </CENTER>" либо столько же раз указывать атрибут ALIGN="CENTER" в теге <IМG>. А если вы формируете на экране сложную таблицу, каждая из пятидесяти ячеек которой должна иметь высоту ровно 20 пикселов? Представляете, сколько раз вам придется специфицировать атрибут HEIGHT, чтобы получить требуемую высоту ячеек в броузерах всех типов? Копирование команд через буфер обмена и использование WYSIWYG-редакторов в данной ситуации обычно не облегчает задачу, поскольку в первом случае вам, скорее всего, надоест щелкать мышью прежде, чем все необходимые директивы будут помещены в соответствуюшие строки кода, а во втором случае сгенерированный программой код все равно потребует длительного и тщательного редактирования.

Проблема заключается даже не в том, что при подготовке сложных страниц составление html-кода прекращается н рутинную работу – это еще можно стерпеть. Хуже то что по мере увеличения количества вставляемых вами в документ тегов растет и объем результирующего файла, что сказывается отнюдь не положительным образом на скорости его загрузки с сервера.



CSS в отличие от HTML использует несколько иной алгоритм описания элементов web-страниц. Один раз указав свойства каждого элемента в текстовом файле с расширением .css и назначив им свойства стиля, вы можете затем подключить этот файл к html-документу, заставив клиентский браузер считывать значения параметров каждого компонента web-страницы уже оттуда. Более того, поскольку стили описываются вами в отдельном файле, вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту.

Есть и ещё одно неоспоримое преимущество пользования CSS перед традиционным способом подготовки web-страниц, которое кажется неочевидным на первый взгляд: для того чтобы изменить стиль оформления какого-либо элемента, всех web-страниц вашего сайта, достаточно немного подправить всего одну строку кода в одном файле.

 

Описание синтаксиса CSS

 

В общем виде правило, задающее стиль выглядит так:

 

selector {property1: value1; property2: value2; property3: value3; property4: value4}

 

Например, мы можем задать цвет содержимому тега <b> таким способом:

 

b {color: red}

 

Здесь b это селектор, color – это свойство, red, как вы уже наверное догадались, значение.

 

Группировка селекторов

 

h1 {font-face: Arial}

h3 {font-face: Arial}

h3 {font-face: Arial}

 

Делает то же самое, что и:

 

h1, h3, h3 {font-face: Arial}

 

Ясно, что второй вариант предпочтительнее, так как его удобнее изменить, он занимает меньше места, а следовательно быстрее передастся по сети и т.д.

 

Контекстные селекторы

 

Стандарт CSS разрешает применять некоторое стилевое правило, только тем тегам, которые находятся внутри других. Поясним на примере:

 

ol li {list-style: upper-roman}

ol ol li {list-style: upper-alpha}

ol ol ol li {list-style: decimail}

ol ol ol ol li {list-style: lower-alpha}

 

Согласно этим стилевым правилам, броузер, встретив тег <li>, вложенный в один тег <ol>, должен применить значение upper-roman для свойства list-style к этому тегу. Встретив тег <li>, вложенный в два тега <ol>, он должен использовать значение upper-alpha для свойства list-style к этому тегу и т.д.

 

Также можно группировать контекстные селекторы

 

B I, LI OL {cloror: blue}

 

Это правило означает, что текст, выделенный тегом <B>, находящимся в <I>, и текст, находящийся в теге <LI>, вложенном в один тег <OL>, будет выделен голубым цветом.

 

Дочерние, сестринские и универсальные селекторы

 

Рассмотрим следующие примеры:

 

* {font-weight: bold}

h1 > h3 {font-weight: bold}

h1 + h3 {font-weight: bold}

 

В первом примере звёздочка, универсальный селектор, означает, что стилевой правило должно быть применено ко всем элементам документа, так что весь текст в нем будет выделен жирным шрифтом

Во втором примере стилевое правило будет применяться ко всем тегам <h3>, являющимся дочерними по отношению к тегу <h1>, и ко всем <h3> тегам, являющимся родительскими по отношению к <h1>.

Третий пример иллюстрирует тип смежного селектора, данное стилевое правило будет применено к тегам, следующим непосредственно один за другим. В этом случае всякий раз, когда за заголовком первого уровня следует заголовок второго уровня, заголовок второго уровня станет жирным.

 

Псевдоэлементы

 

Псевдоэлементы пока не поддерживаются ни одним из популярных браузеров, так что вы смело можете пропустить этот раздел.

 

Синтаксис псевдоэлемнтов таков:

 

selector:pseudoelement {property1:value1;...}

 

Псевдоэлементы first-line и first-letter определяют стиль первой строки и первой буквы. Например так вы можете создать буквицу

 

p:first-letter {font-weight: bold; color: red}

 

Псевдоэлементы before и after позволяют указывать в документе места, куда вставлять автоматически генерируемое содержимое. Например определив стиль упорядоченного списка следующем образом:

 

ol:before{content:'Ссылки'}

 

вы увидите перед каждым списком слово "Ссылки".

 

Регулярные классы

 

Иногда нужно использовать один стиль абзацев для примеров исходных кодов программ, а другой для описания алгоритмов. Если ни один из абзацев не будет иметь явного контекста, по которому его можно будет отличить от другого, то можно определить стиль для каждого в отдельности:

 

p.code { font-family: symbol; margin-left: 30px; }

p.alg { margin-left:2px; }

 

В селекторе, после имени тега через точку приписано имя класса. Первое правило создало класс стилей абзацев code, текст которых должен выводиться шрифтом symbol c с отступом 30 пикселей от края, а второе alg, текст которых будет отодвинут от левого края на 2 пикселя. Чтобы применить к содержимому тега определенный класс надо вставит в тег атрибут class и присвоить ему имя стилевого класса.

 

<p class="alg">Текст</p>

 

Родовые классы

 

В рамках стандарта CSS можно создавать классы, не ассоциируя их с каким-нибудь тегом. Например, задав стилевое правило следующем образом:

 

.bold_and_italic {font-style: italic; font-weight: bold}

 

и присвоив bold_and_italic свойству class некоторого тега, вы укажете браузеру, что содержимое этого тега надо отображать жирным и наклонным шрифтом.

 

Псевдоклассы

 

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

- link, alink, visited – эти псевдоклассы используются только с тегом <a> и определяют стиль отображения обычной, активной и посещенной ссылок соответственно.

 

Пример:

 

a:link{color: blue}

a:active{color: green; font-weight: bold}

a:visited{color: red}

 

- hover, focus – это, так называемые, интерактивные классы. Класс hover определяет, как отображать объект, когда на него попал курсор мышь, а класс focus, определяет, как броузеру показать содержимое тега, ставшего объектом внимания. С помощью этих классов можно украсить ссылки на странице:

 

a:hover{color: yellow}

 

Класс focus не поддерживается современными браузерами, а класс active работает только с тегом <a>

 

ID-классы

 

Почти все теги допускают атрибут id, с помощью CSS можно сопоставить тегу с данным значением id некоторое стилевое правило. Имя ID-класса отделяется от имени тега знаком # (решетка).

 

#yellow {color: yellow}

h1#blue {color: blue}

 

Теперь можно создать синий заголовок, написав <h1 id="blue"> или, присвоив атрибуту id любого тега значение yellow, окрасить его содержимое в желтый цвет. Употребление стилей, созданных таким способом обладает существенным недостатком – значение id уникально и документе.

 

 








Не нашли, что искали? Воспользуйтесь поиском по сайту:



©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.