В первой части разговор об использовании CSS в Dreamweaver , я представил краткое изложение на несколько ключевых основ, например, какие стили, как они работают, какие таблицы стилей. Помните, что стиль (называемый также «правило») это просто набор свойств форматирования и стилей список стилей.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

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

Вот как можно создать классовое господство ...

Шаг - 1

В нижней части панели стилей CSS, щелкните Создать правило CSS значок.

Шаг - 2

В новое правило CSS появившемся диалоговом окне, выбрать класс (можно применить к любой элемент HTML) от выбора типа падение вниз меню.

Шаг - 3

В Selector поле Имя введите имя нового классового господства.

Потому что мы по существу, создавая правила класса с нуля, мы можем назвать их все, что хотите, но убедитесь, что не использовать пробелы и специальные символы в именах классового господства. Например, если вы создаете правило класса для управления графикой, вы могли бы назвать ваше правило "ImageController" или "PictureFixerUpper". Если вы создаете боковой панели, то имя ваше правило "боковой". Имя им, как вам нравится, и использовать имя, которое полезным и значимым!

Шаг - 4

В нижней части диалогового окна, решите, хотите ли вы, чтобы сохранить правило внутренней таблицы стилей "Этот документ лишь" или на внешних таблиц стилей "Новый файл таблицы стилей".

Шаг - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

Обратите внимание, что новое правило появляется в верхней части панели CSS Styles. Обратите внимание также, что название вашей правила предшествуют период / полной остановки. Имена класса правило должно быть всегда исходила от периода, а если вы не ставите в один, когда вы именовании правило (как мы делали в шаге 3), то Dreamweaver будет придерживаться период в автоматическом режиме.

Теперь, когда вы создали классового господства, пришло время применить его на протяжении вашей странице. Как уже упоминалось ранее, в отличие от переопределены HTML элементы, правила класса должны применяться вручную в документе. В зависимости от того, как применить правило, либо уровня блока или встроенный HTML-элементов, вы получите разные результаты на вашей странице. Давайте рассмотрим несколько способов сделать это.

Вот как можно применить форматирование к блочным HTML-элементов:

Шаг - 6

На странице, одним щелчком мыши на объект, который вы хотите отформатировать. Например, если это заголовок или абзац, который вы хотели бы формате, просто капля курсор в текст. Если это стол, дел, или изображение, убедитесь, что выбран объект. Иногда, использование тегов Selector в строке состояния в левом нижнем углу очень удобно, когда вы пытаетесь выбрать эти крупные элементы. Независимо от того, что вы хотите отформатировать, идея здесь состоит, чтобы выбрать его.

Шаг - 7

Из класса меню в инспекторе свойств, выберите классового господства. Это относится ваш класс правило к выбранному объекту. Обратите внимание, что тег Selector теперь указывает HTML элемент, который вы выбрали, а также имя вашего класса правило, предшествовать период. Например, . Если бы мы посмотрим на этот пример в представлении кода, она будет выглядеть следующим образом:

. Notice that the rule name in code is not proceeded by a period.

Шаг - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

Шаг - 9

Как и прежде, выбрать класс правило из инспекторе свойств. Разница в том, что теперь только выбранное слово или предложение, получает отформатирован. Проверьте теги Selector, и скажу вам, что происходит. Теперь он читает последовал период и имя вашего класса правила, например . В представлении кода, было бы читать . Является встроенный элемент. Как видите, те же HTML атрибут используется (типа), и синтаксис точно такой же, как это было ранее, но мы получаем очень разные результате на нашей странице.

Знание и понимание, и не только, как создать правила класса, но и двумя способами их применения будет действительно увеличить вашу способность строить и развивать большое выглядящие сайты. Счастливые Stylin '!

Углубиться в CSS с изучения CSS .