Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML. Если вы хотите просмотреть учебник CSS, пожалуйста, нажмите здесь.
Вверху: язык разметки - Lite Tags . Глава 10 Применяйте CSS
В первой части основное внимание уделяется примеру синтаксиса тегов, и мы также исследуем, как применять CSS на теге для дизайна и указать детали стиля. Во второй главе мы обсудим несколько способов применения CSS к документу, веб -сайту или даже одному тегу. Кроме того, мы также обсудим, как скрыть контент CSS от предыдущих версий браузеров, чтобы мы могли использовать расширенные методы, не влияя на структуру тегов, которая может быть прочитана всеми браузерами и устройствами.
В последнем блоке удлинения кончика главы мы представим практику переключения шрифтов, цветов и создания нескольких тем без необходимости писать сценарии - заменить листы стилей. Как применить CSS к файлам?
Теперь мы обсудим четыре разных способа применения CSS к документам. Каждый метод имеет свои преимущества и недостатки. В зависимости от ситуации, все четыре метода могут быть лучшим выбором. В каждом методе, продемонстрированном здесь, используется легальная структура перехода XHTML 1.0 переходного синтаксиса, теги и <html> и <Head>.
Давайте начнем с метода A. Метод A: <style> Tag
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<Title> Применение CSS </title>
<стиль типа = текст/css> <! [Cdata [... Заявление CSS поставлено сюда ...
]]> </style></head>
Этот подход также становится встроенной таблицей стилей, позволяя вам писать все объявления CSS непосредственно в (x) HTML -файл, а тег <style> расположен на странице <Head> и может быть помещен в любой стиль, который вам нужен.
Текст/CSS, указанный для атрибута типа, гарантирует, что браузер понимает язык стиля, который мы используем, и не может быть опущен. Мы также используем синтаксис аннотаций CDATA, рекомендованный W3C, чтобы скрыть это содержимое от браузеров, которые не могут обрабатывать правила стиля (http://www.w3.org/tr/xhtml1/#h-4.8).
Одним из основных недостатков использования метода A является то, что некоторые старые браузеры (особенно Internet Explorer 4.x и Netscape 4.x) сделают все возможное, чтобы отобразить эффект CSS, указанный в теге <style>. Если вы используете какие -либо расширенные правила макета CSS и позиционирования, которые поддерживают только последний браузер, это может вызвать проблемы. Если вы поместите сложные правила CSS в тег <style>, это может привести к запутанным и трудно читать результаты набора набора для пользователей старых браузеров. Это не может быть кэшировано.
Еще один недостаток встроенных листов в стиле: если размещен на странице, вы должны загружать его вместе каждый раз, когда читаете страницу. Напротив, другие методы, предоставленные позже, могут позволить листу стиля быть загруженным только один раз, а затем напрямую использовать кэш браузера. Изменить его несколько раз.
Поскольку встроенный лист стиля хранится на страницах XHTML, если тот же стиль используется на многих страницах веб -сайта, это означает, что в этих стилях будет много идентичных копий. Если вам нужно изменить эти стили, вы должны изменить все страницы, которые используют один и тот же стиль. Помнить! Модификация многих документов одновременно будет рутиной. Удобно разработать
Говоря о преимуществах, я обнаружил, что когда я впервые начал писать и тестировать CSS, было очень удобно писать все правила на странице, которую я использовал для тестирования с использованием метода A. Это позволило мне поместить отметки и стили в тот же документ, что было удобно для частых изменений. После того, как тест был завершен, я по -разному применяю CSS для публичной версии. Давайте посмотрим на несколько методов. Метод B: лист внешнего стиля
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<Title> Применение CSS </title>
<Link rel = styleSheet type = text /css href = styles.css _fcksavedurl = styles.css /></head>
Метод B демонстрирует практику подключения листов внешнего стиля: поместите все содержимое объявления CSS в отдельный документ, а затем ссылайтесь на его контент, используя тег <link> в (x) html <Head>.
Мы используем атрибут Href, чтобы указать местоположение документа. Этот атрибут может быть относительным путем (например, пример выше) или абсолютный путь (заполненный в полном положении http: // листа стиля). В то же время обратите внимание, что <Link> представляет собой единый тег или пустой тег, и он должен быть закрыт в / в конце. Разделение документа = удобно для технического обслуживания
Существует явное преимущество в том, что все правила CSS в документы, отличные от тегатированного контента: то есть любые изменения стиля, внесенные на весь веб -сайт, могут быть изменены для завершения файла без необходимости многократного изменения оператора CSS для каждой веб -страницы, как при использовании метода A.
Конечно, это очень важно для крупномасштабных сайтов. Сотни или даже тысячи страниц могут поделиться тем же стилем в одном документе. Скачать один раз
Одним из дополнительных преимуществ связывания листов внешнего стиля является то, что этот документ обычно загружается только один раз, а браузер будет использовать кэш, который может сохранить время загрузки, необходимое при многократном просмотре одной и той же страницы или других страниц, которые ссылаются на тот же лист стилей. Это все еще не может быть полностью скрыто.
Как и метод A, метод B все еще может быть старым и поддерживает только некоторые функции CSS для интерпретации браузеров. Любой стиль, предназначенный для новейших браузеров, может вызвать большую путаницу в неподдерживаемых браузерах.
Ну ... это второй раз, когда я упомянул эту проблему, следующий метод должен решить ее, верно? Метод C: @import
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<Title> Применение CSS </title>
<стиль типа = текст/css> <! [Cdata [ @import styles.css; ]]> </style></head>
Подобно методу B, использование @import может импортировать определения CSS из внешних файлов с относительными путями (например, пример выше) или абсолютных путей.
Метод C имеет те же преимущества, что и использование тега <nult>. Поскольку лист стилей помещен во внешний документ, изменение и обновление одного документа может изменить весь веб -сайт и может быть выполнено легко и быстро. Внешний лист стиля будет кэширован браузером, сохранив время загрузки для импорта всех страниц того же листа стиля.
Основным преимуществом использования метода C является то, что следующие версии Netscape 4.x не поддерживают синтаксис @Import, поэтому он скрывает ссылочное содержание CSS. Это, безусловно, полезный трюк, потому что мы можем написать расширенный синтаксис CSS для обработки деталей дизайна, таких как макеты, чтобы последние браузеры, которые могут обрабатывать их, а также заставлять старые браузеры игнорировать эти синтаксисы.
Проблема с Netscape 4.x заключается в том, что он считает, что его возможности поддержки CSS так же хороши, как и те, которые на самом деле поддерживаются. Поэтому, за исключением Netscape 4.x, мы можем позволить браузеру решить, отображать ли правильный эффект самостоятельно.
Это ключевой момент при разработке веб -сайтов на основе стандартного дизайна. Попробуйте отделить структурированный код тега от режима отображения и предоставить детали макета и другие стили для поддерживаемых браузеров. Старые браузеры используют структурированный контент, который они могут легко читать и отображать, но не будут иметь дело с передовыми правилами CSS, скрываемыми для них. Открытые стили и близкие стили.
Посмотрите на рисунки 10-1 и 10-2 и сравните их. Это мой личный веб -сайт с использованием полного CSS, а затем выключите эффект дисплея CSS (он должен быть очень близок к эффекту отображения старых браузеров). Структура, когда не использует CSS, все еще очень очевидна, и каждому все еще легко читать и использовать. Если мы не скрываем CSS, необходимые для макета дисплея, пользователи старых браузеров могут получить кучу трудного для чтения контента.
Рисунок 10-1 Мой личный веб-сайт, используя CSS
Рисунок 10-2: Удалите CSS на одной странице, и старый браузер может отображать его как комбинацию метода B и метода C, чтобы применить лист с несколькими стилями.
Иногда, например, может быть полезно ввести множество листов в одном документе, вы можете поместить все правила макета в один документ и настройки шрифта в другой документ, что может упростить работу по поддержанию большого количества правил для больших, сложных дизайнов. Хамелеон эффекты
Когда я создавал веб -сайт для журнала Fast Company, я хотел менять цветовую схему веб -сайта каждый месяц, чтобы он мог соответствовать изображению обложки текущего журнала. Чтобы упростить регулярную работу по модификации, я помещаю все связанные с цветом правила CSS в один документ и помещаю другие правила, которые не будут изменены каждый месяц в другой документ.
Это может быть проще и быстро охватывать все цвета каждый месяц, без необходимости медленно находить контент, который необходимо изменять в сотнях других правил, которые составляют дизайн. Пока этот документ изменен, цвет всего веб -сайта будет изменен немедленно. Как это сделать
Чтобы ввести несколько листов в стиле в сочетании с методом B и методом C, метод состоит в том, чтобы использовать тег <link> на странице для ссылки на основной документ CSS, такой же, как и Demoncation Method B, и ссылка на styles.css.
Содержание styles.css содержит только несколько правил @Import и вводит необходимые другие файлы CSS.
Например, если вы хотите представить три листа стиля, один для обработки макета, один для определения шрифтов и один для определения цвета, то содержание styles.cs может выглядеть так:
/*Старые браузеры не будут интерпретировать эти правила импорта*/
@import url (layout.css);
@import url (fonts.css);
@import url (colors.css);
Таким образом, один и тот же тег <NINK> может быть использован по всему веб -сайту, и упоминается только файл styles.css. Этот документ может продолжать импортировать листы других стилей с правилом @Import. Пока новый лист стиля добавляется в этот документ, он может сыграть роль во всем веб -сайте.
Это очень легко обновлять и заменить CSS. Например, если вы внезапно хотите сократить CSS на 4 файла на дороге, вам нужно только изменить правила @Import этого документа, не изменяя все исходные код XHTML.
Существует еще один трюк, чтобы скрыть CSS от старых браузеров, используя метод @Import, то есть, используйте каскадный эффект CSS и используйте метод A или метод B для предоставления старых и новейших браузеров для поддержки эффектов LO-Fi, а затем использовать @Import для обеспечения расширенных эффектов для других поддерживаемых браузеров.
Старые браузеры получат только контент, который они могут поддерживать, в то время как новые браузеры получат все стили, которые они хотят использовать.
Посмотрим, как выглядит код этой техники:
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<Title> Применение CSS </title>
<ссылка rel = styleSheet type = text /css href = lofi.css _fcksavedurl = lofi.css /> <стиль типа = текст/css> @import hifi.css; </style></head>
Здесь lofi.css должны содержать основные правила CSS, такие как цвет ссылок и размер шрифта; В то время как hifi.css содержит расширенные правила, такие как макет, позиционирование, фоновые изображения и т. Д.
Мы можем передавать стили версии LO-Fi и Hi-Fi без необходимости писать сценарии или идентифицировать версии браузера на стороне сервера. Порядок важен
Важно указать порядок <link> и <style> тегов в исходном коде тега. Каскад CSS относится к приоритету правил, который определяется на основе порядка возникновения.
Например, поскольку большинство последних браузеров поддерживают оба метода, будут загружены все листы стилей, и все стили будут применены. В настоящее время правила стиля в hifi.css будут переопределять стили, указанные lofi.css для той же теги. В чем причина? Потому что в исходном коде тега hifi.css появляется после lofi.css.
Старые браузеры игнорируют hifi.css, потому что правило @import не поддерживается, поэтому они используют только стиль, определяемый lofi.css. Принять каскадную функцию
Преимущества CSS Cascadedity приводятся различными способами. Например, предположим, что весь ваш веб -сайт разделяет внешний CSS для макета, позиционирования, настройки шрифтов, цветов и т. Д., То, что вам следует использовать на каждой странице метод @Import, чтобы скрыть эти правила для старых браузеров.
Если на веб -сайте есть страница, которая хочет поделиться настройками макета и позиционирования, но необходимо настроить шрифт или цвет. На этой странице (отличной от других страниц на веб -сайте) основной документ CSS все еще может быть введен. После завершения ссылки мы будем ссылаться на второй документ CSS, который определяет специальный стиль для этой страницы. Любые правила во втором файле CSS будут предпочтительны, перезаписывая правила стиля, указанные первым файлом CSS для той же метки.
Давайте посмотрим на пример. Master.css содержит всю структуру веб -сайта, шрифты и другие правила CSS, в то время как в custom.css на это ссылается только на определенной странице, охватывая настройки стиля нескольких специальных тегов.
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<голова>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<Title> Применение CSS </title>
<стиль типа = текст/css> @Import master.css; @Import custom.css; </style></head>
Поскольку custom.css является вторым в исходном коде тега, стиль, который он определяет для того же тега, переопределяет то, что сформулировано в master.css.
Например, предположим, что в Main.css мы требуем, чтобы тег <h1> для использования шрифта Red Serif и <h2> для использования синего шрифта засечка.
H1 {
Семейство шрифта: Грузия, засечка;
Цвет: красный;
}
H2 {
Семейство шрифта: Грузия, засечка;
Цвет: синий;
}
На определенной странице мы хотим только изменить настройки стиля тега <h1> и следить за стилем <h2>. Затем в custom.css нам нужно только объявить новый стиль для <h1>.
H1 {
Фонт-семья: Вердана, Санс-Сэриф;
Цвет: оранжевый;
}
Это объявление будет переоценить декларацию в master.css (потому что custom.css введен позже). Если страница сначала представляет Master.css, а затем Custom.css, тег <h1> будет использовать шрифт Orange Verdana, в то время как <h2> все еще остается синим шрифтом Serif. Потому что последующее объявление в master.css не переопределено custom.css.
Каскадная функция CSS является отличным инструментом для обмена общими стилями, что позволяет вам охватывать только правила, которые необходимо изменить.
<h1 style = font-family: Georgia, Serif; Цвет: Orange;> Это название </h1>
Это четвертый метод приложения CSS, с которым мы вступили в контакт - встроенные стили. Почти любой тег может быть добавлен с атрибутами стиля, что позволяет напрямую применять правила стиля CSS к тегам, как приведенный выше пример.
Поскольку встроенные стили являются самым низким уровнем укладки, они переопределяют все объявления внешнего стиля и правила, объявленные в рамках тега <style> <Head>.
Это простой способ добавления стилей на всей странице, но его нужно платить за использование его. Стиль привязан к лейблу
Если вы слишком сильно полагаетесь на метод D при создании стилей для страницы, то вы не будете отделять контент и отображать методы. Когда вы вернетесь и изменяетесь, вы должны обосновать исходный код и положить CSS в отдельный файл, который будет намного проще поддерживать.
Метод злоупотребления D ничем не отличается от использования меток эффекта отображения, таких как <font> для загрязнения исходного кода. Эти детали дизайна всегда должны быть размещены в другом месте. Будьте осторожны в использовании
В действительности, конечно, иногда возможность использовать встроенные стили состоит в том, чтобы сохранить вашу жизнь, когда вам нужно добавить стили на страницу, но вы не можете получить доступ к внешним файлам, или вы не можете изменить <Head>, или вы можете использовать стиль временно, и вы также будете использовать его, когда не собираетесь делиться им с другими тегами.
Например, если на веб -сайте есть страница, которая предварительно просмотрите благотворительную продажу, которая будет удалена позже, и вы хотите разработать уникальный стиль для этой страницы, то, возможно, встраивает эти правила стиля в тег, не добавляя их в лист с постоянным стилем.
Давайте сделаем это сейчас, но имейте в виду, что эти стили не могут быть легко изменены или используются по всей странице для всего веб -сайта.
Предыдущая страница 1 2 3 Следующая страница Прочитайте полный текст