Выпуск №34-Веб-дизайн и идеология веб-мастеринга для всех

Если выпуск отображается некорректно, Вы можете посмотреть его на сайте

.:Веб-дизайн и идеология веб-мастеринга для всех:.

Выпуск # 34

Здравствуйте, дорогие мои подписчики и друзья!
Рад приветствовать всех!

Переместиться:
В середку. Статья 1
В середку. Статья 2
В конец. Статья 3

Спешу поздравить всех с наступившим Новым 2012 годом и Рождеством!
Данный выпуск состоит их 2-х статей.
1-я часть расскажет о Каскадных таблицах стилей CSS .
2-я часть подробно расскажет о каждой из 3-х видов таблиц стилей.
Итак, приятного вам прочтения!

Обо всех пожеланиях и предложениях пишите мне на адрес:

valg1@mail.ru

Читайте в свежем выпуске:

Статья 1 Каскадные Таблицы Стилей CSS.
Статья 2. Описание 3-х видов CSS.

.:Новости:.

Мы начинаем очень интересную тему – каскадные таблицы стилей. Следите за анонсами!

.:По следам ваших писем:.

В основном приходят письма о хорошей доступности материала рассылки и с пожеланиями "Так держать!"
Спасибо всем, кто отвечает мне, будем так держать!
И ждать ваших новых интересных писем и предложений.

Статья 1

Каскадные Таблицы Стилей CSS.

Паранойя современного Интернета и не менее современных технологий "зачала" в своих недрах неутишимую страсть к красивому (иногда даже чересчур). Результатом этого, своего рода безумства, стало рождение каскадных таблиц стилей CSS (Cascading S1у1е Sheets).

Переместиться:
В начало
В середку. Статья 2
В конец. Статья 3

По-моему ничего полезнее для HTML придумать было нельзя, эта "штука" позволяет задавать каждому элементу в документе собственное оформление, причем эти оформления заносятся в одну таблицу и позволяют сэкономить тонну байтов. Естественно меняя только эту таблицу Вы в можете менять стиль или по-другому дизайн своего сайта в считанные секунды. Давайте разберемся с тем, как эти таблицы встраиваются в документ HTML.
Существует три таких способа:

1• Используя тег <Link> с указанием URL внешней таблицы стилей.
2• Используя тег <Style> внутри заголовка документа, т.е. внутри тега .
3• Используя атрибут stу1е в параметрах тега.

Статья 2

Описание 3-х видов CSS

1. Посредством тега <Link> таблица стилей прописывается следующим образом:

<link rel="stylesheet" туре="text/css" href="http: / /уоuг.ur1.сом/аnуfilе.сss ">

Здесь атрибут href задает тот самый URL файла таблицы со стилями. Файл таблицы стилей текстовый. Что в нем содержится мы увидим потом.

Переместиться:
В начало
В середку. Статья 1
В конец. Статья 3

2. Второй метод использует, как мы уже разобрались, тег <Stу1е>. При этом рекомендуется для задания следующий формат:

<head>
----
<sty1е tуре="text/сss">
----
таблица стилей
----
</stу1е>
</head>

Таблица стилей это запись атрибутов тегов в довольно простом формате:

имя тега {параметр_тега1: значение; ... }
имя тега.класс {параметр_тега1: значение; ... }
.класс {параметр_тега1: значение; ... }

Имя тега, для которого будут действовать заданные настройки, указывается в поле имя_тега. В фигурных скобках указываются параметры тега с их значениями, с ними мы будем знакомиться постепенно.

Воспользовавшись описанием в первом формате, Вы обеспечиваете всем тегам с этим именем одинаковое отображение. Если же Вас не устраивает, что все теги с одинаковым именем в документе отображаются одинаково, то Вы можете создать класс, или даже лучше сказать подкласс тегов с таким именем, но имеющих другое оформление. Для задания имени этого нового подкласса строка таблицы стилей записывается по второму формату. Но теперь Вы в теге с именем имя_тега для использования нового класса должны будете использовать атрибут с1ass. Можем рассмотреть следующий пример:

<style type="text/css">
p {color: red;}
</style>

После создания такой таблицы стилей все параграфы в документе будут отображаться красным цветом. Естественно это может показаться не нужным для всего документа. Тогда будем использовать второй формат:

<style type="text/css">
p.red {color: red;}
</style>

При таком задании таблицы все параграфы документа будут отображаться по умолчанию, или с ранее заданными настойками. Для того, чтобы окрасить параграф в красный цвет нам придется использовать тег с атрибутом с1аss:

