Вернуться   Форум ChatPlanet.ru > Сервис «Мой чат» aka «Август» > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 25.08.2009, 00:32   #1
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию Изучаем HTML. Часть 8 — Что такое CSS

Настало время поговорить с вами про стили, что это такое и с чем их едят. Начну, пожалуй, с истории появления.

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

Тогда, в 96-м году была принята «Рекомендация CSS1» — стандарт для учета браузерами таких вещей, как параметры шрифта, цвета, атрибуты текста, выравнивания текста, таблиц и изображений, свойства блоков (отступы, рамки и прочее) и другие.

В 98-м году была принята «Рекомендация CSS2». Она добавляла к первой такие вещи, как позиционирование блоков, указатели, разделение стилей в зависимости от носителя (монитор, принтер, КПК…), параметры печати и многое другое.

В 2006-м появилась «Рекомендация CSS2.1», исправляющая ошибки и недочеты 2-й версии.

Сейчас идет активная разработка третьей версии, в корой будут такие вещи, как анимация, трансформация, переменные и другие вкусности.

Хватит истории, перейдем к действительности. Итак, CSS (Cascading Style Sheets — каскадные таблицы стилей) — это описания того, как страница будет выглядеть визуально. Какие на ней будут шрифты, отступы у блоков, межстрочные расстояния, фоны, выравнивания, цвета и так далее. Основное назначение стилей — это отделение содержимого страницы от его представления. Описания записываются в следующем виде:
Код:
селектор1, селектор2 {
  свойство1: значение1;
  свойство2: значение2;
  свойство3: значение3;
}
Селектор — это указание, к каким элементам на странице применяется данное описание. Пары свойство + значение — это отдельные элементы правил (шрифт, фон, отступ и так далее). Вот несколько примеров:
Код:
p {
  font-family: "Garamond", serif;
}
h2 {
  font-size: 110 %;
  color: red;
  background: white;
}
.note {
  color: red;
  background: yellow;
  font-weight: bold;
}
#article {
  color: yellow;
}
 a:hover {
  text-decoration: none;
}
p.paragraph1 {
  margin: 0;
}
#news p {
  color: blue;
}
Как вы видите, селекторы бывают разными:
  • Для вида html элемента (В примере: p, h2)
  • Для элементов с определенным классом (В примере: .note)
  • Для элемента с определенным идентификатором (В примере: #article)
  • Для элементов, у которых произошло определенное событие (В примере: a:hover — наведение мышкой на ссылку)
  • Для выполнения нескольких условий у элемента (В примере: p.paragraph1 — все параграфы, имеющие класс "paragraph1")
  • Для выполнения условий вложенности (В примере: #news p — все параграфы, которые находятся внутри элемента с идентификатором #news)
Есть и другие варианты, о них я расскажу в одном из следующих уроков. Если для какого-то элемента подходит сразу несколько правил, то для каждого правила определяется его «вес» (в стандарте описано, как) и применяется правило с большим весом.

Подключить стили можно несколькими способами:
  1. Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):
    Код HTML:
    <link rel="stylesheet" type="text/css" href="style.css">
  2. Еще один способ подключить CSS, находящиеся в отдельном файле:
    Код HTML:
    <style type="text/css" media="all">@import "style.css";</style>
  3. Непосредственно в HTML-документе:
    Код HTML:
    <style type="text/css">body {
        color: red;
    }</style>
  4. Непосредственно в элемент:
    Код HTML:
    <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
Кроме стилей, которые определены на странице, есть еще 2 источника для параметров отображения элементов:
  • Стили браузера. В каждом браузере определены стили по-умолчанию, согласно которым он отображает содержимое для тех элементов, для которых не заданы никакие стили.
  • Стили пользователя. В нормальных браузерах для пользователей есть возможность создать свои определения стилей, которые будут применяться на всех сайтах.
Вот так браузеры и работают: читают код html, берут свои стили по-умолчанию, стили пользователя, стили от страницы, мешают всё это, затем определяют для каждого элемента, как его отображать и выводят всё это на экран.

Казалось бы, всё это должно отлично работать, но…
Во-первых, не все браузеры полноценно поддерживают стандарты CSS2.1.
Во-вторых, некоторые моменты в стандартах описаны так, что их можно понять двояко. И разработчики разных браузеров реализуют некоторые особенности немного по-разному, или вносят свои фишки.
В-третьих, исторически сложилось, что в html коде можно делать ошибки: неправильно закрывать теги, забывать указывать обязательные параметры и так далее. Страницы при этом продолжают отображаться, а браузеры пытаются понять, что же именно имел ввиду верстальщик, и стараются исправить эти ошибки при выводе страницы. Каждый браузер, естественно, по-своему.

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

Испугались? Давайте напоследок что-нибудь хорошее покажу. Есть сайт, отлично демонстрирующий всю мощь CSS. При одном и том же html коде и разными css стилями получаются совершенно разные по дизайну варианты, причем, меняется абсолютно всё: начиная от шрифтов и заканчивая взаимным расположением блоков.

© Mickeleangelo
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Эти 7 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
02brat (29.10.2009), Baunti (21.02.2010), Evgeny aKa СгУщЕнКa (02.08.2010), eXandr (27.08.2009), Heartbeat (07.08.2012), Mistik (29.10.2009), Star (07.04.2010)
Старый 28.10.2009, 19:02   #2
По умолчанию Использование CSS

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

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

Вопрос: Как же мне все-таки сделать так, чтоб все было красиво?
Report Post
Ответить с цитированием
Старый 29.10.2009, 14:25   #3
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию

Александрр, насколько я понимаю то, что Вы написали, Вам надо к ссылкам добавить классы, а в стилях для этих классов сделать настройки. Например так:
Код HTML:
<style>
a.top {
    color: red;
    font-size: 16px;
}
a.menu {
    color: #000;
    font-size: 12px;
}
.footer a {
    color: #00ff00;
    font-size: 14px;
}
</style>
<!-- Шапка -->
<a class="top" href="index.html">Главная</a> <a class="top" href="prod.html">Продукты</a>
<!-- Конец шапки --><!-- Меню-->
<a class="menu" href="r1.html">Раздел 1</a> <a class="menu" href="r2.html">Раздел 2</a>
<!-- Конец меню--><!-- Футер -->
<div class="footer">
<a href="index.html">Главная</a> <a href="prod.html">Продукты</a>
</div>
<!-- Конец футера-->
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Старый 31.10.2009, 00:57   #4
По умолчанию

Да, спасибо большое за помощь. Вы правильно меня поняли, но буквавльно за пол дня до вашего ответа мне объяснили примерно это же. Только вот в таблице стилей надо писать не 'a.menu{}', а '.menu a{}' возможно, это и не играет роли, я не проверял, но насколько я понимаю, все-таки должно роль играть. Классы начинаются с точки
Report Post
Ответить с цитированием
Старый 31.10.2009, 01:17   #5
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию

Цитата:
Сообщение от Александрр Посмотреть сообщение
не 'a.menu{}', а '.menu a{}'
Это две большие разницы
a.menu — это ссылки с классом menu
.menu a — это блок с классом меню, в котором находятся ссылки
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Старый 31.10.2009, 10:51   #6
По умолчанию

оо, кажется, понимаю.
Тогда вопрос к слову: Имеет ли это какую-то разницу в возможностях? Вариативнсть, так сказать Позволяет ли использовать какие-то принципиально разные действия и в каких случаях проще одно, а в каких - друое?
Report Post
Ответить с цитированием
Старый 31.10.2009, 13:15   #7
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию

Александрр, принципиальной разницы нет, делайте как удобно.
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изучаем HTML. Часть 4 — Добавляем картинки Mickeleangelo Уроки 4 04.06.2011 03:06
Изучаем HTML. Часть 7 — Таблицы Mickeleangelo Уроки 4 21.02.2010 12:41
Изучаем HTML. Часть 6 — Списки Mickeleangelo Уроки 0 20.03.2009 00:19
Изучаем HTML. Часть 5 — Ссылки Mickeleangelo Уроки 0 14.03.2009 16:57
Изучаем HTML. Часть 1 — Основы Mickeleangelo Уроки 0 06.03.2009 12:56


Текущее время: 22:06. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.