Ð’ первой чаÑти разговор об иÑпользовании 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-Ñлемент: таблицы, дивы, заголовки, тело, горизонтальные правила, ÑпиÑки ... работает! Ðто позволÑет нам, чтобы дейÑтвительно получить наши Ñтраницы и нашего форматирование под контролем. Итак, давайте поÑмотрим на Ñоздание клаÑÑового гоÑподÑтва, то мы можем обÑудить, как их применÑть.
Вот как можно Ñоздать клаÑÑовое гоÑподÑтво ...
Ð’ нижней чаÑти панели Ñтилей CSS, щелкните Создать правило CSS значок.
Ð’ новое правило CSS поÑвившемÑÑ Ð´Ð¸Ð°Ð»Ð¾Ð³Ð¾Ð²Ð¾Ð¼ окне, выбрать клаÑÑ (можно применить к любой Ñлемент HTML) от выбора типа падение вниз меню.
Ð’ Selector поле Ð˜Ð¼Ñ Ð²Ð²ÐµÐ´Ð¸Ñ‚Ðµ Ð¸Ð¼Ñ Ð½Ð¾Ð²Ð¾Ð³Ð¾ клаÑÑового гоÑподÑтва.
Потому что мы по ÑущеÑтву, ÑÐ¾Ð·Ð´Ð°Ð²Ð°Ñ Ð¿Ñ€Ð°Ð²Ð¸Ð»Ð° клаÑÑа Ñ Ð½ÑƒÐ»Ñ, мы можем назвать их вÑе, что хотите, но убедитеÑÑŒ, что не иÑпользовать пробелы и Ñпециальные Ñимволы в именах клаÑÑового гоÑподÑтва. Ðапример, еÑли вы Ñоздаете правило клаÑÑа Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ñ Ð³Ñ€Ð°Ñ„Ð¸ÐºÐ¾Ð¹, вы могли бы назвать ваше правило "ImageController" или "PictureFixerUpper". ЕÑли вы Ñоздаете боковой панели, то Ð¸Ð¼Ñ Ð²Ð°ÑˆÐµ правило "боковой". Ð˜Ð¼Ñ Ð¸Ð¼, как вам нравитÑÑ, и иÑпользовать имÑ, которое полезным и значимым!
Ð’ нижней чаÑти диалогового окна, решите, хотите ли вы, чтобы Ñохранить правило внутренней таблицы Ñтилей "Ðтот документ лишь" или на внешних таблиц Ñтилей "Ðовый файл таблицы Ñтилей".
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-Ñлементов:
Ðа Ñтранице, одним щелчком мыши на объект, который вы хотите отформатировать. Ðапример, еÑли Ñто заголовок или абзац, который вы хотели бы формате, проÑто ÐºÐ°Ð¿Ð»Ñ ÐºÑƒÑ€Ñор в текÑÑ‚. ЕÑли Ñто Ñтол, дел, или изображение, убедитеÑÑŒ, что выбран объект. Иногда, иÑпользование тегов Selector в Ñтроке ÑоÑтоÑÐ½Ð¸Ñ Ð² левом нижнем углу очень удобно, когда вы пытаетеÑÑŒ выбрать Ñти крупные Ñлементы. ÐезавиÑимо от того, что вы хотите отформатировать, Ð¸Ð´ÐµÑ Ð·Ð´ÐµÑÑŒ ÑоÑтоит, чтобы выбрать его.
Из клаÑÑа меню в инÑпекторе ÑвойÑтв, выберите клаÑÑового гоÑподÑтва. Ðто отноÑитÑÑ Ð²Ð°Ñˆ клаÑÑ Ð¿Ñ€Ð°Ð²Ð¸Ð»Ð¾ к выбранному объекту. Обратите внимание, что тег Selector теперь указывает HTML Ñлемент, который вы выбрали, а также Ð¸Ð¼Ñ Ð²Ð°ÑˆÐµÐ³Ð¾ клаÑÑа правило, предшеÑтвовать период. Ðапример,
. Notice that the rule name in code is not proceeded by a period.
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).
Как и прежде, выбрать клаÑÑ Ð¿Ñ€Ð°Ð²Ð¸Ð»Ð¾ из инÑпекторе ÑвойÑтв. Разница в том, что теперь только выбранное Ñлово или предложение, получает отформатирован. Проверьте теги Selector, и Ñкажу вам, что проиÑходит. Теперь он читает поÑледовал период и Ð¸Ð¼Ñ Ð²Ð°ÑˆÐµÐ³Ð¾ клаÑÑа правила, например
Знание и понимание, и не только, как Ñоздать правила клаÑÑа, но и Ð´Ð²ÑƒÐ¼Ñ ÑпоÑобами их Ð¿Ñ€Ð¸Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð±ÑƒÐ´ÐµÑ‚ дейÑтвительно увеличить вашу ÑпоÑобноÑть Ñтроить и развивать большое выглÑдÑщие Ñайты. СчаÑтливые Stylin '!
УглубитьÑÑ Ð² CSS Ñ Ð¸Ð·ÑƒÑ‡ÐµÐ½Ð¸Ñ CSS .
You must be logged in to comment.