Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 7. CSS: свойства шрифтов, текста, фона и цвета

Содержание курса

Свойства шрифтов

Свойство font-family задает шрифт текста (например, Arial, Geneva, sans-serif). В значении можно указать либо название шрифта, либо семейство шрифтов (рубленный, с засечками, моноширинный и др.). Браузер берет указанный шрифт с компьютера пользователя, поэтому указывая редкие типы шрифтов, следует учитывать, что на компьютере пользователя их может и не быть. В значении font-family можно через запятую указать несколько шрифтов браузер выберет первый, если он есть на компьютере пользователя, если нет - второй и т.д.

Свойство font-size задает размер шрифта. Обязательно указание единиц измерения (px, em и др. см. "единицы измерения"). Пример: #box {font-size: 12px;}. Кроме того, для указания размера шрифта есть ключевые слова: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.

Свойство font-weight задает жирность шрифта. Значения: normal (нормальный), bold (жирный).

Свойство font-style задает начертание шрифта. Значения: italic (курсив), normal

Свойство font-variant - вариант шрифта, довольно редкое. Значения: normal, small-caps (делает строчные и прописные буквы одинакового начертания.).

Общее свойство font включает в себя все вышеописанные свойства (оно придумано для краткости - все в одном, иногда бывает удобно.) Перечисление свойств идёт строго в таком порядке (через пробел): font-style font-variant font-weight font-size font-family. Любое свойство может быть опущенно, кроме последних двух. Пример: #box {font: bold 14px Arial;}

		Свойства шрифтов и их значения
		
font-family		название шрифта; 
				семейство шрифтов
==========================================
font-size			величина;
				xx-small, x-small, small, medium, large, x-large, xx-large;
				smaller, larger.
==========================================
font-weight		normal, bold
==========================================
font-style			normal, italic
==========================================
font-variant		normal, small-caps
==========================================
font				font-style font-variant font-weight font-size font-family

Свойства текста

Свойство text-align задает выравнивание текста в элементе. Значения: left, right, center, justify.

Свойство text-decoration - подчеркивание текста. Значения: none (подчеркивания нет), overline (надчеркнутый), underline (подчеркнутый), line-through (перечеркнутый). Значений можно указать несколько через пробел. Пример: #box {text-decoration: overline underline;} - текст будет и надчеркнутым и подчеркнутым.

Свойство text-indent - отступ красной строки. Значение: величина. Пример: #box {text-indent: 25px;}. Значение может быть и отрицательным, в этом случае красная строка сдвинется справа налево.

Свойство text-transform задает регистр символов текста, редко используемое. Значения: none (нет значения), capitalize (первая буква каждого слова в верхнем регистре), uppercase (все буквы переводятся в верхний регистр), lowercase (все буквы в нижнем регистре).

Свойства letter-spacing и word-spacing задают расстояние между буквами и словами соответственно. Значения: normal, величина. Редко используемое свойство.

Свойство vertical-align задает выравнивание текста по вертикали относительно окружающего текста. При помощи этого свойства можно писать например, верхние и нижние индексы (H2O, 105). Значения: sub (выравнивание вниз), super (выравнивание вверх), middle (выравнивание по центру, наиболее актуально для ячеек таблицы).

Свойство line-height задает межстрочный интервал (расстояние между строками). Значения: normal, middle (вертикальное выравнивание по центру блока), величина. Пример: #box {line-height: 150%;}

Свойства фона и цвета

Свойство color задает цвет текста, с этим свойством мы уже знакомы. В значении указывается цвет в любом допустимом формате (см. "цвета в CSS").

Свойство background-color задает цвет фона, с этим свойством мы тоже уже хорошо знакомы. В значении также указывается цвет в любом допустимом формате.

Свойство background-image задает картинку фона. Фон картинкой можно назначить у любого элемента. Значения: none, URL(). В значении URL в круглых скобках и в кавычках указывается путь к картинке по тем же правилам, что и путь к файлу в href тега <a>. Пример: #box {background-image: URL("/images/picture.gif");}. Обратите внимание, что необходимо указать также расширение файла картинки.
Если картинка меньше по вертикали или по горизонтали элемента, то браузер по умолчанию ее размножает, начиная с верхнего левого угла элемента.

Свойство background-position задает положение картинки фона, указанной в свойстве background-image (по умолчанию, напомню, это верхний левый угол элемента). Значения: величина или top, bottom, left, right, center.
Пример: #box {background-image: URL("/images/picture.gif"); background-position: right bottom;}. Обратите внимание, команды позиционирования картинки пишутся через пробел.

Свойство background-repeat управляет размножением картики и по умолчанию выставлено значение "repeat", которое можно изменить. Возможные значения: repeat (размножить), repeat-x (размножить только по горизонтали), repeat-y (размножить только по вертикали), no-repeat (не размножать).
Пример: #box {background-image: URL("/images/picture.gif"); background-position: right bottom; background-repeat: no-repeat;}.

Свойство background-attachment - это свойство управляет прокруткой картинки. Значения: fixed (не прокручивать), scroll (картинка прокручивается при прокрутке странице).

Общее свойство background позволяет задать сразу все свойства фона через пробел: color, image, repeat, attachment, position.
Пример: #box {background: silver url("img.jpg") repeat-y}.

		Свойства фона и их значения
		
background-color			величина: цвет в любом допустимом формате
==========================================
background-image			none, URL
==========================================
background-position		величина;
						top, bottom, left, right, center
==========================================
background-repeat			repeat, repeat-x, repeat-y, no-repeat
==========================================
background-attachment		fixed, scroll
==========================================
background				color image repeat attachment position

Попробуйте поиграть этими свойствами в своих кодах и посмотрите, что получается. Напомню, что для работы вам понадобится блокнот Notepad++ (подробнее о нём в 1-ом уроке) Вот вам заготовка кода:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>CSS: свойства шрифтов, текста, фона и цвета</title>
			<style>
			
				/* Вписывайте сюда изученные свойства */
				div {}
			
			</style>
		</head>
		<body>
		
			<div>
				Повседневная практика показывает, что рамки и место обучения 
				кадров играет важную роль в формировании форм развития. Таким
				образом постоянное информационно-пропагандистское обеспечение
				нашей деятельности в значительной степени обуславливает 
				создание новых предложений. Таким образом новая модель 
				организационной деятельности влечет за собой процесс внедрения
				и модернизации новых предложений. Значимость этих проблем 
				настолько очевидна, что сложившаяся структура организации
				позволяет выполнять важные задания по разработке существенных
				финансовых и административных условий. Не следует, однако 
				забывать,что сложившаяся структура организации позволяет 
				выполнять важные задания по разработке модели развития. 
				Разнообразный и богатый опыт
				реализация намеченных плановых заданий способствует
				подготовки и 
				реализации существенных финансовых и административных
				условий.
			</div>
		
		</body>
	</html>

У вас нет необходимости заучивать все это наизусть, главное - это понимание того, как все это работает. Заучить весь html наизусть невозможно, для этого есть справочники, также как невозможно наизусть выучить все формулы физики - для этого тоже есть справочники. По мере работы с html что-то останется в памяти, а что-то при необходимости можно посмотреть в справочнике html и CSS.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля