1. Определите DIV
Проанализируйте типичный пример определения div:
#sample{ ПОЛЯ: 10 пикселей 10 пикселей 10 пикселей 10 пикселей;
ЗАПОЛНЕНИЕ: 20 пикселей 10 пикселей 10 пикселей 20 пикселей;
ГРАНИЦА-ВЕРХ: #CCC, 2 пикселя, сплошная;
ГРАНИЦА-ПРАВА: #CCC 2 пикселя, сплошная;
ГРАНИЦА-НИЖНЯЯ: #CCC 2 пикселя, сплошная;
ЛЕВАЯ ГРАНИЦА: #CCC, 2 пикселя, сплошная;
ФОНОВАЯ ИНФОРМАЦИЯ: url(images/bg_poem.jpg) #FEFEFE — повтор справа внизу;
ЦВЕТ: #666;
ВЫРАВНИВАНИЕ ТЕКСТА: по центру;
ВЫСОТА СТРОКИ: 150%; ШИРИНА: 60% }
Инструкции следующие:
Имя слоя — образец. Вы можете вызвать этот стиль, используя <div id="sample"> на странице.
MARGIN — это пустое пространство, оставшееся за пределами границы слоя, используемое для полей страницы или для создания зазора между другими слоями. «10px 10px 10px 10px» соответственно представляет собой четыре поля «верхнее, правое, нижнее и левое» (по часовой стрелке). Если они все одинаковы, их можно сократить до «MARGIN: 10px;». Если поле равно нулю, напишите «MARGIN: 0px;». Примечание. Если значение равно нулю, за исключением значения цвета RGB 0%, за которым должен следовать знак процента, в других случаях указывать единицу измерения «px» не требуется. MARGIN — прозрачный элемент и не может определять цвет.
ЗАПОЛНЕНИЕ относится к пространству между границей слоя и содержимым слоя. Как и в случае с полем, укажите расстояние от верхней, правой, нижней и левой границ до содержимого соответственно. Если они все одинаковые, вы можете сократить его до «PADDING:0px». Чтобы указать левую сторону индивидуально, вы можете написать «PADDING-LEFT: 0px;». PADDING — прозрачный элемент и не может определять цвет.
BORDER относится к границе слоя. «BORDER-RIGHT: #CCC 2px Solid;» определяет цвет правой границы слоя как «#CCC», ширину как «2 пикселя», а стиль как «сплошную» прямую линию. .
Если вам нужен стиль пунктирной линии, вы можете использовать «пунктир».
BACKGROUND определяет фон слоя. Он определяется на двух уровнях: сначала определите фон изображения и используйте «url(../images/bg_logo.gif)», чтобы указать путь к фоновому изображению, во-вторых, определите цвет фона «#FEFEFE». «no-repeat» означает, что фоновое изображение не нужно повторять. Если вам нужно повторить его по горизонтали, используйте «repeat-x», чтобы повторить его по вертикали, используйте «repeat-y» и повторите его для покрытия. весь фон, используйте «повторить». Следующее «правое нижнее;» означает, что фоновое изображение начинается с правого нижнего угла. Если фонового изображения нет, вы можете определить только цвет фона BACKGROUND: #FEFEFE.
ЦВЕТ используется для определения цвета шрифта, который был представлен в предыдущем разделе.
TEXT-ALIGN используется для определения расположения содержимого в слое: центр находится посередине, левый — слева, правый — справа.
LINE-HEIGHT определяет высоту строки 150 %, что означает, что высота составляет 150 % от стандартной высоты. Это также можно записать как: LINE-HEIGHT:1,5 или LINE-HEIGHT:1,5em, которые имеют то же значение.
ШИРИНА — это ширина определенного слоя, которая может иметь фиксированное значение, например 500 пикселей, или процентное значение, например «60%» здесь. Следует отметить, что эта ширина относится только к ширине вашего контента и не включает поля, границы и отступы. Но в некоторых браузерах он не определяется таким образом, поэтому вам нужно попробовать больше.
2.Блочная модель CSS2
С момента запуска CSS1 в 1996 году организация W3C рекомендовала размещать все объекты на веб-странице в поле. Дизайнеры могут управлять свойствами этого поля, создавая определения. К этим объектам относятся абзацы, списки, заголовки и изображения. и слой <div>. Боксовая модель в основном определяет четыре области: содержимое, отступы, границы и поля. Слой образца, о котором мы говорили выше, представляет собой типичную коробку. Новички часто путаются в уровнях, отношениях и взаимном влиянии полей, цвета фона, фонового изображения, заполнения, содержимого и границы. Вот принципиальная 3D модель коробки, надеюсь вам будет легче ее понять и запомнить.
При использовании макета XHTML+CSS существует технология, к которой вы, возможно, поначалу не привыкли. Следует сказать, что это образ мышления, который отличается от традиционного табличного макета, то есть: все вспомогательные изображения реализуются с помощью. фоны. Что-то вроде этого:
ФОНОВАЯ ИНФОРМАЦИЯ: url(images/bg_poem.jpg) #FEFEFE — повтор справа внизу;
Хотя можно вставить <img> непосредственно в контент, это не рекомендуется. «Вспомогательные изображения» здесь относятся к изображениям, которые не являются частью контента, отображаемого на странице, а используются только для украшения, интервалов и напоминаний. Например: изображения в фотоальбомах, изображения в новостях с изображениями и изображения трехмерных моделей коробок выше являются частью контента. Их можно вставить непосредственно на страницу с помощью элемента <img>, а другие похожи на логотипы и заголовок. изображения и изображения префикса списка. Все они должны отображаться в фоновом режиме или с помощью других методов CSS.
Для этого есть 2 причины:
Полностью отделите производительность от структуры (см. другую статью: «Понимание отделения производительности от структуры») и используйте CSS для управления внешним видом и производительностью для облегчения редактирования.
Сделайте страницу более удобной и дружелюбной. Например, если слепой человек использует программу чтения с экрана, изображения, реализованные с помощью фоновой технологии, не будут читаться вслух.