- •Учебник 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.
- •Полезные советы:
Видимость элемента.
Свойство CSS visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента с помощью свойства visibility элемент становится, не виден, однако место, которое он занимает, остается за ним.
Возможные значения свойства visibility:
inherit- Элемент отображается так как указанно в элементе родителе.
visible- Отображает элемент. (по умолчанию).
hidden- Скрывает элемент. В отличии отdisplay: noneоставляет за элементом площадь которую он занимает. Проще говоря еслиdisplay: none"удаляет" элемент тоhiddenделает его "прозрачным".
collapse- Скрывает колонки и строки таблицы идентичноdisplay: none, Если свойство применяется к другим элементам, не имеющим отношения к таблицам, то результат будет таким же, какhidden.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>visibility</title> </head> <body> <p>Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.</p> <div> <span style="background: #c5ffa0; padding: 5px;">блок 1</span> <span style="visibility: hidden; background: #c0e4ff; padding: 5px;">блок 2</span> <span style="background: #c5ffa0; padding: 5px;">блок 3</span> </div> <hr> <p>Строка 2 скрыта "удалена", если только дело происходит не в Internet Explorer</p> <table border="1"> <tr> <td>Строка 1</td> </tr> <tr style="visibility: collapse;"> <td>Строка 2</td> </tr> <tr> <td>Строка 3</td> </tr> </table> </body></html>
Обратите внимание visibility: collapse; не поддерживается браузером Internet Explorer.
Видимая часть элемента.
Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, "обрезается" и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.
clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную четырьмя значениями от левого и верхнего краёв данного элемента.
Значения:
rect(сверху справа снизу слева)- Обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, четырьмя значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в CSS.
auto- Оставляет элемент или одну из сторон элемента без изменений (по умолчанию).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>clip</title> </head> <body> <div style="position: absolute; clip: rect(15px auto auto 15px); width: 100px; height: 100px; background: #c5ffa0; border: double 5px #008000"> Этот блок частично обрезан слева и сверху </div> </body> </html>
О том, что такое position: absolute; - абсолютно позиционированный элемент и вообще что такое позиционирование мы поговорим в отдельной главе.