HTML
.pdf
Приоритеты стилей в
зависимости от типа селектора
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
Универсальный селектор — количество начисляемых баллов равно нулю (0).
Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.
* { } /* 0 баллов */ em { } /* 1 балл */
p::first-letter { } /* 2 балла (один селектор тегов и один псевдоэлемент) */
p [title="Приветствие"] { } /* 11 баллов (по одному селектору тегов и атрибутов) */ div.fine .one { } /* 21 балл (два класса и один селектор тегов) */
#header a:hover { } /* 111 баллов (идентификатор, селектор тегов и псевдокласс) */
Псевдоклассы CSS
Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. Они обладают следующей структурой: selector:pseudo_class { property: value; }, т.е. вам лишь надо поместить двоеточие между селектором и псевдоклассом.
Оформление ссылок
Ссылки могут находится в четырех различных состояниях и каждое из этих состояний может быть отдельно оформлено с помощью специальных псевдо-классов. Псевдо-класс должен добавляться к селектору элемента, отделяясь от него двоеточием (:).
Оформление для псевдо-классов должно задаваться в порядке перечисленном ниже.
a:link - определяет оформление обычной не посещенной ссылки. a:visited - определяет оформление посещенной пользователем ссылки.
а:hover - определяет оформление ссылки, на которую наведен курсор мыши. a:active - определяет оформление ссылки, на которую щелкнули мышкой.
a:link { text-decoration:none; color:green; } a:visited { text-decoration:none; color:green; } a:hover { text-decoration:underline; color:red; } a:active { text-decoration:none; color:red; }
Задание
1.Создайте документ links.html с заголовком "Мои ссылки" и сохраните его в той же папке, что и документ index.html из задания 1. Добавьте в links.html перечень ссылок на различные ресурсы Интернет (google, mail, yandex и т.д. - всего 6-8 ссылок). Оформите перечень в виде «Облака тегов». При щелчке по ним ссылки должны открываться в новом окне. Всем внешним ссылкам укажите цвет фона( отличный от основного ), и размер текста (в зависимости от приоритета).
2.Добавьте в верхнюю часть документа links.html ссылку вида
на главную страницу
возвращающую к документу index.html
3.Добавьте в документ index.html строку вида "Мои ссылки", адресующую документ links.html. Документ links.html должен открываться в текущем окне.
4.Сделайте подпись из файла index.html ссылкой на Ваш адрес электронной почты, или, если у Вас нет личного адреса на адрес some@mail.ru
5.Добавьте в нижнюю часть файла index.html ссылку "в начало страницы", адресующую первую строку документа.
7. Проверьте на валидность полученный код.
Изображения
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG
Синтаксис
<img src="URL" alt="альтернативный текст"> - HTML <img src="URL" alt="альтернативный текст" /> - XHTML
Атрибуты
●align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
●alt - Альтернативный текст для изображения.
●border - Толщина рамки вокруг изображения.
●height - Высота изображения.
●hspace - Горизонтальный отступ от изображения до окружающего контента.
●src - Путь к графическому файлу.
●vspace - Вертикальный отступ от изображения до окружающего контента.
●width - Ширина изображения.
●lowsrc - адрес изображения более низкого качества
Пример:
<p>
<img src="images/pic.png" width="200" height="150" alt="picture"> </p>
Формат GIF
Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения").
Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы.
Второй полезный эффект - возможность черезстрочной загрузки изображения GIF - то есть, изображение может постепенно "проявляться" по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.
Формат JPEG
Формат JPG используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов.
Алгоритм JPEG позволяет сжимать изображение как с потерями, так и без потерь (режим сжатия lossless JPEG).
Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в JPG конвертировать только окончательный вариант картинки.
С другой стороны, JPEG малопригоден для сжатия чертежей, текстовой и знаковой графики, где резкий контраст между соседними пикселами приводит к появлению заметных артефактов. Такие изображения целесообразно сохранять в форматах без потерь, таких как TIFF, GIF или PNG.
Формат PNG
PNG растровый формат хранения графической информации, использующий сжатие без потерь.
PNG был создан как свободный формат для замены GIF
PNG поддерживает три основных типа растровых изображений:
●Полутоновое изображение (с глубиной цвета 16 бит)
●Цветное индексированное изображение (палитра 8 бит для цвета глубиной 24 бит)
●Полноцветное изображение (с глубиной цвета 48 бит)
Формат SVG
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику. Не поддерживает описание трёхмерных объектов
Пример: Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" xmlns:ev = "http://www.w3.org/2001/xml-events" height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400"
fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/> <g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" /> <circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" /> <circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
</g>
</svg>
Форматирование изображений
<img src="demo.gif" alt="demo" id="demoimg" > Изменения размера.
#demoimg {height: 100рх; width: l00px; }
Выравнивание:
#demoimg {float: left;}
Различные стилевые эффекты наподобие границ:
#demoimg {border-style: double; border-width: 2px; border-color: orange;}
Большинство этих возможностей можно реализовать средствами HTML, хотя в этом случае исполнение будет менее аккуратным;