- •Учебник 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.
- •Полезные советы:
Толщина границы.
Свойство border-width - устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:
thin- тонкая граница
medium- средняя толщина границы
thick- толстая граница
А также в пикселях или любых других единицах измерения принятых в CSS.
По аналогии со стилем, толщина бордюра тоже может иметь от одного до четырёх значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.
|
Число значений |
Результат |
|
1 |
Пример: div {border-style: solid; border-width: 1px;} Первое значение - Устанавливает единую толщину бордюра со всех сторон. |
|
2 |
Пример: div {border-style: solid; border-width: 1px 4px;} Первое значение - Устанавливает толщину верхней и нижней границы элемента. Второе значение - Устанавливает толщину левой и правой границы элемента. |
|
3 |
Пример: div {border-style: solid; border-width: 1px 4px 7px;} Первое значение - Устанавливает толщину верхней границы элемента. Второе значение - Устанавливает толщину левой и правой границы элемента. Третье значение - Устанавливает толщину нижней границы элемента. |
|
4 |
Пример: div {border-style: solid; border-width: 1px 4px 7px 5px;} Первое значение - Устанавливает толщину верхней границы элемента. Второе значение - Устанавливает толщину правой границы элемента. Третье значение - Устанавливает толщину нижней границы элемента. Четвёртое значение - Устанавливает толщину левой границы элемента. |
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Толщина границы</title> </head> <body> <div style="border-style: solid;border-width: 3px 1px 10px 4px"> Толщина границ данного блока: <ul> <li>Сверху 3 пикселя <li>Справа 1 пиксель <li>Снизу 10 пикселей <li>Слева 4 пикселя </ul> </div> <br><br> <div style="border-style: double;border-width: thick">В этом блоке границы со всех сторон одинаково толстые</div> </body> </html>
Цвет границы.
Цвет рамки или её сторон по отдельности определяется свойством border-color.
Цвет бордюра может иметь следующие значения:
#ff0000- шестнадцатеричное значение цвета RGB.
red- именное значение цвета.
RGB(255,0,0)- значение цвета RGB.
transparent- прозрачная граница.
Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.
|
Число значений |
Результат |
|
1 |
Пример: div {border-style: solid; border-width: 3px; border-color: #008000;}
|
|
2 |
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff;}
|
|
3 |
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000;}
|
|
4 |
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00;}
|
Что то уж больно много почти идентичных таблиц получилось.. ну не судите строго у каждого читателя свой уровень подготовки, да и учебник этот с маркой: -"CSS для начинающих" так что лучше перестраховаться, рассмотрев каждый случай отдельно, не желе чем быть непонятым..
Так вот перестраховываясь, привожу пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Цвет границы</title> </head> <body> <div style="border-style: solid; border-width: 10px; border-color: #ff0000 #ffff00 #00ff00 #0000ff;"> <p style="border-style: double; border-width: 5px; border-color: #008000;">Зелёный</p> <p style="border-style: double; border-width: 5px; border-color: red;">Красный</p> <p style="border-style: double; border-width: 5px; border-color: rgb(0,0,255);">Синий</p> </div> </body> </html>