Отчет по практике специальности «Информатика и вычислительная техника»

Параметр непрозрачности применяется ко всему объекту. Любые значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.

Цвета RGB не интуитивно понятны. CSS3 добавляет числовые цвета hue-saturation-lightness (HSL) в дополнение к числовым цветам RGB. HSL-цвета симметричны свету и темноте, и преобразование HSL в RGB максимально просто.

Цвета HSL кодируются как тройка (оттенок, насыщенность, яркость). Оттенок представлен как угол цветного круга (то есть радуга, представленная в круге). Этот угол обычно измеряется в градусах, так что эта единица измерения неявна в CSS; синтаксически дается только число. По определению красный = 0 = 360, а остальные цвета распределены по кругу, поэтому зеленый = 120, синий = 240 и т.д. Насыщенность и яркость представлены в процентах. 100% — это полное насыщение, а 0% — это оттенок серого. Яркость 0% — черная, 100% — белая, а 50% — нормальная.

Так же, как функциональная нотация rgb() имеет альфа-аналог rgba(), функциональная нотация hsl() имеет альфа-аналог hsla().

Формат значения цвета HSLA в функциональной нотации — hsla(, за которым следуют оттенок в градусах, насыщенность и яркость в процентах, и значение непрозрачности, после которого следует символ ). Символы пробела допускаются вокруг числовых значений.

Положение

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

fixed

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

relative

Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static

Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

inherit

Наследует значение родителя.

Поток в CSS

Индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них — это боксовая модель.

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Нельзя установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если необходимо контролировать размер встроенного элемента — нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

Нормальный поток макета — это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа — каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это схлопывание полей (margin collapsing).

Коробочная модель

В стандарте CSS 1, который был принят в 1996 году, W3C предложила все объекты на Web-странице считать заключёнными в виртуальную рамку (Box Model). Не важно при этом, является ли элемент абзацем, списком, заголовком, картинкой, выделением, элементом DIV или SPAN. Иными словами, все элементы, и блочные, и строчные имеют рамку вокруг содержимого, а также внутренние и внешние отступы от рамки.

Элементы DIV и SPAN играют особую роль при использовании языка CSS. Они позволяют выделять в документе структурные части и задавать для них специфические свойства.

Разница между DIV и SPAN только в одном: первый элемент — блочный, второй — строчный. Использование элемента SPAN позволяет задавать стилевые свойства даже отдельным словам и буквам.

Содержимое каждого элемента окружено внутренним отступом (задаётся свойством padding), рамкой (задаётся свойством border) и внешним отступом (задаётся свойством margin). Внешние отступы часто называют полями, а внутренние — просто отступами.

Фон элемента (задаётся свойством background) распространяется на:

• содержимое,
• внутренний отступ
• и рамку.

Фон не распространяется на внешний отступ (который всегда прозрачный).

По умолчанию фон элемента прозрачный, а цвет рамки совпадает с цветом текста элемента (то есть со значением свойства color элемента).

Единицы измерения в CSS

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = «5px solid blue».

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

% — Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента.

Пример: div {width: 50%;}

Cm —    Определяет измерение в сантиметрах.    

Пример: p {padding-top: 1cm;}

Em —    Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt.    

Пример: h1 {letter-spacing: 3em;}

Ex —     Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта.        

Пример: p {letter-spacing: 7ex;}

In —      Определяет измерение в дюймах.

Пример: h2 {word-spacing: .10in;}

Mm —   Устанавливает измерение в миллиметрах.         

Пример: div {margin: .15mm;}

Pc —      Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt).        Пример: h3 {font-size: 10pc;}

Pt —      Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм.       

Пример: table {font-size: 20pt;}

Px —     Устанавливает измерение в пикселях экрана.    

Пример: p {margin: 30px;}

Vh —     Равен 1% высоты окна просмотра.          

Пример: h1 {font-size: 2.0vh;}

Vw —    Равен 1% ширины окна просмотра.         

Пример: h2 {font-size: 2.0vw;}

Vmin — Равен 1vw или 1vh, в зависимости от того, что меньше.          

Пример: div {font-size: 5vmin;}

Каскадирование

Правила каскадирования позволяют разрешать ситуации, когда для одного элемента прописано несколько стилей. Каскадирование основано на присвоении некоторого приоритета каждому правилу. Авторские таблицы стилей имеют самый большой приоритет, меньший — пользовательские, самый низкий — таблицы стилей по умолчанию браузера. У пользователя есть возможность переопределить авторское правило путем добавления флага !important к своему.

Правила каскадирования определяют следующие приоритеты:

• пользовательские стили, отмеченные !important
• авторские стили, отмеченные !important
• авторские стили
• пользовательские стили
• стили по умолчанию

После каскадирования правила упорядочиваются на основе специфичности селекторов.

Специфичность

Специфичность — это некоторое число в системе с неопределенно высоким основанием, которое является отражением приоритета какого-либо правила. Вычисляется оно на основе специфичности каждого из селекторов, входящих в правило CSS.

Специфичность селектора разбивается на 4 группы — a b c d:

• если стиль встроенный, т.е. определен как style=»», то а=1;
• значение b равно количеству селекторов идентификаторов;
• значение c равно количеству классов, псевдоклассов и селекторов атрибутов;
• значение d равно количеству селекторов типов.

Неопределенно высокое основание системы счисления является следствием того, что неизвестно заранее, насколько большими будут числа a, b, c, d. Если они меньше 10, то удобно использовать десятичную СС.

Некоторые особенности:

• если два правила имеют одинаковую специфичность, то приоритетным становится правило, определенное последним;
• наследованные стили имеют нулевую специфичность.

Наследование

Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к дескриптору body чтобы все элементы внутри имели те же свойства. Но, для заголовков h1-h6 размер шрифта не будет присвоен, потому что у браузера для них есть своя таблица стилей по умолчанию, а наследованные стили имеют самый низкий приоритет. Аналогичная ситуация с цветом ссылок.

Таким образом, наследование позволяет сократить таблицу CSS. Но в то же время если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится довольно сложно.

Таким образом, цель практики достигнута.