Разработка электронного портала (2011), страница 9

Комбинатор селекторадочерних элементов может быть окружен пробелами.Выбор сестринских элементовСкажем, требуется оформить абзац, находящийся в дереве документа на одномуровне с заголовком, или создать специальное обрамление для списка, стоящего на одномуровне с абзацем. Чтобы выбрать элемент, расположенный на одном уровне с другимэлементом и имеющий того же родителя, применяется комбинатор селектора сестринскихэлементов, представляемый в виде знака плюс (+). Как и комбинатор селектора дочернихэлементов, этот символ может быть окружен пробелами.Чтобы удалить верхний отступ абзаца, непосредственно следующего за элементомh1, запишем:h1 + p {margin-top:0;}Этот селектор означает следующее: «выбираем любой абзац, расположенныйнепосредственно за элементом h1, имеющим общих родителей с элементом p».Псевдоклассы и псевдоэлементыСелекторы псевдоклассов позволяют назначить стили структурам, существованиекоторых в документе необязательно.

Их наличие или отсутствие нельзя определить путемпростого изучения разметки документа. Имя элемента (тега) отделяется от именипсевдокласса или псевдоэлемента двоеточием (:), например:a:visited{color:red}Псевдоклассы ссылокCSS 2.1 определяет два псевдокласса, которые применяются к гиперссылкам.:linkСсылается на любую гиперссылку (т.е. имеющую атрибут href) иуказывает на адрес, который не был посещен.:visitedСсылается на любую гиперссылку, указывающую на ужепосещенный адрес.Первый из приведенных в таблице псевдоклассов может показаться избыточным,так как ссылка либо была посещена, либо нет. И в этом случае все что должнопонадобиться, этоa {color:blue}a:visited{color:red}Хотя этот формат кажется приемлемым, на самом деле его не вполне достаточно.Первое из приведенных здесь правил применяется не только к непосещенным ссылкам, нои к якорям (целевым связям):<a name=”razdel4”> 4.

Таблицы </a>Селекторы псевдоклассов :linkи:visitedв функциональном планеэквивалентны двум атрибутам тега body: link и vlink. Однако CSS позволяют задать нетолько цвет, но и другие элементы оформления.Селекторы псевдоклассов можно сочетать с классами.

Например, требуетсяизменить цвет ссылок, указывающих на страницы, расположенные на вашем сайте. Есликаждой из таких ссылок присвоить класс, реализация не вызовет затруднений:<a href=http://www.mysite.net/> Моя начальная страница </a><a href=http://www.site.net/ class=”external”> Другая начальная страница </a>Чтобы применить к внешней ссылке ее собственные стили, достаточно такогоправила:a.external:link, a external:visited{color:maroon}Это правило сделает вторую ссылку предыдущей разметки красно-коричневой,тогда как первая ссылка будет сохранять стандартный для гиперссылок цвет.Аналогичный синтаксис применяется и для селекторов идентификаторов:a#footer-copyright:link{font-weight:bold;}a#footer-copyright:visited{font-weight:normal;}Динамические псевдоклассыCSS 2.1 определяет три псевдокласса, которые могут изменять внешний виддокумента в результате действий пользователя. Эти динамические псевдоклассытрадиционно применяются для оформления гиперссылолок, но их возможности намногошире.ИмяОписание:focusСсылается на любой элемент, которому в настоящий моментпринадлежит фокус ввода, т.е.

который готов принимать ввод склавиатуры или быть активированным некоторым образом.:hoverСсылается на любой элемент, над которым размещен указательнекоторого устройства, например гиперссылка, по которойпроводят курсором мыши.:activeСсылаетсяналюбойэлемент,которыйбылактивированпользователем, например гиперссылка, по которой щелкаетпользователь в течение того времени, когда удерживается кнопкамыши.Управление цветом и шрифтамиШрифт – виды, размеры, начертаниеШрифты делятся на пять основных групп или семейств, каждая из которыхопределяется характерным, присущим ему общим признаком. В CSS выделены пятьбазовых семейств шрифтов:Шрифты с засечками или антиква (Serif)Этопропорциональныешрифты,имеющиезасечки.Шрифтсчитаетсяпропорциональным, если его символы имеют различную ширину, зависящую отначертания символа.