<р с1аss=геd>Red paragraph</р>

В данном случае класс red будет распространяться только на теги параграфов <р>. Если же Вам захотелось использовать этот класс в любых других тегах, то используйте запись по третьему формату, т.е. без указания имени тега. При этом использование атрибута с1аss у любого из тегов будет ему соответствующий класс для отображения из таблицы стилей.

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

р b { со1ог : grееп}

При такой записи тег <b> будет окрашиваться в зеленый цвет если он находится внутри параграфа:

< р > 0бычный текст, а это <b>зеленый текст</b>.</р>
<b>А это всеже обычный текст...</b>

3. Осталось теперь поговорить о третьем способе задания стиля. Он как Вы помните (?!) задается атрибутом stу1е. Приведем пример красных параграфов:

<p style="color: red;">Красный параграф.</p>

Я обещал рассказать о формате файла с внешней таблицей стилей. Так вот оформляется она точно также как и тег <Stу1е>. При этом даже иногда многие само название тега и не указывают, всем ясно, что там таблица со стилями. Чем такой метод задания стилей интересен ?! Да тем, что он располагается в отдельном файле, и его можно использовать для любых других документов не расписывая его внутрь, что экономит место и время загрузки.

Продолжение следует... (Цвета элементов, параметры шрифтов, параметры текста и многое другое в CSS).

Статья 3

Переместиться:
В начало
В середку. Статья 1
В середку. Статья 2

.:Опрос читателей:.

Пожалуй, опрос пока продолжу, так как количество подписчиков растет каждый день и давно исчисляется 4-х значным числом, а пока просто подведу итоги.
Кто еще не писал - пишите.

Итоги:
90 % читателей - рассылка нравится, материал доступен для чтения.
9% - можно кое-что улучшить, надо бы почаще и больше писать о Веб-дизайне.
1% - более менее сойдет.

Ну что же, в целом показатели не плохие. Спасибо уважаемые читатели рассылки!

Опрос:

1.Как и каким образом, вы подписались на эту рассылку и (или) нашли ее (посоветовал друг, реклама в интернете, служба рассылки Mail.ru или другое) ?
2.Устраивает ли вас материал и доступен ли он вам для прочтения?
3.Для подписчиков, получающих рассылку в виде HTML - виден ли вам материал для удобного для вас чтения и что нужно улучшить?
4.Для подписчиков, получающих рассылку в виде Текста - виден ли вам материал для удобного для вас чтения и что нужно улучшить?

Заранее благодарю вас за ответы и тех, кто уже прислал их и напоминаю вам адрес для писем : valg1@mail.ru

Спасибо.

.:Анонс рассылки:.

Анонс следующего выпуска рассылки номер 35.

1. Веб-дизайн. Каскадные таблицы стилей CSS. Часть 2.Цвета элементов
2. Спецсимволы в HTML. (По запросам подписчиков).
3. Письма-статьи читателей.(Если не произойдет слияния).

Примечание. Не смотря на планируемую тему рассылки, право на изменение в необходимом случае оставляю за собой.

Ну, вот и все, на этом наш 34-й Выпуск Рассылки "Веб-дизайн и идеология Веб-мастеринга для всех" подходит к концу.

Свои отзывы о статьях, напоминаю, пишите мне на: valg1@mail.ru

С уважением Валерий.

Выпуск # 34

До встречи в следующем выпуске! Удачи!)

Январь 2012 г.

Словари ABBYY Lingvo – пользователям Android!
Новое мобильное приложение для общения в путешествиях, при чтении и переводе и при изучении иностранных языков – с поддержкой 30 языков, доступом к более 250 словарям, интеллектуальным поиском и др.

PANASONIC VIERA
Телевизор для общения! Узнай больше!

Нужен ли кондиционер в детской комнате?
Если это новый Panasonic CS-HE9MKD, то да. Функции Econavi и AUTOCOMFORT обеспечат оптимальный микроклимат для Вашего ребёнка и помогут избежать простуд. А инновационная система очистки воздуха e-ion APS предотвратит распространение аллергенов. Узнайте больше!

Денежные переводы онлайн
Перевод средств между картами разных банков на сайте Альфа-Банка!

Внимание! Некоторые из следующих ссылок позволяют войти в кабинет подписчика без знания пароля. Не передавайте никому это письмо во избежание несанкционированного доступа к Вашему личному кабинету на проекте Рассылки@Mail.Ru.