Что нужно знать о комментариях в css

Основы работы с языком CSS

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

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

Файл со стилями должен иметь расширение .css . Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:

В следующем примере к нашему HTML файлу подключается CSS файл styles.css :

Создайте и подключите ко всем вашим страницам файл styles.css .

Как работать с CSS

Каждому тегу в HTML соответствует так называемый CSS. К примеру, тегу <p> соответствует CSS селектор p , с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

После селектора следует ставить фигурные скобки, внутри которых следует писать CSS . Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте, например, покрасим все абзацы в красный цвет:

В вашем файле styles.css разместите код, красящий абзацы в красный цвет. Откройте страницы вашего сайта в браузере и убедитесь в том, что все абзацы стали красными.

Другие значения для цвета

Помимо ключевого слова red , задающего красный, можно использовать и другие английские слова для цвета, например, green — зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.

Используя соответствующие селекторы покрасьте заголовки h1 в зеленый цвет, заголовки h2 в голубой, заголовки h3 — в красный, а абзацы — в оранжевый.

ШАГ 2: изменяем цвета

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

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

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

селектор (в нашем примере: “body”), которые
говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются
‘color’ и ‘background-color’), которое указывает что именно мы
устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое
устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы
установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

Чем комментарии могут помочь программисту

Комментарии, в зависимости от ситуации, делают сразу несколько полезных вещей:

Помогают быстрее разобраться в коде — если появилась ошибка или нужно что-то изменить d программе

Это важно и разработчику, и тем, кто будет заниматься кодом после него.
Не дают запутаться в логике — при создании новых библиотек, процедур, функций и системных переменных.
Объясняют результаты работы — при отладке или проверке программы. Это понимание необходимо тестировщикам из отдела QA.
Описывают сложные алгоритмы и формулы — в математических, физических или экономических расчётах и других сложных вычислениях

Это позволяет разобраться в готовом коде тем, у кого нет глубоких знаний в какой-то предметной области.

Учебные ресурсы CSS.

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

Codecademy

Около 500 000 из этих людей прошли курс CSS. На это уходит около 15 часов, и вы должны будете взять их введение в курс HTML как предварительное условие.Таким образом, вы изучаете CSS примерно на 22 часа.Codecademy научит , как оформлять веб-страницы с помощью файловых структур, редактирования текста, цветов и различных макетов. Вы можете использовать эти навыки для настройки ваших веб-страниц.Класс также охватывает:

CSS селекторы
Визуальные правила
Модель блока
Отображение
Позиционирование
Типографика
CSS grids

Как видно из этого списка, некоторые из этих тем мы обсуждали в этом руководстве. Таким образом, у вас уже есть базовое понимание некоторых принципов, что даст вам преимущество.У вас будет доступ к некоторым из этих курсов бесплатно, но для получения полного опыта я бы рекомендовал перейти на профессиональную версию Codecademy.Цена составляет $ 19,99 в месяц за годовой контракт, что является лучшей сделкой, которую они имеют. В противном случае вы бы заплатили 29,99 или 39,99 долл. США за контракт на шесть месяцев или месяц к месяцу соответственно.

W3Schools

Нравится этот ресурс, потому что прост и практичен.Сначала объясняют, как работает определенная функция или свойство, а затем показывают пример. После этого разрешают практиковаться с этими примерами, внося изменения в CSS самостоятельно.На сайте W3Schools есть более 300 различных примеров CSS. Вы можете проверить все это с их редактором.Воспользуйтесь их шаблонами CSS, упражнениями CSS и тестами CSS.Для тех, кто интересуется веб-разработкой или веб-дизайном, также можете получить сертификат CSS от W3Schools. Хотя за это придется заплатить.После завершения обучения вы можете сдать экзамен на 70 вопросов, который будет 70 минут. Если ответите правильно на 75% этих вопросов, пройдете и получите сертификацию. Если получите 95% правильных ответов, к сертификату также будет добавлена нотация превосходства.Программа сертификатов CSS от W3Schools стоит 95 долларов.

