фильм про самурай - Последний самурай / The Last Samurai |
Последний самурай / The Last Samurai - война самураев против Страны Восходящего Солнца, гордость самураев не может отказаться от биты, это честь для них умереть от руки противника.
|
Метки: последний самурай the last samurai samurai самурай last samurai том круз билли коннолли восходящего солнца солнце исторический фильм исторический |
Без заголовка |
Последний самурай / The Last Samurai - война самураев против Страны Восходящего Солнца, гордость самураев не может отказаться от биты, это честь для них умереть от руки противника.
|
Метки: последний самурай the last samurai samurai самурай last samurai том круз билли коннолли восходящего солнца солнце исторический фильм исторический |
Почему редизайн сайта нужно делать с использованием CSS |
|
|
Определяем элементы - CSS Cascading Style Sheets / Каскадные стили |
Для того, чтобы ответить на заданный выше вопрос о каскадировании, сначала
надо определиться с тем, как те или иные стили настраиваются для применения к
тем или иным элементам.
Стили описываются следующим образом:
элемент {параметр: значение;}
Пар
параметр-значение может быть несколько, тогда все они будут относиться к
соответствующему элементу. Каждая пара заканчивается точкой с запятой, последнюю
точку с запятой можно не ставить. Обратите внимание, что в описании используется
двоеточие, а не знак равенства, как в HTML - это очень типичная ошибка! Вообще,
таблицы стилей надо тщательно проверять на ошибки - если вы опечатаетесь в имени
параметра, то вам не будет выдано никаких предупреждений, просто данный параметр
будет отброшен.
Самый простой способ настроить внешний вид документа - это задать стиль
отображения для требуемых тегов HTML. Например, если мы хотим каждый параграф
вывести зеленым цветом и размером в 12 пикселей, то в описании стилей можно
написать:
P {
color: #00FF00;
font-size: 12px;
}
Способ работает хорошо, но часто возникает необходимость отдельные абзацы
как-то выделить. Для этого можно использовать классы и/или идентификаторы. По
большому счету разница между ними только в том, что идентификатор относится к
какому-то одному элементу (и, кстати, по стандарту все идентификаторы в
документе должны быть уникальными, но на это часто не обращают внимания - все
браузеры успешно работают с неуникальными идентификаторами), а класс может
применяться к группе элементов (в том числе и разнородных).
Например, если в документе требуется абзац выделить красным, то можно в
таблице стилей написать:
P#redelement {
color: #FF0000;
font-size:
12px;
}
а в документе указать: <p ID="redelement">
Если же предполагается, что красных абзацев будет несколько, то правильнее
будет использовать класс (обратите внимание, что идентификатор отделяется
"диезом", а класс - точкой):
P.redelement {color: #FF0000; font-size: 12px; } а в документе:
<p class="redelement">
В таблице стилей можно описать и класс, не привязанный к какому-то
элементу:
.redelement {color: #FF0000; font-size: 12px; }
Такой класс
может быть применен не только к параграфу, но и, например, к ячейке таблицы,
тегу FONT или еще чему-то - достаточно в документе указать, например, <FONT
CLASS="redelement">.
Одно и то же описание можно присвоить сразу нескольким элементам - для этого
достаточно перечислить их через запятую в таблице стилей. Например, если вы
хотите, чтобы заголовки любого уровня были одного размера, то в таблице стилей
можно написать:
H1, H2, H3, H4, H5, H6 {font-size: 20px;}
Однако значительно более полезным бывает описание стиля вложенных элементов.
Например, вам может захотеться, чтобы все теги SMALL, которые находятся внутри
абзаца выделялись красным цветом, а те, которые не в абзаце (а, например, в
ячейке таблицы) сохраняли свою естественную окраску. Для этого достаточно
указать требуемые элементы через пробел:
P SMALL {color: #FF0000;}
Такое
объявление будет относиться только к элементам SMALL, расположенным
внутри P. Уровень вложенности может быть любой, но больше трех уровней
применяется редко - слишком запутанной получается картина. Разумеется, такого же
эффекта можно добиться просто создав отдельный класс и описав все вложенные
SMALL с этим классом, но если подобная конструкция повторяется часто, то
использование вложенности более удобно и позволяет сократить размер документа.
Кстати, "вкладывать" можно не только теги HTML, но и классы.
Для удобства пользователей в CSS есть еще несколько встроенных
псевдоэлементов и псевдоклассов. Например, можно указать стиль для
псевдоэлемента first-letter, который изменит вид первой буквы каждого абзаца. А
псевдоклассы очень часто используются для работы со ссылками. Например,
описание:
A:link {text-decoration: none;}
A:visited {text-decoration:
none;}
A:active {text-decoration: none;}
A:hover {text-decoration:
underline; color: #FF0000; }
уберет подчеркивание со ссылок, но когда
пользователь подведет мышку к ссылке, она подчеркнется и покраснеет.
Теперь вернемся к вопросу о каскадировании стилей, заданному в начале статьи.
Предположим, что мы описали стиль параграфа, в котором указали, что цвет текста
должен быть зеленым. Также мы задали стиль тега SMALL, чтобы цвет был синим. А
для тега SMALL "вложенного" в параграф, указали цвет - красный. Теперь, если мы
в документе внутри параграфа часть текста выделим тегом SMALL, то к этому тексту
подойдут два противоречащих друг другу определения: с одной стороны, маленький
текст должен быть синим, но "вложенный" маленький текст должен быть красным...
Вот тут-то и вступает в игру каскадирование. Сначала браузер собирает все
описания стилей встреченного элемента. Если описания стиля нет, то стиль
наследуется от "родительского" элемента (того, в который вложен данный), если же
и там стиль не определен, то используется значение по умолчанию. В простых
случаях на этом этапе все и заканчивается, но часто бывает так, что конфликт
описаний сохраняется. Самым простым примером конфликта может служить повторное
описание того же самого элемента, но с другим стилем. Что же делать несчастному
браузеру?
Обнаружив конфликт описаний браузер отсортирует описания по важности
(важность того или иного стиля можно указать с помощью метки !important после
описания, например:
SMALL {color: #00FF00 !important;}
После этого описания отсортируются по специфичности - чем более конкретно
указано к какому элементу надо применять стиль, тем выше специфичность. Самая
высокая специфичность у идентификатора, ниже - у класса, еще ниже - у элемента.
Именно правило с наивысшей специфичностью и будет применяться. Если же
специфичность одинакова, то будет использоваться последнее из описаний.
Именно таким образом каскадные таблицы стилей, во-первых, "каскадно"
наследуют стили от родителей к потомкам, а во-вторых, разрешают конфликты,
определяя важность противоречащих друг другу описаний...
|
|
Что такое CSS и как его редактировать |
Страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML
1.0 (который, кстати, так никогда и не был "официально" принят и остался в виде
черновика для "внутреннего употребления"). За эти 10 лет HTML прошел очень
большой путь, завоевал практически все компьютеры в мире и стал одним из самых
известных "компьютерных языков" (все-таки отнести его к языкам программирования
рука не поднимается)... И одним из весьма заметных этапов развития HTML стало
появление CSS - Cascading Style Sheets или, говоря по-русски, каскадных таблиц
стилей.
Идея CSS очень проста. Если в HTML вы прямо в документе ставили указание на
то, как должен выглядеть тот или иной элемент, то при использовании CSS такие
указания выносятся в отдельный блок (который может либо включаться в документ,
либо читаться из внешнего файла).
Такой простой ход стразу дает массу преимуществ вебмастеру. Прежде всего,
значительно облегчается изменение внешнего вида сайта или отдельных его
элементов - достаточно изменить определение соответствующего стиля в
единственном CSS-файле, и эти изменения распространятся на весь сайт. Второе
преимущество - сокращение размеров документов, которое особенно заметно на
"красивых" страницах.
Первая версия CSS - CSS
level 1 - принятая в 1996 и пересмотренная в 1999 году, позволяла
оперировать только цветами, шрифтами, отступами и им подобными относительно
простыми и частоиспользуемыми элементами. Принятая в 1998 году, спецификация CSS level 2 добавила
возможность абсолютного позиционирования элементов, создания стилей для разных
типов устройств, использования собственных курсоров, расширила возможности по
выбору элементов, к которым должен применяться тот или иной стиль и многое
другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в
CSS level 1. В настоящее время консорциум W3C активно ведет разработку стандарта CSS level 3 и
CSS level 2 revision 1,
которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров,
по созданию современных и удобных сайтов.
Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют
визуальное представление документа от его содержания - они только позволяет
более компактно описать правила визуального представления. И если вы захотите
изменить дизайн сайта, то вам все-равно придется переписывать HTML код (правда,
сделать это будет проще чем при отсутствии CSS). Значительно больший уровень
абстракции можно получить, используя связку языков XML + XSL (из которых, в
частности, можно генерировать HTML + CSS), но это намного сложнее, и несколько
выпадает из темы данной статьи.
Но хватит теории! Давайте попробуем практикой заняться...
Есть три способа описать стиль элемента в HTML документе. Самый простой и,
практически, не использующий преимуществ CSS способ - это указать стиль внутри
тега HTML. Например, написать
<H2 STYLE="COLOR: #AADDAA; FONT-WEIGHT:
BOLD; FONT-SIZE:11pt;">заголовок второго
уровня</H2>
Единственное преимущество, которое можно получить
таким образом - это задание некоторых атрибутов текста, которые не
поддерживаются тегами HTML. Зато сохраняются все недостатки HTML - указанный
стиль относится только к одному тегу и для изменения внешнего вида документа вам
придется изменить описание стиля в каждом теге.
Второй способ несколько лучше: надо описания стилей заключить внутри тегов
<STYLE TYPE="text/css"> и </STYLE>. Например, если вы
напишете
<STYLE TYPE="text/css">
H2 {COLOR: #AADDAA; FONT-WEIGHT:
BOLD; FONT-SIZE:11pt;}
</STYLE>
а в тексте документа укажете
<H2>заголовок второго уровня</H2>, то получите тот же эффект.
Однако, в отличие от предыдущего способа, свойства отображения применятся ко
всем тегам H2 в документе. И если, скажем, вам потребуется изменить размер
шрифта или цвет всех заголовков второго уровня, то изменить потребуется всего
одну строчку. Согласитесь, что это намного удобнее!
Однако, у предыдущего способа тоже есть свой недостаток: блок STYLE вам
придется скопировать в каждую страницу своего сайта. А если страниц там
несколько сотен? И вам понадобится что-то поменять? Неудобно... Но можно
победить и эту проблему - с помощью тега LINK. Описав требуемые стили в
отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете
написать в секции HEAD документа
<LINK REL="stylesheet" TYPE="text/css"
HREF="style.css">
Эта команда укажет, что таблица стилей находится во
внешнем файле. Таким образом, даже для очень большого сайта может использоваться
всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще
один "хитрый" необязательный параметр тега LINK: MEDIA. Он может указывать для
какого типа устройств таблица стилей предназначена и иметь значения, например,
"all" (используется по умолчанию), "handheld", "print" и некоторые другие.
Следует только учесть, что (пока еще?) не все браузеры понимают таблицы стилей,
подключаемые с использованием этого параметра.
В некоторых случаях бывает полезно объединить два предыдущих метода -
например, если разные секции должны иметь частично разные стили (скажем,
отличаться цветом фона). Внутри тега STYLE можно указать
@import
url(style.css)
и тогда к стилям, описанным внутри STYLE присоединятся стили
из внешнего файла.
Но у внешних файлов тоже есть недостаток: если соединение с сервером не очень
хорошее (что не редкость у модемных пользователей), то файл со стилями может и
не скачаться... А страничка без стилей обычно выглядит преотвратнейше... Поэтому
тут уж вам придется выбирать как лучше поступить.
Практика показывает, что таблицы стилей редко бывают больше 2-3 Кб, даже для
очень "раскрашенных" страниц. И если ваш веб-сервер умеет "на лету" сжимать
страницы (в Apache, например, этим занимается mod_gzip), то такой объем будет
для пользователя практически незаметен. Ну а дальше - дело техники: пишется
какая-нибудь команда, которая на сервере читает таблицу стилей из внешнего файла
(все-таки один файл намного легче редактировать!) и встраивает ее содержимое в
страницу, отдаваемую посетителю. В простейшем случае это может быть инструкция
SSI, вроде
<!--#include file="style.css" -->
а если ваш сайт написан
на php, то можно написать, например,
|
|
Почему все расползается и как с этим бороться |
Решение: либо
бросить этот редактор и работать с Source-editor`ом(простым текстовым
редактором, ну может быть с подсветкой синтаксиса, и кнопками вставки
определенных тегов...), как настоящие джедаи, либо долго и упорно
изучать сам редактор(html и css знать обязательно в любом случае, хотя
бы общие правила). Дело ваше.
Решение: Проверьте
как следует ваш html и css-код на соответствие стандартам и
спецификации объявленной в DOCTYPE. Придется покопаться с литературой.
Решение: Google вам в помощь.
Решение: БУДЬТЕ БДИТЕЛЬНЫ! Программных
способов борьбы с этим, насколько я знаю, не существует. Браузер
считает что так все и задумано.
Решение:
Первым делом нужно сбросить значения основных аттрибутов для основных
блочных тегов и установить свои. Причем сначала именно обнулить:
/*style.css*/
html, body, div, p, table, pre, td, tr, th, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, blockquote, iframe {
margin: 0;
padding: 0;
border: 0;
}
Уже после чего для каждого элемента устанавливать свои значения. Трудоемко но дает ощутимый эффект!
Пример из жизни: составить DIV-ный шаблон, в котором шапка
из картинок. Все размеры указаны корректно, объявлен блок по ширине
равный сумме ширин картинок, границы и отступы для картинок в этом
блоке убраны в нулевое значение... Расползается! Пересчитали, проверили
в блоке. Вот хоть убей, крайняя вниз лезет! А оказалось все просто:
<img src="img1.gif">
<img src="img2.gif">
Кстати, этот глюк никак не проявляется в браузере Opera, что лишний раз указывает на то что проверка одним браузером - не дает полной уверенности в верстке.
Или вот еще: тег <img> ведет себя очень даже некорректно при указании аттрибута align:
если center - он виснет в центре, тут вроде все правильно. А если
указать "left" или "right" - начинает чудить, а именно - нарушать
вложенность тегов. Даже если он вложен в параграф, и аттрибут align
указан для того чтобы текст красиво обтекал картинку, есть нюанс: если
картинка по высоте больше этого текста, то следующий параграф, как строчный тег
будет обтекать эту же картинку. И плевал IE на вложенность тегов и
понятие блочности и строчности. Помогает следующее: добавляем в тег
аттрибут style="display:inline".
Решение: все приходит с опытом... если конечно есть осознание. Учитесь, практикуйтесь, читайте статьи и книги.
Главное - это не идти на компромисс с ошибками, а добросовестно с ними
бороться и добиваться поставленной задачи. Желаю всем верстальщикам,
вебмастерам, веб-программистам и прочим web-разработчикам безошибочной
верстки и успехов во всех проектах.
|
|
Создание динамических элементов страницы с помощью CSS |
Подсветка ссылки
Для того, чтобы подсветить ссылку при наведении на неё курсора мышки, необходимо задать такую таблицу стилей:
<STYLE TYPE="text/css">
<!--
a:hover {color: red; mso-bidi-font-size:12pt}
-->
</STYLE>
В
этом случае все ссылки на странице при наведении на них курсора мышки
будут подсвечиваться красным цветом и перезаписываться шрифтом размером
в 12 pt.
Для того, чтобы с одной из ссылок этого не происходило,
необходимо задать для неё принудительно шрифт с помощью тега
<font> внутри ссылки, например:
<a href=#><font color=blue>Неподсвеченная ссылка</font></a>
Для
того, чтобы одна группа ссылок подсвечивалась одним цветом, другая
другим, необходимо несколько иначе написать таблицу стилей:
<style>
body a:Hover {color : red}
.group1 {text-decoration: none; font-family: arial; font-size: 8pt; color: black}
a:hover.group1 {text-decoration: none; font-family: arial, font-size: 8pt; color: blue}
.group2 {font-family: arial, font-size: 10pt; color: green}
a:hover.group2 {font-family: arial, font-size: 10pt; color: gray}
</style>
В
этом случае ссылки, для которых указан класс group1, будут отображаться
не подчеркнутыми, чёрным цветом, шрифтом Arial размером 8 pt. При
наведении мышки они станут подчёркнутыми и перекрасятся в синий цвет.
Ссылки,
для которых указан класс group2, будут подчёркнутыми и отображаться
шрифтом размера 10pt зелёным цветом. При наведении мышки они станут
серыми.
Изменение фона в таблице.
С помощью стилей можно творить даже такие чудеса, как изменение цвета фона таблицы.
Для
этого необходимо написать небольшой обработчик соответствующего
события, например, попадание курсора мышки в область таблицы:
| При наведении курсора мышки на таблицу она поменяет цвет. |
<table
id=table onMouseover="table.bgColor='red'"
onMouseOut="table.bgColor='white'" bgcolor=white
border=1><tr><td>
При наведении курсора мышки на таблицу она поменяет цвет.
</td></tr></table>
При
наведении мышки на область таблицы она изменит цвет с белого на
красный. Соответственно, когда курсор мышки вновь покинет эту область,
она вновь станет белой.
Аналогичным образом можно менять не только цвет, но и фоновый рисунок таблицы.
А вот ещё небольщой пример, который демонстрирует, как можно с помощью CSS динамически обвести таблицу контуром:
| При наведении курсора мышки на таблицу она очертится контуром |
<table id=tabl1e onMouseover="table1.border='2" onMouseOut="table1.border=0'" border=0><tr><td>
<a href=#>При наведении курсора мышки на таблицу она очертится контуром;/a>
</td></tr></table>
Как
Вы можете заметить, CSS даёт достаточно немалые возможности создания
динамической страницы для последующего отображения в Internet Explorer.
Для Netscape Navigator, чтобы реализовать что-то подобное, требуется
либо использовать графические элементы, либо слои. Однако фиксация
шрифтов работает и для того и для другого броузера так же, как и
реализация не подчеркнутых ссылок, а это уже даёт неплохое поле для
деятельности.
Фиксирование шрифтов на странице с помощью таблицы стилей.
Предположим,
что Вы создали достаточно симпатичную страничку с малым количеством
графических элементов, текст у Вас расположен в таблице в две колонки.
Вы некоторое время любуетесь вашим творением, но тут приходит Ваш
приятель и погружает Вас в глубокое уныние, поставив в настройках
броузера более крупный шрифт. Вы видите, что страница приняла вид
весьма далёкий от того, что было задумано изначально. Что же делать?
Самый простой способ решения подобной задачи заключается в составлении
таблицы стилей для Вашего сайта. Эти таблицы относятся к каскадным
таблицам стилей (Cascading Style Sheets – CSS). Это означает, что при
определении стиля какого-нибудь элемента все элементы, находящиеся
внутри него, наследуют этот стиль.
Вот простейший пример таблицы стилей:
<style>
body
.text1 {text-decoration: none; font-family: arial, font-size: 10pt; font-weight : bold; color: red}
.text2 {font-family: sans-serif; font-size: 14pt; color: black;}
</style>
| Работающий вариант: Стиль text1 |
Обращение к элементам таблицы:
<div
class=text1>Стиль text1</div> - в этом случае фраза "Стиль
text1" будет напечатана красным жирным шрифтом Arial размером 10 pt.
Если же эту фразу сделать ещё и ссылкой, то она не будет подчёркнутой, так как text-decoration: none:
<a href=# class=text1>Стиль text1</a>
Аналогично
| Работающий вариант: Стиль text2 |
<div
class=text2>Стиль text2</div> - в этом случае фраза "Стиль
text2" будет напечатана чёрным шрифтом Sans-serif размером 14 pt.
Можно
не составлять таблицу стилей отдельно, а задать стиль непосредственно в
теге. Так, например, чтобы создать неподчёркнутую ссылку, необходимо её
реализовать в таком виде:
<a href=# style=" text-decoration: none;">Неподчеркнутая ссылка</a>
Преимуществом
реализации таких способов задания стилей является то, что всё
рассказанное выше работает как в Internet Explorer , так и в Netscape
Navigator. При этом даже если Вы поменяете настройки любого из этих
броузеров с целью увеличения или уменьшения размера шрифтов, то Вы
увидите, что они не изменяются, - использование стилей не позволяет
броузеру менять размеры шрифтов. Это является большим достижением CSS,
так как теперь Вы можете рассчитывать, что у большинства пользователей
страница будет отображаться именно так, как Вы и ожидаете этого.
Правда, применение CSS вовсе не спасает от изменения размеров системных
шрифтов Widows, но у большинства людей шрифт Normal. Если же
пользователь ставит крупный шрифт, то он увидит немалое количество
Интернет-страниц в неадекватном виде.
|
|
CSS1 - праздник освобожденного труда |
BODY {color: black; font-size: 14 px; font-family: Arial}
В
то же время, если Вам необходимо, чтобы все заголовки второго уровня
выделялись красным цветом, достаточно один раз записать в таблице
стилей:
H2 {color: red}
и теперь весь текст в документе, находящийся между тэгами будет автоматически выкрашиваться в красный цвет.
Вы
должны были заметить, что в вышеприведенном примере имеется
противоречие. С одной стороны, мы присвоили всему тексту в документе
черный цвет, с другой - всем заголовкам присвоен красный цвет. Каким же
цветом отображать заголовок? Здесь действует принцип последовательного приоритета,
введенный в еще более ранних версиях HTML, т.е. при возникновении
конфликтных инструкций, преимущество отдается более позднему тэгу. На
примере это выглядит так:
это какой-то текст
и снова текст
При
встрече с открывающим тэгом браузер обращается к таблице стилей (о том
как сделать так, чтобы браузер знал, что ему надо обращаться к таблице
стилей мы поговорим позже) и узнает, что весь текст внутри элемента
body должен быть черного цвета. Однако продолжая считывать код, браузер
наталкивается на открывающий тэг <H2>
и через таблицу стилей узнает, что весь текст внутри элемента H2 должен
отображаться красным цветом. Автоматически предыдущая команда теряет
свою силу и текст после тэга <H2> окрашивается в красный цвет. Далее появляется закрывающий тэг </H2>,
который говорит браузеру о прекращении действия инструкций элемента H2.
Тогда браузер возвращается к более ранним инструкциям элемента body и
снова начинает окрашивать весь следующий текст в черный цвет. Говоря о
последовательном приоритете, следует также упомянуть и о принципе наследования.
Этот принцип заключается в том, что элемент, не получивший собственных
атрибутов, наследует атрибуты присвоенные элементу, внутри которого
заключен неохарактеризованный элемент. Конечно же принцип наследования
распространяется только на атрибуты поддерживаемые наследующей и
наследуемой сторонами. На примере это выглядело бы так. Допустим, что в
таблице стилей у нас как и прежде есть описание элемента body BODY {color: black; font-family: Arial; bgcolor: white} но нет описания для элемента H2. Тогда при прочтении кода:
это какой-то текст
и снова текст
браузер интерпритирует его следующим образом. После открывающего тэга <body> он начнет окрашивать текст в черный цвет и отображать его шрифтом Arial. Далее, столкнувшись с открывающим тэгом <H2>
и не найдя описания для данного элемента в таблице стилей, браузер
обращается к более раннему описанию элемента body и пытается применить
его описание к элементу H2. У элемента body имеется три описывающих его
атрибута: цвет шрифта, тип шрифта и цвет фона. Из этих атрибутов только
два поддерживаются элементом H2: цвет и тип шрифта. Именно их и
применит браузер к элементу H2.
Синтаксис
СSS1 позволяет присваивать один атрибут сразу нескольким элементам. Для
этого достаточно перечилить все необходимые элементы через запятую.
Выглядеть это может так:
H1, H2, H3 {color: green}
Данная
запись говорит о том, что все заголовки первого, второго и третьего
уровня будут отображаться на экране зеленым цветом. Также можно одному
элементу присваивать несколько различных атрибутов. Для этого
достаточно перечислить их внутри фигурных скобок через точку с запятой.
Пример:
H2 {color: red; font-family: Alefbet}
Данная
запись инструктирует браузер отображать заголовки второго уровня
шрифтом Alefbet красного цвета. Если у браузера нет доступа к шрифту
Alefbet, то он автоматически заменит авторский атрибут на установленный
по умолчанию, т.е. на тот шрифт каким браузер отображает текст в тех
случаях, когда никакой специфический шрифт для текста не указан.
CSS1 позволяет задавать и более сложные системы стилистических определений. Например можно создавать так называемые контекстные селекторы.
Это значит, что в таблице стилей можно не только сделать запись, что H2
должен отображаться синим цветом, а EM - зеленым. Можно также сделать
запись, что например элемент EM будет красного цвета, в том случае если
он расположен внутри элемента H2. Для этого достаточно простой записи в
таблице стилей:
H2 EM {color: red}
Как и обычным селекторам нескольким контекстным селекторам можно присвоить один атрибут, разделив селекторы запятой. Например:
H2 EM, H3 I {color: red}
Обращаю
Ваше внимание на то, как важно при html-верстке внимательно следить за
размещением знаков. Ведь достаточно забыть поставить одну запятую, как
реестр однородных селекторов превращается в один контекстный селектор.
Теперь
поговорим о том как применять синтаксис CSS1 к html-верстке. Можно,
используя элемент style прописывать атрибутику каждому элементу.
Например использование такого подхода к отображению абзаца красным
цветом будет выглядеть так:
<p style="color: red"> Текст абзаца </p>
Но
такой подход не дает нам практически никаких преимуществ в сравнениями
с предыдущими версиями HTML. Как и ранее, для каждого элемента каждый
раз при его появлении приходится создавать систему его описания.
Основное достижение CSS - разделение содержания и представления
остается не реализованным. Более продуктивным способом использования
STYLE является создание реестра описаний элементов внутри элемента
HEAD. Выглядит это так:
<HEAD>
<style type="text/css"> ...информация о стилях... </style>
</HEAD>
Это
простой и понятный способ. Но у него есть свой очевидный минус. Он
заключается в том, что Вам придется вставлять таблицу стилей в каждую
html-страницу. Это не только увеличивает вес сайта, но и усложняет
изменение общей стилистики сайта. Для решения этой проблемы придуман
простой и изящный способ. Таблица стилей выносится в отдельный файл с
расширением .css. Затем внутри элемента HEAD html-страницы указывается ссылка на вышеозначенный файл. Выглядит это так:
<HEAD>
<link rel="stylesheet" type="text/css" href="../style1.css">
</HEAD>
Браузер,
наталкиваясь на такую ссылку, немедленно причитывает указанный файл и
далее применяет его стилистические инструкции ко всем элементам
html-страницы. В рамках CSS1 возможно также разрабатывать системы
стилей применяемые только к части элементов. Если мы хотим, к примеру,
чтобы текст на странице отображался шрифтом Arial черного цвета
размером в 16 пикселей, но при этом нам надо, чтобы некоторые части
текста отображались шрифтом Tahoma красного цвета размером в 12
пикселей, то это можно сделать с помощью классов. Класс можно
определить как некоторое именованное свойство или группу свойств, не
привязанных к каким-либо конкретным элементам. Записывается класс очень
просто:
.com {color: red; font-size: 12px; font-family: Tahoma}
Здесь com
это название класса, атрибуты в фигурных скобках - его описание, а
точка в самом начале используется для того, чтобы браузер понял, что
имеет дело не с каким-то стандартным элементом, а с независимым
классом. Созданный класс можно присваивать различным элементам по
необходимости. Можно присвоить его отрывку текста:
...какой-то текст <font class="com">нужный отрывок</font> продолжение текста...
Можно присвоить класс целому абзацу:
<p class="com">содержание абзаца</p>
и даже блоку:
<div class="com">содержание блока</div>|
|
Вступление. Блочная разметка страниц средствами CSS |
Блочная разметка страниц средствами CSS чаще всего применяется для
размещения блоков текста (или графики) на странице. Что-то вправо,
что-то влево, основное в центре...
Как правило, при этом применяют кучу так называемых «хаков»—
участков кода описания стилей, которые читаются только одним броузером
или, наоборот, только одним броузером не читаются.
Все это понятно, когда заказчику надо что-то определенное, уже обговоренное ранее.
А если проект под себя делается?
Может, есть возможность сделать все описания стилей в одном файле не используя всяких хаков?
Кроме того— может быть стоит отказаться от стандартов, установленных табличной версткой?
Так... Кто сказал, что она нужна? Чего в ней полезного? Да почти
ничего... Возможно, только визуальные некие элементы. А вот как она
будет выглядеть... наше дело совершенно.
Ну, давайте три возьмем.. Для кучи... Колонка содержимого в центре, колонка меню справа, колонка новостей слева.
Ну, конечно... Адреса, копирайты, пару счетчиков...
А что там еще? А ничего... видимо...
Три колонки
Что если просто сделать? Задать ширину в процентах, спозиционировать
по абсолютному типу, правый угол тоже зафиксировать в процентах?
Например:
#left { <div id="left"></div> |
Получили три колонки, не зависящие ни от ширины экрана, ни от прочих мелочей :)
Теперь шапку и футер сделаем.
Делаем три блока шириной в сто процентов, с отступами «0».
Один блок будет для шапки, один для текста, один под футер.
#left { width: 18%; border: 1px solid #000000; position: absolute; left: 1%; } #center { width: 60%; border: 1px solid #000000; position: absolute; height: auto; left: 20%; } #right { width: 18%; border: 1px solid #000000; position: absolute; left: 81%; } #top { background-color: #009999; display: block; margin: 0px; padding: 0px; width: 100%; height: 100px; } #text { background-color: #FFFFFF; display: block; margin: 0px; padding: 0px; width: 100%; } #fut { background-color: #999999; display: block; margin: 0px; padding: 0px; width: 100%; height: 100px; } <div id="left"></div> |
Итак, почти все есть... Надо только с отступами разобраться в текстовом блоке.
#left { <body> |
Итак, что мы получили— полностью резиновую блочную структуру, в
которой даже отступы в поле для основного текста будут меняться в
зависимости от размеров экрана.
Конечно, надо еще много чего сделать, у нас только заготовка, но... Направление видно? :)
|
|
Организация CSS-файлов: Совет 1 - Флаги |
Вам приходилось писать и работать с большими CSS-файлами? Мучались с
бесконечным скроллингом вверх-вниз в поисках нужной части кода?
CSS-файлы, с которыми я работаю, часто весьма велики. Постоянно
приходится прокручивать несколько экранов вниз-вверх, чтобы изменить то
или иное правило, или добавить новое. Работая над текущим проектом, я
решил воспользоваться маленькой уловкой, благодаря которой я нахожу то,
что мне нужно, практически мгновенно.
Пару месяцев назад в предыдущей статье "CSS Organization" я слегка
коснулся этой темы. В качестве примера, если вы когда-либо смотрели мои
CSS-файлы, вы наверное заметили, что я всегда делю файлы на ключевые
разделы. В каждом проекте, над которым я работаю, я делю весь CSS-код
на следующие части:
Когда я начал изучать CSS в 2002 году перед тем, как приступить к
редизайну сайта Wired News, я разработал свою собственную систему
использования комментариев и дефисов, чтобы были четко видны границы
каждого раздела:
/* Navigation (Навигация)
----------------------------------------------- */
Благодаря этому трюку мне - или клиенту, который принимает от меня
работу - очень легко отыскать определенное правило, или разобраться, к
какой части дизайна то или иное правило относится. Что еще более важно,
этот метод организации позволяет экономить кучу времени, когда
приходится править код CSS, особенно, когда приходится поправлять
старые проекты, когда уже и не помнишь, что как и для чего ты там
написал.
Так как же быстро найти правила при работе над файлом? Некоторые
приложения позволяют расставлять маркеры в документе, на которые можно
быстро перейти нажатием определенной комбинации клавиш. Это прекрасно,
если только вы пользуетесь такой программой. Но у вас все равно
возникнут затруднения с каждым новым CSS-файлом, где программные
маркеры еще не расставлены.
Еще вы можете воспользоваться функцией, которой я пользуюсь
много-много лет: команда "Find" есть в любом текстовом редакторе, и она
всегда позволит вам быстро найти искомый текст. Однако, если ваш
CSS-файл выглядит так же, как мой, простой поиск строк "nav" или "h2"
будет выдавать вам несколько мест в файле. Из-за этого вам придется
жать кнопку "Find Next" до тех пор, пока редактор не найдет нужное вам
место в документе.
А бывает еще и так, что команда "Find" вообще находит
совершенно не то, что вам нужно: скажем у вас есть раздел, который вы
пометили сокращением "RDE":
/* RDE
----------------------------------------------- */
Великолепно. Теперь вы четко видите, какие правила относятся к
"RDE". Но стоит вам только попытаться перейти на этот раздел с помощью
команды "Find", как вы сразу же обнаружите, что текстовый редактор
будет натыкаться на все строки со следующим текстом:
#nav {
float:left;
width:182px;
border-top:1px solid #911;
}
Вчера меня осенила идея. Если я поставлю небольшой флажок рядом с
заголовком раздела - например символ "=", который не используется в
синтаксисе имен классов (class) и идентификаторов (id) - я могу
моментально с помощью простейшего текстового поиска перейти на нужный
мне раздел. Набрав в окошке "Find" текст "=rde", я немедленно попадаю
туда, куда мне надо:
/* =RDE
----------------------------------------------- */
Минимум нажатий клавиш. Никакой путаницы с другими схожими строками.
Символ "=" даже не надо помещать сразу перед заголовком раздела. В
текущем проекте у меня несколько разделов "MISC". Так вот я помещаю
флаг "=" перед самым уникальным словом в заголовке:
/* MISC: =Lists
----------------------------------------------- */
Благодаря этому я быстро перехожу к разделу, где сгруппированы
правила для списков. Для этого в поиске надо набрать только "=list".
Разумеется эта хитрость работает только в том случае, если вы
строго придерживаетесь правила помечать все свои большие CSS-файлы
подобным образом.
Следующий совет будет о том, как именно я разбиваю CSS-файл на
разделы, и как я решаю, какие правила в какой раздел поместить, если то
или иное правило подходит и для того и для другого раздела.
|
|