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

Курсы HTML/CSS

Урок 16. Технология SSI, новые элементы html в старых браузерах, селекторы атрибутов.

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

Серверные включения - команда include

Предположим, у нас есть 5 файлов html и меню, в котором прописаны ссылки на эти файлы. Как только будет создан 6-ой файл возникает необходимость открывать по очереди все эти 5 файлов и в меню, в коде html вручную прописывать ссылку на 6-ой файл.

Чтобы этого не делать существует команда include, которая выполняет вставку некоторого кода в основной код html. Эта команда работает только на сервере, на локальной машине она не сработает.

файл меню "menu.html" в папке "uncludes"
=========================================

<ul>
	<li><a href="menu_1.html">Главная</a></li>
	<li><a href="menu_2.html">Товары</a></li>
	<li><a href="menu_3.html">Новости</a></li>
	<li><a href="menu_4.html">Контакты</a></li>
	<li><a href="menu_5.html">О сайте</a></li>
</ul>

Во всех остальных файлах прописываем команду include в меню
============================================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Команда include</title>
		</head>
		<body>
		<p>Меню сайта</p>
		<!--#include virtual="/uncludes/menu.html"-->
		</body>
	</html>

Это так называемая технология SSI (Server-Side Includes, включения на стороне сервера) используется большинством конструкторов сайтов для вставки однотипных элементов на все страницы сайта.

Следует учитывать, что синтаксис команды include может отличаться на некоторых серверах - это уточняйте у ваших хостеров.

Новые элементы html в старых браузерах

Для того, чтобы заставить работать новые элементы например, <header> и <footer> в старых браузерах (Internet Explorer ниже 9-ой версии) нужно использовать немного кода JavaScript, позволяющего создавать новые элементы html кода:

в файле file_name.js
=========================
document.createElement('header');
document.createElement('footer');

Увидев такую команду, старый ослик - IE8 (и ниже) создаст два новых строчных элемента - <header> и <footer>, но эти элементы блочные, поэтому в файле CSS это нужно скорректировать:

в файле file_name.css
=======================
footer {
	height: 50px; 
	background: #99c;
	}
	
footer, header {
	display: block;
	}
	

JavaScript можно подключить к файлу html linking-способом или же прописать код скрипта между тегами <script></script> внутри элемента <head></head>. При linking-способе файлу даётся расширение .js:

1-ый способ - прописываем код скрипта между тегами <script></script>
=========================================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Использование JavaScript в коде html</title>
			<script>
				document.createElement('header');
				document.createElement('footer');
			</script>
		</head>
		<body>
			<header>Шапка сайта</header>
			<footer>Подвал сайта</footer>
		</body>
	</html>
	
2-ой способ - создаем отдельный файл с расширением .js и указываем 
на него ссылку в коде html
===========================================================

<!DOCTYPE html>
	<html>
		<head>
			<title>Использование JavaScript в коде html</title>
			<script type="text/javascript" src="/scripts/file_name.js" 
			media="all"></script>
		</head>
		<body>
			<header>Шапка сайта</header>
			<footer>Подвал сайта</footer>
		</body>
	</html>

Кроме этого в интернете есть много готовых решений по исправлению "глюков" новых элементов в старых версиях Internet Explorer. Одно из таких решений - это решение от Dean Edwards:

<!DOCTYPE html>
	<html>
		<head>
			<title>Решение от Dean Edwards</title>
			<!--[if lt IE 9]>
			<script src="http://ie7-js.googlecode.com/svn/version
			/2.1(beta4)/IE9.js"></script>
			<![endif]-->
			
		</head>
		<body>
			<header>Шапка сайта</header>
			<footer>Подвал сайта</footer>
		</body>
	</html>

То, что вы видите в примере выше называется условными комментариями (conditionals comments) в html. В комментарий, показанный в последнем примере, залезет только Internet Explorer, для всех остальных браузеров он так и останется просто каким-то комментарием.

Селекторы атрибутов

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

Селекторы атрибутов особенно удобно использовать при работе с формами. Давайте рассмотрим в качестве примера следующий документ html:

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы атрибутов</title>
			<style>
				[title] {color: slateblue;}
				[title="Александр Пушкин"] {color: indigo;}
				[title~="Александр"] {color: gold;}
				[title^="Алекс"] {color: red;}
				[title$="кин"] {color: maroon;}
				[title*="екс"] {color: navy;}
			</style>
		</head>
		<body>
		<p title="">Параграф с пустым значением title</p>
		<p title="Александр Пушкин">Параграф со значением title "Александр
		Пушкин"</p>
		<div title="Абрамов Федор">Блок со значением title "Абрамов 
		Федор"</div>
		<p title="Александр Гужов">Параграф со значением title "Александр
		Гужов"</p>
		</body>
	</html>

Напомню, что title - это универсальный атрибут, который выводит всплывающую подсказку при наведении курсора.

Селекторы атрибутов пишутся в квадратных скобках []. В примере выше первой строкой в стилях мы обратились ко всем элементам, имеющим атрибут title:
[title] {color: slateblue;}

Второй строкой в стилях мы обратились к элементу с конкретным значением атрибута title:
[title="Александр Пушкин"] {color: indigo;}
Обратите внимание, что значение title в стилях должно быть указанно в кавычках с учётом регистра, символ в символ!

Следующий вариант выборки по атрибуту - это условие, когда в значении атрибута слово встречается целиком:
[title~="Александр"] {color: gold;}
"Тильда" набирается shift+"Ё" в английской раскладке клавиатуры, если что...

Далее, выражение [title^="Алекс"] {color: red;} сделает выборку только тех элементов, значение title которых начинается с "Алекс". Такую выборку также удобно использовать и при работе со ссылками например, у внешних ссылок сделать один цвет, а у внутренних - другой. В этом случае делается выборка по начальным символам "http".

Следующей строкой в примере выше идёт выражение, которое осуществляет выборку элементов по последним символам, указанным в title:
[title$="кин"] {color: maroon;}

[title*="екс"] {color: navy;} - это правило CSS делает выборку тех элементов, в значении title которых встречается указанная комбинация символов в любом месте (хоть в начале, хоть в конце, хоть в середине слова).

Комментарии

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

Введите e-mail:

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

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