Блиц урок по CSS

Уважаемые коллеги!

В нашем последнем выпуске...

Идеальная страничка, шаг 1. :: http://kocby.ru/post/webmaster/text/issue186.html

Мы, в строгом соответствии с названием выпуска, сделали первый шаг по созданию идеальной странички для популярного сайта (напомню, что иные сайты нас не интересуют в принципе) и тут же наткнулись на проблему выбора кодировки.

Выбор не такой уж богатый: windows-1251 или utf-8, но и не простой.

Однако, посмотрим, что нам тут советуют умные люди...

Идеальный сайт
Только utf-8!!! Проблемы utf-8 в mysql уже решены

Почти полностью согласен, что надо таки переходить полностью на utf-8, ибо, какой ни есть, но все ж - стандарт, но есть некоторые досадные "но"...

На рабочих станциях для имитации unix-серверов, точнее, хостинговой среды Apache + PHP + MySQL я использую DENWER, он всем хорош, но имеет такой глючок.

Если используется кодировка windows-1251, то проблем нет.

Если страничка в кодировке utf-8, то можно в ней сколько угодно прописывать:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
, все равно браузер упорно изначально трактует ее как windows-1251.

После смены кодировки вручную, все показывается ок, но это уже как-то не фэйншуйно.

Кстати, здесь под термином браузер я имею ввиду комплекс-3 из следующих компонентов: IE8, FireFox4, Chrome10.

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

Короче, пока проблема не рассосется, работаем параллельно на обеих кодировках.

Ну, а сегодня мне хотелось бы дать несколько советов тем, кто начинает изучение AJAX в целом, ДжаваСкриптинга вообще и ДжиКверинга в частности.

Совет первый, единственный и очень важный. Надо достаточно хорошо знать CSS.

Увы, от этого никак не уйти. ДжиКверинг слишком тесно связан с CSS.

Теперь о том, что такое "достаточно хорошо".

Это значит следующее.

Хранить код CSS надо в отдельном файле (например, style.css) и подключать к файлам с HTML кодом таким вот путем:

...
<link href="/css/style.css" rel="stylesheet" type="text/css" />
...
</head/>
...

... то есть где-то перед закрывающим тегом head, при этом сам файл со стилями style.css находится в директории css, которая находится в корневой папке сайта.

Для примера отрывки из обрывков файла style.css:

#header {
	margin-left: auto;
	margin-right: auto;
	top: 10px;
	width: 640px;
	background-color: #F0F0F0;
	color: #000000;
	padding: 1em; 
	font-family: "Courier New", "Courier", "Andale Mono", monospace; 
	font-size: 18px; 
	font-weight: bold; 
	text-align: left; 
	border: 1px solid #A0A0A0;
}


.heart {
	font: 1.6em;
	color: #FF0000;
}

Тут следует напрячься и понять, знак # (диез, решетка) используется для идентификаторов, и идентификатор можно использовать только один раз на отдельно взятой страничке (документе), поскольку его функция - определить некий единственный уникальный элемент на данной странице. Присвоенный элементу уникальный идентификаторбольше нельзя использовать в том же документе.

Что же касается знака . (точка), то она используется для задания стилей класса. Классы можно и нужно использовать на любой странице несколько раз. Если некоторые свойства присущи сразу нескольким элементам страницы, то использование классов есть решение тонкое, интеллектуальное и глубоко продуманное.

Чтобы совсем стало понятно, отрывок кода HTML документа:

<div id="header">
<h1>
<span class="heart">♥</span> § Это header (Хидер, Шапка).
</h1>
</div id="header">

Из этого кода все становится понятно: сердец (одиноких) много, поэтому heart это есть class, а вот header на отдельно взятом документе должен быть один, поэтому, это есть идентификатор.

Остальное в CSS для пытливого ума все интуитивно понятно, потому особо циклиться на этой важной для нас технологии не будем. Просто возьмите для примера файлы css c сайта, который вам понравился и внимательно изучите.

На этом наш блиц урок по CSS закончен.

А суть работы ДжиКверинга заключается в том, что он заполняет DIV-ы (или иные блочные элементы) информацией, в зависимости от ответа сервера на AJAX запрос.

Об этом поговорим на нашем следующем заседании.

А на сегодня все. Приглашаю всех желающих стать успешным самому и сделать более успешной систему Матрица путем участия в ее бета тестировании. Еще есть вакансии для бета тестеров. Потом не говорите, что я вас не приглашал! В Матрице вы научитесь добиваться успеха в любом деле, в том числе и в строительстве популярных сайтов.

Спасибо за внимание.

~~~~~ Обратная связь ~~~~~

У вас есть два способа реагирования на данный выпуск.

На форуме...

"Как сделать популярный сайт" на форуме :: http://kocby.ru/b/viewforum.php?f=5

Написать лично мне.

Данные для связи на контактной страничке :: http://kocby.ru/contact.html

Ниже дан мой работающий емейл, но доставка через форму на указанном урле надежнее, ее вероятность является почти 100%.

::::::::::::::::::::::::
::: Vladimir Abramov :::
::: va@sumat.ru ::::::::
::: http://sumat.ru/ :::
::::::::::::::::::::::::

### Конец выпуска.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~