Изменение цвета маркера в CSS

⇐ ПредыдущаяСтр 4 из 7Следующая ⇒

Способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before:

<style> ul { list-style : none; /* убираем маркеры у маркированного списка */ } li:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */ content : "•"; /* вставляем содержимое, которое выглядит как маркер */ padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */ color : orange; /* устанавливаем цвет шрифта */ } </style>

Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент <li>) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент <ul>), только уже необходимого для нашей задачи цвета.

В данном примере использовано свойство padding-right, которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент <li>). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво.

Составьте следующие HTML страницы:

Практическая работа.

Задание 1. Создайте веб – страницы в соответствии с образцом

Подсказка Стиль для абзаца Файл main . css

Подключение файла со стилями

Подсказка Стиль для абзаца Файл main . css

...

Элемент pre (преформатированный вывод) выделяет в разметке фрагмент, который браузер должен отобразить "как есть", теми же символами и с тем же разбиением на строки, включая все пробелы. Текст внутри элемента pre может содержать физическую и логическую разметку, а также якоря, изображения и горизонтальные линейки. Весь текст в элементе будет отображен моноширинным шрифтом. Чаще всего преформатированный вывод используется для представления исходных кодов программ, как в примере.

….

Урок 4. Элементы. Типы элементов. Свойства элементов веб - страниц

Гиперссылка

Пример текстовой гиперссылки:

<a href="http://intuit.ru">Интернет Университет Информационных Технологий</a>

Стилевое оформление гиперссылки в различных состояниях:

…

a:link {

color: #33ccff;

}

a:visited {

color: #cecece;

}

a:hover {

color: #336666;

}

a:active {

color: #339999;

}

…

Свойства элементов веб-страницы

Свойства шрифта

font-family

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. Пример: Р {font-family: Times New Roman, sans-serif;}

font-style

Задает способ начертания шрифта: normal — нормальный (по умолчанию), italic — курсив, oblique — наклонный. Пример: Р {font-style: italic;}

font-weight

Определяет степень жирности шрифта с помощью параметров; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Пример: В {font-weight: bolder;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной (пункты, пикселы, сантиметры) величине. Пример: H1 {font-size: 200%;} Н2 (font-size: 150 рх;} НЗ {font-size: 400 pt;}

Font-variant

Переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps) p:first-line {font-variant: small-caps;}

Line-height

Задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта. p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family. Пример: p { font: italic normal 400 12px/14px Arial; } /* выделенные жирным значения обязательны, остальные могут быть опущены */ Эквивалентно p { font-style: italic; font-variant: normal; /* значение по умолчанию можно опустить*/ font-weight: 400; /* значение по умолчанию можно опустить*/ font-size: 12px; line-height: 14px; font-family: Arial; } Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

Цвет элемента и цвет фона

color

Определяет цвет элемента Пример: I {color: green;}

background-color

Устанавливает цвет фона для элемента — именно для элемента, например для текста. Пример: Н4 {background-color: yellow;}

background-image

Устанавливает или получает фоновый рисунок для элемента. Может принимать значения попе (по умолчанию), в таком случае используется цвет родительского объекта или Ur! — задается абсолютный или относительный путь к рисунку. Пример: НЗ {background-image: url(../32.jpg);}.

Свойства текста

text-decoration

Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст. Примеры: Н4 {text-decoration: underline;} — подчеркивание, A {text-decoration: none;} — стандартный текст, I {text-decoration; line-through;} — зачеркивание, В {text-decoration:overline;} — надчеркивание

text-align

Определяет выравнивание элемента. Возможные значения: left, right, center, justify. Пример: Р {text-align:justify}

text-indent

Устанавливает отступ первой строки текста. Используется для создания параграфов с красной строкой. Пример: Р {text-indent: 50 pt;}

line-height

Управляет интервалами между строками текста. Пример: Р {line-height: 50 %}

word-spacing

Задает интервалы между словами. Можно использовать отрицательные значения. Пример: Р {word-spacing: 50 %}

letter-spacing

Задает интервалы между буквами. Пример: Р {letter-spacing: 50 pt}

vertical-align

Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom. Пример: P {vertical-align: 50 pt}

border-width

Ширина границы может быть задана значением в пик-' селях или с помощью зарезервированных слов: thin (тонкая), medium (средняя), thick (толстая). Пример: table {border-width: 2 рх;}. То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.

Границы - параметры данного раздела описывают атрибуты стиля border, который позволяет задать вид границ вокруг объектов. Данные параметры могут быть применены не только к таблицам, но и к любым объектам.

border-color

