Каскадные таблицы стилей CSS Блоковая модель. Синтаксис CSS. - презентация

1 Каскадные таблицы стилей CSS Блоковая модель

2 Синтаксис CSS

3 Форматирование блоков Область содержимого Поля Границы Отступы

4 Форматирование блоков. Поля Это специальные области, позволяющие задать некое свободное, ничем не занятое пространство вокруг границы блока. Регулируя величину полей, можно управлять расстоянием между блоками, например, уменьшить или увеличить абзацный отступ между абзацами. margin-top - задает ширину верхнего поля; margin-right - задает ширину правого поля; margin-bottom - задает ширину нижнего поля; margin-left - задает ширину левого поля. Свойства

5 Форматирование блоков. Отступы Отступы позволяют отделить основное содержимое блока от границы таким образом, чтобы граница располагалась на некотором расстоянии от содержимого. padding-top - ширина верхнего поля. padding-right - ширина правого поля. padding-bottom - ширина нижнего поля. padding-left - ширина левого поля. Свойства

6 Использование блоков. Блоковая модель. Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц. Свойство display none - отключает отображение блока в окне браузера block – показывает блока (видимость) inline - значение определяет строчный блок list-item - элемент становится частью списка

7 Управление видимостью и переполнением блоков. Свойство visibility visible - обычное состояние блока (по умолчанию), когда он нормально виден на экране hidden - блок становится прозрачным, т.е. невидимым. Свойство overflow visible hidden scroll #small{ border: 1px dotted #660033; padding: 0.5em; height: 60px; width: 150px; overflow: visible; } Ширина данного блока 150 пикселей, а высота 60 пикселей. Проверим, удастся ли контролировать ситуацию с переполнением?

8 Схемы позиционирования Нормальный поток. Относительное позиционирование. Абсолютное позиционирование. Плавающая блоковая модель. Схемы позиционирование

9 Схемы позиционирования. Нормальный поток

10 Схемы позиционирования. Свойство POSITION static - блок будет считаться обычным, и позиционироваться в соответствии с правилами нормального потока. relative - относительное позиционирование (относительно нормального потока). absolute - абсолютное позиционирование. fixed - фиксированное позиционирование. Блок позиционируется абсолютно, а потом его положение фиксируется относительно области просмотра - такой блок не перемещается при прокрутке.

11 Относительное позиционирование left - смещение левого края блока от левого края контейнера; right - смещение правого края блока относительно правого края контейнера; top - смещение верхнего края блока относительно верхнего края контейнера; bottom - смещение нижнего края блока относительно нижнего края контейнера. Чтобы создать относительно позиционированный блок, необходимо записать свойство position:relative. В этом случае положение блока сначала будет вычислено относительно нормального потока, а затем блок будет смещен относительно этого места..move { position:relative; left:20px; top:10px; } первый блок второй блок третий блок

12 Абсолютное позиционирование Если при относительном позиционировании блок не "вырывается" из нормального потока, а только смещается относительного нормального положения, то при абсолютном позиционировании все совершенно иначе: абсолютно позиционируемый блок полностью "вырывается" из нормального потока. left - смещение левого края блока относительно левого края контейнера; right - смещение правого края блока относительно правого края контейнера; top - смещение верхнего края блока относительно верхнего края контейнера; bottom - смещение нижнего края блока относительно нижнего края контейнера. #abs { position: absolute; left:50px; top:100px; } первый блок второй блок третий блок

13 Фиксированные блоки #fix{ position: fixed; left:0px; top:0px; widht:100px; } #move { position: absolute; left:100px; top:0px; } Пункт 1 Пункт 2 Пункт 3 Пункт 4 Основной текст страницы должен прокручиваться Основной текст страницы должен прокручиваться Основной текст страницы должен прокручиваться

14 Плавающие блоки Для того чтобы в CSS реализовать "резиновую" верстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как, например, абсолютно позиционируемые. Они могут свободно перемещаться и "прижиматься" к краю своего контейнера. Подобным образом себя ведут рисунки в HTML, для которых задано выравнивание при помощи атрибута align. Свойства FLOAT left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха. none - блок не перемещается (значение по умолчанию), т.е. позиционируется согласно алгоритму, заданному свойством position. Если свойство position не задано, то предполагается нормальный поток.

15 Плавающие блоки Плавающий блок может "прилипать" к левой или правой стороне контейнера, сторона задается свойством float..comment { background: #FFC; border: 1px solid; padding: 5px; width: 150px; float: right; } Пример

16 Плавающие блоки Свойства CLEAR left - блок должен размещаться ниже всех левосторонних плавающих блоков. right - блок должен размещаться ниже всех правосторонних плавающих блоков. both - блок должен размещаться ниже всех плавающих блоков. none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается..comment { background: #FFC; border: 1px solid; padding: 5px; width: 150px; float: right; } Первый плавающий блок должен прилипать к левому краю контейнера. Второй плавающий блок должен переместиться ниже первого блока.... некий фрагмент текста...