рефераты конспекты курсовые дипломные лекции шпоры

Раздел Информатика
/
Блоковая модель в CSS

Реферат Курсовая Конспект

Выберите учебное заведение

Блоковая модель в CSS

Блоковая модель в CSS - раздел Информатика, ОСНОВЫ CSS В Html Различают Элементы Блочные И Строчные. Причем Блочные Элементы - Это О...

В html различают элементы блочные и строчные. Причем блочные элементы - это отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают отдельной структурной единицы, не отделяются абзацными отступами, и, например, два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , EM ,I.

Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру:

Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца.

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.

Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.

Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

Разобрались? тут нет ничего сложного. В следующем уроке мы детально рассмотрим свойство border позволяющее задать стиль рамки блоков, изображений, таблиц и др.

Развернуть

Открыть в широком формате

– Конец работы –

Эта тема принадлежит разделу:

ОСНОВЫ CSS

Комментарии используются чтобы пояснить ваш код и могут помочь вам когда вы будете редактировать исходный код позже Комментарии игнорируются... CSS комментарий начинается с quot quot и заканчивается quot quot... Это комментарий p text align center Это другой комментарий color black font family arial...

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Блоковая модель в CSS

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

ОСНОВЫ CSS
CSS - Cascading Style Sheets - в переводе Каскадные таблицы стилей. CSS значительно облегчает и автоматизирует создание веб-сайтов. Каскадные таблицы стилей открывают совершенно н

Синтаксис и принцип работы CSS
CSS имеет строго определенный синтаксис, т.е. правила, по которым создаются таблицы стилей. В CSS, в отличие от HTML, нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей в CSS я

Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

Встроенные Стили
Встроенный стиль теряет много преимуществ таблиц стилей, смешивая содержание с оформлением. Этот метод используется в исключительных случаях! Чтобы добавить встроенные стили, вы использует

Несколько Таблиц Стилей
Если некоторые свойства были установлены для одного и того же селектора в различных таблицах стилей, значения будут браться из более специфической таблицы стилей. Например, внешняя таблица

Порядок соединения
Какой стиль будет использоваться, когда указано более одного стиля для HTML элемента? Вообще говоря, можно сказать, что все стили "сольются" в новую "фактическую" табли

Цвет и фон в CSS
Цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.) Основными свойствами цвета

Все Фоновые Свойства CSS
Свойство Описание background Устанавливает все фоновые свойства в одном объявлении background-attachment

Шрифты в CSS
Рассмотрим основные свойства шрифтов: font-family font-style font-variant font-weight font-size font

Все CSS Свойства Шрифта
Свойство Описание font Устанавливает все свойства шрифта в одном объявлении font-family Устанав

Текст в CSS
В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста. text-align text-decoration text-indent text-transform letter

Все Текстовые Свойства CSS
Свойство Описание color Устанавливает цвет текста direction Устанавливает направление текста/на

Списки в CSS
Рассмотрим основные свойства CSS, отвечающие за внешний вид списков. Ø list-style-type Ø list-style-position Ø list-style-image &Osla

Все CSS Свойства Списка
Свойство Описание list-style Устанавливает все свойства списка в одном объявлении list-style-image

Типы селекторов в CSS
Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS . Селектор по элементу; Селект

Границы Таблиц
Чтобы указать границы таблиц в CSS, используйте свойство border. Пример ниже указывает черную границу для элементов table, th, и td: table,th,td { border:1px solid black

Выравнивание Текста Таблицы
Текст в таблице выравнивается с помощью свойств text-align и vertical-align. Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (ri

Цвет Таблицы
Пример ниже указывает цвет границ, текста и фона элементов th: table, td, th { border:1px solid green; } th { background-color:green; color:white; }

Рамки в CSS
Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие: border-width border-color border-style Сокращенна

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.
И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат: .p1 { background-color :

WIDTH - свойство устанавливающее ширину блока;
Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др. Теория - теорией, но давайте практико

Позиционирование блоков
Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, спи

Плавающие блоки(свойство float)
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современ

Слои в CSS
В этом уроке, поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо, а для остальных постараюсь объяснить. Создавая бло