Рейтинг: 4.7/5.0 (1870 проголосовавших)Категория: Windows: XML, RSS, CSS
HTML, скрипты и стили - Рассмотрены средства создания Web-сайтов - языки разметки гипертекста (XHTML, HTML 4 и HTML 5), каскадные таблицы стилей (CSS 2 и CSS 3), а также языки сценариев javascript и PHP. Изложены краткие теоретические сведения и приведены многочисленные примеры типичных задач разработки сайтов. Предлагаемые решения инвариантны относительно наиболее популярных браузеров (Microsoft Internet Explorer, Mozilla Firefox, Opera, Apple Safari и Google Chrome). Приложения книги содержат краткие сведения о тегах HTML и свойствах CSS. В третьем издании существенно расширены главы, посвященные языкам разметки гипертекста HTML 4, HTML 5 и XHTML и каскадным таблицам стилей CSS 2 и CSS 3. Добавлен материал по масштабируемой векторной графике (SVG) и динамической графике, управляемой скриптами.
Содержание:
Предисловие к третьему изданию
Глава 10. Элементы пользовательского интерфейса и формы
Глава 11. Вставка внешнего содержимого в (X) HTML-документ
Глава 12. Фреймы
Глава 13. Применение SVG
Глава 14. Графические фильтры CSS в Internet Explorer
Часть II. Скрипты на javascript
Read the CSS.pm pod for information about the CSS object tree.
CONSTRUCTORS
This constructor returns a new CSS::Style object, with an optional hash of options.
adaptor adaptor to use for serialization
add_selector( $selector )
This method adds a selector to the selector list for the object. $selector is a reference to a CSS::Selector object.
add_property( $property )
This method adds a selector to the property list for the object. $property is a reference to a CSS::Property object.
set_adaptor( 'CSS::Adaptor::Foo' )
This method sets the current adaptor for the object.
selectors()
This method is used to serialize the ruleset's selectors, using the current adaptor. It returns a string which come from the adaptor's output_selectors() method.
properties()
This method is used to serialize the ruleset's properties, using the current adaptor. It returns a string which come from the adaptor's output_properties() method.
to_string()
This method is used to serialize the ruleset, using the current adaptor. It returns a string which comes from the adaptor's output_rules() method.
get_property_by_name( 'property_name' )
Returns the first CSS::Property object with the specified name. Returns zero on failure.
Requirements:
На нашем сайте Вы можете скачать CSSStyle exe бесплатно, без регистрации и смс, удобно и быстро, за один клик.
CSS (Cascading Style Sheets) - это язык программирования, который используется для настройки и форматирования документов, написанных на языках разметки веб-сраниц. Каскадные таблицы стилей часто используются в паре с документами, написанными на HTML и XHTML. Для написания кода CSS можно использовать обычный текстовый редактор, но более удобными для этой цели будут специальные редакторы, список которых приведен ниже.
Редактор позволит вам оптимизировать код CSS, проводить предварительный просмотр созданных стилей и быстро искать нужные участки кода. Современные редакторы предоставляют проверку совместимости написанного кода с популярными браузерами, а также проверять код на соответствие стандартам W3C. Некоторые программы служат специально для поиска ошибок в коде, таких как пропущенные закрывающие теги, опечатки в тегах и т.д.
Однако, часто можно встретить универсальные редакторы для кодов CSS, HTML, PHP и т.д. Такие редакторы дают возможность значительно упрощать процесс программирования, предоставляя визуальные средства дизайна веб-страниц. Вы можете в буквальном смысле нарисовать страницу как в графическом редакторе, и получить готовые документы HTML и CSS.
Издательство: БХВ-Петербург
Страниц: 811
Формат: PDF
Размер: 22,1 МБ
ISBN: 978-5-9775-0502-4
Качество: Отличное
Серия или Выпуск: В подлиннике
Язык: Русский
HTML, скрипты и стили - Рассмотрены средства создания Web-сайтов - языки разметки гипертекста (XHTML, HTML 4 и HTML 5), каскадные таблицы стилей (CSS 2 и CSS 3), а также языки сценариев javascript и PHP. Изложены краткие теоретические сведения и приведены многочисленные примеры типичных задач разработки сайтов. Предлагаемые решения инвариантны относительно наиболее популярных браузеров (Microsoft Internet Explorer, Mozilla Firefox, Opera, Apple Safari и Google Chrome). Приложения книги содержат краткие сведения о тегах HTML и свойствах CSS. В третьем издании существенно расширены главы, посвященные языкам разметки гипертекста HTML 4, HTML 5 и XHTML и каскадным таблицам стилей CSS 2 и CSS 3. Добавлен материал по масштабируемой векторной графике (SVG) и динамической графике, управляемой скриптами.
Глава 10. Элементы пользовательского интерфейса и формы
Глава 11. Вставка внешнего содержимого в (X) HTML-документ
Глава 12. Фреймы
Глава 13. Применение SVG
Глава 14. Графические фильтры CSS в Internet Explorer
Часть II. Скрипты на javascript
Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.
1. Базовые вещиНачну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.
Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал смурфика на css . если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.
Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.
У меня на сайте есть очень много примеров в которых используется CSS. Только категория CSS и категория CSS3 вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.
Мои уроки об основах каскадных стилей CSS
2. Шпаргалки CSS и CSS3Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?
Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.
К счастью, хорошие люди составили очень полезные шпаргалки, которые не раз меня выручали. Достаточно один разобраться где что находится и затем поиск нужных свойств не составляет никаких трудностей.
Шпаргалки CSS и CSS3
Краткая шпаргалка для CSS (v2), где можно найти все самые основные свойства. Отлично подойдет для начинающих.
Подробная шпаргалка для всех свойств CSS3. Подойдет как для начинающих, так и для опытных веб-мастеров и веб-дизайнеров.
Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.
Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.
Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее ?? .
Дополнение к уроку — HTML шпаргалкиПомимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.
Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.
CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.
Возможно, Вам понадобятся также:
Внутренние стилиРЕЗУЛЬТАТ:
Абзац с текстом синего цвета
Абзац с текстом красного цвета
Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.
Глобальные стилиГлобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид Web-страницы, но и и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта.
1 Основы HTML и CSS Каскадные таблицы стилей (CSS) 
2 Каскадные таблицы стилей (CSS): Основные цели и задачи CSS. Способы добавления стилей на WEB-страницу. Основные понятия и определения. Грамматика языка стилей Создание стилей и классов. Принципы каскадирования и принципы группировки Применение стилей и классов к элементам документа HTML Декоративные возможности CSS: формирование рамок и отступов Позиционирование элементов на странице и управление моделью элемента 
3 Методы определения CSS Cascading Style Sheets (каскадные таблицы стилей) это средство, позволяющее задавать различные визуальные свойства HTML-элементам. http://www.w3.org/TR/CSS21/cover.html Методы определения таблицы стилей в документе HTML: Связывание(linking)- Внешние таблицы стилей Вложение(embeding) - Информация о стиле в заголовке: элемент STYLE Встраивание(inline)- Атрибут style Импорт (import) - IE color:red; background:#cccccc свойство property значение value декларация declaration 
4 Встроенная информация о стиле (inline) style="color:red; background:#cccccc" Атрибут style определяет информацию о стиле одного элементаstyle Обычный текст К этому абзацу применен стиль. Встроенная информация о стиле. атрибут тега декларация 
5 Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding) p < color:red; background:#cccccc > Здесь применен стиль методом вложения. Другой абзац. селектор selector правило rule 
6 Метод связывания (linking) - Внешние таблицы стилей p < color:red; background:#cccccc >. style.css index.html second.html 
7 Каскадирование div
8 Наследование Первый слой Второй слой внутри первого Третий слой внутри второго 
9 Единицы измерения размеров em - ems, высота используемого элементом шрифта ex - x-height, ширина буквы "х" испольуемого элементом шрифта px - pixels, пикселы in - inches, дюймы cm - centimeters, сантиметры mm - millimeters, миллиметры pt - points, пункты(1pt = 1/72in = 0,35mm) pc - picas, пики(1pc = 12pt) % - относительные значения(например +20%) 
10 Цвет и адреса URL название цвета (red, green, white. ) #00cc00 - шестнадцатиричное представление #0c0 - сокращенное шестнадцатиричное представление rgb(0,240,125) - в формате RGB rgb(0%,80%,25%) - в формате RGB, относительное url("название файла") Пример: 
11 Селекторы типа элемента и класса div
12 Другие селекторы #back
13 И еще о селекторах Соседние селекторы b + i < color:red > Дочерние селекторы div > p < color:red > Селектор атрибута p[align] < color:red > p[align="right"] < color:green > p[align
="right"] < color:green > div[lang|="en"] < color:red > Универсальный селектор *
="right"] < color:green > div[lang|="en"] < color:red > Универсальный селектор *
p < color:red > Селектор атрибута p[align] < color:red > p[align="r" title="И еще о селекторах Соседние селекторы b + i < color:red > Дочерние селекторы div > p < color:red > Селектор атрибута p[align] < color:red > p[align="r">
15 Псевдоклассы и псевдоэлементы :link :visited :active :hover :focus :first-child a:link
16 Оформление текстовых элементов font-family: семейства шрифта|тип шрифта font-family:Arial,Geneva,Helvetica,sans-serif; font-size: величина|% абсолютная величина: xx-small, x-small, small, medium, large, x-large, xx-large. относительная величина:larger, smaller font-size:10px; font-weight: normal|bold|bolder|lighter|число от 100 до 900 400 = normal, 700 = bold font-weight: bold; общее-семейство Существуют следующие общедоступные гарнитуры шрифтов: антиква ('serif'), гротески ('sans-serif'), курсивы ('cursive'), аллегорические ('fantasy') и моноширнные ('monospace') шрифты 
17 Оформление текстовых элементов font-style: normal|italic font-style:italic; font-variant: normal|small-caps font-variant:small-caps; font: font-style font-variant font-weigth font- size font-family Порядок важен. Можно все опустить, кроме font-size и font-family. font:bold 10px Arial !important; 
18 Оформление текстовых элементов text-align: left|right|center|justify text-align:right; text-decoration: none|overline(|)underline(|)line- through text-decoration:underline; text-indent: величина|% text-indent:10px; text-transform: none|capitalize|uppercase|lowercase text-transform:uppercase; 
19 Оформление текстовых элементов letter-spacing: normal|величина letter-spacing:10px; word-spacing: normal|величина word-spacing:10px; vertical-align: baseline|sub|super|top|text- top|middle| bottom|text-bottom|% vertical-align:top; line-height: normal|величина|% line-height:5%; font:bold 10/12px Arial white-space: normal|pre|nowrap white-space:pre; 
20 Оформление списков list-style-type: none|circle|disc|square|decimal|lower-alpha|upper- alpha|lower-roman|upper-roman list-style-type:square; list-style-position: outside|inside list-style-position:inside; list-style: list-style-type list-style-position list-style-image list-style:decimal inside; list-style-image: none|url list-style-image:url("ball.gif"); 
21 Свойства цвета и фона background-color: цвет|transparent background-color:#330033; color: цвет color:red; background-position: top|bottom|center|left|right|величина|% background-position:top right; background-image: none|url background-image:url("fon.gif"); background-repeat: repeat|repeat-x|repeat-y|no-repeat background-repeat:repeat-x ; background-attachment: fixed|scroll background-attachment:fixed; background: transparent background-color background-image background-repeat background-attachment background-position background:#ffffff no-repeat url(fon.gif); 
22 Лабораторная работа Использование стилей Файл lab-5-1.html должен отображаться в браузере так: 1 1 основные цвета: чёрный текст на белом фоне; абзацы выравниваются справа; заголовки выравниваются справа и записываются рубленым шрифтом красного цвета; термины, выделяемые курсивом, записываются зелёным цветом; основные цвета: чёрный текст на белом фоне; абзацы выравниваются справа; заголовки выравниваются справа и записываются рубленым шрифтом красного цвета; термины, выделяемые курсивом, записываются зелёным цветом; 2 2 
23 Отступы и рамки Содержимое элемента top bottom left right margin border padding 
24 Отступы снаружи margin-top: auto|величина|% margin-right: auto|величина|% margin-bottom: auto|величина|% margin-left: auto|величина|% margin: margin-top margin-right margin-bottom margin-left margin:10px 20px 20px 30px; margin:15px; margin-left: 10px; margin-right: 5px; 
25 Отступы изнутри padding-top: величина|% padding-right: величина|% padding-bottom: величина|% padding-left: величина|% padding: padding-top padding-right padding-bottom padding-left padding:10px 20px 20px 30px; padding:15px; 
26 Рамки border-width: величина|%|(thin|medium|thick) border-color: цвет border-style: none|dotted|dashed|solid|double|groove|ridge|inset| outset border-top-(width|color|style) border-right-(width|color|style) border-bottom-(width|color|style) border-left-(width|color|style) border: border-width border-style border-color border: 1px solid black; border-left: 3px solid black; Border-right: 1px dotted #ccc; 
27 Лабораторная работа Использование стилей Используя файл lab-5-2.html, экспериментируйте со свойствами стилей: 1 1 font size color background border margin padding font size color background border margin padding 2 2 
28 Визуальные свойства visibility: hidden|visible|inherit visibility:hidden; display: none|block|inline|list-item display:block; overflow: auto|scroll|visible|hidden overflow:auto; clip: auto|rect(top right bottom left) clip:rect(10px 20px 30px 10px); 
29 Параметры блока width: величина|% width: 100px; height: величина|% height: 100px; float: none|left|right float: left; clear: none|left|right|both clear: both; 
30 Параметры слоя top: auto|величина|% top: 100px; left: auto|величина|% left: 100px; position: static|absolute|relative position: absolute; Этот слой позиционирован абсолютно. Этот слой позиционирован относительно. Здесь должен быть слой Фактическое расположение слоя z-index: auto|величина|inherit z-index:3; 
31 Лабораторная работа Использование стилей Используя файл lab-5-3.html, создайте трехмерный заголовок, как на изображении внизу 1 1 
32 Итоги С помощью стилей мы имеем возможность отделить содержание HTML документа от оформления Таблицы стилей определяются в HTML документе методами связывания, встраивания и вложения Определенный стиль привязывается к селектору, в роли которого может выступать тег, класс и идентификатор Стили можно разделить на группы: оформления текстовых элементов, цвета и фона, отступов и рамок, параметров блока, слоев и др. 
Стили CSS - технология каскадных таблиц
Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.
Каждый стиль css должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем css параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль css к какому элементу Web-страницы привязан, или неявная, когда стиль css автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.
Таблица стилей css может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили css можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.
Таблицы стилей css пишут на особом языке, который так и называется — CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.
Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.
Создание стилей CSS
Обычный формат определения стиля CSS иллюстрирует листинг 8.1.
Листинг 8.1
<селектор> <
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
<атрибут n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
Oсновные правила создания стиля css .
Но правила — правилами, а главное — практика. Давайте рассмотрим пример небольшого стиля:
Разберем его по частям.
Оно представляет код синего цвета, записанный в формате RGB.
Подробнее об RGB-коде и его задании мы поговорим позже.
Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам <p>). Это, кстати, типичный пример неявной привязки стиля.
Стиль css, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей.
Cтиль переопределения тега <em> :
font-weight: bold >
Текст, помещенный в тег <em>. Web-обозреватель выведет зеленым полужирным шрифтом.
Атрибут стиля font-weight задает степень "жирности" шрифта.
У атрибута font-weight есть значение bold. — полужирный шрифт.
Cтиль переопределения тега <body> :
color: #FFFFFF >
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.
А теперь рассмотрим совсем другой стиль:
Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега <redtext> не существует.
Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут class, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
<p>Привет!</p>
Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Привет!". В результате этот абзац будет набран красным шрифтом.
Листинг 8.2
attention < color: #FF0000;
font-style: italic >
<p><strong class="attention">Стилевой класс требует явной привязки
атрибутом тега class</strong></p>
В листинге 8.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу <strong>. В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег <strong>. а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута class можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)
Листинг 8.3
attention < color:#FF0000;
font-style-style: italic >
<p><strong class="attention bigtext">Стилевой класс требует явной привязки
атрибутом тега class</strong></p>
В примере из листинга 8.3 мы привязали к тегу <strong> сразу два стилевых класса: attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large — большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)
Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.
<p id="bigtext">Это большой текст.</p>
абзац "Это большой текст" будет набран крупным шрифтом.
Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.
Чтобы их понять, рассмотрим несколько примеров.
Начнем с самого простого комбинированного стиля:
<p><em>Этот текст</em> станет синим.</p>
<p>А этот не станет.</p>
<p><strong>Этот</strong> — тоже.</p>
Здесь слова "Этот текст" будут набраны синим шрифтом.
Вот еще один комбинированный стиль css:
font-size: smaller >
Имя тега <p> скомбинировано с именем стилевого класса mini. Значит, данный стиль css будет применен к любому тегу <p>, для которого указано имя стилевого класса mini.
Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.
<p>Маленький красный текстик.</p>
И последний пример комбинированного стиля css:
p.sel <strong> < color: #FF0000 >
Этот стиль будет применен к тегу <strong>, находящемуся внутри тега <p>, к которому привязан стилевой класс sel. В данном примере слово "Этот" будет выделено красным цветом.
<p><strong>Этот</strong> текст станет красным.</p>
Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:
H1. redtext, p em <strong> < color: #FF0000 >
Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега <h1>, стилевой класс redtext и комбинированный стиль p em. Все они задают красный цвет шрифта.
Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы. Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.
Определение встроенного стиля css указывают в качестве значения атрибута style нужного тега, который поддерживается практически всеми тегами:
<p style="font-size: smaller; font-style: italic">Маленький - курсивчик.</p>
Ранее мы упомянули, что в некоторых случаях значение атрибута стиля css нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.
Встроенные стили css применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web-страницы (очень редко) и во время экспериментов со стилями.
Далее мы рассмотрим еще одну разновидность стилей CSS. А пока что закончим с ними и приступим к рассмотрению таблиц стилей.
