Главная страница

Методические указания по использованию каскадных таблиц стилей css 2 Введение


Скачать 0.8 Mb.
НазваниеМетодические указания по использованию каскадных таблиц стилей css 2 Введение
Дата15.03.2023
Размер0.8 Mb.
Формат файлаpdf
Имя файлаmetodichka_po_css.pdf
ТипМетодические указания
#991590
страница3 из 3
1   2   3

Article 1:


All human beings are born free и equal in dignity и rights.
They are endowed with reason и conscience и should act towards one another in a spirit of brotherhood

44
Добавив цвет и информацию шрифта этот пример можно представить так:
В этом примере - два элемента : и
. Боксовая модель этих элементов выглядит так:
Хотя это может показаться немного сложным, тем не менее, видно, что каждый
HTML-элемент окружѐн боксом. Боксом, который можно настроить с помощью
CSS.
Резюме
В этом уроке вы узнали о боксовой модели. В следующих трѐх уроках мы подробнее остановимся на том, создавать элементы и управлять ими в боксовой модели.

45
Урок 10: Поля и заполнение
В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding
Установим поля элемента
У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краѐв документа). См. также диаграмму в Уроке 9.
В качестве первого примера мы разберѐмся, как определить поля самогó документа, т. е. элемента

. На иллюстрации показано, какие поля нам нужны.
CSS-код для этого примера выглядит так: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;
}

46
Или вы можете написать более элегантно: body { margin: 100px 40px 10px 70px;
}
Вы можете установить поля примерно таким же образом почти для любого элемента. Например, мы можем определить поля для всех параграфов
: body { margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Установим заполнение элемента
Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.
Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон: h1 {

47
background: yellow;
} h2 {
background: orange;
}
Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка: h1 { background: yellow;
padding: 20px 20px 20px 80px;
} h2 { background: orange;
padding-left:120px;
}
Резюме
Вам остался один шаг до создания боксовой модели в CSS. В следующем уроке мы рассмотрим, как устанавливать рамки разного цвета и как очерчивать элементы.

48
Урок 11: Рамки
Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.
Толщина рамки [border-width]
Толщина рамки определяется свойством border-width
, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:
Цвет рамки [border-color]
Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .
Типы рамок [border-style]
Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.
Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

49
Примеры определения рамок
Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для


,


,

    и
    . Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности: h1 { border-width: thick; border-style: dotted; border-color: gold;
    } h2 { border-width: 20px; border-style: outset; border-color: red;
    }


50 p { border-width: 1px; border-style: dashed; border-color: blue;
} ul { border-width: thin; border-style: solid; border-color: orange;
}
Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid;

51 border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;
}
Сокращѐнная запись [border]
Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример: p { border-width: 1px; border-style: solid; border-color: blue;
} можно объединить в: p { border: 1px solid blue;
}

52
Резюме
В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.
В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

53
Урок 12: height/высота и width/ширина
До сих пор мы особо не заботились о размерах элементов, с которыми работали. В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.
Установка ширины [width]
Свойством width вы можете определять ширину элемента.
В примере показан бокс для ввода текста: div.box { width: 200px; border: 1px solid black; background: orange;
}
Установка высоты [height]
Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса. Высоту элемента можно определить свойством height
. В качестве примера попытаемся создать бокс высотой 500px: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange;
}

54
Резюме
Уроки 9, 10, 11 и 12 дали введение в боксовую модель CSS. Как вы, вероятно, заметили, боксовая модель предоставляет много новых возможностей. Ранее вы уже могли использовать таблицы в HTML для дизайна страниц, но с помощью CSS и боксовой модели вы сможете создавать элегантный дизайн более точно и в соответствии с рекомендациями W3C.

55
Урок 13: Всплывающие элементы
(поплавки)
Элемент может "всплывать" вправо или влево с помощью свойства float
. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса) (см. в Уроке 9 описание боксовой модели). Принципы показаны на рисунке:
Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:
Как это сделать?
HTML-код для этого примера:

bill gates


56 causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:
#picture {
float:left;
width: 100px;
}
Ещѐ пример: колонки
Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами

таким образом:

Haec disserens qua de re agatur et in quo causa consistat non videt...

causas naturales et antecedentes, idciro etiam nostrarum voluntatum...

57

nam nihil esset in nostra potestate si res ita se haberet...

Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float
:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}

58 float может иметь значения left, right или none.
Свойство clear
Свойство clear управляет поведением последовательностью всплывающих элементов документа.
По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения Била Гейтса.
Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear
, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

bill gates

Bill Gates
>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:
#picture { float:left; width: 100px;


59
}
.floatstop {
clear:both;
}
Резюме
Поплавки можно использовать в разных ситуациях, часто - одновременно с позиционированием. В следующем уроке мы разберѐм, как позиционировать бокс, относительно или абсолютно.

60
Урок 14: Позиционирование элементов
При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. Урок 13) позиционирование даѐт вам большие возможности для создания точного и навороченного дизайна.
В этом уроке мы обсудим следующее:
Принципы CSS-позиционирования
Представим окно браузера как систему координат:
Принципы CSS-позиционирования - в том, что вы можете расположить бокс в системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. Урок 9) заголовок выглядит так:
Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS: h1 { position:absolute;
top: 100px;

61
left: 200px;
}
Вот результат:
Как видите, Позиционирование с помощью CSS - очень точная техника при размещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещѐ что-нибудь подобное.
Абсолютное позиционирование
Элемент, позиционированный абсолютно, не получает никакого пространства к документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство.
Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:
#box1 {
position:absolute;

62 top: 50px; left: 50px;
}
#box2 {
position:absolute; top: 50px; right: 50px;
}
#box3 {
position:absolute; bottom: 50px; right: 50px;
}
#box4 {
position:absolute; bottom: 50px; left: 50px;
}
Относительное позиционирование
Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.

63
Позиция элемента, размещаемого относительно, обсчитывается относительно его
оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всѐ ещѐ занимает в документе пространство после позиционирования.
Как пример относительного позиционирования попробуем разместить три рисунка относительно их оригинального расположения на странице. Обратите внимание, что рисунки оставили после смещения пустое пространство на своих оригинальных позициях в документе:
#dog1 { position:relative; left: 350px; bottom: 150px;
}
#dog2 { position:relative; left: 150px; bottom: 500px;
}
#dog3 { position:relative; left: 50px; bottom: 700px;
}
Резюме

64
В последних двух уроках вы научились создавать поплавки и позиционировать элементы. Эти два метода дают вам определѐнные преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них используйте CSS. Это точнее, имеет определѐнные преимущества и намного проще в работе.

65
Урок 15: Наслоение с помощью z-index
(Слои)
CSS оперирует в трѐх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.
Для этого вы можете присвоит каждому элементу номер (
z-index
). Элемент с бóльшим номером перекрывает элемент с меньшим номером.
Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index
:
При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).
Вот код примера с картами:
#ten_of_diamonds { position: absolute; left: 100px; top: 100px;
z-index: 1;
}

66
#jack_of_diamonds { position: absolute; left: 115px; top: 115px;
z-index: 2;
}
#queen_of_diamonds { position: absolute; left: 130px; top: 130px;
z-index: 3;
}
#king_of_diamonds { position: absolute; left: 145px; top: 145px;
z-index: 4;
}
#ace_of_diamonds { position: absolute; left: 160px; top: 160px;
z-index: 5;
}

67
Это относительно простой метод, но в нѐм заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.
Резюме
Слои можно использовать в различных ситуациях. Например, попробуйте использовать z-index для эффектов с заголовками вместо создания этих заголовков как графических элементов. С одной стороны, текст загружается быстрее, а с другой - потенциально улучшается работа поисковых машин.

68
Урок 16: Web-стандарты и проверка
кода
W3C это World Wide Web Consortium, независимая организация по разработке стандартов кодов Internet (например, HTML, CSS, XML и др.). Microsoft, The
Mozilla Foundation и многие другие являются членами W3C и работают по соглашению о перспективах развития этих стандартов.
Если вы уже немного работаете в сфере web-дизайна, то, вероятно, знаете, что страницы могут выглядеть по-разному в различных браузерах. Это может причинять немалые неудобства и отнимать массу времени при создании страниц, которые будут просматриваться в Mozilla, Internet Explorer, Opera и во всех других существующих браузерах.
Идея стандартизации в том, чтобы заключить соглашение о развитии web- технологий. Это значит, что, действуя в рамках стандартов, web-разработчик может быть уверен, что он работает в стиле, который будет универсальным для различных платформ. Поэтому мы рекомендуем, чтобы вы следили за работой W3C и
проверяли ваш CSS на соответствие стандарту.
CSS validator/проверщик
Для облегчения проверки на соответствие CSS-стандарту, W3C создал так называемый validator, который читает ваши таблицы стилей/stylesheet и возвращает список предупреждений о нарушениях и ошибок, если ваш CSS их содержит.
Если validator не найдѐт ошибок; будет показано изображение, которое вы можете разместить на вашем сайте для иллюстрации того, что вы проверяете код:
Этот validator можно также найти по этой ссылке: http://jigsaw.w3.org/css-validator/
1   2   3


написать администратору сайта