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

Цель урока: Знакомство со свойствами, управляющими видимостью элемента, свойствами оформления ссылок css и списков. Изменение курсора в 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;
}

Результат:

Это пример параграфа1. Это пример параграфа2. Это пример параграфа3. Это пример параграфа4. Это пример параграфа5. Это пример параграфа6. Это пример параграфа7. Это пример параграфа8. Это пример параграфа9. Это пример параграфа10. Это пример параграфа11. Это пример параграфа12. Это пример параграфа13. Это пример параграфа14. Это пример параграфа15. Это пример параграфа16. Это пример параграфа17. Это пример параграфа18.

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

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

Результат:

Это пример параграфа1. Это пример параграфа2. Это пример параграфа3. Это пример параграфа4. Это пример параграфа5. Это пример параграфа6. Это пример параграфа7. Это пример параграфа8. Это пример параграфа9. Это пример параграфа10. Это пример параграфа11. Это пример параграфа12. Это пример параграфа13. Это пример параграфа14. Это пример параграфа15. Это пример параграфа16. Это пример параграфа17. Это пример параграфа18.

Изменение курсора в 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;
}
...

Результат:

crosshair

help

move

pointer

progress

text

wait

n-resize

ne-resize

e-resize

se-resize

s-resize

sw-resize

w-resize

nw-resize

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

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

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

text-decoration

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

background-color

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

Задание: Создать страницу с меню. Пункты меню поместить в таблицу. По наведению курсора мыши на пункт, подсвечивать ячейку и менять вид курсора мыши. Оформить пункты как гиперссылки (для гиперссылок убрать оформление).

Использовать свойства:
псевдокласс hover
свойство text-decoration

Желаемый результат:
Оформление ссылок в CSS

Оформление списков в 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;
}

Результат:

  • none
  • none
  • disc
  • disc
  • circle
  • circle
  • square
  • square
  1. decimal
  2. decimal
  1. decimal-leading-zero
  2. decimal-leading-zero
  1. armenian
  2. armenian
  1. georgian
  2. georgian
  1. lower-alpha
  2. lower-alpha
  1. upper-alpha
  2. upper-alpha
  1. lower-greek
  2. lower-greek
  1. lower-latin
  2. lower-latin
  1. upper-latin
  2. upper-latin
  1. lower-roman
  2. lower-roman
  1. upper-roman
  2. upper-roman

list-style-image

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

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

Пример:

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

Результат:

  1. пункт 1
  2. пункт 1

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

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

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

Пример:

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

Результат:

inside:

  • пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
  • пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

outside:

  • пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
  • пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

Задание: Создать маркированный список, вместо маркеров установить изображение.

Примерный результат:
оформление списков css

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить