Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML.
Вверху: язык разметки - снова поговорите о списке
Исходный источник глава 9 теги Lite
Ранее мы продолжали упоминать, что структурированный контент может классифицировать структуру и детали дизайна и оптимизировать теги. Что мы должны делать? Мы можем использовать XHTML и CSS, которые соответствуют стандартам вместо таблиц и изображений, чтобы создать макет, который нам нужен.
При использовании стандартных технологий для создания веб -сайтов (особенно веб -сайтов, которые в значительной степени полагаются на CSS), мы часто развиваем плохую привычку, которая состоит в том, чтобы добавлять дополнительные теги и атрибуты класса, и технология вообще не нужна.
Используя потомки селекторов в CSS, мы можем устранить ненужные <div>, <pan> и классификационные свойства. Упрощенные теги означают, что страницы будут читаются быстрее и проще в обслуживании. В этой главе мы обсудим несколько простых способов выполнения этой задачи. Как упростить теги при создании веб -сайта со стандартной технологией?
Упрощенные теги - важная тема, которую стоит обсудить. При создании веб -сайта, одним из огромных преимуществ, которые можно получить путем написания в законном XHTML, и настройки эффектов дисплея с помощью CSS является оптимизированным тегом. Короткий код представляет более быструю скорость загрузки, что, безусловно, является ключом для пользователей, которые используют 56K Dielup для доступа к Интернету. Короткий код также представляет требования к пространству сервера и уменьшает потребление полосы пропускания, что может сделать босс и системного менеджера счастливым.
Проблема заключается в том, что простое подтверждение того, что страница соответствует стандартной спецификации W3C, не означает, что код, используемый в контенте, будет сокращен. Конечно, вы можете добавить различные нежелательные теги в контент тегов, который соответствует стандартам. Да, это соответствует стандартам, но, возможно, добавил много ненужного кода, чтобы облегчить разработку CSS.
Не бойтесь! Здесь есть несколько советов, которые позволяют вам разрабатывать краткие и иметь стандартный контент тегов, но также сохранять достаточные возможности управления стилем CSS. Затем давайте узнаем несколько простых советов по оптимизации тегов. Селектор наследования
Здесь мы рассмотрим два способа отметить боковую панель (включая информацию, ссылки и другие вещи) на личном веб -сайте. Заполните все хорошие вещи в <Div> с помощью идентификатора, - это боковая панель, чтобы его можно было поместить в окно браузера позже (вторая часть будет обсуждать функциональность компоновки/типа CSS). Метод A: Счастливая классификация
<div id = боковая панель>
<h3 class = sideheading> об этом сайте </h3>
<p> Это мой сайт. </p>
<h3 class = sideheading> мои ссылки </h3>
<ul class = sideLinks>
<li class = link> <a href = archives.html> Archives </a> </li>
<li class = link> <a href = ae.html> обо мне </a> </li>
</ul>
</div>
Я видел Tagged Content, похожий на метод A на многих веб -сайтах. Когда дизайнер впервые обнаружил силу CSS, легко быть перегруженным и указать класс для каждого тега, который хочет создать специальный стиль.
В предыдущем примере, возможно, мы думаем, что <h3> указывает Class = sideheading, чтобы помочь им указать стили, отличные от других названий на странице; Указание класса для <ul> и <li> также по той же причине. Классификация CSS
При указании стиля предположим, что мы хотим, чтобы заголовок повернул оранжевый, используйте шрифт Serif, со светло -серым краем внизу, а неупопорядоченный список из боковых лиц должен удалить маленький точечный символ и изменить элемент списка на жирную жирную жирную жидкость.
Содержание CSS, требуемое методом A, будет выглядеть так:
.sideHeading {
Семейство шрифта: Грузия, засечка;
Цвет: #C63;
Пограничный подвод: 1PX SOLID #CCC;
}
.sidelinks {
тип списка: нет;
}
.связь {
шрифт-вес: жирный шрифт;
}
Мы можем ссылаться на имена классов (классы), установленные в тегах, чтобы указать специальные стили для этих тегов, и вы можете даже представить, что другие части страницы организованы таким образом: навигационные стержни, конец страницы и область содержания, каждый тег загроможден, чтобы иметь полный контроль над ними.
Да, это работает, но есть простой способ сохранить эти атрибуты класса, в то же время облегчая чтение CSS и более организован. Затем посмотрите на метод B. Метод B: естественный выбор
<div id = боковая панель>
<h3> об этом сайте </h3>
<p> Это мой сайт. </p>
<h3> мои ссылки </h3>
<ul>
<li> <a href = archives.html> архивы </a> </li>
<li> <a href = ae.html> обо мне </a> </li>
</ul>
</div>
Метод B короткий и краткий! Но подождите, куда идут категории? Ну ... вы скоро обнаружите, что они нам не нужны, в основном потому, что мы вкладываем эти теги в отношения <div> с уникальным именем (в данном случае, боковая панель).
Здесь используется селектор наследования. Нам просто нужно напрямую указать теги, расположенные в боковой панели с названием метки, чтобы удалить эти ненужные свойства классификации. Укажите CSS с содержанием до и после отношений.
Давайте посмотрим на тот же стиль, что и метод A, но на этот раз мы используем селектор наследования, чтобы указать тег, расположенный на боковой панели.
#SideBar H3 {Семейство шрифта: Грузия, засечка;
Цвет: #C63;
Пограничный подвод: 1PX SOLID #CCC;
}
#sidebar ul {тип списка: нет;
}
#sidebar li {шрифт-вес: жирный шрифт;
}
Ссылаясь на идентификатор #SideBar, вы можете указать специальный стиль для тегов, содержащихся в нем. Например, только теги <h3>, расположенные в пределах <div id = боковая панель>, устанавливают вышеуказанные правила CSS.
Этот метод определения стилей, основанный на взаимосвязи между контентом до и после, является ключом к сокращению контента. Обычно после разработки семантической структуры для контента нет необходимости добавлять атрибуты классификации на этикетку. Он не только используется в боковой панели
Мы отображаем только один абзац страницы (то есть боковая панель), но этот подход может быть применен ко всей структуре страницы. Просто разделите контент тега на несколько абзацев в соответствии с логикой (возможно, #NAV, #Content, #SideBar, #Footer), а затем используйте селектор наследования для создания специальных стилей для тегов в этом параграфе.
Например, предположим, что параграфы #Content и #SideBar на странице используют тег <h3>, и вы хотите, чтобы они использовали шрифт Serif, однако вы хотите, чтобы <h3> из одного абзаца отображался в фиолетовом, а другой, чтобы быть оранжевым.
Это не требует никакой модификации тега, а также свойства классификации. Мы можем указать правила для всех тегов <h3>, которые будут переданы глобальным стилем, а затем использовать селектор наследования для установки цвета в соответствии с позицией тега.
H3 {
Семейство шрифта: Грузия, засечка; / * Все H3s будут засечками */
}
#content h3 {
Цвет: фиолетовый;
}
#SideBar H3 {
Цвет: оранжевый;
}
Укажите, что все теги <h3> используют шрифты Senif, и цвета должны быть выбраны для использования фиолетового или оранжевого в соответствии с контекстом контента. В настоящее время нам не нужно повторять правила совместного использования (в этом примере, семье Font), поэтому содержание CSS может быть сокращено, а правила дубликатов могут быть предотвращены во многих операторах.
Мы можем не только уменьшить дополнительное пространство для маркировки, необходимое атрибутом класса, но структура CSS также становится более значимой, что облегчает нам прочитать его контент и организовать его в соответствии с сегментами страниц. Также становится очень простым изменять конкретные правила, что особенно очевидно для крупных и сложных наборов, потому что в настоящее время у вас могут быть сотни правил CSS одновременно.
Например, в этом примере, если вы добавите правила обмена в каждое объявление и хотите заменить все <h3> на шрифты Sans Serif позже, вы должны изменить три места, и нет возможности сделать это одновременно. Чем меньше классификаций, тем лучшее обслуживание
В дополнение к сокращению пространства исходного кода, которое необходимо использовать, замена избыточных категорий с помощью селекторов наследования также представляет собой будущую простоту маркировки контента.
Например, давайте предположим, что вы хотите, чтобы ссылки внутри боковой панели покраснели, а не использовали синий, как остальная часть страницы, поэтому вы создаете красный класс, который добавляет к метке якоря, как это:
<div id = боковая панель>
<h3> об этом сайте </h3>
<p> Это мой сайт. </p>
<h3> мои ссылки </h3>
<ul>
<li> <a href = archives.html class = red> archives </a> </li>
<li> <a href = ae.html class = red> О меня </a> </li>
</ul>
</div>
Чтобы превратить эти ссылки в красный (при условии, что цвет задачи не краснеет), требуется такая CSS, как это:
A: Link.red {
Цвет: красный;
}
Эти действия в порядке и могут работать нормально. Но что, если вы передумаете в будущем и хотите изменить эти ссылки на зеленый? Или более практично, ваш босс иногда говорит, что красный в этом году устарел, поэтому измените эти ссылки на боковой панели на зеленый! Нет проблем, вам просто нужно изменить красный класс в CSS и сделать это, но атрибут класса в маркирующем контенте все еще красная. Очевидно, что это не совсем соответствует семантике, как использование других цветов в качестве имени классификации.
Это не хорошее место для использования эффектов отображения в качестве имени классификации, но если мы вообще не указаем классификацию, мы можем сохранить много усилий (и кода) в обработке классификации и сделать семантику контента более разумной. С таким же успехом мы могли бы выбрать ссылки на эти боковые панели с селекторами наследования и указать стили по мере необходимости.
Содержание тега точно так же, как метод B, и CSS, необходимый для установки ссылки в боковой панели, будет похож на следующее:
#sidebar li a: ссылка {Цвет: красный;
}
По сути, это означает, что только якорные теги, использующие атрибут href в теге <li> в <div id = боковая панель>, также должны отображаться красным.
Теперь мы поддерживаем короткий и гибкий контент тегов, и будущие обновления требуют только CSS, независимо от того, хотим ли мы, что ссылка стала красной, зеленым, жирным шрифтом или курсивом.
Далее, давайте посмотрим на другой способ оптимизировать теги: устранить ненужные теги <div> и напрямую использовать существующие теги на уровне блоков.
Предыдущая страница 1 2 3 Следующая страница Прочитайте полный текст