CSS урок 9. Видимость элемента, оформление ссылок css и списков, курсор

Видимость элемента в CSS

display

Возможные значения:

• block (отображается как блочный)
• none (временно удаляет элемент из документа)
• inline (отображается как встроенный (строчный))
• inline-block (внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный, обтекается другими элементами (подобно img))
• list-item (отображается как блочный и добавляется маркер списка)
• inline-table (элемент в качестве таблицы, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами)
• table (элемент в качестве блочной таблицы)

Пример:

div:hover{
	display:none;
}

Результат:

visibility

Возможные значения:

• hidden (становится невидимым, но участвует в нормальном потоке элементов)
• visible (отображается как видимый)
• collapse (для содержимого ячеек таблиц, отображаются как будто применен стиль display: none (заданные строки и колонки убираются))

Пример:

div:hover{
	visibility:hidden;
}

Результат:

overflow

Возможные значения:

• visible (отображается все содержание элемента, даже за пределами установленной высоты и ширины)
• hidden (отображается только область внутри элемента, остальное будет обрезано)
• scroll (всегда добавляются полосы прокрутки)
• auto (полосы прокрутки добавляются только при необходимости)

Пример:

div{
	width:150px;
	height:150px;
	overflow:scroll;
}

Результат:

Тот же самый пример с другим свойством:

div{
	width:150px;
	height:150px;
	overflow:hidden;
}

Результат:

Изменение курсора в CSS

cursor

Возможные значения:

• url('путь к файлу') (свой собственный курсор из файла изображения)
• crosshair
• help
• move
• pointer
• progress
• text
• wait
• n-resize
• ne-resize
• e-resize
• se-resize
• s-resize
• sw-resize
• w-resize
• nw-resize

Пример:

.crosshair{
	cursor: crosshair;
}
.help{
	cursor: help;
}
...

Результат:

Оформление ссылок в CSS

Для оформления ссылок в css, прежде всего, следует использовать псевдоклассы, рассмотренные ранее.

Для стилизации ссылок также используются следующие свойства CSS:

text-decoration

со значением none: смотри пример здесь.

background-color

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

Оформление списков в CSS

Для оформления списков используются следующие свойства:

list-style-type

Возможные значения:

• none (отмена маркера или нумерации)
• disc
• circle
• square
• decimal
• decimal-leading-zero
• armenian
• georgian
• lower-alpha
• upper-alpha
• lower-greek
• lower-latin
• upper-latin
• lower-roman
• upper-roman

Пример:

ul.none{
	list-style-type: none;
}
ul.disc{
	list-style-type: disc;
}
...
ol.decimal{
	list-style-type: decimal;
}
ol.decimal-leading-zero{
	list-style-type: decimal-leading-zero;
}

Результат:

list-style-image

Возможные значения:

• url('путь к файлу') (установка своего изображения)

Пример:

ul{
  list-style-image:url('1.png');
}

Результат:

list-style-position (положение маркера или номера)

Возможные значения:

• inside (Маркер является частью текстового блока и отображается в элементе списка)
• outside (Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока)

Пример:

ul.inside{
  list-style-position:inside;
}
ul.outside{
  list-style-position:outside;
}

Результат: