Если вы хотите создавать дизайн для сайтов самостоятельно, не пользуясь шаблонами и услугами специалистов, вам стоит изучить CSS. На данный момент это один из самых лучших языков, позволяющих сверстать полноценный сайт
Если вы создали HTML-сайт и активно его развиваете, у вас, возможно, возникла одна проблема: проблема дизайна.
Создать новую страницу на HTML несложно: достаточно скопировать код и вставить на место старого новый текст. Совсем другое дело, если вы решите отредактировать весь сайт, к примеру, изменив цвет фона, расположение элементов или размер текста. В этом случае вам придется редактировать каждую страницу.
Естественно, чистый HTML-сайт крайне неудобный и громоздкий для веб-мастера. Но решение было найдено. Достаточно простое. Был разработан специальный язык, позволяющий придавать странице определенный вид без лишнего html-кода. Такой "код дизайна" можно было разместить в отдельном файле, на который будет ссылаться каждая страница сайта. Как итог, для изменения дизайна владельцу достаточно было отредактировать лишь один файл.
Таким языком стал CSS ("каскадные таблицы стилей").
Удивительно, но среди людей, знакомых с основами HTML, не найдется и 10% тех, кто знает, что такое CSS, и умеет им пользоваться.
С чего начать изучение CSS?
Для начала - самый простой самоучитель или сайт для новичков. Если вы нашли пошаговую инструкцию, это будет идеальным вариантом.
Для создания файла .css вам не потребуется ничего особенного. Достаточно хорошо знать HTML и иметь на компьютере Блокнот. Полученные файлы .txt достаточно будет просто переименовать.
CSS не отвечает за размещение блоков на странице. Созданный вами файл задает их свойства. В CSS нет тегов и атрибутов. "Таблица стилей" состоит из "правил", которые, в свою очередь, разделены на "селекторы" и "блоки объявления стилей".
Типичное "правило" выглядит так:
h1
{color:#232D38;
font-size:10px;}.
Как видите, "селектор" h1 похож на html-тег h1 (заголовок первого уровня). Это оправдано: "селекторами" являются теги, взятые без скобок. В нашем случае "блок объявления стилей" задает свойства тегам h1.
color и font-size, в свою очередь, являются "свойством", а то, что идет после двоеточия, "описанием свойства".
Таким образом, из нашего примера получаем, что каждый заголовок первого уровня должен иметь размер 10 пикселей и цвет #232D38.
В одном файле можно прописать бесчисленное количество "правил", в одном "правиле" - бесчисленное количество свойств.
После того, как файл готов, его нужно "прикрутить" к html-странице. Файл вставляется перед тегом /head следующим кодом: link rel="stylesheet" type="text/css" hrеf="style.css".
Как видите, ничего сложного в языке CSS нет. Все те названия тегов и атрибутов, которые вы использовали в html, вы можете использовать и здесь. Главное - правильно скомпоновать селекторы, свойства и описания и разместить ссылку на файл на странице.
