02. Принципы работы CSS.
Для начала немного теории о CSS:
Однако, для небольших тестовых учебных задач вполне допустимы и другие способы. Рассмотрим их.
Стили конкретного объекта, определенные с помощью атрибута style
Именно такой подход мы использовали, когда изучали технологию HTML. Достоинство этого подхода - быстрота для решения мелких разовых простых малонужных задач.
Например, наш мудрый начальник дает нам задание: нарисовать два квадрата, причем необходимо, чтобы один был большой, а другой - зеленый.
Немного подумав, кодируем примерно так:
Вроде как нечто похожее на то, что хотел начальник.
Но вот такой подход, с использованием атрибута style - это не есть использование технологии CSS, это есть подход чистого HTML-кодировщика.
Стили, определенные на страничке HTML в области <head>
Этот подход уже шаг вперед к технологии CSS!
Теперь в области <head> мы создаем специальный раздел <style> и определяем классы:
Имена классов следует стараться давать так, чтобы из названия класса можно было бы интуитивно догадаться о его сути. В нашем случае мы создали следующие классы:
Этот подход гораздо более элегантен и является важным промежуточным звеном на пути к настоящей технологии CSS, до которой нам осталось сделать еще один шаг...
Стили, определенные в файлах стилей *.css
Теперь, те определения классов, которые мы делали ранее в области <head> файла *.html выносим в файл *.css и подключаем его следующим образом:
Наши тестовые учебные примеры после данного урока:
css_002_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_001.zip ← скачайте пример, чтобы установить на свой сайт...
css_002_002.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_002.zip ← скачайте пример, чтобы установить на свой сайт...
css_002_003.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_003.zip ← скачайте пример, чтобы установить на свой сайт...
Особое внимание обратите на третий пример данного урока, именно он и демонстрирует на простейшем материале мощь технологии CSS. Если, например, завтра потребуется установить эти квадраты на других страничках, то это будет сделать намного проще, чем с использованием подходов в примерах 1 и 2.
Теперь в виде небольшого полезного развлечения под конец урока посетим интересный сайт по данному адресу:
Ведущий сайта CSS Сад Зэн, большой фанат технологии CSS, создал страничку HTML без всяких стилей и предложил всем желающим создать к ней свои стили и прислать ему их в файле *.css
В результате получилась забавная коллекция из многих сотен примеров, где один и тот же текст неузнаваемо преображается при подключении разных стилей.
Вам, как новичку в технологии CSS, я советую для начала поиграться с нашими квадратами (так как этот пример несколько проще), а затем уже принять участие в конкурсе сайта CSS Сад Зэн, если будет такое желание. Кто знает, может в вас спит великий дизайнер, и вы займете первое место на этом конкурсе? Во всяком случае, изучить многочисленные примеры конкурентов будет весьма полезно.
- Что такое CSS - CSS есть сокращение (начальные буквы) от термина "Cascade Styles Sheets" ("Таблицы Каскадных Стилей"). Под каскадностью здесь следует понимать следующие особенности технологии CSS. Множественность источников (встроенные стили браузеров, стили из файлов стилей *.css, стили, определенные на страничке HTML в области <head>, стили конкретного объекта, определенные с помощью атрибута style). Приоритетность (для конкретного свойства определенного элемента из разных источников могут быть определены разные характеристики, это противоречие решается путем вытеснения параметрами из более слабых по приоритетности источников параметрами из более сильных).
- CSS отвечает на вопрос "Как?" - Технология HTML отвечает на вопрос "Что?" (в смысле, что именно отображать на веб странице), а технология CSS отвечает на вопрос "Как?" (в смысле, как именно отображать на веб странице ту информацию, которая предоставлена средствами HTML).
- Технология CSS была создана для HTML версии 4 - теперь технология CSS признана перспективной, и для версии HTML 5 продолжает развиваться. Технология CSS позволяет решить главную проблему веб дизайна, которая существовала до HTML версии 4 - невозможность быстро изменить дизайн группы веб страничек.
- Внешние файлы *.css - позволяют быстро и эффективно изменять дизайн сразу для большой группы веб страничек. Именно по этой причине технология CSS так понравилась всем дизайнерам в мире. Дизайнер вносит простое изменение в один единственный файл *.css, и это изменение сказывается сразу на многих страничках *.html, страшно даже представить, сколько времени бы наш дизайнер затратил, работая по старинке, правя каждый файл *.html вручную.
Однако, для небольших тестовых учебных задач вполне допустимы и другие способы. Рассмотрим их.
Стили конкретного объекта, определенные с помощью атрибута style
Именно такой подход мы использовали, когда изучали технологию HTML. Достоинство этого подхода - быстрота для решения мелких разовых простых малонужных задач.
Например, наш мудрый начальник дает нам задание: нарисовать два квадрата, причем необходимо, чтобы один был большой, а другой - зеленый.
Немного подумав, кодируем примерно так:
<div style="width: 100px; height: 100px; float: right; outline: 1px solid #909090; padding: 11px 12px 13px 14px; margin: 11px 12px 13px 14px; background-color: #00FF00;"> Квадрат Зеленый </div> <div style="width: 200px; height: 200px; float: right; outline: 1px solid #909090; padding: 11px 12px 13px 14px; margin: 11px 12px 13px 14px; background-color: #FFFFFF;"> Квадрат Большой </div>
Квадрат Зеленый
Квадрат Большой
На практике получается следующий результат →
Вроде как нечто похожее на то, что хотел начальник.
Но вот такой подход, с использованием атрибута style - это не есть использование технологии CSS, это есть подход чистого HTML-кодировщика.
Стили, определенные на страничке HTML в области <head>
Этот подход уже шаг вперед к технологии CSS!
Теперь в области <head> мы создаем специальный раздел <style> и определяем классы:
<style>
.sq_uni {
float: right;
outline: 1px solid #909090;
padding: 11px 12px 13px 14px;
margin: 11px 12px 13px 14px;
}
.sq_big {
width: 200px;
height: 200px;
background-color: #FFFFFF;
}
.sq_green {
width: 100px;
height: 100px;
background-color: #00FF00;
}
</style>
- sq_uni - Класс Квадрат Универсальный. Этот класс следует применять к любому квадрату.
- sq_big - Класс Квадрат Большой. Этот класс следует применять для создания больших квадратов.
- sq_green - Класс Квадрат Зеленый. Этот класс следует применять для создания зеленых квадратов.
<div class="sq_uni sq_green"> Квадрат Зеленый </div> <div class="sq_uni sq_big"> Квадрат Большой </div>
Стили, определенные в файлах стилей *.css
Теперь, те определения классов, которые мы делали ранее в области <head> файла *.html выносим в файл *.css и подключаем его следующим образом:
<link rel="stylesheet" href="css_002_003.css" type="text/css" /> </head>
css_002_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_001.zip ← скачайте пример, чтобы установить на свой сайт...
css_002_002.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_002.zip ← скачайте пример, чтобы установить на свой сайт...
css_002_003.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_002_003.zip ← скачайте пример, чтобы установить на свой сайт...
Особое внимание обратите на третий пример данного урока, именно он и демонстрирует на простейшем материале мощь технологии CSS. Если, например, завтра потребуется установить эти квадраты на других страничках, то это будет сделать намного проще, чем с использованием подходов в примерах 1 и 2.
Теперь в виде небольшого полезного развлечения под конец урока посетим интересный сайт по данному адресу:
Ведущий сайта CSS Сад Зэн, большой фанат технологии CSS, создал страничку HTML без всяких стилей и предложил всем желающим создать к ней свои стили и прислать ему их в файле *.css
В результате получилась забавная коллекция из многих сотен примеров, где один и тот же текст неузнаваемо преображается при подключении разных стилей.
Вам, как новичку в технологии CSS, я советую для начала поиграться с нашими квадратами (так как этот пример несколько проще), а затем уже принять участие в конкурсе сайта CSS Сад Зэн, если будет такое желание. Кто знает, может в вас спит великий дизайнер, и вы займете первое место на этом конкурсе? Во всяком случае, изучить многочисленные примеры конкурентов будет весьма полезно.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
