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

Курсы HTML/CSS

Урок 26. Создание логотипа с ключевой фразой, модель flex-блоков, директива @media

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

Создание логотипа с ключевой фразой

Логотип - это та часть страницы, которая находится выше всего в коде страницы, а то, что выше в коде - поисковая фраза для поисковых машин. Поэтому будет очень хорошо, если ваш логотип будет содержать ещё и ключевую фразу.

Однако здесь встаёт необходимость сделать её видимой только для поисковиков. Есть несколько способов сделать поисковую фразу на логотипе невидимой для человека: можно задать прозрачный цвет или нулевой размер текста. Давайте рассмотрим пример, в котором сделаем поисковую фразу в виде ссылки, ведущей на главную страницу с ключевой фразой прозрачного цвета на логотипе в хедере (шапке) сайта:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Логотип с прозрачной ключевой фразой</title>
			<style>
			
				header {
					height: 88px;
					}
				
				header a {
					height: 88px; 
					width: 175px;
					background: url(/images/logo.png);
					display: block;
					color: transparent; 
					 /*Задали прозрачный цвет для ссылки*/
					margin: auto;  /*Выровняли блок по центру*/
					}
			
			</style>
		</head>
		<body>
		
			<header>
				<a href="/index.html">Сайт, обучающий работе в интернете с нуля
				до программиста</a>
			</header>
		
		</body>
	</html>

В результате получим логотип-ссылку с прозрачной ключевой фразой видимой только для поисковиков:

Модель flex-блоков

Flex-блоки используются для предсказуемого отображения элементов на различных устройствах и экранах с различным разрешением. Они состоят из flex-контейнера и flex-элементов. Flex-контейнер создаётся при помощи свойства display: flex; (элемент становится блочным) или display: inline-flex; (элемент отображается как встроенный).

Внутри flex-контейнера находятся один или несколько flex-элементов. Всё, что находится за пределами flex-контейнера и внутри flex-элементов отображается как обычно.

Свойство flex определяет ширину flex-элемента относительно других flex-элементов внутри flex-контейнера. Работает начиная с 10-го IE.

При помощи свойства order можно изменить порядок flex-элементов относительно друг друга внутри flex-контейнера, что очень удобно для продвижения сайта. Потому, как первым блоком в коде можно сделать сам текст, что оценят поисковики, а уже после него прописать блоки с меню и др., и при помощи свойства order поменять их местами через CSS для корректного отображения. Чем меньше значение order, тем левее находится элемент:

При помощи свойства flex можно указать доли ширины родителя, которые будут иметь flex-элементы. Значение - целое число. В примере ниже flex-элементам 3 и 2 выделено по одной доле, а третьему - две доли ширины родителя.


.flex-container {
	display: flex; 
	width: 300px; 
	height: 150px; 
	background: #e0ffff;
	}
	
.flex-item {
	margin: 10px; 
	background: #ff6347;
	}
	
.item1 {
	flex: 2; 
	order: 3;
	}
	
.item2 {
	flex: 1; 
	order: 2;
	}
	
.item3 {
	flex: 1; 
	order: 1;
	}

Рассмотрим такой пеример:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Модель flex-блоков</title>
			<style>
			
				.flex-container {
					display: flex; 
					width: 300px; 
					height: 150px; 
					background: #ccc;
					}
					
				.flex-item {
					width: 300px; 
					margin: 10px; 
					background: #77f;
					}
					
				.item1 {
					order: 4;
					flex: 1;
					}
					
				.item2 {
					order: 9;
					flex: 2;
					}
					
				.item3 {
					order: 4;
					flex: 3;
					}
			
			</style>
		</head>
		<body>
		
			<div class="flex-container">
				<div class="flex-item item1">flex item 1</div>
				<div class="flex-item item2">flex item 2</div>
				<div class="flex-item item3">flex item 3</div>
			</div>
		
		</body>
	</html>

Результат отображения этих элементов в браузере будет таким:


Директива @media

Директива @media позволяет задать стилевые правила для конкретного устройства (монитор, принтер, КПК и др., подробнее урок 14). После директивы @media через пробел указывается одно или несколько устройств, для которых будут применены стилевые правила. В случае, если устройств несколько, они разделяются запятой:

	@media screen {...;}
	@media screen, handheld {...;}

Стили для разных устройств можно прописывать в одном css-файле, либо создавать отдельные css-файлы для каждого.

В настоящее время мобильные устройства даже с маленьким экраном имеют большое разрешение и поэтому отзываются на "screen", но не на "handheld". Давайте посмотрим, как быть в этой ситуации:

	@media screen and (min-device-width: 320px) and (max-device-width: 568px)
	and (orientation: landscape) {
		.slider {
			display: none;
			}
			
		#content {
			width: 700px; 
			font-size: 1.5em;
			}
	}

Если прописать так

	@media screen and (max-width: 768px){
		.slider {
			display: none;
			}
			
		#content {
			width: 700px;
			font-size: 1.5em;
			}
	}
то данный стиль будет применён, когда область просмотра браузера станет меньше 768px.

Комментарии

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

Введите e-mail:

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

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