Здравствуйте дорогие читатели. В предыдущем уроке вы узнали что такое селектор, атрибут, значение. То есть познакомились с синтаксисом.
1. Познакомимся с новыми атрибутами.
2. Научимся изменять размеры селекторов.
3. Научимся устанавливать и изменять цвета бордюров и познакомимся с видами бордюров.
4. И в конце напишем более сложный CSS-код, по-сравнению с предыдущим.
→ Атрибут " background"- этот селектор предназначен для изменения оформления фона того или иного селектора. Применяется практически везде и имеет разные виды:
background-color- применяется для установки фонового цвета того или иного селектора. Пример:
этот код вставляется во внутрь селектора, то есть между фигурными скобками ( {...} ). Значение этого атрибута может быть различным. Вместо black можно вставить любой другой цвет. White, red, green, yellow, gray, или записать цвет в виде html: #fff000. То есть все существующие цвета.
background-position- предназначен для определения позиции фонового рисунка. Значение может быть различным: center, left, right, bottom. Например для того чтобы фоновой рисунок был слева нужно ввести:
этот атрибут так же вставляется во внутрь селектора.
"А как установить фоновой рисунок?"- спросите вы. Для этого нужно ввести следующее:
Вместо /img/background.png можно ввести любой адрес любой картинки. Если изображение находится на вашем сайте- достаточно написать адрес ссылки без домена. А если изображение находится на другом, то нужно полностью писать адрес картинки (начиная с http://).
background-repeat- используется для определения того, что будет ли повторятся фоновой рисунок, или нет. Для того, чтобы фоновое изображение повторялось по оси X (по горизонтале), нужно ввести:
для того, чтобы фоновое изображение повторялось по оси Y (по вертикале), нужно ввести:
для того, чтобы изображение повторялось и по осям X и Y, нужно ввести следующее:
для того, чтобы фоновой рисунок вообще не повторялся, нужно ввести:
→ атрибут font- используется для работы с текстом. Точнее, в основном, его шрифтом. А так же с его стилем, вариантом и размером. Этот атрибут имеет разные виды:
font-style- используется для определения стиля текста. Например:
font-variant- используется для отделения вида текста (жирный, средний, светлый). Например для того, чтобы сделать текст светлым, нужно написать:
font-size- используется для определения размера текста. Например для того, чтобы сделать цвет текста средним, нужно ввести:
font-femaly- отделяет шрифт текста. Например:
где "Tahoma"- название шрифта.
→ атрибут width- определяет ширину того или иного селектора. Значение записывается в пикселях (px). Например, для того, чтобы ширину в 10 пикселей, нужно ввести:
→ атрибут max-width- определяет максимальное значение ширины, которая зависит от ширины монитора устройства. Например, для того, чтобы страница растягивалась до шестисот пикселей нужно в селекторе body ввести:
→ атрибут margin- определяет расстояние отступов от краев: left (левая сторона), right (правая сторона), top (верхняя сторона), bottom (нижняя сторона). Для того, чтобы страница растягивалась по ширине и высоте монитора устройства, нужно ввести:
для того, чтобы блок отступал от краев на два пикселя, нужно ввести:
→ атрибут padding- предназначен для определения расстояния от границ до содержимого блока (дива). Например, для того, чтобы между границами и содержимым блока было расстояние в 5 пикселей, нужно ввести следующее:
→ атрибут height- отделяет ширину селектора (в пикселях). Например, для того, чтобы ширина селектора была в 20 пикселей, нужно ввести:
продолжение в следующей статье.
Чему мы научимся по ходу этого урока?
1. Познакомимся с новыми атрибутами.
2. Научимся изменять размеры селекторов.
3. Научимся устанавливать и изменять цвета бордюров и познакомимся с видами бордюров.
4. И в конце напишем более сложный CSS-код, по-сравнению с предыдущим.
1. Новые селекторы, их атрибуты и значения.
2. Размеры дивов
→ Атрибут " background"- этот селектор предназначен для изменения оформления фона того или иного селектора. Применяется практически везде и имеет разные виды:
background-color- применяется для установки фонового цвета того или иного селектора. Пример:
background–color: black;
этот код вставляется во внутрь селектора, то есть между фигурными скобками ( {...} ). Значение этого атрибута может быть различным. Вместо black можно вставить любой другой цвет. White, red, green, yellow, gray, или записать цвет в виде html: #fff000. То есть все существующие цвета.
background-position- предназначен для определения позиции фонового рисунка. Значение может быть различным: center, left, right, bottom. Например для того чтобы фоновой рисунок был слева нужно ввести:
background–position: left;
этот атрибут так же вставляется во внутрь селектора.
"А как установить фоновой рисунок?"- спросите вы. Для этого нужно ввести следующее:
background: url(/img/background.png);
Вместо /img/background.png можно ввести любой адрес любой картинки. Если изображение находится на вашем сайте- достаточно написать адрес ссылки без домена. А если изображение находится на другом, то нужно полностью писать адрес картинки (начиная с http://).
background-repeat- используется для определения того, что будет ли повторятся фоновой рисунок, или нет. Для того, чтобы фоновое изображение повторялось по оси X (по горизонтале), нужно ввести:
background–repeat: repeat–x;
для того, чтобы фоновое изображение повторялось по оси Y (по вертикале), нужно ввести:
background–repeat: repeat–y;
для того, чтобы изображение повторялось и по осям X и Y, нужно ввести следующее:
background–repeat: repeat;
для того, чтобы фоновой рисунок вообще не повторялся, нужно ввести:
background–repeat: no–repeat;
→ атрибут font- используется для работы с текстом. Точнее, в основном, его шрифтом. А так же с его стилем, вариантом и размером. Этот атрибут имеет разные виды:
font-style- используется для определения стиля текста. Например:
font–style: normal;
font-variant- используется для отделения вида текста (жирный, средний, светлый). Например для того, чтобы сделать текст светлым, нужно написать:
font–variant: lighter;
font-size- используется для определения размера текста. Например для того, чтобы сделать цвет текста средним, нужно ввести:
font–size: medium;
font-femaly- отделяет шрифт текста. Например:
font–femaly: Tahoma;
где "Tahoma"- название шрифта.
→ атрибут width- определяет ширину того или иного селектора. Значение записывается в пикселях (px). Например, для того, чтобы ширину в 10 пикселей, нужно ввести:
width:10px
→ атрибут max-width- определяет максимальное значение ширины, которая зависит от ширины монитора устройства. Например, для того, чтобы страница растягивалась до шестисот пикселей нужно в селекторе body ввести:
max–width: 650px;
→ атрибут margin- определяет расстояние отступов от краев: left (левая сторона), right (правая сторона), top (верхняя сторона), bottom (нижняя сторона). Для того, чтобы страница растягивалась по ширине и высоте монитора устройства, нужно ввести:
margin: 2px auto;
для того, чтобы блок отступал от краев на два пикселя, нужно ввести:
margin–left: 2px;
margin–right: 2px;
margin–top: 2px;
margin–bottom: 2px;
→ атрибут padding- предназначен для определения расстояния от границ до содержимого блока (дива). Например, для того, чтобы между границами и содержимым блока было расстояние в 5 пикселей, нужно ввести следующее:
padding: 5px
→ атрибут height- отделяет ширину селектора (в пикселях). Например, для того, чтобы ширина селектора была в 20 пикселей, нужно ввести:
height: 20px
продолжение в следующей статье.
Изменил(а) jbak 29.01.13 в 22:10
а вы о чем?
