Каскадная таблица стилей CSS. Часть 2.

Как работает каскадная таблица стилей CSS в Dreamweaver.

В предыдущем уроке Вы уже научились подключать каскадную таблицу стилей css в Dreamweaver. И в этом уроке я хочу Вам показать сам принцип работы таблицы стилей, а именно как ее применить к любому сайту. И как Вы уже должны понять, я буду это делать в одном, но наиболее подходящем HTML редакторе под названием Dreamweaver.

Данной программой я сам уже давно пользуюсь и когда я был таким же новичком, какими возможно являетесь и Вы, то я сразу выбрал именно эту программу так как, на мой взгляд, создавать свои сайты в Dreamweaver может даже новичок не понимающий в сайтостроении. И в этом уроке я покажу, как работает css на сайте.

Перед тем как начать, у Вас уже должен быть создан файл CSS в Dreamweaver, если нет, то сделайте это, перейдя по ссылке в конце статьи - предыдущий урок.

Если таблица стилей css уже создана и подключена в Dreamweaver, то я могу уже начинать урок, который будет направлен на то, как эту самую таблицу применить к контенту, который находится, или будет находиться на сайте.

Итак, приступим.

Откройте справа меню "Стили CSS" (если данного меню у Вас нет, то зайдите в самое верхнее меню программы во вкладку "Окно" и нажмите "Стили CSS"). После, у Вас откроется окошко. Здесь нажмите на тот значок, на который показывает стрелка.

Создать новый стиль в файле css

После этого, у Вас появится окно, в котором в самом верху, нужно Вам выбрать "Контекстуальный тип селектора для правила CSS". Там есть несколько вариантов: класс (применимо к любому элементу HTML); идентификатор (применимо только к одному элементу HTML); тег (переопределяет элемент HTML); компоновка (на основании выделенного элемента). Вы выберете тот, который показан на скриншоте. Ниже Вы должны ввести имя селектора, которое обязательно должно начинаться с точки и далее должен идти текст английскими буквами. Введите любое название. Внизу данного окна должен быть тот файл css, который Вы уже создали на компьютере. Если его там нет, то нажмите на строку и выберете данный файл.

Дать имя новому селектору css

После того, как Вы все сделали, то теперь нажимаете на "ОК". После этого появиться окно, в котором Вы будете создавать стиль css, который Вы потом можете применить к любому элементу на сайте. Здесь обратите внимание на "Категории" слева, а справа находятся стили css, которые относятся к данной выбранной категории. И первой категорией будет "Тип". Здесь в строке Font-family-нужно выбрать название шрифта, Font-size-нужно выбрать размер текста в пикселях, Font-weight-нужно выбрать жирность текста (возьмите normal, то есть обычный текст), Color-выберете цвет текста, Text-decoration-вид текста (зачеркнутый, подчеркнутый, обычный и т.д.), можете попробовать поэкспериментировать. Остальное в этой категории используется очень редко, и поэтому я про них не буду рассказывать.

Определение правила css - категория Тип

Все, далее переходим к следующей категории "Фон". Здесь у Вас справа будут такие возможности стиля фона, как Background-color-цвет фона; Background-image-фон в виде картинки. То есть, Вы можете выбрать либо цвет фона, либо картинку фона. Выбор за Вами. Остальные стили более сложные и применяются редко, поэтому я их опущу. После того как Вы сделали стиль фона переходим в категорию "Блок".

Определение правила css - категория Фон

В категории "Блок" есть 2 основных стиля. 1-й стиль: Text-align-выровнять текст справа, слева, в центре. 2-й стиль: Vertical-align-выровнять текст сверху, выровнять текст снизу, выровнять другой элемент сверху и т.д. Остальные настройки стилей в "Блоке" применяются редко. Я их рассматривать не буду.

Определение правила css - категория Блок

После того, как Вы выбрали выравнивание, переходим в последнюю категорию "Рамка". В данной категории настройки стилей будет применяться к таблицам на сайте. Width, Height - автоматическое выравнивание по ширине и по высоте. Float - обтекать с выравниванием по левому краю, по правому краю, Clear-с какой стороны запрещено обтекать данный элемент на сайте и т.д. Padding-отступы элементов внутри таблицы. Margin-отступы за пределами таблицы, то есть отступ самой рамки таблицы, относительно других элементов на странице сайта.

Остальные 4 "Категории" я не буду рассматривать, так как они встречаются реже, да и сам я ими не пользуюсь. Если Вам будет интересно, то можете сами остальное попробовать, что да как. Если Вы все сделали, как Вам нужно, то нажмите "ОК". Кстати, если Вы будете в этих категориях изменять какое-то значение каскадной таблицы стилей, то при нажатии на Применить Вы можете визуально увидеть введенные изменения не выходя из "Категорий стилей css".

Определение правила css - категория Рамка

После того как Вы нажали на "ОК", то в Вашем созданном файле css должен быть примерно такой вид кода каскадной таблицы стилей css.

Стиль css который применяется к любому элементу сайта

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

Стиль css который применяется только к конкретному тегу html

Как Вы видите, что в первом случае есть точка перед селектором Р, что означает, что данное правило css можно применять к любому элементу на сайте, а во втором случае имя селектора без точки начале Р, что означает данное правило будет действительно только к тегу р - абзац. И оно будет применяться автоматически к каждому абзацу на сайте. Если Вы хотите создать еще стили в данном файле css то сделайте заново теже действия и в конце в файле css будет не один стиль а два и т.д. Желательно использовать один файл для всех стилей.

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

Выбрать стиль в Dreamweaver

Теперь, нажимаете по данной строке (показан стрелкой) и откроется выпадающее меню, в котором должно быть то имя селектора, которое Вы создали для стиля css. Нажмите по нему и у вас должен выделенный текст принять тот стиль, который Вы создали в файле стилей css.

Пример применения кода к тексту.

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

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

Если кто хочет изучить css, то можете посмотреть бесплатный видеокурс по CSS от Евгения Попова. Я сам прошел данный видеокурс по css и теперь пользуюсь последним методом создания стилей, так как я уже немного знаю данный код на основе css.

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

Предыдущий урок

Следующий урок

Наверх

Яндекс.Метрика