Inside - внутри основного блока списка.
Ээто свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать!
Свойство LIST-STYLE-IMAGE
Позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает неккоректно.
ul {list-style-image: url(galka.gif);}
Сокращенная форма LIST-STYLE
Перечисленные выше свойства можно записать более компактно.
Такой вариант из трех строк:
ul {list-style-type:square;list-style-position: inside; list-style-image: url(galka.gif)}
Рациональнее заменить таким:
ul {list-style:square inside url(galka.gif) }
Свойства указываются через пробел и последовательность в данном случае роли не играет.
Урок 7: Ссылки в css
Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз 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}
Если для всех псевдоклассов стиль одинаковый, то это можно записать и короче:
a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}
А можно и вовсе без использования псевдоклассов:
a {color:black; text-decoration:none;}
Урок 8: Типы селекторов в CSS
Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .
Типы селекторов:
Селектор по элементу;
Селектор по классу;
Селектор по id;
Контекcтный селектор;
Селектор по элементу
До этого момента, работали именно с этим селектором. Т.е. в качестве селектора использовалось непосредственно имя html элемента , к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.
P {font-family: arial, verdana, sans-serif; font-size: 12px}
Селектор по классу
Если необходимо сделать идентичные элементы в разных стилях, используется селектор по классу.
Для начала создаётся универсальный класс в CSS: сначала ставим точку, затем сразу, без пробела, пишем имя класса, ну а затем в фигурных скобках стиль:
.green {font-family: arial, verdana, sans-serif; font-size: 12px; color:green}
Применение данного стиля.
Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:
<p>Это обычный параграф , для него используется селектор по элементу </p>
<p class="green"> Этот параграф зеленый, т.к к нему применили класс </p>
<p class ="big_red" >А этот параграф большего шрифта и красный </p>
<p>Этот параграф снова обычный, по классу селектора элемента </p>
css:
p {font-family:arial,verdana,sans-serif; font-size:18px}
.green {color:green;}
.big_red{font-size:28px; color:red}
Как видите используется атрибут class со значением названия стиля.
Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.
Чтобы класс действовал только на определенный элемент(например параграф) нужно указать название элемента перед точкой:
P.green {color:green}
Селектор по id
Данный селектор применяется если необходимо выделить один единственный элемент , уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
html- часть:
<Н1 id="firstheader"> Первый заголовок на странице </Н1>
css - часть:
H1#firstheader { color: red; font-weight: bold; text-align: center }
Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.
Контекстный селектор
Допустим у нас есть страничка с таблицами и параграфами текста, в которых встречаются выделенные жирным шрифтом(strong) слова. Чтобы слова, в параграфе, в таблице, которые выделены жирным стали зеленого цвета:
td p strong {color:green }
Т.е. в начале TD пробел P пробел, затем STRONG а уже потом стиль. Вложенность может быть любого уровня.
Урок 9: Блоковая модель в CSS
Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок.
Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца.
Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin).
Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.
Отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Урок 10: Рамки в CSS
Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие:
border-width
border-color
border-style
Сокращенная форма - border
Свойство BORDER-WIDTH
Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px
Свойство BORDER-COLOR
Как вы поняли данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold".
Свойство BORDER-STYLE
Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства:
SOLID Рамка состоит из сплошной линии
DOTTED Точечная рамка
DASHED Пунктирная рамка
DOUBLE Рамка из двойной сплошной линии
GROOVE Рамка как бы из вдавленной линии, с имитацией объема
RIDGE Рамка отображается выпуклой линией с имитацией объема