Клуб мобильного творчества
Меню
jbak 28.01.13 в 18:12 #
Don't worry. Be happy.
Здравствуйте дорогие читатели. В предыдущем уроке вы узнали что такое селектор, атрибут, значение. То есть познакомились с синтаксисом.

Чему мы научимся по ходу этого урока?


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
Рейтинг: 0
seg0ro 28.01.13 в 19:37 #
¯\_(ツ)_/¯
Урок добавлен в каталог
Рейтинг: 0
RHCP 08.02.13 в 23:44 #
I'm waiting for something special.
на сколько я знаю, css - это counter strike: source:)а вы о чем?
Рейтинг: 0
fantast 09.02.13 в 02:22 #
Зловредный зайка
Про язык программирования, хотя это вроде язык разметки :незнаю
Рейтинг: 0
Кухулин 09.02.13 в 12:48 #
don't tread on me
RHCP, Cascading Style Sheets
fantast, язык стилей.
Рейтинг: 0