1) list-style-type – определяет вид маркера элемента списка (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha)
Пример.
LI {list-style-type: lower-alpha;}
2) list-style-image – задает вид маркера элемента списка в виде картинки (URL)
Пример.
LI {list-style-image:URL(cool.gif);}
3) list-style-position – позиционирование элементов списка (inside – позиционирование без отступа от левой границы окна браузера, outside – позиционирование по умолчанию)
Пример.
LI {list-style-position: inside;}
4) list-style – объединяет все вышеизложенные свойства списков (type, position, image)
Пример.
LI {list-style: circle inside;}
1) width – ширина элемента (ед.длины, %) Пример.
IMG {width: 10%;}
2) height – высота элемента (ед.длины, %) Пример.
TD {height: 100pt;}
3) float – расположение элемента относительно других элементов(left, right)
Пример.
TD {float: right;}
4) clear – расположение других элементов вокруг данного (left, right, both)
Пример.
IMG {clear: both;}
5) display – управление взаимным расположением текстовых строк и объектов на экране монитора (none – объект не отображается, block – отображает перенос строки до и после элемента, inline – допускается отображение объекта на одной строке с другими элементами, list-item – переносит строку до и после элемента + добавляет маркер в начало строки)
Пример.
IMG {display: block;}
6) white-space – определяет, как будут отображаться пробелы между элементами (normal – "сжимает" несколько подряд идущих пробелов в один, pre – допускает отображение нескольких подряд идущих пробелов, nowrap – не допускает перенос строки без тега <BR>)
#news {font-family: Times New Roman; font-size: 10pt;}
Файл index.html
<HTML>
<HEAD><TITLE>Применение CSS</TITLE>
<LINK rel=stylesheet type=text/css href=MY.css>
</HEAD>
<BODY>
<H1> Заголовок </H1>
<H2> Другой заголовок</H2>
<P> Абзац
<P class=comment> Другой абзац c комментариями
<DIV id=news> Блок </DIV>
<P class=form> Еще абзац
</BODY>
</HTML>
Краткая аннотация: Данная лекция освещает основы применения каскадных таблицы стилей CSS (CSS-классы, наследование стилей, каскадные стили и т.д.). В заключение лекции дополнительно освещаются вопросы регистрация доменов и хостинга сайтов.
Цель лекции:Описать основы применения каскаждых таблиц стилей для статических HTML-страниц. Дополнительной целью лекции является введение в вопросы регистрации доменов и хостинга сайтов
3.1. Таблицы стилей CSS.. 3
3.1.1. Общее описание. 3
3.1.2. Добавление CSS.. 4
3.1.2.1. Таблица связанных стилей.. 5
3.1.2.2. Таблица глобальных стилей.. 6
3.1.2.3. Внутренние стили.. 6
3.1.3. Базовый синтаксис.. 6
3.1.4. Селекторы тегов.. 7
3.1.4.1. Классы.. 7
3.1.4.2. Идентификаторы.. 8
3.1.4.3. Контекстные селекторы.. 9
3.1.4.4. Соседние селекторы.. 10
3.1.4.5. Дочерние селекторы.. 10
3.1.4.6. Селекторы атрибутов. 11
3.1.4.7. Универсальный селектор.. 11
3.1.4.8. Группирование. 11
3.1.5. Наследование. 11
3.1.6. Псевдоклассы... 12
3.1.6.1. Псевдоклассы, определяющие состояние элементов. 13
3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа.. 13
CSS(Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки [1]. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа [2]. До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS) документа. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [3]. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3 [4].
Основными преимуществами использования CSS являются:
· несколько дизайнов страницы для разных устройств просмотра;
· уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;
· простота последующего изменения дизайна;
· дополнительные возможности оформления (например, можно сделать так, чтобы меню было всегда видно при прокрутке страницы).
Недостатками использования CSS являются:
· различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;
· часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и серверный код, которые сложным и ненаглядным способом связаны с селекторами CSS, что значительно увеличивает время редактирования и тестирования.
Термин «Каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:
· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля – обычного, курсивного или полужирного.
· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
· Выравнивание для текста, изображений, таблиц и других элементов.
· Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
Рекомендация W3C по CSS2, принята 12 мая 1998 года. Она построена на CSS1 с сохранением обратной совместимости. В данной CSS2 добавлены следующие возможности:
· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.
· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).
· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).
· Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.
· Расширенный механизм селекторов.
· Указатели.
· Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
Рабочая версия CSS2.1 W3C от 8 сентября 2009 года. Она построена на CSS2 и содержит исправления ошибок.
Рабочая версия CSS3 cильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.
CSS при отображении страницы может быть взята из различных источников:
· Авторские стили в виде:
o внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;
o встроенных стилей – блоков CSS внутри самого HTML-документа;
o inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;
· Пользовательские стили:
o локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;
· Стиль браузера:
o стандартный стиль, используемый браузером по умолчанию для представления элементов.
Пример таблицы стилей:
h2 {
font-size: 1.75em;
color: #469;
}
#container {
padding: 0;
}
#column_r_content, #column_l_content {
margin: 10px;
}
p#paragraph1 {
margin: 0;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#navigation a:hover {
color: #000;
text-decoration: none;
border: 1px solid #ed9;
background-color: #ed9;
}
.style_italic {
font-style: italic;
}
Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover, .style_italic.
В первом правиле HTML-элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.
Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.
Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).
Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.
Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:
<p class="style_italic">Этот абзац будет выведен курсивом.</p>
