- •Index.Htm
- •Урок 3: Цвет и фон в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 4: Шрифты в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 5: Текст в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 6: Списки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 8: Типы селекторов в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 9: Блоковая модель в css
- •Урок 10: Рамки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 13: Позиционирование блоков
- •↑ Наверх ↑
↑ Наверх ↑
Свойство BACKGROUND-POSITION
Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования(точка это типа изображение, а то что под ней - приблизительные координаты)
В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.
Также положение можно задавать специальными словами: left - лево, right - право, center -центр, top - верх, bottom - низ . Смотрите рисунок:
Примеры стилей:
BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: top right; }
Смотреть пример
BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 300px 500px ; }
Смотреть пример
BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 75% 25%; }
Смотреть пример
↑ Наверх ↑
Сокращенная форма записи - BACKGROUND
Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.
Порядок свойств этого элемента таков:
background-color_background-image_background-repeat_background-attachment _background-position
Т.е. просто записывается пять значений свойств через пробел.Рассмотрев пример ниже Вам станет все понятно:
То что записано так:
BODY { background-color:#ffee8c ; background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed; background-position: top right; }
Можно записать одной строчкой:
BODY { background: #ffee8c url(smile.png) no-repeat fixed top right ; }
Как видите, пишем значения свойств через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по- умолчанию.
Ничего сложного здесь нет. Попрактикуйтесь, и Вы все запомните!
Урок 4: Шрифты в css
В этом уроке мы посмотрим как выглядят шрифты в CSS, а именно рассмотрим основные свойства шрифтов :семейство, вес, стиль, вариант, размер,также узнаем по какому принципу браузер выбирает нужный шрифт.
Так вот за шрифты в CSS отвечают следующие свойства:
font-family
font-style
font-variant
font-weight
font-size
font
Свойство FONT-FAMILY
Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Я рассмотрю три основных семейства: Serif- шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";Sans-serif- шрифты рубленые, без засечек, например Arial или Verdana ;Monospace- моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";
На рисунке ниже изображены названия основных, используемых на практике, шрифтов, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название "Times New Roman" отображено шрифтом "Times New Roman" , ну вы поняли....
Может Вам интересно, почему некоторые шрифты мы заключаем в кавычки? А дело в том, что есть такое правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки" .
h1 {font-family: verdana, arial, sans-serif;} p {font-family: "Times New Roman", serif;}
Смотреть пример
Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше - h1{font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif . Вот так.