Все css Свойства Списка
Свойство | Описание |
list-style | Устанавливает все свойства списка в одном объявлении |
list-style-image | Устанавливает изображение в качестве маркера пункта списка |
list-style-position | Указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания |
list-style-type | Указывает тип маркера пункта списка |
8. Ссылки в css
Псевдоклассы — классы, способные учитывать те или иные условия при определении свойств html -элемента.
Применение псевдокласса к ссылкам:
А : ИМЯ ПСЕВДОКЛАССА { …стиль …}
Для ссылок например бывает четыре псевдокласса:
A:link
{ .
.. стиль оформления обычной ссылки…
} A:active
{ … стиль
оформления ссылки в момент нажатия…
} A:visited
{ … стиль оформления посещенной ссылки…
} А:hover
{ … стиль оформления ссылки, на которую
наведен указатель мыши … }
ПРИМЕРЫ: Для начала, посмотрите, как выглядят ссылки по умолчанию:
В примере только посещенная ссылка отличается от других, а так, в принципе, все одинаково.
Попробуем создать свой стиль:
a:link { color: blue ; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; } a:active { color:green; text-decoration :none; } |
Вариантов оформления
ссылки может быть множество, и каждый
делает под конкретный дизайн что-то
свое.
Вот еще пример:
a:link { color: blue ; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; font-weight:bold; } | a:active { color:green; text-decoration:none; text-transform:uppercase; } |
Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:
a:link { color: black; text-decoration:none; } a:visited{ color: black ; text-decoration:none; } a:hover { color: black ;text-decoration:none; } a:active { color: black ; text-decoration:none; } |
Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:
a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}
А можно и вовсе без использования псевдоклассов:
a {color:black; text-decoration:none;}
При установке стиля для нескольких состояний ссылки, есть несколько порядковых правил:
9.
Типы селекторов в cssСелектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .
Селектор по элементу
До этого момента, мы с вами работали именно с этим селектором.
Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому необходимо было применить данный стиль.
Т.е. написав класс например для параграфа (Р), все параграфы на странице приобретали стиль данного класса.
P { font-family: arial, verdana, sans-serif; font-size: 12px }
А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу.
Селектор по классу
Слектор по классу
создается так: сначала ставим точку,
затем сразу, без пробела, пишем имя
класса, а затем в фигурных скобках
стиль.
.green { font-family: arial, verdana, sans-serif; font-size: 12px; color:green; }
Допустим мы хотим применить данный стиль к определенному параграфу в документе.
Вот как это будет выглядеть в html:
<P class =»green»> … текст параграфа … </P>
Как видите, используется атрибут class со значением названия стиля.
ПРИМЕР:
css:
p { font-family:arial,verdana,sans-serif; font-size:18px; } .green {color:green;} .big_red{ font-size:28px; color:red; }
html:
<p>Это обычный параграф , для него используется селектор по элементу </p>
<p class=»green»> Этот параграф зеленый, т.к к нему применили класс </p> <p class =»big_red» >А этот параграф большего шрифта и красный </p> <p>Этот параграф снова обычный, по классу селектора элемента </p> Указываем сначала
базовый стиль для всех параграфов(селектор
по элементу), а потом уже, если хотим в
каком-либо параграфе что-то изменить,
создаем для него специальный стиль
(селектор по классу) и присваиваем его
этому параграфу.
Когда мы создаем этот
самый специальный класс, мы должны
писать туда только те свойства, которые
хотим добавить, или изменить, по отношению
к базовому стилю для этого элемента.
Классы из примера выше, можно применить не только к параграфу, но и, например, к заголовкам, к ячейке таблицы, или ко всей таблице, они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).
Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:
P.green {color:green;}
Теперь класс green не будет действовать ни на что другое, кроме элемента P.
Селектор по id
Данный селектор применяется, если необходимо выделить один единственный элемент, уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
html- часть:
<Н1 id=»firstheader»> Первый заголовок на странице </Н1>
css — часть:
h2 #firstheader { color: red; font-weight: bold; text-align: center }
Как видите, в
html-части вместо атрибута class здесь
употребляется атрибут id , а в css — вместо
точки употребляется знак #.
Контекстный селектор
Допустим, у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом (strong) слова. Необходимо сделать так, чтобы слова в параграфе, которые выделены жирным, стали зеленого цвета. Так вот:
p strong {color:green }
Т.е. в начале P, затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG, то элементу strong присвоить стиль зеленого цвета.
td p strong {color:red;}
4: Текст и списки — CSS Documentation
previous page next page
Текст
В этом разделе мы рассмотрим те свойства текстового фрагмента, которые остались без внимания в разделах, посвященных блокам текста и шрифтам.
При обсуждении свойств блочных элементов разметки речь шла о параметрах, относящихся к блоку как целому. Мы не рассматривали внутренние характеристики текста.
Рассказывая о шрифтах, мы акцентировали внимание на начертаниях символов как таковых, а не на их соотношении.
Тем не менее в стороне остались такие важные характеристики текстового фрагмента, как:
- межбуквенные расстояния;
- высота строк;
- выравнивание;
- отступ в первой строке параграфа;
- преобразования начертания.
Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).
Межбуквенные расстояния
Расстояние между буквами автоматически регулируется размером шрифта — кеглем. Чем больше размер шрифта, тем больше расстояние между буквами: (открыть)
Рис. 11.1.
Присмотревшись внимательно, нетрудно убедиться, что расстояние между буквами в слове «параграф» первого примера и буквами слова «параграфа» второго примера разное.
Во втором случае оно больше:
Рис. 11.2.
Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моноширинного шрифта размер символа фиксирован, поэтому и расстояние между буквами прослеживается четко.
Однако не всегда удобно управлять межбуквенным расстоянием через кегль (font-size). Бывают случаи, когда нужно либо уплотнить строку, либо увеличить расстояния между буквами. Это можно сделать с помощью атрибута letter-spacing: (открыть)
<P >
Межбуквенное расстояние 5pt</P>
<P STYLE=
"font-family:monospace;
letter-spacing:10pt;
color:black">
Межбуквенное расстояние 10pt
</P>
Рис. 11.3.
Правда, в версиях Netscape Navigator 4.x этот параметр не поддерживается.
Выравнивание
По умолчанию все слова в параграфе прижаты влево.
Левый край параграфа таким образом оказывается выравненным. Точно так же может быть выравнен правый край параграфа или блока текста, и даже оба края вместе.
В обычной HTML-разметке такой эффект достигается за счет применения атрибута ALIGN, как это сделано на страницах данного пособия:
<P ALIGN=justify>...</P>
Аналогичный результат в CSS достигается за счет атрибута text-align: (открыть)
<P >
Этот параграф выравнен по правому краю. Все
строки справа кончаются на границе раздела.
А вот слева они начинаются с различным
отступом от левого края.</P>
Рис. 11.4.
<P > Этот параграф выравнен по левому и правому краям. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела.</P>
(открыть)
Рис. 11.5.
Выравнивать текст можно в любом блочном элементе.
Причем можно не только выравнивать текст по краям блочного элемента, но и центрировать его (<P >…</P>).
Преобразование шрифта
Преобразование шрифта подразумевает капитализацию слов, перевод всех «больших» и «маленьких» букв в большие, или, наоборот, получение одних строчных.
Рассмотрим несколько примеров: (открыть)
<P >
Сделать заглавными</P>
<P >
Сделать строчными</P>
<P >
Сделать заглавными первые буквы в словах</P>
Рис. 11.6.
Обратите внимание, что выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита не приемлемо.
Еще один вид преобразования шрифта — это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование с помощью атрибута text-decoration: (открыть)
<P > Перечеркнем это предложение.</P> <P > Подчеркнем это предложение.</P>
</P>
<P >
Подчеркнем это предложение.</P>
Рис. 11.7.
Для того, чтобы преобразование работало, необходимо соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.
Первая строка параграфа
При оформлении параграфов в технологии CSS автор может воспользоваться «красной» строкой, такую возможность предоставляет ему атрибут text-indent.
Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края: (открыть)
<P >
Этот параграф мы начнем со строки с
горизонтальным отступом в двадцать
типографских пунктов от левого края параграфа.
</P>
<P >
А в этом параграфе мы применим отрицательный
горизонтальный отступ в первой строке
параграфа.</P>
Рис.
11.8.
Отрицательные значения атрибутов — это нормальная практика CSS. Там, где применение отрицательного значения оправдано, например, в случае смещения вложенного блока текста относительно охватывающего элемента разметки, можно указывать отрицательные атрибуты смещения.
Кроме text-indent в CSS для оформления первой строки параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:
P:first-line { color:red; } Еще один параметр, который влияет на отображение первой строки параграфа — первая буква первой строки. Ее отображением управляет модификатор first-letter:
P:first-letter { font-size:20pt; } К сожалению, оба названных модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.
Межстрочное расстояние
В CSS межстрочное расстояние определяется параметром line-height.
Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву «н» и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв.
Рис. 11.9.
Посмотрим, как этот параметр влияет на взаимное расположение строк: (открыть)
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 12 pt.</p>
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 24 pt.</P>
<P >
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 6 pt.</P>
Рис. 11.10.
Первый пример набран со значением line-height, равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля — строки стали «наползать» друг на друга.
В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах.
Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы: (открыть)
<P > В эту строку мы встраиваем картинку - <IMG SRC="inline.gif" BORDER="0" HEIGHT="24" ALIGN="top">, на которой изображены концентрические круги. </P>
Рис. 11.11.
Картинка имеет размеры 24х24 пиксела и выравнена по верхнему краю строки. Ее размер больше размера кегля (20 px), поэтому межстрочное расстояние увеличено браузером автоматически. (открыть)
<P >
В эту строку, которая имеет размер кегля 24рх,
мы встраиваем картинку - <IMG SRC="inline.gif"
BORDER="0" ALIGN="top">
, на которой изображены концентрические круги.
</P>
Рис. 11.12.
Таким образом, можно точно позиционировать текст и графику в строке.
Списки
При отображении списков CSS позволяет управлять формой и изображением «пулек» (bullets) списка.
«Пулька» (bullet) — это символ, стоящий перед элементом списка. Например, в неупорядоченном списке (unordered list) перед элементом списка ставится «жирная» точка:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
CSS позволяют управлять формой «пулек» и заменять «пульки» картинками.
Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение — none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он не отображается браузером вообще:
<UL >
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>
Если посмотреть HTML-код данного документа, то за примером описания списка следует код, который браузер не отобразил.
Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа.
Например, при печати скрытый список должен быть отображен.
Однако, на самом деле он не отображается и при печати.
Форма «пулек»
Форма «пульки» в виде «жирной» точки несколько непривычна. Обычно в машинописных документах используют черту. С другой стороны, в рекламных материалах часто в качестве «пульки» применяют квадрат или другой символ типографского набора, а также графическую картинку.
CSS позволяет управлять формой «пульки» через атрибут list-style-type: (открыть)
<UL >
<LI>В виде "пульки" используем квадрат
</UL>
<UL >
<LI>В виде "пульки" используем диск
</UL> <UL >
<LI>В виде "пульки" используем круг
</UL>
Рис. 11.13.
До сих пор мы обсуждали только неупорядоченные списки (UL), но управлять отображением «пулек» можно и в упорядоченных списках (OL): (открыть)
<OL > <LI>... ... </OL> <OL > <LI>.
..
...
</OL>
<OL >
<LI>...
...
</OL>
Рис. 11.14.
CSS позволяют вообще отказаться от «пулек». Для этого нужно указать значение атрибута list-style-type равным none.
«Пульки»-картинки
Если стандартные формы «пулек» автора страницы не устраивают, он может использовать нестандартные. Для этого ему придется «пульку» нарисовать самому и в виде графического файла разместить на Web-узле. У такой «пульки» есть URL, который используется в CSS для обращения к ней.
<UL
> <LI>Элемент списка расположен за чертой
</UL>
Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку: (открыть)
<UL
> <LI>Элемент списка расположен за стрелкой
</UL>
Рис. 11.15.
Здесь надо признаться в маленьком обмане.
Если вы пользователь Internet Explorer, то все, что здесь написано — верно. Фрагмент кода, представленный перед примером, является его точной копией. Однако перед пользователями Netscape Navigator придется извиниться: Netscape Navigator этот атрибут не поддерживает. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра страницы браузером от Netscape.
Свойство стиля списка CSS — GeeksforGeeks
Улучшить статью
Сохранить статью
- Последнее обновление: 21 окт, 2021
Улучшить статью
Сохранить статью
Свойство стиля списка в CSS используется для установки стиля списка. Это свойство является комбинацией трех других свойств, а именно list-style-type, list-style-position и list-style-image, которые можно использовать в качестве сокращенной записи для этих трех свойств. Значение по умолчанию этого свойства будет использоваться, если какое-либо из значений будет пропущено.
Синтаксис:
стиль-списка: тип-стиля-списка-позиция-списка-стиль-изображение|начальный|наследовать;
Значения свойств:
- list-style-type : Это значение задает маркер (например, диск, символ или пользовательский стиль счетчика) элемента списка. Его значение по умолчанию — диск.
- list-style-position : Это значение устанавливает положение маркера относительно элемента списка. Его значение по умолчанию — «снаружи».
- изображение в стиле списка : Это значение задает изображение, которое будет использоваться в качестве маркера элемента списка. Его значение по умолчанию — «нет».
Мы поймем концепции свойств в виде списка на примерах.
Пример 1: Этот пример иллюстрирует использование свойства стиля списка , где значение позиции установлено внутри.
HTML
|
Output:
Пример 2: Этот пример иллюстрирует использование свойства в стиле списка , где значение позиции установлено снаружи.
HTML
03 |
Output:
Примечание: Если не указано изображение-стиля-списка, то оно будет считаться отсутствующим.
Поддерживаемые браузеры: Браузеры, поддерживаемые свойством в стиле списка , перечислены ниже:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Связанные статьи
00 СВЕДЕНИЯ СВЕДЕНИЯ СВЕДЕНТА -СЕРЕРИ -СЕРЕР2CLIENT.com
00 СВЕДЕНИЯ СВЕДЕНИЯ СВЕРТИ -СЕРЕР -СЕРЕР2CLIENT114
Связанные статьи
00 СВЕДЕНИЯ СВЕДЕНТ -СВЕРТИ -СЕРЕРИ.
Определение
Свойство стиля списка CSS является сокращением для указания других свойств стиля списка.
Применяется к
Все элементы с 'display: list-item;'.
Значения свойств
наследовать — свойства стиля списка наследуются от родительского элемента.
Тип стиля списка Значения свойств
Допустимые значения для ключевых слов типа списка : круг , диск , квадрат , армянский , десятичный , десятичный-начальный-ноль , грузинский , нижний латинский , верхний латинский , нижний альфа , верхняя альфа , нижний греческий , нижний латинский и верхний латинский .
Список значений свойств изображения стиля
Допустимые значения для ключевых слов list-style-image : none и url .
Значения свойств позиции стиля списка
Допустимые значения для ключевых слов list-style-position : внутри и вне .
Значение по умолчанию
Значение по умолчанию для типа стиля списка установлено как десятичное для упорядоченных списков и дисковое для неупорядоченных списков.
Значение по умолчанию для изображения в стиле списка не установлено.
Значение по умолчанию для позиции стиля списка установлено снаружи.
Наследство
Свойство в стиле списка наследуется от родительского элемента, если к текущему элементу не применяется значение.
Аномалии браузера
IE5, IE6 и IE7 не поддерживают наследование значения свойства.
IE8 делает с допустимым !DOCTYPE.
IE9+ поддерживает значение свойства наследования.