|
|
Книга css3 3е издание Серия Бестселлеры OReilly
, и до- бавьте
. Открывающий тег должен выглядеть следующим образом:
Вам не нужно добавлять точку перед словом intro
, как вы это делали, создавая стиль на шаге 18 (почему так, вы узнаете в следующей главе). Этот дополни- тельный код HTML применяет стиль к первому абзацу (и только к первому).
Повторите данный шаг для файла another_page.html
— добавьте к первому тегу на этой странице.
20. Сохраните все файлы и просмотрите страницы basic.html и another_page.htm в браузере. На рис. 2.4 представлен внешний вид страницы another_page.htm в окончательном виде.
Рис. 2.4. Применение внешних таблиц стилей дает возможность обновления дизайна всех страниц сайта за один прием посредством редактирования единственного CSS-файла
Обратите внимание, что внешний вид обеих веб-страниц определяется един- ственным CSS-файлом с внешней таблицей стилей. Простым редактированием файла global.css вы можете изменить стиль сразу обеих веб-страниц. Пред- ставьте, что ваш сайт содержит тысячи страниц. Мощные средства изменения дизайна, не правда ли? (Окончательную версию этой части обучающего приме- ра вы найдете в папке
02_finished
.)
Для тренировки добавьте стиль, чтобы отформатировать тег
(этот тег используется в нижней части HTML-файла для хранения сообщения об автор- ских правах). Можно, например, изменить его цвет и указать отступ 60 пиксе- лов, чтобы он совпадал с отступом тегов
3Селекторы: определение элементов стилизацииКаждый CSS-стиль имеет две основные части: селектор и блок объявления (о нем говорилось в предыдущей главе), который, в свою очередь, содержит форматиру- ющие свойства — цвет, размер шрифта текста и т. д. Они относятся лишь к офор- млению. Волшебство CSS заключается как раз в самых первых символах, начина- ющих определение любого стиля, — селекторах (рис. 3.1). Рис. 3.1. Здесь первая часть стиля — селектор — определяет элементы, подлежащие форматированию. В данном случае h1 означает «все заголовки первого уровня (тег ) веб-страницы»
ПРИМЕЧАНИЕ
Как видно из примера, в имена не входят символы < и >, в которые заключены соответствующие
HTML-теги. Поэтому, например, когда вы пишете стиль для тега
, набирайте только назва- ние — p.
Именно селектор контролирует дизайн веб-страницы, определяя элемент, ко- торый вы хотите изменить. Другими словами, именно он используется для форма- тирования множества элементов одновременно. Если дать более подробное описа- ние, то селекторы позволяют выбрать один или несколько схожих элементов для их последующего изменения с помощью свойств в блоке объявления. Селекторы
CSS — большой потенциал для создания дизайна веб-страниц.
ПРИМЕЧАНИЕ
Если вы хотите немного попрактиковаться на примерах, прежде чем изучать теоретический мате- риал по данной теме селекторов, обратитесь к обучающему уроку этой главы.
Селекторы типов: дизайн страницы
Селекторы типов (иногда называют селекторами тегов) являются весьма эффек- тивным средством проектирования дизайна веб-страниц, поскольку определяют стиль всех экземпляров конкретного HTML-элемента.
70 Часть 1. Основы CSS С их помощью можно быстро изменять дизайн веб-страницы с небольшими усилиями. Например, если надо отформатировать все абзацы текста, используя шрифт одного начертания, размера, а также цвета, то вам просто нужно создать стиль с селектором p (применительно к тегу ). Он переопределяет, каким обра- зом браузер отобразит отдельно взятый тег (в данном случае ) Еще до появления CSS, чтобы отформатировать текст, вам пришлось бы заключить его по всем абзацам в тег многократно. Этот процесс занял бы много времени, не говоря о том, что код HTML-страниц при этом увеличился бы в объеме до неимо- верных размеров, страницы загружались бы медленнее, их обновление занимало бы много времени. Благодаря селекторами типов вам фактически ничего не нужно делать с HTML-кодом, просто создайте CSS-стили и позвольте браузеру выполнить все ос- тальное. Селекторы исключительно просто определить в CSS-стилях, так как они насле- дуют название форматируемых элементов — p , h1 , table , img и т. д. Например, стра- ница, представленная на рис. 3.2, имеет три тега
(помечены на левой границе окна браузера). Единственный CSS-стиль с селектором h2
, приведенным ниже, определяет представление каждого заголовка второго уровня страницы.
h2 {
font-family:"Century Gothic", "Gill Sans", sans-serif;
color:#000000;
margin-bottom:0;
}
Рис. 3.2. Селектор тега воздействует на все экземпляры указанного элемента веб-страницы
Однако и здесь имеются свои недостатки. Как сделать, чтобы не все абзацы веб- страницы выглядели одинаково? Простыми селекторами типов этого добиться не удастся, потому что они не предоставляют достаточную информацию браузеру.
Глава 3. Селекторы: определение элементов стилизации 71Например, нужно задать различия между элементом p , выделенным определенным цветом и кеглем, и элементом p , который вы хотите оставить написанным шрифтом черного цвета. CSS предоставляет сразу несколько способов решения данной про- блемы, самый простой из которых — селекторы классов. Селекторы классов: точное управлениеЕсли вы хотите, чтобы какие-то элементы выглядели не так, как другие родствен- ные им элементы той же веб-страницы, например, хотите задать для одного или двух рисунков красную рамку, оставив все остальные изображения нестилизован- ными, то можете использовать селектор классов. Если вы привыкли работать со стилями в программах для редактирования текста, таких как Microsoft Word, то селекторы классов покажутся вам хорошо знакомыми. Вы создаете селектор, на- значая ему имя, а затем применяете его лишь к тем тегам HTML, которые хотите отформатировать. Например, вы можете создать класс .copyright и с его помощью выделить абзац, содержащий информацию об авторских правах, не затрагивая остальные абзацы. Селекторы классов позволяют указать конкретный элемент веб-страницы, не- зависимо от тегов. Предположим, вы хотите отформатировать одно или несколько слов абзаца. В данном случае применяется форматирование не ко всему тегу , а лишь к фрагменту абзаца. Таким образом, вам нужно использовать селектор клас- са для выделения определенного текста. Можно применить изменения к множе- ству элементов, входящих в различные HTML-теги. Например, вы можете придать какому-то абзацу и заголовку второго уровня (тег
|
|
|
Скачать 20.28 Mb.