- •Учебник css для начинающих.
- •Версия для печати раздела "Учебник css" сайта www.Webremeslo.Ru
- •Введение
- •Что такое css?
- •Глава 1 Внедрение css в html документ.
- •Атрибут style.
- •Css в отдельном внешнем файле.
- •Полезные советы:
- •Глава 2 Свойства текста.
- •Выравнивание текста.
- •Оформление текста.
- •Отступ первой строки.
- •Трансформация текста
- •Вертикальное выравнивание
- •Пробелы и перенос строки.
- •Расстояние между словами.
- •Межсимвольное расстояние.
- •Интерлиньяж
- •Полезные советы:
- •Глава 3 Свойства шрифта.
- •Стиль шрифта
- •Начертание шрифта
- •Размер шрифта
- •Жирность шрифта
- •Семейство шрифта
- •Прараметры шрифта
- •Полезные советы:
- •Глава 4 Цвет и фон.
- •Цвет элемента.
- •Цвет фона элемента.
- •Фоновое изображение.
- •Фиксация фонового изображения.
- •Повторение фонового изображения.
- •Позиция фонового изображения.
- •Полезные советы:
- •Глава 5 Границы элемента.
- •Стиль границы.
- •Толщина границы.
- •Цвет границы.
- •Границы справа слева сверху и снизу отдельно.
- •Границы таблицы.
- •Полезные советы:
- •Глава 6 Классы и идентификаторы.
- •Классы css.
- •Идентификаторы
- •Полезные советы:
- •Глава 7 Размеры элемента. Блоки и строки.
- •Ширина и высота блочных элементов.
- •Управление содержанием элемента.
- •Минимальные и максимальные размеры элемента.
- •Полезные советы:
- •Глава 8 Поля и отступы.
- •Возможные значения margin и padding.
- •Дочерние свойства margin и padding.
- •Полезные советы:
- •Глава 9 Курсоры.
- •Стандартные курсоры.
- •Пользовательские курсоры.
- •Полезные советы:
- •Глава 10 Форматирование.
- •Показ элементов.
- •Видимость элемента.
- •Видимая часть элемента.
- •Полезные советы:
- •Глава 11 Поплавки.
- •Обтекание элемента
- •Запрет обтекания
- •Блочная вёрстка.
- •Полезные советы:
- •Глава 12 Позиционирование.
- •Абсолютное позиционирование.
- •Относительное позиционирование.
- •Фиксированное позиционирование.
- •Полезные советы:
- •Глава 13 Стиль списка.
- •Вид маркера в списке.
- •Пользовательский маркер рисунок.
- •Стиль обтекания маркера списком.
- •Полезные советы:
- •Глава 14 Полоса прокрутки.
- •Кроссбраузерность свойства scrollbar.
- •Полезные советы:
- •Глава 15 Псевдоклассы.
- •Псевдокласс hover.
- •Псевдоклассы и ссылки.
- •Псевдокласс focus.
- •Псевдокласс first-child.
- •Язык текста.
- •Полезные советы:
- •Глава 16 Псевдоэлементы.
- •Стиль первой буквы.
- •Стиль первой строки.
- •Контент.
- •Псевдоэлемент ::selection.
- •Полезные советы:
Пользовательские курсоры.
Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url("путь к курсору").
Например:
div { cursor : url("my.cur"); }
Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.
Поэтому список курсоров составляют из файлов разных форматов.. например, так:
div { cursor : url("my.cur"), url("my.svg"); }
И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.
Вот так:
div { cursor : url("my.cur"), url("my.svg"), help; }
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <style type="text/css"> div { cursor : url("cursors/my.ani"), crosshair; width: 200px; padding: 10px; text-align: center; background-color: #c5ffa0; border: 2px solid #008000 } </style> <title>Пользовательские курсоры</title> </head> <body> <div> Если нацелив курсор на этот блок вместо "навороченного" курсора Вы видите обыкновенное перекрестие значит Ваш браузер не поддерживает формат ani </div> </body></html>
Ну и в конце..
Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя.
Полезные советы:
В подавляющем большинстве случаев не стоит вообще трогать курсоры, оставьте всё как есть. Пользователя могут ввести в заблуждение нестандартные курсоры, например, когда при наведении на ссылку вместо привычной "руки" появляется что-то другое. Пользовательские курсоры уместны лишь там, где они действительно необходимы.
Помните что любой курсор должен быть как минимум двухцветным. Это нужно для того чтобы его было видно на фоне такого же цвета как и сам курсор.. представьте одноцветный белый курсор на белом фоне.. вот уж задачка будет какой ни будь домохозяйке!! :)
Ааа.. у меня стрелка потерялась!!.. вирусы!!.. проклятый Бил Гейтс!!.. :) и давай лупить кулаком по системному блоку.. :)
Короче паники с истериками нам не нужны..
Глава 10 Форматирование.
В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в седьмой главе, в которой мы говорили о размерах элемента - width и height, минимальных и максимальных размеров элемента - max-height, max-width, min -height, min-width и свойстве overflow. Все свойства из седьмой главы относятся к категории "форматирование элементов" однако знания лучше получать порциями, чтобы каши в голове не случилось, вот я и решил придержать кой какой материал на потом..
Потом настало! так что готовьтесь переваривать информацию на медленном огне..