- •Учебник 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 позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве "меню" - навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.
Глава 14 Полоса прокрутки.
Коротенькая и совсем несложная глава про цвет полосы прокрутки.
Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства scrollbar, присвоив их нужному элементу.
В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки <div>, <textarea>, <iframe> и т.д.. в том числе и сама страница - тег <body>.
В таблице ниже перечислены все свойства CSS из семейства scrollbar, а также показан результат применения этих свойств.
Свойство полосы прокрутки: |
scrollbar-3dlight-color: #ff0000;- Цвет верхней и левой тени ползунка и кнопок. |
scrollbar-arrow-color: #ff0000;- Цвет стрелок на кнопках полосы прокрутки. |
scrollbar-base-color: #ff0000;- Базовый цвет полосы прокрутки. |
scrollbar-darkshadow-color: #ff0000;- Цвет нижней и правой тени.(dark shadow - темная тень) |
scrollbar-face-color: #ff0000;- Цвет лицевой части полосы прокрутки. |
scrollbar-highlight-color: #ff0000;- Цвет подсветки полосы прокрутки. |
scrollbar-shadow-color: #ff0000;- Цвет тени полосы прокрутки (shadow-тень). |
scrollbar-track-color: #ff0000;- Цвет дорожки для полосы прокрутки. |
Ну вот Вам ещё и рисунок для наглядности:
Возможные значения свойств из семейства scrollbar:
#ff0000- Шестнадцатеричное значение цвета RGB.
red- Именное значение цвета.
RGB(255, 0, 0)- Значение цвета RGB.
inherit- применяется значение родительского элемента.(по умолчанию)
Пример:
Файл primer3.css body{ background-color: #fff8dc; scrollbar-3dlight-color: #ffebcd; scrollbar-arrow-color: #ffffff; scrollbar-base-color: #ffebcd; scrollbar-darkshadow-color: #f5f5dc; scrollbar-face-color: #b8860b; scrollbar-highlight-color: #f5f5dc; scrollbar-shadow-color: #f5f5dc; scrollbar-track-color: #f5f5dc; } div{ padding: 20px; overflow: auto; width: 200px; height: 100px; border: solid 2px #deb887; background-color: #ffffff; }Файл index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Полоса прокрутки</title> <link rel="stylesheet" href="primer3.css" type="text/css"> </head> <body> <div> <h3 align="center">Диктант</h3> На террасе, близ конопляника, небезызвестная вдова Агриппина Саввична, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели. </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>