Цвет границы может принимать значение transparent для задания невидимой, но имеющей ширину границы, что иногда полезно. Пример: table {border-color: green;} Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color. border - сокращенное свойство, объединяющее border-width, border-style и border-color. Пример: p { border: 2px solid #f33; }

border-style

Задает стиль рисования границы. Может принимать следующие значения: попе (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset. Пример: table {border-style: dashed;}

Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения. Пример: p { border-top-style: double; }

Упражнение. Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.

Отступы
margin	Задает ширину отступа от четырех сторон объекта. Примеры: Н4 {margin: 1cm;} body {margin:5mm;}. Используя свойства margin-top, margin-bottom, margin-left, margin-right, вы задаете размер отступа от объекта сверху снизу, слева, справа
padding	Задает отступ, вставляемый между объектом и его границей. Пример: id (padding:2 cm;}. Используя свойства padding-bottom, padding-top, padding-left, padding-right, вы задаете размер пространства между объектом и его границами Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left. Примеры: p { padding: 20px; } /* все поля равны 20 пикс / p { padding: 5px 20px; } / вертикальные поля равны 5 пикс, а горизонтальные 20 пикс / p { padding: 5px 20px 5px 10px; } / сверху 5, справа 20, снизу 5, а слева 10 пикс */

Создание html-документа. Добавление абзацев. Назначение стилей элемента body

- Создайте каркас документа

<html >

<head>

<title>Заголовок</title>

…

</head>

<body>

…

</body>

</html>

- Введите заголовок и абзац текста

В теле документа (внутри элемента body ) введите элемент заголовка первого уровня с текстом:

Lorem ipsum

Затем введите элемент абзаца - также с произвольным текстом:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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

- Сохраните документ и откройте в браузере.

Необходимо также делать проверку и в других браузерах - профессионалы держат под рукой все современные (и многие старые) версии всех популярных браузеров. По крайней мере, в одном из современных ориентированных на стандарты браузеров проверку делать имеет смысл (помимо IE интернет эксплорер) - дело в том, что во многом из-за своей популярности IE ведет себя наиболее нестандартно - это обусловлено стремлением его разработчиков "не обрушить Web", а поддерживать совместимость с прошлыми версиями различных спецификаций (многие из которых содержат ошибки).

Добавление таблицы каскадных стилей

Браузер отображает текст черным цветом на белом фоне, начиная с левого верхнего угла окна (точнее, как правило, делая отступ в 2 пиксела со всех сторон) во всю его ширину.

Изменим этот стиль по умолчанию на собственный.

Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:

Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств (используем документы Свойства элементов веб и цвета html ):

цвет фона (неяркий)
толстую серую рамку
большой отступ - чтобы отдалить рамку от границ окна
небольшое поле - чтобы отделить текст от рамки
крупный размер шрифта (например, 20px)
гарнитуру Comic Sans MS
отступ первой строки

Уберем рамку справа и снизу, назначив свойствам border-bottom и border-right значение none.

После каждого дополнения сохраняйте документ в редакторе, переходите в браузер (в котором ваша рабочая страница уже открыта) и нажимайте Обновить (F5), чтобы убедиться в том, что действия достигают желаемого эффекта и не нарушают прежних достижений. Удобно разделить рабочую область экрана так, чтобы одновременно видеть и редактор, и браузер. Добейтесь примерно такого вида

Вставка изображения, гиперссылки и элементов логического форматирования

Вставка изображения

Выберите изображение небольшого размера и поместите его в папку с вашим документом.

Вставьте в документ после заголовка и абзаца элемент img:

Атрибуты элемента сообщают браузеру:

· имя файла (предполагается, что он находится в той же папке, что и документ HTML);

· ширину изображения в пикселах;

· высоту;

· альтернативный текст - который будет показан, если показ рисунков выключен или проговорен, если просмотр выполняется при помощи синтезатора речи.

Согласно спецификации, атрибуты src и alt для элемента img являются обязательными.

Вставка подписи с гиперссылкой

Далее вставьте абзац с произвольным небольшим текстом (выполняющим функцию подписи). Внутри абзаца, после текста подписи, вставьте гиперссылку на какую-либо Интернет-страницу, либо на локальный HTML-файл.

Установите изменение цвета гиперссылки при различных состояниях

Применение каскадных правил. Центрирование элементов, добавление границ и полей

Создание рамки изображения

Добавьте стилевое правило для элемента img, включающее тонкую сплошную серую рамку и поле:

Центрирование изображения с подписью

Поместите изображение (элемент img ) и гиперссылку (следующий элемент а ) в секцию, т.е. создайте пустой элемент div и переместите в него элементы img и a

…

Теперь позиционируем секцию горизонтально по центру страницы - для этого нужно явно задать ее ширину и затем установить автоматические отступы слева и справа. Ширина секции равна ширине изображения плюс удвоенный отступ изображения плюс удвоенная толщина рамки изображения.

Добавьте элементу div атрибуты class="pic" style="width:689px": стилевое правило, центрирующее секцию, имеет смысл определить для множества (класса) секций; а ширина секции привязана к ширине изображения, поэтому атрибут ширины лучше определить во встроенном стиле.