Вы изучаете верстку CSS? Вы все еще не можете полностью освоить верстку на чистом CSS? Обычно есть две ситуации, которые мешают вашему обучению:
Первая возможность заключается в том, что вы не поняли принцип обработки страниц CSS. Прежде чем рассматривать общую производительность вашей страницы, вам следует сначала рассмотреть семантику и структуру контента, а затем добавить CSS для семантики и структуры. Эта статья расскажет вам, как структурировать HTML.
Другая причина заключается в том, что вы не понимаете эти очень знакомые свойства слоя представления (такие как cellpadding, hspace, align=left и т. д.) и не знаете, в какие операторы CSS их преобразовать. Как только вы решите первую проблему и узнаете, как структурировать свой HTML, я дам вам список с подробным описанием того, какой CSS использовать для замены исходных атрибутов представления.
Структурированный HTML
Когда мы впервые изучаем создание веб-страниц, мы всегда сначала думаем, как их спроектировать, учитывая изображения, шрифты, цвета и планы макета. Затем с помощью Photoshop или Fireworks его рисуем и разрезаем на небольшие картинки. Наконец, отредактируйте HTML, чтобы восстановить все дизайны на странице.
Если вы хотите, чтобы ваша HTML-страница была оформлена с использованием CSS (CSS-дружественного), вам нужно вернуться назад и начать все сначала. Не думайте сначала о «внешнем виде», а сначала подумайте о семантике и структуре содержимого вашей страницы.
Внешний вид – не самое главное. Хорошо структурированная HTML-страница может быть представлена в любом виде, и CSS Zen Garden — классический пример. CSS Zen Garden помогает нам наконец осознать силу CSS.
HTML предназначен не только для чтения на экране компьютера. Ваши тщательно разработанные в Photoshop изображения могут не отображаться на КПК, мобильных телефонах и программах чтения с экрана. Но хорошо структурированная HTML-страница может отображаться где угодно и на любом сетевом устройстве с помощью различных определений CSS.
начать думать
Начните с изучения того, что такое структура, которую некоторые авторы также называют семантикой. Этот термин означает, что вам необходимо проанализировать блоки контента и цель, которой служит каждый фрагмент контента, а затем построить соответствующую структуру HTML на основе этих целей контента.
Если вы сядете и внимательно проанализируете и спланируете структуру своей страницы, у вас может получиться что-то вроде этого:
Логотип и название сайта
Содержимое главной страницы
Навигация по сайту (главное меню)
подменю
окно поиска
Функциональные области (например, корзина покупок, оформление заказа)
Нижний колонтитул (авторские права и соответствующие юридические уведомления)
Обычно мы используем элементы DIV для определения этих структур, примерно так:
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=магазин></div>
<div id=footer></div>
Дело не в макете, а в структуре. Это семантическое описание блоков контента. Когда вы поймете свою структуру, вы сможете добавить соответствующий идентификатор в DIV. Любой блок контента может содержаться в контейнере DIV, и в него может быть вложен другой блок DIV. Блоки контента могут содержать любые элементы HTML — заголовки, абзацы, изображения, таблицы, списки и т. д.
Основываясь на вышесказанном, вы уже знаете, как структурировать HTML, и теперь можете определять макет и стили. Каждый блок контента можно разместить в любом месте страницы, а также можно указать цвет, шрифт, границу, фон, свойства выравнивания и т. д. блока.
Использование селекторов — замечательная вещь
Имя идентификатора — это средство управления определенным блоком контента. Обернув этот блок контента DIV и добавив уникальный идентификатор, вы можете использовать селекторы CSS, чтобы точно определить внешний вид каждого элемента страницы, включая заголовки, списки и изображения. , ссылки или абзацы и т. д. Например, если вы напишете правило CSS для #header, оно может полностью отличаться от правила изображения в #content.
Другой пример: вы можете использовать разные правила для определения стилей ссылок в разных блоках контента. Примерно так: #globalnav a:link или #subnav a:link или #content a:link. Вы также можете определить разные стили для одного и того же элемента в разных блоках контента. Например, определите стили p в #content и #footer соответственно через #content p и #footer p. Структурно ваша страница состоит из картинок, ссылок, списков, абзацев и т. д. Эти элементы сами по себе не влияют на то, на каком сетевом устройстве они отображаются (КПК, мобильный телефон или интернет-телевидение). Их можно определить как любой вид исполнения.
Тщательно структурированная HTML-страница очень проста, и каждый элемент используется для структурных целей. Если вы хотите сделать отступ для абзаца, вам не нужно использовать тег blockquote. Просто используйте тег p и добавьте правило CSS-полей к p, чтобы добиться цели отступа. p — это структурированный тег, а поля — атрибут представления. Первый принадлежит HTML, а второй — CSS. (Это разделение структуры и выражения.)
Хорошо структурированные HTML-страницы практически не содержат атрибутивных тегов. Код очень чистый и краткий. Например, исходный код <table width=80% cellpadding=3 border=2 align=left> теперь может писать <table> только в HTML, а все, что контролирует производительность, написано в CSS. В структурированном HTML таблица — это таблица. таблица, а не что-либо еще (например, используемое для макета и позиционирования).
Практикуйтесь в структурировании себя
Вышеуказанное является лишь самой базовой структурой. В реальном приложении вы можете настроить блоки контента в соответствии с вашими потребностями. Часто происходит вложение DIV, и вы увидите, что в слое контейнера есть и другие слои со структурой, похожей на эту:
<div id=navcontainer>
<div id=globalnav>
<ul>список</ul>
</div>
<div id=subnav>
<ul>еще один список</ul>
</div>
</div>
Вложенные элементы div позволяют определить дополнительные правила CSS для управления представлением. Например, вы можете задать #navcontainer правило для центрирования списка справа, задать #globalnav правило для центрирования списка слева и задать #subnav другое. Правило полностью центрировать список. Различные выступления.
Замените традиционные методы CSS
Следующий список поможет вам заменить традиционные методы CSS:
Атрибуты HTML и соответствующие методы CSS
Описание метода CSS атрибута HTML
выровнять = по левому краю
выровнять = вправо с плавающей запятой: влево;
float: right; Используйте CSS для размещения любого элемента: изображений, абзацев, элементов управления, заголовков, таблиц, списков и т. д.
Когда вы используете атрибут float, вы должны определить ширину плавающего элемента.
marginwidth=0 leftmargin=0marginheight=0topmargin=0margin: 0; используя CSS, поля можно установить для любого элемента, а не только для элемента body. Что еще более важно, вы можете указать верхнюю, правую, нижнюю и левую часть элемента. отдельно значение маржи.
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
а:посещено: #339;
а: наведение: #999;
а:активный: #00f;
В HTML цвет ссылки определяется как значение атрибута тела. Стиль ссылок одинаков на всей странице. Используя селекторы CSS, стили ссылок могут быть разными в разных частях страницы.
bgcolor=#FFFFFF background-color: #fff; В CSS цвет фона может быть определен для любого элемента, а не только для элементов тела и таблицы.
bordercolor=#FFFFFF border-color: #fff; Любой элемент может установить границу (бодер). Вы можете определить верхнюю, правую, нижнюю и левую границы соответственно.
граница=3
cellpacing=3 border-width: 3px; Используя CSS, вы можете определить границы таблицы как единый стиль или определить цвет, размер и стиль верхней, правой, нижней и левой границ соответственно.
Вы можете использовать селекторы table, td или th.
Если вам нужно установить эффект без полей, вы можете использовать определение CSS: border-collapse: коллапс;
<br ясно=влево>
<br ясно=вправо>
<br очистить=все>
ясно: слева;
ясно: верно;
ясно: оба;
Многие макеты с двумя или тремя столбцами используют атрибут float для позиционирования. Если вы определяете цвет фона или фоновое изображение в плавающем слое, вы можете использовать атрибут очистки.
ячейка = 3
vspace=3
hspace=3 padding: 3px; Используя CSS, атрибут заполнения можно установить для любого элемента. Аналогичным образом, отступы можно установить сверху, справа, снизу и слева соответственно. прокладка прозрачная.
выравнивание = по центру выравнивание текста: по центру;
поле справа: авто; поле слева: авто;
Text-align работает только с текстом.
Элементы уровня блока, такие как div и p, могут быть центрированы по горизонтали с помощью полейmargin-right:auto иmargin-left:auto;
Некоторые прискорбные методы и рабочая среда
Из-за несовершенной поддержки CSS браузерами нам иногда приходится применять некоторые трюки (хаки) или создавать среду (обходные пути), чтобы позволить CSS достичь того же эффекта, что и традиционные методы. Например, для блочных элементов иногда необходимо использовать методы горизонтального центрирования, методы устранения ошибок в блочной модели и т. д. Все эти методы подробно описаны в статье Молли Хольцшлаг «Интегрированный веб-дизайн: стратегии долгосрочного управления хаками CSS».
Еще один ресурс по методам CSS — «Позиция — это все» Большого Джона и Холли Бержевин.
Понимание поведения float
Книга Эрика Мейера «Содержание поплавков» поможет вам освоить использование атрибутов float для макета. Иногда элементы с плавающей запятой необходимо очищать. Чтение «Как очистить плавающие элементы без структурной разметки» будет очень полезным.