Создание сайтов – это работа не для людей со слабыми нервами. Помимо знаний нужно обладать креативным мышлением, задатками перфекциониста и филигранной точностью при разметке страницы. CSS в этом вопросе просто незаменим. И знать его основы необходимо каждому вебмастеру.
Что такое CSS?
Тем, кто знаком с HTML, не нужно рассказывать, что это язык разметки страницы. Но его создатели решили добавить в него теги, отвечающие за внешний вид и дизайн. Вот только при таком подходе код страницы становился слишком объемным и практически нечитабельным. Естественно, этот путь вел в никуда, поэтому было принято комплексное решение: HTML отвечает за разметку страниц, CSS – за визуальное оформление.
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадная таблица стилей). Она состоит из параметров, что отвечают за визуальное оформление объектов на странице.
Преимущества CSS
Каскадная таблица стилей позволяет вебмастеру не только создать красивый ресурс, но и сделать код читабельным, значительно сократив его размер. Используя CSS, можно задавать такие параметры, что невозможны в HTML-разметке страницы.
С CSS можно буквально в несколько кликов изменять внешний вид страниц ресурса. Это очень удобно, особенно если сайт многостраничный. Все изменения дизайна производятся в каскадной таблице стилей, а не путем замены параметров на каждой странице ресурса. И только благодаря CSS можно осуществить блочную разметку.
Подключение CSS
Говоря о базовых принципах CSS, первым делом нужно научиться подключать каскадную таблицу стилей к HTML-файлу. Этот процесс достаточно прост. Первым делом необходимо создать HTML-документ. Для тех, кто еще не знает, его создают в программе «Блокнот». Потом при помощи функции «Сохранить как» необходимо задать расширение HTML.
Точно таким же образом создается и каскадная таблица стилей, только файлу следует задать расширение css. Полученный документ нужно сохранить в той же папке, где и HTML файлы. Допустим, документ таблицы стилей носит название style.css. Чтобы подключить его к HTML-документу, необходимо воспользоваться тегом <link>, что отвечает за подключение внешних файлов. Между тегами <head>, необходимо вписать следующее:
Пожалуй, это один из самых удобных способов подключения внешних файлов.
Правило CSS
Изучение CSS разметки должно начинаться с изучения синтаксиса. В каскадной таблице стилей не существует тегов, скриптов или параметров. Здесь есть только правило, которому необходимо следовать. Состоит оно из селектора и блока стилей. Допустим, в каскадной таблице стилей задана позиция: body{background:black; color:white}.
Здесь body и есть селектором, отвечающим за стилевое форматирование тела сайта; background:black и color:white - это свойства и их значения. Они записываются через точку с запятой. Такая позиция делает фон сайта черным, а текст белым.
Селекторы
Что ж, продолжаем интенсивное введение в CSS. Разметку страниц будет достаточно сложно сделать без знаний о селекторах. Если со свойствами и их значениями все понятно, то дополнительные знания о селекторах помогут сделать желаемую разметку страницы.
Что же нужно знать о селекторах? Во-первых, их разновидности:
- Идентификатор. В качестве селекторов могут использоваться названия элементов страниц. В случае, когда, к примеру, необходимо выделить какой-то абзац текста другим цветом, добавляют идентификатор. Его задают параметром id.
Классы. Селектор по классу используется, если для нескольких объектов нужно задать одинаковые параметры. К примеру, для двух абзацев текста необходимо задать красный цвет.
Объектов с классами может быть сколько угодно.
Для одного и того же объекта можно указать и класс, и идентификатор - это не противоречит CSS разметке. Но поскольку идентификатор имеет больший приоритет, то для объекта будет использован именно его стиль. При разметке страницы в CSS это стоит учитывать.
Идентификаторы и классы можно применять для любых объектов. И если возникает необходимость задать один стиль для текста и картинки, то можно не указывать имя элемента, как это было в примере (p#pink, p.red). Можно просто поставить точку или решетку. Также селекторы можно группировать. Например, h1, h2, h3{color:red; font-sixe:17px}.
Разметка страниц
Изучая разметку страниц, можно понять, что существует несколько ее разновидностей:
- Табличная. Когда еще не было каскадной таблицы стилей, эта разметка была основной. Она позволяла максимально точно разместить объекты ресурса друг от друга. Но код получается слишком большим и плохо индексируется поисковиками. Еще один недостаток такого метода – скорость загрузки. Пока не загрузится вся таблица, пользователь не увидит даже начало текста.
- Блочная. Сейчас это основной способ разметки страниц. Его использование стало возможным только благодаря развитию и совершенствованию таблицы стилей.
Преимущества блочной верстки
Блочная разметка страницы средствами CSS имеет несколько неопровержимых преимуществ. Во-первых, стиль объектов находится отдельно от HTML документа, что значительно повышает читабельность кода и позволяет быстро производить визуальные изменения. Во-вторых, есть возможность наложить один слой на другой, а это в несколько раз облегчает процесс позиционирования. Естественно, такие сайты быстрее загружаются и индексируются поисковыми системами. Разметка страницы в CSS позволяет легко задавать современные визуальные эффекты.
Единственный недостаток такого подхода – разное «понимание» браузерами. Некоторые отображают ресурс в таком виде, в каком видит его веб-мастер. Но есть браузеры, что искажают изображение, поэтому при большом количестве классов и селекторов необходимо использовать хаки, что сделают код кроссбраузерным.
Как сделать блочную верстку сайта?
Первое, с чего стоит начать, - с создания макета. Это должно быть обычное изображение с расширением psd. После его создания (приобретения или скачивания) необходимо разрезать изображение на блоки и поместить в одну папку (желательно отдельную). Эти фрагменты будут использоваться, как фон для блоков.
В HTML документе для блочной верстки используют тег <div>. Все, что находится в его пределах, принято называть слоем, и формат этого слоя задается в каскадной таблице стилей при помощи классов или идентификаторов.
Первое, что нужно сделать после того, как макет сайта будет разрезан на части, в HTML задать структуру сайта, используя тег <div>, и присвоить для каждого слоя свой селектор. Например, если это меню, то так и написать: id=menu. После чего нужно подключить каскадную таблицу стилей и задать для каждого слоя свои параметры. Самый простой код имеет следующий вид.
Задаем параметры
На примере хорошо видно, как задаются параметры для блоков CSS. Позиционирование разметки страницы задано в пикселях, хотя в большинстве случаев лучше использовать проценты. В окне браузера этот сайт будет иметь вид «скроенного из разных частей полотна» так как в примере были использован только цвет области блока. Но если заменить его фоновым изображением, то можно получить не только красивый, но и достаточно функциональный продукт.
Между тегами <div> можно писать любую необходимую информацию с нужным форматированием. Любой текст, написанный в пределах этого тэга, сразу же накладывается слоем на форматированный блок. Объекты между <div> будут автоматически уменьшаться, чтобы не выходить за размеры блока.
Этот пример - лишь небольшая часть всего того, с чем должен будет столкнуться веб-мастер, работая над качественными характеристиками ресурса. При создании хорошего веб-ресурса, нередко могут быть использованы хаки для приобретения функции кроссбраузерности. Редактировать коды страниц можно в специальных редакторах, что значительно упрощает работу, хотя не избавляет веб-мастера от необходимости ручного редактирования.
Создать сайт самостоятельно может каждый. Главное - понимать, что и CSS, и HTML были созданы людьми и предназначены для людей. Основы разметки страниц доступны всем, а создание веб-ресурсов не только прерогатива избранных, но и может быть вполне обыденной деятельностью каждого желающего.
