Главная - Настройки - Настройки пользователя
и настроить отображение баннеров:
Можно сделать по другому, если желаете, что бы отображались другие баннеры.
Имена пользователей
Теперь перейдем: «Пользователи
» => «Группы пользователей
» => «Список групп
» выбираем нужную группу и приступаем к стилизации.
Для этого надо задать стиль CSS
в пункте «CSS-стиль для имени пользователя
». Будем использовать стили для текста:
color
- цвет ника. Можно использовать цветовые значения: RGB формат - rgb(r, g, b); шестнадцатиричная запись - #RRGGBB; RGBa формат - rgba(r, g, b, a); Базовые названия цветов: aqua, black, blue, fuchsia, gray ......
font-family
- семейство шрифта для ника (Arial, Georgia, Verdana ....) Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
font-size
- размер шрифта ника. Разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% (или не указано) берется размер шрифта родительского элемента.
font-style
- определяет начертание шрифта ника - обычное, курсивное или наклонное (normal, italic, oblique).
font-weight
- устанавливает насыщенность (жирность) шрифта (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Так же можно использовать тень текста для ника:
text-shadow
- указываются четыре параметра сдвиг по x, сдвиг по y, радиус размытия и цвет (1px 1px 2px black). Допускается указывать несколько параметров тени, разделяя их между собой запятой (1px 1px 2px black, 0 0 1em red)
Пример
:
Указываем CSS
стиль для ника:
Color: red; font-weight: bold; font-size: 12px;
Выравнивает ник по центруНастройки стиля>>Элементы сообщений>>Имя пользователя
В блоке "Прочее" добавить
Text-align: center;
Что у нас получилось
Анимированный фон для имени(ника) пользователей
В "CSS-стиль для имени пользователя"
добавить фон
Background: url(папка с картинкой/glitter_001.gif) no-repeat
В архиве ниже 14 разных фонов.
Звания пользователей
"Текст баннера пользователя " пишем любой, не видно будет, «» - имя класса, например admin , в EXTRA.css задаем стиль:
Admin { background: url(папка картинки/admin.gif) no-repeat; display: block; width: 120px; height: 30px; color: rgba(0, 0, 0, 0); margin-left: -5px; }
Смотрим что получилось
"Текст баннера пользователя " пишем название группы «Другой, используя своё имя CSS-класса » - имя класса, например admin-ribbon , в EXTRA.css задаем стиль:
/* Ранги пользователей */ .admin-ribbon, .moder-ribbon, .member-ribbon { color: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; margin-left: -12px; margin-right: -12px; text-align: center; text-shadow: 0 0 0 transparent, 0 0 2px black; width: 134px; } .admin-ribbon { background: url("styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent; } .moder-ribbon { background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; } .member-ribbon { background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent; } /* END Ранги пользователей */
В архиве ниже найдете 3 ленточки для баннера.
Свой цвет для баннеров:
Переходим на страницу списка групп: /admin.php?user-groups/ - выбираем нужную Вам группу - В поле "Текст баннера пользователя:" прописываем нужно название - В настройке "Оформление баннера пользователя:" выбираем опцию "Другой, используя своё имя CSS-класса:" и в этом поле указываем: userBanner my-style
- Сохраняем всё это дело и в шаблон EXTRA.css
добавляем такой код:
UserBanner.my-style { color: white; background-color: green; }
или такой
UserBanner.my-style { color: white; background-color: green; border-color: green; }
Пример баннеров с применением стилей CSS.
Сделаем баннеры с использованием только CSS. Как уже говорилось для этого используем "Другой, используя своё имя CSS-класса"
, задаем для каждой группы свой класс, а в EXTRA.css
, укажем стили для этих классов:
Admin_style, .lamer_style, .moder_style, .user_style { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; display: block; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: relative; text-align: center; color: white; text-shadow: 0 0 0 transparent, 1px 1px 1px black; width: 98px; } .admin_style { background-color: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.7); } .moder_style { background-color: rgba(0, 155, 4, 0.5); border: 1px solid rgba(0, 155, 4, 0.7); } .user_style { background-color: rgba(0, 51, 155, 0.5); border: 1px solid rgba(0, 51, 155, 0.7); } .lamer_style { background-color: rgba(0, 158, 217, 0.5); border: 1px solid rgba(0, 158, 217, 0.7); }
С помощью CSS селекторов мы выбираем какие конкретно элементы на сайте стилизовать. О чем нам говорит эта запись?
H1 { color: red; } = селектор { свойство: значение }
Заголовку h1 присвоить красный цвет.
На этом уроке мы разберем основные виды CSS селекторов:
- Селектор тегов
- Селектор-идентификатор
- Селектор классов
- Селектор атрибутов
- Универсальный селектор
- Комбинированные селекторы
1.Селектор тегов
Пишется название тега без угловых кавычек.
H1 { ..
}
Давайте заглянем в консоль инструментов для разработчика какого-нибудь сайта.
На скриншоте отчетливо видно, что для селектора тега h1 задано свойство с конкретным значением (font-size: 34px;) по размеру шрифта. Те или иные значения свойств можно задать любому тегу на веб-сайте. Однако, проблема заключается в том, что теперь на сайте все заголовки h1 будет размером в 34 пикселя. Если мы так и задумали, то все ОК, а если нет, например на другой странице по задумке дизайнера, заголовок h1 должен быть 40 пикселей. Тогда переходим к следующему виду CSS селекторов .
2.Селектор классов
Вот этому особенному заголовку h1 размером в 40 пикселей присваиваем свой класс с произвольным название, например: "big" .
В HTML -документе:
Заголовок
Мы помечаем на HTML -странице только заголовки размером 40 пикселей классом "big" .
В файле CSS стилях:
Big { font-size: 40px; }
Перед названием класса всегда ставится точка, .big – селектор класса. Может применяться на сайте много раз. В случае, если мы точно знаем, что заголовок h1 размером 40 пикселей будет в единственном экземпляре. Переходим к следующему типу CSS селекторов .
3.Селектор-идентификатор
В отличии от классов применяется на сайте всего один раз и вместо точки ставится решетка # .
В HTML -документе:
Заголовок
В файле CSS стилях:
#big { font-size: 40px; }
Просто запомните, что id должно быть уникально на весь документ и не может повторяться.
Желательно id использовать для якорей или для скриптов. Старайтесь при верстке использовать только классы.
4.Селекторы атрибутов
Чаще всего селекторы атрибутов используются в формах, так как поля форм содержат атрибуты с разными значениями. Например наша форма содержит два поля с логином и паролем.
В HTML -документе:
В файле CSS стилях:
/* Зададим фоновый цвет #fcf8e3; полю для ввода логина */
input {
background-color: #fcf8e3;
}
/* Зададим фоновый цвет #f2dede; полю для ввода пароля */
input {
background-color: #f2dede;
}
У нашей формочки поле для логина покрасится в желтый цвет, а поле для пароля – в розовый. Селекторы атрибутов записываются в квадратные скобки элемент [атрибут] .
5.Универсальный селектор
В общем случае синтаксис универсального селектора будет такой. Суть его состоит в том, что он применяет стили сразу ко всем элементам сайта. Раньше он использовался для того, чтобы обнулить все стили для элементов сайта. Например отступы, поля для того, чтобы в каждом браузере сайт изначально смотрелся одинаково. Верстальщик ставил универсальный селектор, обнулял маржины и паддинги, это устаревший уже способ.
* { margin: 0;
padding: 0;
}
Но сейчас все используют normalize.css с GitHub .
6.Комбинированные селекторы
Это CSS селекторы состоящие из нескольких селекторов. Рассмотрим самые распространенные типы комбинированных селекторов.
Мультиклассы
К тегу можно одновременно добавить несколько классов. Берется значение класса, стоящего в коде ниже.
В HTML -документе:
Заголовок
В файле CSS стилях:
Big1 { font-size: 34px;}
.big2 { font-size: 40px;}
К заголовку h1 применится значение класса big2 , он стоит ниже.
Вложенный селектор
Задаются через пробел. Очень знакома ситуация, когда внутри абзаца выделяется какое-нибудь слово курсивом.
Пример такого варианта выделения
P i {
font-style: italic; /* курсив */
}
Здесь
это родительский тег, а - дочерний тег, расположенный в контейнере
. В этом случае стиль будет применяться к тегу .
Дочерний селектор
div > span {..}Тег span является ребенком, а div – родителем. Значение стиля всегда применяется к ребенку, если он прямой потомок и непосредственно расположен в контейнере родителя.
Соседний селектор
Соседними называются элементы страницы, когда они идут друг за другом.
B + i { color: gray; }
Тебе так идет серый цвет, особенно в сочетании с розовым.
А чтобы научиться применять ваши знания на практике, рекомендую ознакомиться с моим курсом
1. Что такое каскадные таблицы стилей css?
Итак, что же такое каскадные таблицы стилей css?
css (англ. Cascading Style Sheets - каскадные таблицы стилей ) - язык описания внешнего вида документа, написанного с использованием языка разметки. Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.
Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.
Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.
Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.
Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.
2. Как создать каскадную таблицу стилей css?
В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.
Итак, делаем так:
1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей. Пусть, моя папка будет называться "css"
2. Создаем простую html страничку (index.html). Как это делается можете прочитать здесь.
3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.
В результате у Вас должно получиться вот что:
Все, файл который будет содержать в себе стили css готов.
Теперь давайт подключим созданную стаблицу стилей к файлу index.html.
3. Как подключить каскадную таблицу стилей css?
Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге
прописать тег:
Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.
Например, если наш файл index.html будет иметь такой код:
Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".
Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:
Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.
Теперь давайте проверим работу таблиц стилей css.
Итак, начнем с самого простого, и зададим тегу
новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.Для того, что бы установить фоновое изображение, его нужно разметить в папке с нашими файлами.
Скачайте архив bg.zip, разархивируйте его и поместите файл bg.jpg в папку css. У Вас должно быть так:
Теперь, что бы установить стиль для тега
html документа, в таблице стилей нужно записать следующее:|
body { background-image:url(bg.jpg); background-color:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; } |
body {...} - задание стилей css для тега
background-image:url(bg.jpg); - фоновое изображение, где в параметре url(...jpg) указывается полный путь к изображению, которое будет фоновым
background-color:#f6f6f6; - фон тела документа (тега ). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения
margin-top:0px; - расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.
margin-bottom:0px; - расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей
font-family:Verdana; - установка шрифта для документа по умолчанию
font-size:12px; - размер шрифта документа 12 пикселей
color:#000000; - цвет текста. В этом случае таблицы стилей css задают цвет шрифта - темно синий.
После того, как Вы сохраните файл style.css, в браузере Вы увидите следующее:
|
О технологии CSS. Стили CSS |
|
Введение в CSS. Стили Способы применения стилей: Внутренние стили Глобальный стили Связанные/внешние стили Вы приступили к изучению каскадных таблиц стилей CSS . Значит Вы уже знакомы с языком разметки гипертекста HTML , так как приступать к CSS без знания HTML не имеет смысла. CSS (Cascading Style Sheets - каскадные таблицы стилей ) - технология, использующаяся для оформления веб-страниц с помощью стилей. Основная идея CSS состоит в том, чтобы разделить структуру и содержание веб страниц от их оформления: C помощью HTML создается страница - ее каркас, а также вносится ее содержимое. - с помощью CSS создается дизайн - задается оформление для элементов страницы. Стили - это набор правил форматирования, применяемых к элементам страницы для изменения их свойств и параметров представления на странице: в основном это касается их внешнего вида и занимаемого положения. Стили представлены свойствами CSS. Каждое свойство по своему влияет на оформление того или иного элемента страницы. Некоторые свойства не применимы к некоторым элементам. Элементы страницы - это теги HTML или их содержимое. Существует три способа применения стилей к элементам страницы: I способ - Внутренние стили Стилевое оформление задается при помощи параметра style , который может быть добавлен к любому тегу HTML, влияя при этом на оформление только этого тега и его содержимого. Фрагмент кода При помощи параметр style задано стилевой оформление для текста данного абзаца, установлен его размер и цвет. Результат: При помощи параметр style задано стилевое оформление для текста данного абзаца: установлен его размер и цвет. Этот способ оформления элементов страницы применяется редко. Ведь, согласитесь, что задавать одно и тоже оформление, скажем, для каждого абзаца страницы, во-первых, трудоемко, а, во-вторых, не практично, так как с увеличением объема исходного кода, будет расти и время загрузки страницы. II способ - Глобальные стили Стилевое оформление задается при помощи тега В голове документа задано единое стилевое оформление для всех абзацев текущей странички! А для этого абзаца оформление задано индивидуально! Единое оформление. Результат: В голове документа задано единое стилевое оформление для всех абзацев текущей странички! А для этого абзаца оформление задано индивидуально! Единое оформление. Этот способ оформления страниц применяется в тех случаях, когда их не много, или когда возникает необходимость задать оригинальное оформление какой-либо одной страничке сайта из остального множества его однотипных станиц. III способ - Связанные или внешние стили Стили описаны в отдельном файле с расширением .css , который может быть связан как с одним, так и с несколькими html-файлами, влияя при этом на их оформление. Если Вы еще не знакомы с визуальным HTML-редактором Dreamweaver , то для создания css-файла можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом . Например, мы имеем html-документ - файлindex.html , к оформлению которого необходимо применить стили, описанные в файле style.css . Для этого файлыindex.html и style.css нужно связать. Связь осуществляется с помощью тега , который располагается в голове документа index.html (между тегами и ), и в котором необходимо прописать следующее: "stylesheet" type= "text/css" href= "style.css" >. Эта строка указывает на то, что правила оформления для файла index.html берутся из файла со стилями style.css . С помощью атрибутаhref тега делается ссылка на файл со стилями (указывается абсолютный или относительный путь к файлу (подробнее здесь...) ) . Таким образом к любому html-документу можно применить стили из файла, находящегося даже на другом сайте. Фрагмент кода:
Для абзацев и заголовков второго уровня Задано стилевое оформление.
.Фрагмент кода из файла со стилями: p { border : #FF0000 solid 2px ; color : #33CC99 ; padding : 5px } h2 { border : #33CC99 solid 2px ; background-color : #FF0066 ; color : #FFFFFF ; padding : 5px } Результат: Для абзацев и заголовков второго уровня Задано стилевое оформление. Стили описаны в файле style.css, который связан с данным файлом с помощью тега . Применение этого способа позволяет связать файл со стилями style.css с любым количеством html-файлов и работать над их дизайном, редактируя лишь css-код одного файла. Что очень удобно! |
Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML)
Русская
часть Интернета растет день ото дня. За
последние год-два суммарный объем
русскоязычных страниц увеличился более
чем в два раза. Сегодня в России уже
никого не удивишь словосочетанием
<домашняя страничка> или английским
словом
Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.
Логическое и физическое форматирование
Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.
Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги
, ,
, безусловно, способствовали
разделению документов на некоторые
логические блоки. Но многие авторы
страниц использовали, да и по сей день
продолжают использовать эти теги не по
назначению: в связи со скудостью средств
для оформления страницы теги заголовков,
например, использовались для выделения
таких элементов на странице, которые
на самом деле заголовками не являлись.
CSS же предоставляют достаточное количество
средств оформления, что позволяет более
точно следовать правилам логического
форматирования и действительно отделять
структуру страницы от ее визуального
представления.Назначение
стилей отдельным элементам страницы
CSS
позволяют назначить собственный стиль
визуального представления любому тегу
HTML, в том числе тегу
. Если стиль
задан для тега , он наследуется
всеми элементами (абзацами, заголовками
и т. д.), помещенными внутри этого
тега-контейнера, в случае отсутствия
собственных стилей для этих элементов.
Таким образом, нам уже не нужно прописывать
теги и атрибуты color, size и т. п. для
каждого абзаца на странице - достаточно
задать некий стиль для тега , и
все абзацы на странице будут отображены
в соответствии с этим стилем. Как же это
сделать?Допустим,
мы хотим, чтобы все абзацы отображались
шрифтом Times New Roman размером 12 пунктов
темно-зеленого цвета. Для этого следует
прописать атрибут style тега
,
присвоив ему соответствующее значение.
Синтаксис
такой:12pt;
color: darkgreen;">
Таким
образом, все абзацы на странице отображены
так, как мы захотели, причем код не
засорен тегами и их атрибутами.
Представляете, какая экономия размера
файла, если ваша страница состоит из
большого количества текста!
Обратите
внимание - когда мы задавали начертание
шрифта, после названия Times New Roman мы
указали начертание serif, что обозначает
любой шрифт с засечками. Если на машине
конечного пользователя не установлен
шрифт Times New Roman, броузер подставит вместо
него любой из имеющихся шрифтов с
засечками, и отображение страницы будет
максимально приближено к тому, что вы
задумали. Причем приведенный пример
будет понятен и для IE (4.0 и выше), и для
NN (4.0 и выше). Хотя надо сразу оговориться,
что Netscape Navigator поддерживает далеко не
все возможности, предоставляемые CSS и
DHTML, и это, безусловно, не увеличивает
числа его поклонников.
В
приведенном примере используется
встраивание стиля непосредственно в
тег документа - так называемый inline-стиль.
Этот способ связывания CSS с HTML-файлом
рекомендуется в единичных случаях -
если данный стиль планируется применить
только к одному элементу только на одной
странице сайта. Если же стиль должен
быть применен к нескольким элементам
на одной странице или к нескольким
страницам сразу, рекомендуются другие
способы связывания CSS и HTML, о которых мы
поговорим далее.
Назначение
стилей нескольким элементам одной
страницы - создание внедренной таблицы
стилей
Пока
речь у нас шла о задании только одного
стиля для одного элемента. А теперь мы
научимся создавать именно таблицы
стилей.
Допустим,
мы хотим, чтобы все абзацы на странице
выглядели, как в предыдущем примере,
все заголовки первого уровня отображались
шрифтом Arial зеленого цвета полужирного
начертания размером 16 пунктов, а все
заголовки второго уровня - шрифтом
Helvetica размером 14 пунктов полужирного
курсивного начертания желто-зеленого
цвета. Для этого нам понадобится создать
в <голове> страницы (в любом месте
между тегами
и ) внедренную
таблицу стилей, в которой мы пропишем
несколько правил сразу. Для этого создаем
тег-контейнер таблицы стилей, начинающийся
открывающим тегом . Внутри этого
тега-контейнера мы вольны задать любое
количество правил CSS, состоящих из
селектора (названия тега HTML, к которому
будет применяться правило) и его
определения (непосредственно набора
средств форматирования), заключенного
в фигурные скобки. Синтаксис для
приведенного выше примера такой:font-size:
12pt;
color:
darkgreen;
font-size:
16pt;
font-weight:
bold;
font-family:
Arial, sans-serif;
font-size:
14pt;
color:
greenyellow;
font-weight:
bold;
font-style:
italic;
Этот
способ связывания CSS и HTML называется
внедрением. Его рекомендуется применять
в тех случаях, когда вы решили задать
какой-либо набор правил форматирования
только для одной страницы сайта, а все
остальные страницы по вашему замыслу
должны выглядеть по-другому.
Назначение
стилей одновременно для нескольких
страниц сайта
Помимо
встраивания и внедрения для связи CSS и
HTML используются способы импортирования
и связывания таблиц стилей. Это,
безусловно, наилучшие способы для
придания единого стилевого оформления
нескольким (или даже всем) страницам
одного сайта. При этом вся таблица стилей
хранится в одном файле (расширение файла
должно быть стандартным - .css).
Вот
пример содержимого такого файла
(например, my.css):
font-family:
"Times New Roman", serif;
font-size:
12pt;
color:
darkgreen;
font-family:
Arial, sans-serif;
font-size:
16pt;
font-weight:
bold;
font-family:
Arial, sans-serif;
font-size:
14pt;
color:
greenyellow;
font-weight:
bold;
font-style:
italic;
Обратите
внимание: теги внутри
файла таблицы стилей не используются
- расширение.css явно указывает броузеру
на то, что файл является таблицей стилей.
Один такой файл может быть связан сразу
с несколькими страницами (или импортирован
сразу в несколько страниц). В html-файле
для связывания нужно прописать в любом
месте между тегами
и
следующую строку:В
этой строке указывается, что связываемый
файл является таблицей стилей
(rel="stylesheet"), формат этого файла -
.css (type="text/css") и находится он в той
же директории, что и файл html, либо имеет
другой URL-адрес (href="my.css"). Очевидно,
что эту строку мы можем прописать в
любом (либо во всех) из наших html-файлов.
Таким образом, единое стилевое оформление
будет прописано для нескольких страниц
сразу.
Обратите
внимание на то, что inline-стили (стили,
прописанные для отдельных элементов
страницы с помощью атрибута style) и
внедренные стили (стили, прописанные в
<голове> страницы внутри тега-контейнера
, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:12pt; color: darkgreen;">
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:font-size: 12pt;
color: darkgreen;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
font-family: "Times New Roman", serif;
font-size: 12pt;
color: darkgreen;
font-family: Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера