Регистрация | Правила форума | Пользователи | Социальные группы | Поиск | Сообщения за день | Все разделы прочитаны |
![]() |
#1 |
![]()
Настало время поговорить с вами про стили, что это такое и с чем их едят. Начну, пожалуй, с истории появления.
На заре веба странички выглядели очень просто: тексты, ссылки, минимум графики. Браузеры отображали страницы немного по-разному, и это нисколько не мешало их просмотру. В 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; }
Подключить стили можно несколькими способами:
Казалось бы, всё это должно отлично работать, но… Во-первых, не все браузеры полноценно поддерживают стандарты CSS2.1. Во-вторых, некоторые моменты в стандартах описаны так, что их можно понять двояко. И разработчики разных браузеров реализуют некоторые особенности немного по-разному, или вносят свои фишки. В-третьих, исторически сложилось, что в html коде можно делать ошибки: неправильно закрывать теги, забывать указывать обязательные параметры и так далее. Страницы при этом продолжают отображаться, а браузеры пытаются понять, что же именно имел ввиду верстальщик, и стараются исправить эти ошибки при выводе страницы. Каждый браузер, естественно, по-своему. Примерно вот так придется делать вам, если вы будете использовать стили на своих страницах: смотреть, как получается страница в одном из браузеров типа лисы, оперы или хрома, затем открывать её в шестом и седьмом эксплорерах, ужасаться от того, что половина элементов куда-то поехала, подключать дополнительный файл стилей для ИЕ. Испугались? Давайте напоследок что-нибудь хорошее покажу. Есть сайт, отлично демонстрирующий всю мощь CSS. При одном и том же html коде и разными css стилями получаются совершенно разные по дизайну варианты, причем, меняется абсолютно всё: начиная от шрифтов и заканчивая взаимным расположением блоков.
__________________
![]() Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два. |
|
![]() |
#2 |
Гость
Сообщений: n/a
|
![]()
Доброго времени суток. Вопрос по теме.
Описываю ситуацию: Сайт строится на php include, к центральной части подгружаются хэдер, футер, и две менюшки по бокам. Слева - навигация, справа - краткий обзор продукции. Проблема в том, что имеет смысл использовать различные виды ссылок, то есть в менюшке они должны выглядеть одним образом, в футере и обзоре - другим, в центральной части - третьим. Должны быть разного размера, разного цвета. Собственно, результатом является, что стиль общий для всей страницы получается из футера, т. е. из той части, которая оказывается последней (насколько я понимаю). Ссылки выглядят как в футере.. Вопрос: Как же мне все-таки сделать так, чтоб все было красиво? ![]() |
![]() |
#3 |
![]()
Александрр, насколько я понимаю то, что Вы написали, Вам надо к ссылкам добавить классы, а в стилях для этих классов сделать настройки. Например так:
Код 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. Быстро, качественно, дешево — выберите два. |
|
![]() |
#4 |
Гость
Сообщений: n/a
|
![]()
Да, спасибо большое за помощь. Вы правильно меня поняли, но буквавльно за пол дня до вашего ответа мне объяснили примерно это же. Только вот в таблице стилей надо писать не 'a.menu{}', а '.menu a{}' возможно, это и не играет роли, я не проверял, но насколько я понимаю, все-таки должно роль играть. Классы начинаются с точки
![]() |
![]() |
#5 |
![]()
Это две большие разницы
a.menu — это ссылки с классом menu .menu a — это блок с классом меню, в котором находятся ссылки
__________________
![]() Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два. |
|
![]() |
#6 |
Гость
Сообщений: n/a
|
![]()
оо, кажется, понимаю.
Тогда вопрос к слову: Имеет ли это какую-то разницу в возможностях? Вариативнсть, так сказать ![]() ![]() |
![]() |
#7 |
![]()
Александрр, принципиальной разницы нет, делайте как удобно.
__________________
![]() Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два. |
|
![]() |
Опции темы | |
Опции просмотра | |
|
|
![]() |
||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Изучаем 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 |