Для чего нужно отделять содержимое от оформления

Классический принцип «разделяй и властвуй» известен еще со времен Древнего Рима. Он неоднократно позволял достигать успеха в военно-политических играх деятелям различных эпох. Поможет он и нам.

Изначально HTML использовался для структурирования текста (вот заголовок, вот абзац, а это — список). Отображение конкретных элементов определялось их атрибутами и во многом оставалось на совести браузера. Так как управлять внешним видом все-таки хотелось, стали появляться теги оформления, такие, например, как font или center. В результате содержимое документа и его оформление тесно переплелись между собой. Код стал громоздким, негибким, трудночитаемым. Например, таким:

<h1 align="center">Lorem ipsum</h1>
<font face="Arial, Helvetica, sans-serif" color="#339900" size="2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit
</font>
<hr width="935px" size="1px" color="#92aabd" noshade="noshade" align="left"/>

Очевидные минусы:

много лишних конструкций, не относящихся непосредственно к разметке содержимого — большой размер файла, повышается траффик и время загрузки;
затруднено изменение дизайна. Например, если нужно поменять цвет, придется искать все атрибуты color;
существенные ограничения возможностей форматирования. Многие теги просто невозможно настроить должным образом с помощью одних только атрибутов;
отсутствует возможность подстраивать оформление под различные типы отображающих устройств (монитор ПК, принтер, экран КПК, голосовой браузер и т.д.);
код теряет свою логическую разметку (семантику), и как следствие:
- плохо индексируется поисковыми роботами, ведь им приходится обрабатывать кучу «мусора»;
- значительно ухудшается доступность для пользователей использующих невизуальные браузеры.

Выделение всех правил для оформления в отдельный блок (файл), позволяет решить эти проблемы. Код стает проще, работать с ним значительно легче. Сам HTML становится тем, чем он задумывался — языком смысловой разметки документа:

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

Плюсы использования CSS:

код разделен на содержимое и оформление. Получаем более легкий и понятный код;
файл с оформлением загружается только один раз и кешируется — уменьшается трафик, время загрузки и нагрузка на сервер;
простота самого языка CSS + принцип отделения оформления от содержания — сокращается время на разработку и поддержку сайта;
один CSS управляет отображением множества HTML-страниц. Изменения дизайна делаются быстрее;
CSS предоставляет дополнительные возможности форматирования о которых при использовании только атрибутов не приходилось и мечтать;
реализован механизм подключения разных CSS для разных типов отображающих устройств;
повышение совместимости с разными платформами за счет использования веб стандартов.

Когда нужны пояснения в коде, а когда — нет

Бывает, что одних документирующих комментариев недостаточно и нужно добавить пояснения внутри процедур или функций. Такие комментарии облегчают понимание кода — рассказывают, почему автор программы сделал что-то так, а не иначе.

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

Если вы вставили промежуточные комментарии для отладки или объяснения результатов, после окончания работы их нужно убрать. Иначе они будут захламлять код.

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

После отладки их лучше удалить, оставив строки:

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

Но бывают исключения. Допустим, разработчик попробовал несколько вариантов решения и выбрал один, не самый очевидный. Потом забыл ход своих мыслей, открыл код и решил использовать «более правильный и оптимальный вариант». И тут он понимает, что новое решение хуже старого; более того, раньше он уже это пробовал делать. Приходится откатывать всё назад. Чтобы не попасть в такую ситуацию, пишите поясняющие комментарии.

Пример на языке JavaScript:

Здесь и сам метод Number.isFinite (), и глобальная функция isFinite () проверяют, является ли параметр value конечным числом (то есть не ± ∞). Но если value = null, то isFinite (value) возвращает true, а Number.isFinite (value) возвращает false. Поэтому Number.isFinite (value) нельзя менять на isFinite (value).

Обязательно комментируйте код, если в нём есть какие-то тонкости и неочевидные вещи. Например:

Это неудачный комментарий: непонятно, зачем количество умножать на 2.

Правильно будет так:

Вендорные префиксы

При работе с несколькими браузерами настоятельно рекомендуется добавлять префиксы для нестандартных CSS свойств в целях профилактики разного поведения браузеров.

Цель вендорных префиксов — избежать неверного исполнения кода.

В CSS следующие префиксы:

Chrome: -webkit-
Firefox: -moz-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Например, если вы хотите добавить свойство transition в ваш код, скопируйте его пять раз и разместите соответствующие вендорные префиксы перед названием свойства.

Посмотрите на код ниже.

-webkit-transition: all 6s ease;-moz-transition: all 6s ease;-ms-transition: all 6s ease;-o-transition: all 6s ease;transition: all 6s ease;

Связывание таблиц стилей с HTML-кодом

Подключение с использованием тега <link>

Самым распространенным методом добавления (связывания) внешней таблицы стилей с документом является использование тега <link>.
Элемент <link> определяет связь между документом и внешним ресурсом.

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

HTML тег <link> имеет следующий синтаксис:

<link  rel = "stylesheet" href =  "styles.css"> /* синтаксис HTML 5 */
<link  rel = "stylesheet" href =  "styles.css" type =  "text/css"> /* синтаксис HTML 4.01 */

Сразу хочу обратить ваше внимание на то, что атрибут type, который определяет MIME-тип, используемого файла (в нашем случае текстовый файл таблиц стилей) не является обязательным в HTML 5.
Для всех типов документов в HTML 5 необходимы лишь два обязательных атрибута:

rel = «stylesheet» — определяет отношение между текущим документом и связанным документом на который ведёт ссылка (в нашем случае таблица стилей).
href — задает URL-адрес местонахождения внешнего файла. Адрес может быть как относительный, так и абсолютный.

Подключение с использованием правила @import

CSS правило @import используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset, которое задает кодировку символов, используемую в таблице стилей.

Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML тега <link>, или с использованием встроенного в CSS правила @import, которое по-большому счету делает то же самое. Оба варианта позволяют присоединить таблицы стилей к веб странице.

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

Импортирование к внешней таблице стилей

Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц стилей к одной внешней таблице стилей:

/* Содержимое файла anyname.css */
@import url("color.css"); /* импортируем в основной файл содержимое первого файла css */
@import url("fonts.css"); /* импортируем в основной файл содержимое второго файла css */
/* стили, которые находятся в основном файле css */
селектор {
свойство: значение;	
}
...
/* Конец содержимого файла anyname.css */

Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо внутри файла к которому добавляется содержимое объявить
правило @import и указать URL путь к этому файлу. Чтобы задать путь необходимо после правила @import указать url(«path/to/file»).
При этом путь, который указывается в круглых скобках может быть как абсолютным, так и относительным.
Информацию о том как задавать абсолютные и относительные пути вы можете узнать в статье учебника HTML 5 «HTML ссылки».

Как и с помощью нескольких тегов <link> вы можете разместить несколько правил @import, чтобы присоединить необходимое количество внешних таблиц стилей.

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами и не импортированы в файл

Импортирование к внутренней таблице стилей

Кроме того, с использованием правила @import существует возможность привязать внешние таблицы стилей к внутренней таблице стилей документа. Для этого необходимо объявить правило или правила сразу после открывающего тега <style>:

<!DOCTYPE html>
<html>
<head>
	<title>Импортирование файла к внутренней таблице стилей</title>
<style>
@import url("color.css"); /* импортируем к внутренней таблице стилей документа содержимое первого файла css */
@import url("fonts.css"); /* импортируем к внутренней таблице стилей документа содержимое второго файла css */
h1 {
text-align: center; /* выравниваем заголовок по центру */
color: red; /*устанавливаем цвет текста красный */
}
</style>
</head>
<body>
	<h1>Заголовок первого уровня.</h1>
	<p>Абзац для примера.</p>
</body>
</html>

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Вывод.

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