Засечки – это черточки на концах букв, например, на ножках буквыА. К шрифтам с засечками относится семейство шрифтов Times.Рубленые шрифты или гротески (Sans-serif)Это пропорциональные шрифты без засечек, например, Arial, Verdana, TahomaМоноширинные шрифты (Monospace)Моноширинные шрифты являются непропорциональными. Все буквы имеютодинаковую ширину и могут быть с засечками или без засечек, при этом шрифт относитсявсе равно к семейству моноширинных шрифтов. Применяются для имитациимашинописного текста или, например, листингов программ.Рукописные шрифты (Cursive)Эти шрифты имитируют человеческий почерк. Соответственно буквы состоятпреимущественно из кривых и украшены штрихами больше чем шрифты с засечками.Примером рукописного шрифта может служить шрифт Comic.Аллегорические шрифтыК этой группе относят все шрифты, которые нельзя отнести к предыдущимсемействам шрифтов, например, шрифт Western.Основные свойства для управления шрифтами приводятся в таблице 7.1.Таблица 7.1.СвойствоОписаниеВозможные значенияFont-sizeРазмер шрифтаxx-small, x-small, small, medium, large, x-large,xx-large, smaller, larger; 1 pt, 2 pt, …, n pt, 1 px.Font-familyГарнитураArial, Courier, Verdana, Times New Roman, …Font-weightПлотностьNormal, bold, bolder, lighter; 100, 200, …, 900.Font-styleКурсивыItalic, oblique.Следует обратить внимание на то, что если название шрифта состоит из несколькихслов, то это название нужно взять в одинарные кавычки, например:P{font-family: ’Times New Roman’}Цвет – способы задания, цвет текста, цвет фонаНиже приводится таблица свойств, с помощью которых можно изменять цвет тексаи цвет фона.Таблица 7.2.СвойствоОписаниеВозможные значенияColorЦветКод RGB, название цвета.Background-colorЦвет фонаКод RGB, название цвета.Background-imageФоновый рисунокИмя файла и при необходимости путь к нему.Управление текстомМежбуквенное расстояниеРасстояние между буквами внутри слова корректируется с помощью свойстваletter-spacing.

Для этого свойства может быть задано как положительное, так иотрицательное значение. Если задать положительное значение, то расстояние междубуквами увеличится, если задать отрицательное значение, то буквы сдвинутся ближе другк другуРасстояние между словамиРасстояние между словами корректируется с помощью свойства word-spacing.

Дляэтого свойства может быть задано как положительное, так и отрицательное значение. Еслизадать положительное значение, то расстояние между словами увеличится, если задатьотрицательное значение, то слова сдвинутся ближе друг к другуВысота строкМежстрочное расстояние определяется свойством line-height. Оно задаетрасстояние не между строками, а между базовыми линиями строк.Выравнивание внутри текстаВнутри строки текста можно осуществлять вертикальное выравнивание отдельныхслов, делать нижние и верхние индексы, выравнивать изображения относительно верхнейили нижней границы строки, а также ее середины. Эти операции выполняются с помощьюсвойства vertical-align, значениями которого являются baseline, sub, super, top, text-top,middle, bottom, text-bottom, <процентное значение>, <длина>, inherit.Таблица 7.3.СвойствоОписаниеВозможные значенияText-indentОтступ0,1 in, 0,2 in … n in.Text-alignВыравниваниеLeft, center, right, justify (выравнивание поширине).Text-decorationДекорированиеBlink (только для Netscape), line-through(перечеркнутый), non (без декора), overline(линия над текстом), underline (подчеркнутый).Text-transformРегистрCapitalize (первая буква каждого словапрописная), lowercase (все буквы строчные),none (не меняет регистр), uppercase (все буквыпрописные).Управление представлением списковКаскадные таблицы стилей рассматривают и нумерованные, и маркированныесписки как списки содержащие маркеры.

То есть маркерами являются и буквы и цифрынумерованного списка. Чтобы изменить тип маркера, обозначающего элементы списка,предусмотрено свойство list-style-type. Это свойство может принимать значения,приведенные в таблице 7.4.Таблица 7.4.Ключевое словоdiskcirclesquaredecimaldecimal-leading-zeroupper-alphaupper-latinlower-alphaЭффект от примененияlower-latinupper-romanlower-romanlower-greekarmenianeorgiannoneОбычный маркер можно заменить изображением, используя свойство list-styleimage, например,ul li{list-style-image:url(ris.gif);}Блочная модельЛюбая Web-страница состоит из элементов. Некоторые элементы, такие как <P>,<H1>-<H6>, <DIV>, <TABLE> и т.д., открывают новый раздел текста. Такие элементы иназывают блоками.Каждый из таких элементов-блоков включает в себя следующие компоненты:ü Содержание (Контент блока – текст, таблица, список и проч.);ü Размеры (Высота и ширина блока);ü Отступ (Пространство вокруг содержания (наподобие CELLPADDING));ü Границу (Линия, очерчивающая блок);ü Поле (Расстояние вокруг блока, которое также указывает расстояние междусоседними блоками);ü Размещение (Расположение блока на странице).ПолеОтступБлокКонтентГраницаРис.

7.1. Блочная модельНачнем со свойства блока – Граница. Граница может изменять ширину, стиль ицвет.Ширина границы определяется следующими пятью свойствами:ü Border-top-width – определяет толщину линии верхней границы блока.ü Border-right-width – определяет толщину линии правой границы блока.ü Border-bottom-width – определяет толщину линии нижней границы блока.ü Border-left-width – определяет толщину линии левой границы блока.ü Border-width – определяет толщину линии всех границ блока в следующемпорядке: Border-top-width, Border-right-width, Border-bottom-width, Border-leftwidth.