CSS — что это такое

Вводная статья про CSS, из которой Вы познакомитесь с общими понятиями, что такое CSS, для чего он нужен. Кратко познакомимся с его синтаксисом и возможностями. Начнем с определения


Оглавление

1. Определение CSS

2. Цели и задачи CSS

3. Синтаксис CSS (селекторы)

4. Как и где задавать стили CSS

5. В чем плюсы использования CSS

6. Проблемы CSS с браузерами

7. Ответы на часто задаваемы вопросы

 7.1. Что такое CSS3

 7.2. В чём разница между CSS и HTML

1. Определение CSS

CSS (от англ. “Cascading Style Sheets”, каскадные таблицы стилей) — список стилей для сайта на html

Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например, любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п. Все, что связано с форматированим текста делается через CSS.

Но это лишь малая часть из возможностей. За всю визуализацию всех тегов html отвечает CSS. Даже за динамические изменения: выпадающие меню, подсвечивания ссылок при наведении.

Список всех стилей на языке вебмастеров часто называют “таблица стилей CSS”.

2. Цели и задачи CSS

  • Сделать сайт более красивым (в плане дизайна), сделать дружелюбный интерфейс, да и просто, чтобы сайты хоть как-то отличались друг от друга
  • Отделить код html от кода описания стилей и дизайна

3. Синтаксис CSS (селекторы)

Каждое свойство и стиль описывается через “Селекторы”. Его синтаксис следующий

Селектор{
атрибут: значение;
}
Селектор — это может быть название стиля или тега. В фигурных скобках описываются конкретные правила. Описание происходит всегда по одному стандарту: “название атрибута: значение”. Каждое правило должно заканчиваться точкой с запятой.





Например

.название_стиля {
атрибут1: значения1;
атрибут2: значения2;
...
};

Существует множество вариантов задания стилей CSS. Давайте разберем самые популярные на примерах.

/*Задание общего стиля*/
.global_style {
font-size: 12px;
color: red;
}
/*Задание общего стиля только для тега font*/
font.style1 {
font-size: 10px;
color: blue;
}
/*Задание общего стиля только для тега font*/
#global_style2 {
font-size: 14px;
color: red;
}

h1 {
font-size: 19px;
}

Стиль global_style можно использовать для всех тегов в качестве класса. Например, <div class=”global_style”>.

Стиль style1 можно использовать только для тега <font>, поскольку в определении было указано font.style1.

Третий вариант задания через решетку (#). Как и в первом случае он определен для всех элементов, но задавать его нужно не через class, а через атрибут id: <div id=”global_style2″>

В последнем варианте мы просто указали название тега <h1> и прописали ему стиль. Это значит, что теперь все теги <h1> будут наследовать значение этого стиля.

4. Как и где задавать стили CSS

Стиль задается в мета тегах head с помощью тега <style>:

<html>
<head>
<style type="text/css">
.styletest {
color: blue;
font-size:12px;
font-family:Arial;
}
</style>
</head>
<body>
...
Тело страницы
...
</body>
</html>

Но это плохо, т.к. загромождается код описаниями стилей. К тому же, если этот код одинаковый для всех страниц сайта, то чтобы поменять его везде, придется повозиться. Поэтому используют специальные файлы с расширениями .css, куда заносятся все стили. Далее этот файл подключается к странице сайта с помощью тега <link> в разделе head:

<head>
...
<link rel="stylesheet" type="text/css" href="style.css"/>
...
</head>

Преимуществом такого подхода является так же и то, что этот файл кэшируется браузерами, что снижает “вес” сайта, тем самым он быстрее грузится. А это сейчас очень важно для SEO. См. как увеличить скорость загрузки сайта






5. В чем плюсы использования CSS

  • Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
  • Это единственный способ изменять дизайн на сайте
  • Простой синтаксис языка

6. Проблемы CSS с браузерами

Старые браузеры поддерживают не все возможности CSS. С этим возникают проблемы отображения. Например, эффект, который был задуман для лучшего восприятия контента, может привести к обратному эффекту. Если какое-то свойство не поддерживается, то есть риски наложения блоков, текстов друг на друга и т.п.

Частично эту проблему решают “префиксы”. По сути это просто слово стоящее перед аргументом в таблице стилей. Для каждого браузера существует свой префикс.

  • -moz- для браузера Firefox
  • -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
  • -ms- для браузера Internet Explorer
  • -o- для браузера Opera

7. Ответы на часто задаваемы вопросы

7.1. Что такое CSS3

В последнее время часто можно встретить понятие CSS3. По сути это все тот же CSS, но с набором новых аргументов, которые дают дополнительные возможности в плане различных эффектов. Например, свечение текста. Многие браузеры не поддерживают такие свойства, поэтому рекомендуется использовать такие эффекты в минимальных количествах.

7.2. В чём разница между CSS и HTML?

HTML — это каркас вашей страницы (это ссылки, картинки, контент). А в CSS определяется то, как все это будет отображаться для пользователя. Так что HTML и CSS это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.




Читайте также:

• Что такое JavaScript

• Что такое HTML

• Свойство font

• Коды символов для HTML

• Свойство position relative

• CSS border

• CSS background

• CSS transition


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.