<h2><br>, <br><h2><br> и т. д.) — <br><b>полужирным</b>. <br>Вы можете управлять этими параметрами. Можно отменить полужирное начерта- ние для <a href="/shablon-oformleniya-statej/index.html" title="Шаблон оформления статей">заголовков или выделить курсивом обычный текст</a>, используя свойства font-style и font-weight<br>Чтобы выделить текст курсивом, добавьте к стилю следующий код:<br>font-style: italic;<br>Или, наоборот, можете установить для текста обычный, не курсивый шрифт:<br>font-style: normal;<br>ПРИМЕЧАНИЕ<br>Свойство стиля шрифта font-style на самом деле содержит третью команду oblique, которая имеет тот же эффект, что italic.<br>Свойство толщины шрифта font-weight позволяет делать текст полужирным или обычным. Фактически согласно правилам CSS можно указать девять числовых значений (100–900) для определения точных, едва различимых градаций плотнос- ти (от «суперплотного» (900) до «крайне легкого, почти невидимого» (100)) шриф- та. Естественно, чтобы эти команды работали, сами используемые шрифты долж- ны иметь для них девять различных значений толщины, обеспечивая тем самым заметный визуальный эффект для посетителей сайта. Единственный способ приме- нения числовых значений касается рассмотренных ранее веб-шрифтов. Фактически <br></div> <div> <br><b>176 </b><br>Часть 2. Применение CSS<br>числовые значения используются Google web fonts исключительно для задания плотности шрифта.<br>ПРИМЕЧАНИЕ<br>При применении веб-шрифтов задание для текста полужирного и курсивного начертания требуют выполнения других ранее рассмотренных действий.<br>Чтобы сделать шрифт текста полужирным, наберите:<br>font-weight: bold;<br>Обычный шрифт устанавливается следующим образом:<br>font-weight: normal;<br>СОВЕТ<br>Поскольку для заголовков уже предопределен стиль с полужирным начертанием, возможно, по- требуется другой способ для выделения, которое вы хотите придать некоторым частям текста внутри заголовка. Вот один из способов:<br> h1, strong {color: #3399FF;}<br>Этот стиль с производным селектором меняет цвет всех элементов <b> (обычно отображаемых полужирным шрифтом), заключенных внутри <h2>.<br><b>Прописные буквы</b><br>Набрать текст прописными буквами очень просто: нажмите клавишу фиксации ре- гистра заглавных букв <br>Caps Lock и вводите текст. Что же делать, если нужно, чтобы прописными буквами были написаны все уже набранные заголовки веб-страницы или текст, который скопировали и вставили из Microsoft Word? Вместо того чтобы повторно вводить заголовки, обратитесь к CSS-свойству text-transform<br>. С его помо- щью можно преобразовать любой текст в верхний или нижний регистры или даже превратить первые буквы каждого слова в прописные (для названий и заголовков). <br>Вот пример преобразования в прописные буквы:<br>text-transform: uppercase;<br>Сделать буквы строчными можно с помощью значения lowercase<br>, а превратить первые буквы слов в прописные — используя capitalize<br>Поскольку это свойство наследуемо, любые теги, вложенные в text-transform<br>, приобретают то же форматирование: верхний регистр, нижний, первые прописные буквы слов. Чтобы указать CSS <i>не</i> изменять регистр текста, воспользуйтесь значе- нием свойства none<br>:<br>text-transform: none;<br><b>Малые прописные буквы.</b> Для придания тексту типографской изысканности можно также использовать свойство font-variant<br>, которое позволяет преобразовать текст таким образом, что все буквы будут малыми прописными. В этом стиле строч- ные буквы выглядят как немного уменьшенные заглавные. Большие фрагменты такого текста становятся трудночитаемыми, но этот стиль придает веб-странице старосветскую, книжную многозначительность. Для создания стиля с малыми про- писными буквами используйте следующий код:<br>font-variant: small-caps;<br></div> <div> <br>Глава 6. Форматирование текста<br><b>177</b><br><b>Украшение текста</b><br>CSS предлагает также свойство text-decoration для улучшения внешнего вида тек- ста путем добавления различных дополнительных элементов. С его помощью мож- но добавить линии подчеркивания, надчеркивания, перечеркнуть текст (рис. 6.12) или сделать его мигающим. Свойство text-decoration применяется в сочетании со следующими ключевыми словами: underline<br>, overline<br>, line-through или blink<br>. На- пример, чтобы подчеркнуть фрагмент, наберите код:<br>text-decoration: underline;<br><b>Рис. 6.12. </b>Результат применения свойства text-decoration<br>Вы можете также объединять несколько ключевых слов для комбинирования эффектов. Добавить к тексту линии подчеркивания и надчеркивания одновремен- но можно следующим способом:<br>text-decoration: underline overline;<br>Однако не стоит изощряться в таком «вычурном» форматировании только по- тому, что есть такая возможность. У всех, кто пользуется Интернетом на протяже- нии долгого времени, любой подчеркнутый текст инстинктивно ассоциируется с гиперссылкой, возникает желание непременно щелкнуть на ней кнопкой мыши. <br>Таким образом, подчеркивать слова, не являющиеся частью гиперссылки, будет не очень хорошей идеей. Использование же мерцания blink на самом деле скорее вы- даст в вас начинающего дизайнера (к тому же большинство браузеров не сделают текст мерцающим, даже если вы укажете им это).<br></div> <div> <br><b>178 </b><br>Часть 2. Применение CSS<br>СОВЕТ<br>Вы можете применить эффект, подобный подчеркиванию и надчеркиванию, если добавите к эле- менту — в данном случае к тексту — линию рамки border сверху или снизу (см. раздел «Добавление границ» гл. 7). Преимущество состоит в том, что с помощью свойства border вы можете управлять одновременно многими параметрами: размещением, размером, цветом линий-рамок и в конечном счете придать тексту более привлекательный вид, не делая его похожим на гиперссылки.<br>Значение overline свойства text-decoration надчеркивает, а line-through<br> — перечер- кивает текст. Некоторые веб-дизайнеры применяют последний эффект, чтобы пока- зать читателю, что фрагмент был удален из первоначального варианта документа.<br>Отменить все элементы украшений можно путем применения ключевого слова none<br>:<br>text-decoration: none;<br>Зачем вам может понадобиться отмена декорирования? Самый распространен- ный пример — удаление стандартной предопределенной подчеркивающей линии гиперссылки (см. раздел «Стилизация ссылок» гл. 9).<br><b><span id='Межсимвольный_и_межсловный_интервал'>Межсимвольный и межсловный интервал</span></b><br>Другой способ выделения текстового фрагмента состоит в регулировании интер- вала, с которым отображаются отдельные буквы или слова (рис. 6.13). Уменьшение межсимвольного интервала letter-spacing поможет сжать текст заголовков. Они <a href="/narkoticheskie-veshestva-i-ih-vliyanie-na-organizm-cheloveka/index.html" title="Наркотические вещества и их влияние на организм человека">будут казаться еще более плотными и тяжеловесными</a>, а заодно вмещать больше текста на единственной строке заголовка. И наоборот, увеличение интервала может придать заголовкам более спокойный, величественный вид. Чтобы это сделать, используйте отрицательные значения свойства:<br>letter-spacing: -1px;<br>Положительные значения свойства делают промежуток между буквами больше:<br>letter-spacing: .7em;<br>Аналогично можно изменить межсловный интервал, используя свойство word- spacing<br>. Оно делает промежуток между словами шире или уже, не затрагивая про- межутков между буквами внутри самих слов:<br>word-spacing: 2px;<br>С этими свойствами можно использовать любые единицы измерений, приме- нимые к тексту: пикселы, em, проценты (с положительными или отрицательными значениями).<br>Если вы хотите, чтобы текст хорошо читался, применяйте небольшие значения интервалов. В противном случае буквы и слова будут перекрываться, накладывать- ся друг на друга. Чтобы сделать представление содержимого сайта четким и понят- ным, аккуратно используйте межсимвольные и межсловные интервалы.<br><b><span id='Добавление_текстовых_теней'>Добавление текстовых теней</span></b><br>В CSS3 имеется свойство, позволяющее добавлять к тексту тени для придания глубины и выразительности заголовкам, спискам и абзацам (рис. 6.14).<br></div> <div> <br>Глава 6. Форматирование текста<br><b>179</b><br><b>Рис. 6.13. </b>Слишком большое или слишком маленькое значение межсимвольного или межсловного интервалов может сделать текст трудночитаемым или вообще нечитаемым<br>Свойство text-shadow требует задания трех параметров: горизонтального сме- щения (насколько левее или правее текста должна появиться тень), вертикаль- ного смещения (насколько выше или ниже текста будет тень), степень размыто- сти тени и цвет отбрасываемой тени. Например, свойство text-shadow<br>, создающее эффект, который показан в верхней части рис. 6.14, задается следующим обра- зом:<br>text-shadow: -4px 4px 3px #999999;<br>Первое значение — <br>-4px<br> — означает «показать тень на 4 пиксела левее текста». <br>(Положительное значение приведет к показу тени правее текста.) Второе значе- ние — <br>4px<br> — задает отображение тени на 4 пиксела ниже текста. (Отрицательное значение приведет к показу тени над текстом.) Значение <br>3px определяет степень размытости тени. Значение <br>0px <br>(без размытости) приводит к отбрасыванию четкой <br></div> <div> <br><b>180 </b><br>Часть 2. Применение CSS<br>тени, и чем больше будет значение, тем более размытой будет тень. И наконец, последнее значение определяет цвет отбрасываемой тени.<br><b>Рис. 6.14.</b> Текстовые тени — отличный способ придания глубины заголовкам и другому тексту. <br>Но свойство text-shadow не работает в Internet Explorer 9 и более ранних версиях<br>Для достижения более сложных эффектов можно даже создать несколько теней <br>(см. нижнее изображение на рис. 6.14): нужно просто добавить запятую, а после нее дополнительные значения отбрасываемой тени:<br>text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;<br>Количество добавляемых таким образом теней ничем не ограничивается (кроме вашего хорошего вкуса). К сожалению, этот эффект не работает в Internet Explorer 9 или более ранних версиях. Но он работает во всех других современных браузерах <br>(даже в Internet Explorer 10). Иными словами, чтобы текст лучше читался, пола- гаться на этот эффект не стоит. Изображение в нижней части рис. 6.14 показывает, что не нужно делать: использовать белый цвет текста, обеспечивая его читаемость исключительно за счет отбрасываемой тени, определяющей очертания текста. <br>В Internet Explorer белый текст на белом фоне просто не будет виден.<br>ПРИМЕЧАНИЕ<br>Красивые приемы использования текстовых теней можно увидеть на сайте http://webexpedition 18.com/<br>articles/css3-text-shadow-property/.<br><b><span id='Форматирование_абзацев_текста'>Форматирование абзацев текста</span></b><br>В CSS есть свойства, которые используются для форматирования не отдельно взя- тых слов, а фрагментов, блоков текста. Иначе говоря, их можно применять к целым абзацам, заголовкам и т. д.<br></div> <div> <br>Глава 6. Форматирование текста<br><b>181</b><br><b>Установка межстрочного интервала</b><br>В дополнение к настройке интервала между словами и буквами (междусловный и межсимвольный интервалы) CSS позволяет устанавливать межстрочный интер- вал (интерлиньяж) — расстояние, промежуток между базовыми линиями двух со- седних строк текста, — используя свойство line-height<br>. Чем выше межстрочный интервал, тем больше промежуток между отдельными строками (рис. 6.15).<br><b>Рис. 6.15. </b>Свойство установки межстрочного интервала line-height позволяет расположить строки абзаца ближе друг к другу (вверху) или расположить их с меньшим промежутком, растянуть (внизу)<br>Стандартный межстрочный интервал эквивалентен 120 %. Таким образом, на рис. 6.15, <i>вверху</i>, мы видим, что меньшее процентное значение сжимает строки, а большее значение распределяет их более обособленно (см. рис. 6.15, <i>внизу</i>).<br><b><span id='Межстрочный_интервал_в_пикселах,_em,_процентах.'>Межстрочный интервал в пикселах, em, процентах.</span></b> Как и в свойстве размера шрифта font-size<br>, вы можете использовать пикселы, em или проценты для уста- новки размера межстрочного интервала с помощью свойства line-height<br>:<br>line-height: 150%;<br></div> <div> <br><b>182 </b><br>Часть 2. Применение CSS<br>Вообще, процентные значения или em лучше, нежели пикселы: размер, установ- ленный в этих единицах измерения, напрямую зависит от параметров шрифта и ав- томатически корректируется пропорционально изменению свойства font-size<br>. Так, если вы зададите межстрочный интервал равным 10 пикселам и затем измените на гораздо больший (например, на 36 пикселов), то высота останется равной 10, а стро- ки будут накладываться друг на друга. Однако при использовании значения размера в процентах (скажем, 150 %) межстрочный интервал корректируется пропорцио- нально всякий раз, когда вы изменяете значение размера шрифта соответствующего свойства font-size<br>Стандартный размер межстрочного интервала браузера составляет 120 %. Та- ким образом, когда вы хотите уменьшить высоту строк, промежуток между ними, используйте меньшее значение. Соответственно, <a href="/otchet-po-praktike-sdelajte-obshie-vivodi-rekomendacii-po-vipo/index.html" title="Отчет по практике. Сделайте общие выводы. Рекомендации по выполнению задания">чтобы увеличить межстрочный интервал</a>, то есть положить строки дальше друг от друга, примените значение боль- ше 120 %.<br>ПРИМЕЧАНИЕ<br>Чтобы определить размер межстрочного интервала, браузер вычитает высоту шрифта из высоты строки. В результате получается размер межстрочного интервала (leading) между двумя соседними строками текста абзаца. Допустим, размер шрифта составляет 12 пикселов. Межстрочный интервал, установленный в размере 150 %, в итоге равняется 18 пикселам. Таким образом, браузер добавля- ет пустой промежуток размером 6 пикселов между двумя строками текста.<br><b><span id='Межстрочный_интервал_в_виде_числового_значения.'>Межстрочный интервал в виде числового значения.</span></b> CSS предлагает еще одну единицу измерения для установки размера межстрочного интервала — просто чис- ловое значение. CSS-код выглядит следующим образом:<br>line-height: 1.5;<br>После этого значения не нужно указывать никакую единицу измерения. Чтобы определить межстрочный интервал или высоту строки, браузер просто умножает это число на размер шрифта. Так, если размер шрифта текста составляет 1 em, а вы- сота строки установлена равной 1,5, то расчетное значение межстрочного интерва- ла равно 1,5 em. В большинстве случаев эффект при указании значения 1,5 em или <br>150 % ничем не отличается. Иногда множитель достаточно удобен. Особенно ко гда вложенные теги наследуют значения межстрочного интервала родительских те- гов.<br>Например, вы устанавливаете атрибут высоты строки <br><body><br> равным 150 %. Все теги веб-страницы унаследуют это значение. Однако наследуется не процентное значение, а <i>рассчитанное значение</i> межстрочного интервала. Допустим, основной размер шрифта задан равным 10 пикселам. 150 % от 10 пикселов составляет 15. Все теги унаследуют межстрочный интервал размером 15 пикселов. Так, если на веб- странице есть абзац текста со шрифтом высотой 36 пикселов, его межстрочный интервал размером 15 пикселов будет намного меньше самого текста, а строки со- льются.<br>В данном примере вместо высоты строки 150 % для тега <br><body><br> лучше установить общий для всех тегов пропорциональный базовый межстрочный интервал в разме- ре 1,5. Любой тег, вместо того чтобы наследовать точное абсолютное значение вы- соты строки в пикселах от стиля body<br>, просто умножает размер своего шрифта на этот <br></div> <div> <br>Глава 6. Форматирование текста<br><b>183</b><br>коэффициент. Так, в вышеупомянутом примере, где абзац текста отображен разме- ром шрифта 36 пикселов, межстрочный интервал составит 1,5 <br>⋅ 36 = 54 пиксела.<br><b>Выравнивание текста</b><br>Одним из самых быстрых способов изменить внешний вид веб-страницы является выравнивание текста. Используя свойство text-align<br>, вы можете разместить абзац в центре веб-страницы (горизонтально), расположить текст вдоль левого или пра- вого края или выровнять по ширине (подобно абзацам настоящей книги). Обычно текст на странице выровнен по левому полю, но вам может понадобиться центри- ровать заголовки. Чтобы устанавливать выравнивание для текста, пользуйтесь од- ним из следующих ключевых слов: left<br>, right<br>, justify<br>, center text-align: center;<br>Выровненный текст замечательно выглядит на печатной странице, главным об- разом потому, что при большой разрешающей способности печати учитываются даже мельчайшие настройки интервалов, а также потому, что большинство про- грамм, используемых для разметки печатного материала, могут писать через дефис длинные слова (тем самым пытаясь равномерно распределить символы по строкам). <br>Это предотвращает большие, неприглядные промежутки между абзацами. Веб-стра- ницы в форматировании ограничены возможностями намного более грубой регу- лировки интервалов из-за низкой разрешающей способности мониторов компью- теров и из-за того, что браузеры не умеют писать длинные слова через дефис. Когда вы пользуетесь ключевым словом justify для выравнивания по ширине, получают- ся совершенно разные промежутки между словами, текст становится трудночита- емым. Поэтому, применяя такое выравнивание на веб-страницах, убедитесь в том, что получившийся текст имеет приятный внешний вид.<br><b><span id='ИНФОРМАЦИЯ_ДЛЯ_ОПЫТНЫХ_ПОЛЬЗОВАТЕЛЕЙ_Метод_стенографии_для_набора_стилей,_форматирования_текста'><span id='ИНФОРМАЦИЯ_ДЛЯ_ОПЫТНЫХ_ПОЛЬЗОВАТЕЛЕЙ_Отступ_первой_строки_абзаца_и_удаление_полей_абзацев'>ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ</span></span></b><br><b>Метод стенографии для набора стилей, форматирования текста</b><br>Многократный повторный набор стилевых свойств — достаточно утомительное занятие, особенно если нужно использовать несколько различных текстовых свойств сразу. К счастью, в CSS есть свойство font<br>, облегчающее написание стилей. Оно позволяет объединять несколь<br>ко свойств в одну строку: font-style<br>, font-variant<br>, font-weight<br>, font-size<br>, line-height и font-family<br>Рассмотрим, например, следующее объявление: font: italic bold small-caps 18px/150% <br>Arial, Helvetica, sans-serif; <br>Оно приводит к созданию полужирного, курсивного шрифта с малыми прописными буквами размером <br>18 пикселов, семейства Arial (или Helvetica, или sans<br>serif) с межстрочным интервалом 150 %. Имейте в виду следующие правила:<br>• не обязательно применять все эти свойства, но нужно включить размер шрифта и начертание (се<br>мейства шрифтов): font: 1.5em Georgia, Times, serif;;<br>• используйте один пробел между каждым значе<br>нием свойства, а запятую только для того, чтобы отделить семейства шрифтов в списке: <br>Arial, <br>Helvetica, sans-serif<br>;<br>• определяя межстрочный интервал, добавляйте слеш после размера шрифта, за которым должно следовать значение самого межстрочного интер<br>вала: <br>% 1.5em/150 или 24px/37px<br>;<br>• последние два свойства должны быть комбинаци<br>ей: размер шрифта/межстрочный интервал (или <br></div> <div> <br><b>184 </b><br>Часть 2. Применение CSS<br>font-size/line-height)<br>; все остальные могут быть перечислены в любом порядке. Например, оба объявления: — font: italic bold small- caps 1.5em Arial и f<br>ont: bold small-caps italic 1.5em Arial; <br>— равнозначны и к ним применен одинаковый эффект.<br>Наконец, исключение значения из списка означает то же, что и установка его по умолчанию. Допустим, вы создали стиль <br>, который форматирует все абзацы полужирным курсивым шрифтом с малыми пропис<br>ными буквами и межстрочным интервалом 2000 % <br>(совсем не обязательно это повторять). Затем создали стилевой класс под названием, скажем, .<br>special-<br>Paragraph с таким объявлением стиля шрифта: font: <br>1.5em Arial; <br>— и применили его к какомуто абза<br>цу текста. В результате данный абзац не унаследует по<br>лужирное курсивое начертание с малыми прописны<br>ми буквами и межстрочный интервал. Исключение этих четырех значений из стиля <br>.specialParagraph можно приравнять к написанию следующего: font: normal normal normal 1.5em/normal Arial;<br><b>ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ</b><br><b>Отступ первой строки абзаца и удаление полей абзацев</b><br>В большинстве печатных изданий первая строка каждого абзаца имеет так назы- ваемый <i>абзацный отступ</i>. Он выделяет начало каждого абзаца текста, если нет дополнительных промежутков или увеличенных межстрочных интервалов, визу- ально разделяющих абзацы. В веб-страницах в Интернете нет отступов, но приме- няется увеличенный межстрочный интервал, как в книге.<br>Если у вас есть желание придать веб-страницам индивидуальность, сделать их непохожими на другие, то воспользуйтесь преимуществами таких CSS-свойств, как text-indent и margin<br>. С их помощью вы можете создать отступ первой строки абзацев и удалить (или увеличить) поля.<br><b>Абзацный отступ.</b> Для установки отступа первой строки абзаца можно исполь- зовать такие единицы измерения, как пиксел и em:<br>px;<br>или em;<br>Значения в пикселах — абсолютные значения, точное число, в то время как em определяет размер отступа в количестве символов (базируется на текущем разме- ре шрифта).<br>СОВЕТ<br>В свойстве абзацного отступа text-indent вы можете использовать отрицательные значения для со- здания выступа, то есть абзаца с выступающей (смещенной, «свисающей») влево первой строкой. <br>Обычно отрицательное значение абзацного отступа используется вместе с указанием значения поля, чтобы отрицательный абзацный отступ не выходил за левую сторону страницы, столбца или прямо- угольной структуры.<br>Вы можете также применить процентные значения, но со свойством text-indent эти единицы измерения приобретают другое значение. В данном случае размер вы- ступа, установленный в процентах, связан не со шрифтом текста, а с шириной эле- мента, в который заключен абзац. Например, если текстовый отступ установлен равным 50 % и абзац охватывает всю ширину окна браузера, то первая строка будет начинаться посередине экрана. Если вы меняете размеры окна, изменяется ширина <br></div> <div> <br>Глава 6. Форматирование текста<br><b>185</b><br>абзаца и, соответственно, отступ (о значениях свойств, устанавливаемых в процен- тах, и о том, как они взаимодействуют с шириной элементов веб-страницы, читайте в разделе «Определение параметров высоты и ширины» гл. 7).<br><b><span id='Управление_полями_(границами)_абзацев.'>Управление полями (границами) абзацев.</span></b> Многие веб-дизайнеры не любят промежутки или дополнительные интервалы, которые любой браузер добавляет между абзацами. До появления CSS с этим приходилось мириться. К счастью, те- перь можно воспользоваться свойствами margin-top и margin-bottom для удаления <br>(или увеличения) этих промежутков. Чтобы полностью избавиться от верхнего и нижнего полей, введите следующее:<br>margin-top: 0;<br>margin-bottom: 0;<br>Чтобы удалить поля между <i>всеми</i> абзацами веб-страницы, создайте такой стиль:<br>p {<br> margin-top: 0;<br> margin-bottom: 0;<br>}<br>Для установки значений абзацных полей, как и для отступов, вы можете при- менять такие единицы измерения, как пикселы или em. Можно также использовать проценты, но, как и в случае с абзацными отступами, процентные значения отно- сятся к <i>ширине</i> элемента, в который заключен абзац. Во избежание путаницы, свя- занной с вычислением верхнего и нижнего полей, расчет которых базируется на ширине абзацев, проще применять значения в em или пикселах.<br>ПРИМЕЧАНИЕ<br>Поскольку не все браузеры обрабатывают верхнее и нижнее поля заголовков и абзацев согласо- ванно, рекомендую просто обнулить (то есть удалить) все поля в начале таблицы стилей. Посмот- реть на то, как это работает, можно в разделе «Начинаем с чистого листа» гл. 5.<br>Для создания специальных эффектов можно назначить <i>отрицательное</i> значе- ние верхнему или нижнему абзацному полю. Например, верхняя граница, установ- ленная равной 10 пикселам, приподнимает абзац выше на 10 пикселов, возможно, даже визуально накладывая его на вышестоящий элемент веб-страницы.<br><b><span id='Форматирование_первой_буквы,_первой_строки_абзаца'>Форматирование первой буквы, первой </span></b><br><b>строки абзаца</b><br>CSS дает возможность форматирования абзаца с использованием псевдоэлементов <br>:first-line и <br>:first-letter<br> (рис. 6.16). C технической точки зрения они являются селекторами, определяющими фрагмент, к которому применены CSS-свойства. <br>С помощью псевдоэлемента <br>:first-letter можно создать начальную заглавную букву или буквицу, имитируя рукописный стиль текста. Например, чтобы сделать первый символ каждого абзаца полужирным и выделить его красным цветом, не- обходимо написать следующее:<br>p:first-letter {<br> font-weight: bold;<br> color: red;<br>}<br></div> <div> <br><b>186 </b><br>Часть 2. Применение CSS<br><b>Рис. 6.16. </b>Псевдоэлемент :first-letter форматирует первый символ стилизуемого элемента — заглавные буквы абзацев<br>Для избирательной стилизации, скажем форматирования только первого сим- вола определенного абзаца, можно применить стилевой класс, например, <br>.intro:<br></div> <div> <br>Глава 6. Форматирование текста<br><b>187</b><br>Text for the introductory paragaph goes here...<br>Затем вы можете создать стиль с таким названием, как <br>.intro:first-letter<br>Псевдоэлемент <br>:first-line форматирует первую строку абзаца. Вы можете при- менить его к любому блоку текста, будь то заголовок (<br>h2:first-line<br>) или абзац <br>(<br>p:first-line<br>). Как и в примере с <br>:first-line<br>, можно применить стилевой класс к единственному абзацу и отформатировать только его первую строку. Допустим, вы хотите отобразить прописными буквами все символы страницы. Примените стиле- вой класс к HTML-коду первого абзаца: и создайте следующее:<br>.intro:first-line { text-transform: uppercase; }<br>ПРИМЕЧАНИЕ<br>По какой-то странной причине браузеры Chrome и Safari не распознают свойство text-transform, когда оно используется с псевдоэлементом :first-line. Другими словами, вы не можете применять в Chrome и Safari CSS для преобразования букв первой строки абзаца в прописные.<br><b>Стилизация списков</b><br>Теги <br><ul><br> и <br><ol><br> создают маркированные и нумерованные списки взаимосвязанных элементов, пунктов или пронумерованных шагов, последовательности действий. <br>Однако, как вы, наверное, заметили, не всегда подходит предопределенный брау- зером способ форматирования. Возможно, вы захотите заменить в маркированных списках стандартный маркер собственным, более красивым, использовать в нуме- рованных списках буквы вместо чисел и т. д.<br><b>Типы списков</b><br>Большинство браузеров отображают маркированные списки (теги <br><ul><br>), исполь- зуя маркеры в виде окружности, а нумерованные списки (<br><ol><br>) — предваряя пунк- ты числами. В CSS вы можете выбрать три типа маркеров: <i>диск</i> (круглый маркер с заполнением), <i>окружность</i> (круг, полый круглый маркер), <i>квадрат</i> (квадрат с зарисовкой). Для нумерованных списков предусмотрено шесть вариантов-схем нумерации: decimal<br>, decimal-leading-zero<br>, upper-alpha<br>, lower-alpha<br>, upper-roman<br>, lower-roman<br> (рис. 6.17). Все эти варианты можно выбрать, используя CSS-свойство list-style-type<br>:<br>list-style-type: square;<br>или list-style-type: upper-alpha;<br>Если нужно учесть чьи-нибудь особые предпочтения, числа можно заменить буквами греческого алфавита — <br>α, β, γ, воспользовавшись настройкой lower-greek<br>Существует множество других схем нумерации, включая армянский, грузинский, катакана и другие региональные варианты. Информацию о них можно найти по адресу https://developer.mozilla.org/en-US/docs/CSS/list-style-type<br>Чаще всего это свойство используют при определении стилей, форматирующих <br><ol><br> или <br><ul><br>. Типичные примеры — включение свойства в стили ol или ul<br>: ul {list- style-type: square;}<br> либо в стилевой класс, применяемый к одному из этих тегов. <br></div> <div> <br><b>188 </b><br>Часть 2. Применение CSS<br><b>Рис. 6.17. </b>CSS предоставляет различные способы маркировки нумерованных и ненумерованных списков, начиная с набора геометрических фигур и заканчивая разными системами счисления<br>Тем не менее вы можете применить это свойство и к отдельно взятому элемен- ту списка (<br><li><br>). Вы даже можете применить несколько стилей с различными мар- керами к отдельным пунктам-элементам одного и того же списка. Например, мо- жете создать стиль тега <br><ul><br>, устанавливающий маркеры в виде квадратов, а затем создать стилевой класс <br>.circle<br>, который изменяет тип маркера на круглый:<br>li {list-style-type: square; }<br>.circle { list-style-type: circle; }<br>Теперь примените класс к элементам списка через один для чередования квад- ратных и круглых маркеров:<br><ul><br> <li>Item K/li><br> <li>Item 2</li><br> <li>Item 3</li><br> <li>Item 4</li><br></ul><br>Или, используя рассмотренный ранее селектор nth-of-type<br>, можно вообще из- бавиться от имени класса:<br>li {list-style-type: square; }<br>li:nth-of-type(odd) { list-style-type: circle; }<br></div> <div> <br>Глава 6. Форматирование текста<br><b>189</b><br>Иногда может понадобиться вообще скрыть маркеры, в том числе тогда, когда вы захотите использовать собственные графические маркеры (см. обучающий урок этой главы). Кроме того, когда панель навигации сайта представляет собой список ссылок, вы также можете использовать список <br><ul><br>, скрыв его маркеры (см. подраз- дел «Использование маркированных списков» раздела «Создание панелей навига- ции» гл. 9). Чтобы отключить отображение маркеров, используйте ключевое слово none<br>:<br>list-style-type: none;<br><b><span id='Позиционирование_маркеров_и_нумерации_списков'>Позиционирование маркеров и нумерации списков</span></b><br>Как правило, браузеры отображают маркеры или числа списков слева от текста пунктов — элементов списка (рис. 6.18, <i>слева</i>). Ключевое слово outside визуально выделяет список и каждый его элемент из всего текста. С помощью CSS вы може- те управлять размещением маркеров, используя свойство list-style-position<br> <a href="/cifrovoj-sled-razmer-obuvi-pol-ves-kak-davno-chelovek-proshel/index.html" title="Цифровой след• размер обуви• пол• вес• как давно человек прошел• тип/марку обувиЧто может определить по этому следу опытный следопыт?">Определить местоположение можно</a>, как говорилось выше, слева от текста пунктов списка, выделяя их обособленно (стандартный способ отображения браузерами), или <i>внутри</i> текстовых блоков элементов списка (рис. 6.18, <i>справа</i>). Значение inside обеспечит списку максимальную ширину на странице:<br>list-style-position: outside;<br>или list-style-position: inside;<br>СОВЕТ<br>Вы можете изменить промежуток между маркером и текстом путем увеличения или уменьшения значения свойства padding-left (см. раздел «Управление размерами полей и отступов» гл. 7). Чтобы использовать это свойство, нужно создать стиль для тега элементов списка <li>. Данный способ работает только в том случае, если свойство list-style-position определено со значением outside (или вообще отсутствует).<br>Кроме того, если вам не нравится, что браузеры делают для списков отступ, смещая все содержимое вправо, можете переопределить стиль, установив значения свойств margin-left и padding-left равными 0. Чтобы удалить отступ, можно создать такой групповой селектор:<br>ul, ol {<br> padding-left: 0;<br> margin-left: 0;<br>}<br>Вы можете создать стилевой класс с такими свойствами и применить его к кон- кретным тегам <br><ul><br> или <br><ol><br>. Рекомендую установить собственные значения свойств padding и margin по той причине, что одни браузеры для управления отступом исполь- зуют свойство padding<br> (Firefox, Mozilla, Safari), а другие — margin<br> (Internet Explorer). <br>Подробно о свойствах padding и margin вы можете прочесть в следующей главе.<br>В обычном порядке браузеры отображают пункты маркированных списков один над другим, без дополнительного промежутка. Добавить интервал между ними можно, применяя свойства margin-top и margin-bottom к конкретным элемен- там списка. Они работают с интервалом элементов точно так же, как с абзацами. <br></div> <div> <br><b>190 </b><br>Часть 2. Применение CSS<br>Вы должны только удостовериться в том, что стиль применяется к тегу <br><li><br>: со- здайте стилевой класс и примените его индивидуально к каждому тегу. Стиль не должен относиться к тегам <br><ul><br> или <br><ol><br>. Добавление верхнего или нижнего полей <br>(отступов) к этим тегам увеличивает промежуток между всем списком и абзацами выше или ниже его. На интервал между элементами они не оказывают никакого влияния.<br><b><span id='Рис._6.18.'>Рис. 6.18. </span></b>Используя свойство list-style-position, вы можете управлять позиционированием маркеров и чисел в списках<br><b>Графические маркеры</b><br>Если вам недостаточно стандартных маркеров квадратной и круглой формы, може- те создать собственные. Используя программу редактирования графики, например <br>Photoshop или Fireworks, можно быстро сделать красочные и интересные маркеры. <br>В качестве образцов можете рассмотреть примеры коллекции рисунков и шрифтов символов (таких как Webdings).<br>СОВЕТ<br>Для получения списка многочисленных сайтов с бесплатными значками и маркерами посетите стра- ницу www.cssjuice.com/38-freeicon-checkpoints/.<br>CSS-свойство list-style-image позволяет определить путь к графическому символу на сайте таким же образом, как вы указываете местонахождение файла <br></div> <div> <br>Глава 6. Форматирование текста<br><b>191</b><br>с изображением, используя атрибут src<br> HTML-тега <br><img><br>. Синтаксис команды следующий:<br>list-style-image: url(images/bullet.gif);<br>Термин url и круглые скобки обязательны. Часть, заключенная в круглые скоб- ки, — в данном примере images/bullet.gif<br> — это и есть путь к графическому симво- лу. Обратите также внимание на то, что, в отличие от HTML, не нужно заключать путь в кавычки.<br><b><span id='ИНФОРМАЦИЯ_ДЛЯ_ОПЫТНЫХ_ПОЛЬЗОВАТЕЛЕЙ_Настройка_параметров_маркеров_и_чисел_в_списках'>ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ</span></b><br><b>Настройка параметров маркеров и чисел в списках</b><br>Возможно, вы хотите стилизовать числа нуме- рованных списков таким образом, чтобы они отображались полужирным шрифтом красного цвета вместо давно надоевшего черного. Как можно настроить внешний вид маркеров и чи- сел в списках?<br>CSS предлагает несколько способов настройки па<br>раметров маркеров, предваряющих пункты — эле<br>менты списка. Вы можете использовать собствен<br>ные графические символы, как описано выше. Но имеется еще два метода. Один из них достаточно трудоемкий, однако работает с большинством брау<br>зеров, другой — самый современный, но не работа<br>ет в Internet Explorer 7 или его более ранних версиях.<br>Рассмотрим первый метод. Предположим, вы хоти<br>те, чтобы числа нумерованного списка отобража<br>лись полужирным шрифтом красного цвета, а текст пунктов — обычным черным. Создайте стилевой класс, как делали это применительно к тегам <br><ol><br>и <br><li><br>. На данном этапе все содержимое списка должно показываться полужирным шрифтом крас<br>ного цвета.<br>Затем создайте стилевой класс, например, .<br>regu- lar List<br>, который устанавливает черный цвет шриф<br>та и нормальную плотность (то есть не полужир<br>ную). Теперь заключите каждый элемент списка в тег <br><span><br> и примените к ним стилевой класс. <br>Например: <br><li><span >Item <br>1</span></li><br>. Сейчас маркеры отображаются по<br>лужирным красным шрифтом, а текст — обычным черным цветом. К сожалению, придется заключать в тег каждый элемент списка.<br>Более совершенный способ, экономящий объем CSS<br>кода, состоит в том, чтобы использовать так <a href="/otchet-po-laboratornoj-rabote-1-atmel-ch-1-voronin-d-a-gruppa/index.html" title="Отчет по лабораторной работе №1 Atmel ч. 1 Воронин Д. А. Группа 16-эпв Проверил: Слядзевская К. П">называемое сгенерированное содержимое</a><br>. По сути, это все то, что не набирается вручную в виде кода вебстраницы, а автоматически добавляется браузером при отображе<br>нии страницы. Хороший пример — сами маркеры. Вы не вводите знаки маркера при создании списка — они добавляются на вебстраницу сами. С помощью CSS мож<br>но сообщить браузеру, чтобы он генерировал, добавлял такое содержимое и даже отформатировал должным образом все, что находится перед текстом пунктов спи<br>ска — <br><li><br>. Если вы хотите сделать обычные маркеры рядом с элементами списка красными, добавьте к табли<br>це стилей следующий CSS:<br>ul li { list-style-type: none; <br>}<br>ul li:before { content: counter(item, disc) " ";<br> color: red; <br>} <br>А если нужно сделать красными элементы нумерован<br>ного списка, можно добавить следующий CSS:<br>ol li { list-style-type: none; counter-increment: item;<br>}<br>ol li:before { content: counter(item) ". ";<br> color: red; <br>} <br>Дополнительные сведения о том, как придать стиль нуме<br>рованному списку, можно найти по адресу www.456berea<br>street.com/archive/201105/styling_ordered_list_numbers/.<br></div> <div> <br><b>192 </b><br>Часть 2. Применение CSS<br>ПРИМЕЧАНИЕ<br>Задавая путь или адрес к графическим файлам (изображениям, графическим символам) во внешней таблице стилей, имейте в виду, что путь должен указываться относительно таблицы стилей, а не веб-страницы. Более подробно об этом вы прочтете в разделе «Добавление фоновых изображений» гл. 8, когда мы начнем использовать графику.<br>Свойство list-style-image позволяет применять графические символы в каче- стве маркеров. Однако оно не обеспечивает управления его размещением. Маркер может оказаться слишком высоко или низко расположенным относительно пунк- та списка. Придется переделывать сам графический символ маркера, пока он не будет сочетаться. О более грамотном подходе вы узнаете в гл. 8. Он основан на использовании свойства background-image<br>. Это свойство позволяет точно позицио- нировать графические элементы, в том числе маркеры в списках.<br>СОВЕТ<br>Как и в случае со свойством font (см. врезку «Информация для опытных пользователей. Метод стено- графии для набора стилей, форматирования текста» в разделе «Форматирование абзацев текста» этой главы), здесь применяется метод упрощенного набора атрибутов списков. В свойстве list-style могут быть перечислены все параметры форматирования списков, в том числе list-style-image, list-style-position и list-style-type. Например, стиль ul { list-style: circle inside; } отобразит маркированные списки с марке- рами в виде окружностей без заполнения, не выделяя их из текста пунктов — элементов списка. Когда вы описываете стиль списка с одновременным указанием типа маркера и графического символа — list- style: circle url(images/bullet.gif) inside; — и графический символ не может быть найден по заданному пути, браузер будет использовать предопределенный маркер, в данном случае — окружность.<br><b><span id='Обучающий_урок:_форматирование_текста_в_действии'>Обучающий урок: форматирование текста </span></b><br><b>в действии</b><br>В этом обучающем уроке мы попрактикуемся в стилизации таких элементов веб- страниц, как заголовки, списки, абзацы текста, используя мощные средства фор- матирования CSS.<br>Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб- ный материал. Как это сделать, рассказывается в конце гл. 2. Файлы текущей обу- чающей программы находятся в папке с названием <br>06<br><b><span id='Настройка_параметров_страницы'>Настройка параметров страницы</span></b><br>Начнем с таблицы стилей и добавим директиву <br>@font-face<br>, чтобы загрузить неко- торые веб-шрифты для форматирования основного текста страницы.<br>1. Запустите браузер и откройте файл text.html<br> (рис. 6.19). Здесь пока особо не на что смотреть — есть только коллекция заголовков, абзацы и один маркирован- ный список. Но скоро вы заметно преобразите эту страницу.<br>2. Откройте файл text.html в HTML-редакторе. Начнем с добавления к этому файлу внутренней таблицы стилей.<br>3. В заголовке <br><head><br> веб-страницы щелкните кнопкой мыши сразу после закры- вающей скобки тега <br>
. Нажмите
Enter и наберите
Глава 6. Форматирование текста
193
Теперь, когда основные теги стилей на месте, вы добавите сброс стандартных настроек CSS. Вместо того чтобы набирать вручную весь код, просто скопируй- те и вставьте CSS из внешней таблицы стилей.
Рис. 6.19. Работа над любой веб-страницей начинается с обычного HTML-содержимого
4. Откройте файл reset.css
. Скопируйте весь код оттуда и вставьте его между откры- вающим и закрывающим тегами
|
Скачать 20.28 Mb.