Лаб2. Лабораторна робота 2 n. Розробка htmlсторінок з використання таблиць стилів css
 Скачать 169 Kb.
|
1 2 Рисунок 1.2 – Завдання Звіт 1. Титульна сторінка. 2. Завдання. 3. Вихідний код HTML-сторінки та таблиці стилів CSS. 4. Результати роботи. 5. Висновок. Довідкова інформація Div и Span и применяются вместе с каскадными таблицами стилей. По отдельности они не вызывают больших изменений. Факт в том, что тег вообще не влияет визуально на контент. Использование тега приведет к «блокировке» его содержимого, как если бы вы поставили тег до и после секции на странице. Как и большинство остальных тегов, и могут иметь класс, идентификатор и стилевые атрибуты. Благодаря этим атрибутам стили можно применять к элементам. Теги применяются таким же способом, как и другие HTML-теги. Допускается вложенность одних тегов в другие в несколько уровней. <html lang="en"> <head> <meta charset="utf-8"> <title>Div and Spantitle> head> <body> <div style="position:absolute; left:0px; top:0px; font-family:Verdana; font-size:10pt; border-style:groove; border-width:30px; border-color:blue; padding:4px"> This text appears in the <span style="font-style:italic; color:red"> upper-left hand corner span> of the page.<br> It also has a big blue groovy border around it. div> body> html> Position Описание Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Синтаксис position: absolute | fixed | relative | static | inherit Значения absolute Указывает, что элемент абсолютно позиционирован. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. fixed По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя. Float и Clear Float Мы можем использовать float с любым элементом, который не был абсолютно спозиционирован. Это применяется для определения – должен ли элемент переместиться влево, направо или не должен совсем. Вот список возможных значений: float: left | right | none Если элемент перемещается влево (float:left), он выравнивается по левой стороне содержащего элемента, а весь последующий контент выравнивается по правой стороне (до тех пор, пока не достигнет нижней границы элемента). Если элемент перемещается вправо, он выравнивается по правой стороне, а весь последующий контент будет выровнен по левой стороне (до тех пор, пока не достигнет нижней границы элемента). В случае, если ширина последующего контента зафиксирована, он не будет переноситься ниже выровненного float’ом div’а. Вместо этого он применит свою ширину. Clear Мы можем использовать свойство clear для определения, должен ли контент, который «обтекает» float-блок, быть сброшен вниз. Вот список возможных значений: left – не допускает обтекание «floated» объекта слева; right – запрещает обтекание элемента справа; both – запрещает обтекание объекта с обеих сторон, т.е. и слева, и справа; none – разрешено обтекание. Margin и Padding margin и padding являются наиболее популярными свойствами для расстановки элементов. В то время как margin определяет пространство за пределами (снаружи) элемента, padding определяет пространство внутри элемента. Вы можете задавать margin и padding для четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left. Блочная модель Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin. Визуально представление Блочной модели выглядит так:
Не обязательно использовать все эти элементы, но блочная модель может использоваться с любым элементом на странице. Единицы измерений В CSS вы можете определять размер шрифта, границ (рамок), полей и отступов, используя различные единицы измерений. Ознакомьтесь с таблицей ниже, где указаны различные единицы:
Пиксели (px) Единица измерений, которая наиболее часто используется в веб-дизайне, — это пиксели. В отличие, например, от дюймов и пунктов, пиксель не является абсолютной величиной. Окончательный размер пикселя определяется размером и разрешением экрана пользователя. Представьте себе картину шириной 900 пикселей. Если установленное разрешение монитора 800 на 600 пикселей, изображение не поместится на экране. Но если на том же мониторе установлено разрешение 1024 на 768 пикселей, картинка поместится и останется немного пространства. Типографский пункт (pt) Пункты должны использоваться для печати. Один дюйм равен 72 пунктам. Дюймы (in), сантиметры (cm), миллиметры (mm) Несмотря на то, что это одни из самых распространенных единиц измерений, в веб-дизайне лучше их не использовать. Пики (pc) Пика (Picas) — единица измерений, которая используется для печати. Один дюйм равен 6 пикам. 1 2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||