Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

CSS

Списки, display

В этом уроке мы рассмотрим основные свойства CSS, отвечающие за внешний вид списков. Все эти свойства универсальны, т.е. могут применяться как к упорядоченным спискам, так и к неупорядоченным.

list-style-type
list-style-position
list-style-image
list-style

Свойство list-style-type - позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки и др. Ниже приведены основные значения этого свойства:

disk - маркер в виде закрашенного круга;
circle - маркер в виде незакрашенного круга;
square - маркер в виде закрашенного квадрата;
decimal - обычные десятичные числа , например 1,2,3,4,5 и т. д. ;
upper-roman - большие римские цифры, типа I, II, III, IV, V и т.д. ;
lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т.д.
upper-alpha - большие буквы A, B, C, D, E и так далее;
lower-alpha - малые буквы типа a,b,c,d,e и т.д.;v
none - маркер списка отсутсвует;

Свойство list-style-position - Это свойство определяет положение маркера. Может принимать два значения:

Свойство Llist-style-image - Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению.

Сокращенная форма list-style:

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Списки</title>
	<style>
		ul {
			list-style-type:square;
			list-style-position: inside; 
			list-style-image: url(tick.png);
		}

		ul {list-style:square inside url(tick.gif) }
	</style>
</head> 
<body>
	<ul>
		<li>df</li>
		<li>dfff</li>
		<li>dfddd</li>
	</ul>
</body> 
</html>

Попробуйте такой пример:

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Списки</title>
	<style type="text/css">
		* {font-family: Arial, Helvetica, sans-serif}
		#nav_menu {padding: 0; width: 762px; margin: 0 auto}
		#nav_menu ul {list-style: none; margin: 0; padding: 0}
		#nav_menu li {display: inline}
		#nav_menu a {
			float: left;
			width: 125px;
			height: 30px;
			background-color: #cc0033;
			border-left: 2px solid #ffffff;
			text-decoration: none;
			text-align: center;
			padding: 0;
			padding-top: 10px;
			font-size: 18px;
			color: #ffffff
		}
		#nav_menu a:hover {background-color: #990033; color: Tomato}
	</style>
 </head>
 <body>
	<div id="nav_menu">
		<ul>
			<li><a href="#">Sony</a></li>
			 <li><a href="#">Asus</a></li>
			 <li><a href="#">Dell</a></li>
			 <li><a href="#">Toshiba</a></li>
			 <li><a href="#">Acer</a></li>
			 <li><a href="#">Lenovo</a></li>
		</ul>
	</div>
</body> 
</html>

Пояснения:

Селектор * – определяет все элементы документа. В данном случае установлен шрифт.
padding: 0 – отменяет внутренние поля.
margin: 0 auto – определяет центрирование блока.
list-style: none – определяет отсутствие маркеров списка.
margin: 0 – отменяет внешние поля блока
display: inline – определяет горизонтальное положение объектов.
border-left: – определяет свойства левой границы.
padding-top: – определяет размер верхнего внутреннего поля.
text-decoration:none – отменяет подчеркивание текста.
float: left – определяет обтекание слева (подробнее в одном из следующих уроков).
a:link, a:active, a:visited заменены селектором a, то есть все три псевдоэлемента имеют одинаковые свойства.
Ширина блока подсчитана так: 762 = 125 * 6 + 2 * 6, где 125 * 6 → длина 6-ти ссылок, 2 * 6 → общая ширина атрибута border-left.

Display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Ещё часто применяется inline-block

Идентификация и группирование элементов (class и id)

Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов.
Кроме форматирования обычных HTML элементов (например, h1, p и тд), CSS позволяет вам указать свои собственные селекторы, называемые "id" и "class", которые позволяют применять свойства CSS к элементам определенного блока страницы. Например, вы можете присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. После этого при помощи CSS вы можете присвоить различный стиль ссылкам в блоке навигации и блоке контента. На этом сайте вы можете убедиться в том, что ссылки в блоках навигации слева и справа имеют различный стиль, отличающийся от стиля ссылок в блоке контента.

Селектор id используется для определения стиля единственного, уникального элемента страницы.
Селектор id использует атрибут id HTML-элемента и определяется знаком "#".
Стилевое правило будет применено к элементу с id="para1"

Селектор class используется для определения стиля групп элементов. В отличие от селектора id, селектор class обычно используют для форматирования нескольких элементов.
Это позволяет вам задавать одинаковый стиль для любого html-элемента с одинаковым классом.
Селектор class использует атрибут HTML class и определяется знаком "."

Html формы - это наверное самая сложная часть языка html