'

Каскадные таблицы стилей CSS

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Синтаксис CSS


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


×

HTML:





Ссылка: