Как использовать css: Основы CSS — Изучение веб-разработки — Программирование на Python и Objective-C в Mac OS

Содержание

Основы CSS — Изучение веб-разработки

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:

p {
  color: red;
}

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.

Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

Селектор (Selector): Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration): Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties): Способы, которыми вы можете стилизовать определённый HTML элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value): Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).

Обратите внимание на важные части синтаксиса:

Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ({}).
В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

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

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Выбор нескольких элементов

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

p,li,h2 {
  color: red;
}

Разные типы селекторов

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

Имя селектора	Что выбирает	Пример
Селектор элемента (иногда называемый селектором тега или типа)	Все HTML элемент(ы) указанного типа.	`p` Выбирает `<p>`
ID селектор	Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.	`#my-id` Выбирает `<p>` или `<a>`
Селектор класса	Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).	`.my-class` Выбирает `<p>` и `<a>`
Селектор атрибута	Элемент(ы) на странице с указанным атрибутом.	`img[src]` Выбирает `<img src="myimage.png">` но не `<img>`
Селектор псевдокласса	Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.	`a:hover` Выбирает `<a>`, но только тогда, когда указатель мыши наведён на ссылку.

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов.

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

Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент <link> где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:
```
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):
```
html {
  font-size: 10px; 
  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
}
```
Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h2> (en-US), <li>, и <p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
```
h2 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

padding, пространство только вокруг контента (например, вокруг абзаца текста)
border, сплошная линия, которая расположена рядом с padding
margin, пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

width (ширину элемента)
background-color, цвет позади контента и padding элементов
color, цвет контента элемента (обычно текста)
text-shadow: устанавливает тень на тексте внутри элемента
display: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

Разбираемся с телом

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для <html> элемента, но не стесняйтесь и экспериментируйте.
padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h2 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h2> (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
Четвёртое значение задаёт основной цвет тени.

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

Центрирование изображения

img {
  display: block;
  margin: 0 auto;
}

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для <body> (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы <body> и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для <img> элемента меньшего значения (например 400 px;).

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое
изучение CSS в первый раз.

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

В конце данной статьи Вы создадите HTML файл который будет
выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при
помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и
CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца
обозначает более расширенную информацию чем остальной текст.

ШАГ 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>
  <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 -->
<h2>My first styled page</h2>

<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.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы
можете изучить Начало работы с HTML. Но сначала пару слов о
структуре нашей HTML страницы.

Тэг “ul” — список состоящий из одной ссылки на каждый элемент
списка. Эта структура послужит нам “навигацией” по нашему сайту
связывая с нами другие страницы нашего гипотетического сайта .
Предполагается, что все страницы нашего сайта будут иметь схожее
или идентичное меню.
Элементы “h2” и “p” задают содержимое уникальное каждой
страницы, в то время как подпись (“address”) снизу снова будет
повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в
XHTML), можно опускать закрывающие тэги </li> и </p>,
что я и сделал в данном случае, для того чтобы было проще текст.
Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “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”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 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” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

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

В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

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

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен
независимо от любого текста который предшествовал или будет
следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают
это расположение. В нашем случае это 2em сверху и 1em от левого
края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего
шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em
будет равняться 24 пунктам. `em` очень полезная единица измерения
в CSS, поскольку может адаптироваться автоматически к шрифту,
используемому браузером. Большинство браузеров имеют возможность
изменять размеры шрифта: вы можете попробовать увеличить или
уменьшить размер и увидеть, что меню будет изменяться в
зависимости от размера шрифта, чего бы не случилось, если бы мы
указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для
указания цвета нам надо создать правило в CSS для “a”. Для того,
чтобы различать посещенные и непосещенные ссылки, CSS
предоставляет два “псевдо-класса” (:link и :visited). Они
называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в
нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на
ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…)
Как положить файлы на сайт зависит от вашего интернет провайдера.

Подключение CSS Стилей — 3 Варианта

Существует 3 способа, как осуществить подключение CSS стилей для вашего сайта: вы можете использовать глобальные стили CSS, добавив CSS правила в контейнер <head> HTML документа, вы можете добавить ссылку на внешний .css файл, содержащий все необходимые правила или использовать внутренний CSS для применения правил к определенному элементу. В этом руководстве мы рассмотрим все три варианта подключения CSS, узнаем их достоинства и недостатки.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS:

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

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
Найдите открывающий тег <head> и добавьте после него следующий код:

<style type="text/css">

Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body {
     background-color: blue;
 }
 h2 {
     color: red;
     padding: 60px;
 }

Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h2>Руководство Hostinger</h2>
<p>Это наш текст.</p>

</body>
</html>

Вариант 2 — Внешний CSS

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

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

Тогда как, сами таблицы стилей располагаются в файле style.css. К примеру:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Преимущества внешних CSS:

Меньший размер страницы HTML и более чистая структура файла.
Быстрая скорость загрузки.
Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут <style> используется для настройки этого тега. Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. К тому же управление вашим сайтом может стать довольно трудным, если вы будете использовать только внутренний CSS. Однако в некоторых случаях этот способ может быть весьма полезным. К примеру, в случае если у вас нет доступа к CSS файлам, или вам необходимо применить правила только для одного элемента. Пример HTML страницы с внутренним CSS должен выглядеть так:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h2 style="color:white;padding:30px;">Руководство Hostinger</h2>
<p style="color:white;">Здесь что-нибудь полезное.</p>

</body>
</html>

Преимущества внутреннего CSS:

Полезен для проверки и предпросмотра изменений.
Полезен для быстрых исправлений.
Меньше HTTP запросов.

Недостатки внутреннего CSS:

Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

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

Пишем CSS лучше и красивее. Не будем ходить вокруг да около, скажем… | by Nikita | WebbDEV

Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS. От этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «UX», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.

В самом начале нового проекта стили обычно выглядят просто и понятно. Скажем, имеется совсем мало CSS-селекторов, вроде .title, input, #app, работа с которыми никому не покажется трудной.

Но, по мере роста приложения, стили превращаются в кошмар. Разработчик начинает путаться в CSS-селекторах. Он обнаруживает, что пишет нечто вроде div#app .list li.item a. Однако работу останавливать нельзя, поэтому программист продолжает использовать подобные конструкции, CSS-код запихивают куда-нибудь в конец файла. И правда — кого интересуют стили? Да и сам по себе CSS — это такая ерунда… В результате получается 500 строк совершенно неподдерживаемого, ужасного CSS.

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

Возможно, вы думаете сейчас, что «писать CSS» — это значит пользоваться CSS-фреймворками. Ведь предназначены они именно для того, чтобы облегчить работу со стилями, и именно с их использованием пишут хороший CSS-код. Всё это так, но у CSS-фреймворков есть определённые недостатки:

Часто их использование ведёт к появлению скучного, однообразного, банального дизайна.
Стили фреймворков трудно настраивать, сложности может вызывать и необходимость сделать что-то такое, что выходит за рамки фреймворка.
Фреймворки, перед их использованием, необходимо изучать.

И, в конце концов, вы ведь читаете это не для того, чтобы ознакомиться с неким фреймворком? Поэтому займёмся CSS. Сразу хотелось бы отметить, что материал это не о том, как создавать красивые дизайны для приложений. Он — о том, как писать качественный CSS-код, который легко поддерживать, и о том, как правильно его организовывать.

В своих примерах я буду использовать SCSS. Это — CSS-препроцессор. Фактически, SCSS является надмножеством CSS. В нём имеются некоторые весьма интересные возможности, такие, как переменные, вложенные конструкции, импорт файлов, миксины. Обсудим возможности SCSS, которыми мы будем пользоваться.

Переменные

В SCSS можно пользоваться переменными. Основной плюс применения переменных — возможность их повторного использования. Представим, что у нас имеется набор цветов для приложения. Основной цвет — голубой. В результате этот цвет применяется буквально повсюду. Он используется в свойстве background-color кнопок, в свойстве color заголовка страницы, и во многих других местах.

И вот вы, вдруг, решаете поменять голубой на зелёный. Если выполнять такую замену без использования переменных — придётся отредактировать весь код, все строки, где используется старый цвет. Если же воспользоваться переменной, то поменять придётся лишь её значение. Вот как выглядит использование переменных:

Вложенные конструкции

SCSS поддерживает вложенные конструкции. Вот обычный CSS:

Его, благодаря поддержке вложенных конструкций, можно преобразовать так:

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

Фрагментирование и импорт

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

Файлы, содержащие фрагменты описаний стилей, можно создавать, добавляя в начале их имён знак подчёркивания: _animations.scss, _base.scss, _variables.scss, и так далее.

Для импорта этих файлов используется директива @import. Вот как пользоваться этим механизмом:

Возможно, вам покажется, что в этом коде имеется ошибка. Действительно, ведь файл, который мы хотим импортировать, называется _animations.scss, а мы, в файле header.scss, используем команду @import "animations". Однако ошибки здесь нет. SCSS — система достаточно интеллектуальная для того, чтобы понять, что в подобной ситуации разработчик имеет в виду соответствующий файл.

Это — всё, что нам надо знать о переменных, о вложенных конструкциях, о фрагментировании стилей, и об импорте. В SCSS есть и другие возможности, вроде миксинов, наследования, и других директив (среди них — @for, @if и ещё некоторые), но мы тут о них говорить не будем.

Если вы хотите познакомиться с SCSS поближе — взгляните на соответствующую документацию.

Я уже и не помню, сколько раз я использовал универсальные термины для именования CSS-классов. В результате у меня получались такие имена, думаю, знакомые всем: .button, .page-1, .page-2, .custom-input.

Часто мы попросту не знаем, как именовать некие сущности. Но это очень важно. Что если вы занимались разработкой приложения, а потом, по какой-то причине, отложили работу на несколько месяцев? Или, а это уже куда хуже, что, если кто-то другой взялся за этот проект? Если в CSS-коде используются неподходящие имена, его сложно будет понять без анализа других частей приложения.

Методология БЭМ (Блок, Элемент, Модификатор) — это компонентный подход к веб-разработке. В частности, речь идёт о соглашении по именованию сущностей. Эта методология позволяет структурировать код, способствует разбиению его на модули и помогает в его повторном использовании. Поговорим о блоках, элементах и модификаторах.

Блоки

Блоки можно рассматривать как компоненты. Наверняка, вы играли в детстве в Lego. Поэтому включим машину времени.

Как вы строили, скажем, обычный домик? Тут понадобится окно, крыша, дверь, стены, и, в общем-то, этого достаточно. Всё это — наши блоки. Они значимы сами по себе.

Именование: имя блока — .block

Примеры: .card, .form, .post, .user-navigation

Элементы

Как сделать из Lego окно? Вероятно, некоторые кубики выглядят как рамки, поэтому, если соединить четыре таких кубика, получится красивое окно. Это — элементы. Они являются частями блоков, они нам нужны для того, чтобы создавать блоки. Однако, элементы, вне блоков, бесполезны.

Именование: имя блока + __ + имя элемента — .block__element

Примеры: .post__author, .post__date, .post__text

Модификаторы

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

Именование: имя блока ИЛИ имя элемента + -- + имя модификатора — .block__element--modifier, .block--modifier
Примеры: .post--important, .post__btn--disabled

Примечания

При использовании БЭМ имена дают исключительно классам. Никаких ID или тегов — только классы.
Блоки или элементы могут быть вложены в другие блоки или элементы, но они должны быть полностью независимыми. Это очень важно. Поэтому, например, не надо назначать кнопке поля из-за того, что вы хотите поместить её под заголовком, в противном случае кнопка окажется связанной с заголовком. Используйте вместо этого вспомогательные классы.
При применении методологии БЭМ HTML-файлы будут перегружены именами, но это — небольшая плата за те возможности, которые даёт нам БЭМ.

Упражнение

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

Например, вот что у меня получилось в результате анализа Google Store.

Анализ сайта

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

Примеры

Вот пример, подготовленный средствами Codepen, демонстрирующий возможности БЭМ. Тут мы по-разному оформляем нечто вроде публикаций в некоем блоге. Вот HTML-код этого примера.

Вот SCSS-стили:

А вот то, что в итоге получилось.

Оформление «публикаций» с использованием БЭМ

Рассмотрим ещё один пример. Тут, пользуясь БЭМ, мы оформляем кнопки. Вот HTML-код этого примера.

Вот SCSS-стили.

А вот — результат.

Оформление кнопок с использованием методологии БЭМ

Давайте поговорим об организации CSS-файлов. То, что вы узнаете из этой части нашего разговора, позволит вам работать продуктивнее, и поможет, в соответствующих ситуациях, мгновенно находить CSS-код, который надо изменить. Для того чтобы всего этого добиться, нам понадобится изучить шаблон «7–1».

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

Все файлы с SCSS-фрагментами надо разместить в 7 разных папках.
Все эти файлы нужно импортировать в один файл, main.scss, расположенный в корневой директории, в которой лежат все эти папки.

Название шаблона, в результате, можно расшифровать, как «7 папок — 1 файл». Как видите, всё не так уж и сложно. Поговорим об этом шаблоне подробнее.

7 папок

Вот папки, о которых идёт речь:

base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-large, text-center), и так далее.
components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.
layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.
pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.
themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.
abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.
vendors: редкий сайт обходится без внешних зависимостей. В этой папке хранятся стили, которые созданы не тем, кто разрабатывает конкретный сайт. Сюда, например, можно сохранить файлы проекта Font Awesome, стили Bootstrap и прочее подобное.

Файл main.scss

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

Не могу не согласиться с тем, что выглядит вся эта конструкция из семи папок довольно масштабной. Однако тут надо отметить, что эта архитектура рассчитана на большие проекты. Для маленьких проектов можно использовать адаптированную версию шаблона «7–1». Особенности этой версии заключаются в том, что в ней можно обойтись без некоторых папок. Так, тут можно отказаться от папки vendors, поместив ссылки на внешние по отношению к проекту файлы стилей в тег link. Далее, можно обойтись без папки themes, так как, вероятно, в небольшом веб-приложении темы оформления использоваться не будут. И, наконец, можно избавиться от папки pages, так как в этом проекте, скорее всего, не будет страниц, стиль которых сильно отличается от общего стиля. В результате из семи папок остаётся всего четыре.

Далее, занимаясь маленьким проектом, можно пойти одним из двух путей:

Если вы предпочитаете воспользоваться тем, что осталось от шаблона «7–1», то у вас сохраняются папки abstracts, components, layout и base.
Если вы решаете обойтись одной большой папкой, то все файлы с фрагментами стилей, вместе с файлом main.scss, попадают в эту папку. Выглядеть это может примерно так:

Что именно выбрать — зависит от ваших предпочтений.

Тут, если вы прониклись идеей применения SCSS, у вас может возникнуть вопрос о том, как пользоваться такими стилями, так как браузеры их не поддерживают. На самом деле — это хороший вопрос, который ведёт нас к финальному этапу нашего разговора, к компиляции SCSS в CSS.

Для того чтобы преобразовать SCSS-код в CSS, вам понадобится платформа Node.js и менеджер пакетов NPM (или Yarn).

Мы будем использовать пакет node-sass, который позволяет компилировать .scss-файлы в .css-файлы. Это — инструмент командной строки, пользоваться им несложно. А именно вызов node-sassвыглядит так:

Здесь доступно множество опций. Мы остановимся на двух:

Опция -w позволяет организовать наблюдение за папкой или файлом. То есть, node-sass будет следить за изменениями в коде, и, когда они происходят, автоматически компилировать файлы в CSS. Эта возможность весьма полезна в процессе разработки.
Опция --output-style определяет стиль выходного CSS-файла. Тут доступно несколько вариантов: nested, expanded, compact, compressed. Эту опцию мы будем использовать для сборки готового CSS-файла.

Если вы — человек любопытный (надеюсь — так оно и есть, ведь разработчику любопытство только на пользу), то вам, скорее всего, интересно будет взглянуть на документацию к пакету node-sass.

Итак, с инструментами мы определились, теперь осталось самое простое. Для того чтобы преобразовать SCSS в CSS, надо выполнить следующие шаги:

Создайте папку проекта и перейдите в неё: mkdir my-app && cd my-app

Инициализируйте проект: npm init

Добавьте в проект пакет node-sass: npm install node-sass — save-dev

Создайте файл index.html, папки со стилями, файл main.scss:

Добавьте в файл package.json следующее:

Добавьте ссылку, ведущую к скомпилированному CSS-файлу, в тег head файла index.html:

Вот и всё. Теперь, когда вы занимаетесь работой над проектом, выполните команду npm run watch и откройте в браузере файл index.html. Для того, чтобы минифицировать CSS, выполните команду npm run build.

Интерактивная перезагрузка страницы

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

Установите пакет live-server (обратите внимание на то, что его устанавливают глобально):

npm install -g live-server

Добавьте в зависимости проекта пакет npm-run-all, который позволит одновременно запускать несколько скриптов:

npm install npm-run-all — save-dev

Добавьте следующее в package.json:

Теперь, выполнив команду npm run start, вы, в процессе работы над проектом, мгновенно будете видеть изменения, вносимые в него, не перезагружая страницу вручную.

Пакет autoprefixer

На данном этапе у вас имеется настроенная среда разработки, что очень хорошо. Теперь поговорим об инструментах для сборки проекта, и, в частности, о пакете autoprefixer. Это — инструмент (речь идёт о postcss-плагине), который парсит CSS-код и добавляет префиксы производителей браузеров к CSS-правилам, используя данные с Can I Use.

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

Код с префиксами браузеров выглядит примерно так:

Несложно заметить, что писать такой код весьма утомительно. Для того чтобы облегчить задачу обеспечения совместимости нашего CSS-кода с различными браузерами, не переусложняя проект, мы и воспользуемся пакетом autoprefixer. Тут понадобится выполнить следующие действия:

Скомпилируем все SCSS-файлы в один основной CSS-файл.
Добавим в этот файл префиксы браузеров с помощью autoprefixer.
Сожмём этот CSS-файл.

Это, в общем-то, завершающий этап работы над проектом. Итак, вот что надо сделать для использования autoprefixer:

Добавьте в проект две зависимости — postcss-cli и autoprefixer:

npm install autoprefixer postcss-cli — save-dev

Добавьте в package.json следующий код и модифицируйте скрипт build:

Теперь осталось лишь выполнить команду npm run build, и вы получите сжатый CSS-файл, в который будут добавлены префиксы браузеров. Вот репозиторий, в котором вы найдёте шаблонный проект, построенный с использованием рассмотренных здесь технологий. А вот — ещё один репозиторий с моими учебными проектами, при разработке которых я пользовался описанными здесь приёмами, и страница с рабочими примерами.

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

Перевод статьи How to get better at writing CSS.

Учебник CSS — Урок 1 — подключаем CSS-стили

Я не буду объяснять зачем нужен CSS. Если вы открыли этот учебник значит вы желаете его выучить. От себя лишь скажу, что возможности CSS очень широки и позволяют верстать макеты любой сложности. В свою очередь использование css означает, что вам придется отказаться от использования различных атрибутов тегов size, color, bgcolor, align и других, которые будут «мешать» CSS.

Существует по крайней мере три способа подключения CSS к вашему HTML файлу. Давайте рассмотрим самый простой, потом второй и правильный способ.

CSS внутри тега

CSS можно подключить c помощью атрибута style:

<div>
  Блок
</div>

Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут. И потом уже в ковычках пишем css-стили.

style="параметр:значение;параметр:значение;параметр:значение"

Пишем стили мы так сначала идет параметр (widht, height и другие), потом идет двоеточие и значение параметра. Разделяем каждый параметр точкой с запятой.

Теперь ко второму способу написания CSS.

CSS в начале HTML-документа

Для этого мы используем тег <style></style> в котором мы пишем CSS-код.

<html>
 <head>
  <title>Учебник CSS</title>
  <style type="text/css">
  здесь мы будем писать css-код
  </style>
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
 </body>
</html>

Тег style мы пишем в теге <head></head> после тега <title>. Давайте напишем какой-нибудь CSS-код:

<html>
 <head>
  <title>Учебник CSS</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* фон страницы */     font-size: 14px;            /* размер шрифта */
   }
   p{
     color: #ff0000; /* цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
  <p>2 строка учите CSS вместе с drupalbook.org</p>
 </body>
</html>

Давайте посмотрим как пишется css для тегов. Если мы пишем название тега в css, то для всех этих тегов будут применены параметры CSS. Так например если мы пишем p то значит для всех параграфов будет выбраны следующие параметры.

Когда мы пишем CSS-код, то сначала мы указываем тег для которого применяем css-стили, дальше мы в фигурных скобках пишем css-стили. CSS-стили пишутся также как и в атрибуте:

параметр:значение;параметр:значение;параметр:значение

Параметр, двоеточие, значение, точка с запятой и снова параметр, двоеточие, значение, точка с запятой и снова… После последнего стиля можно не ставить точку с запятой, но лучше всего поставить.

Мы вставили двумя способами css-стили, а теперь давайте используем третий способ, самый оптимальный.

CSS в отдельном файле

Это самый лучший способ, который позволяет отделить полностью CSS от HTML-кода. Конечно иногда хочется вставить CSS прямо в HTML-код, но надо бить себя по рукам в этом случае и выносить CSS в отдельный файл. Зачем?

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

Это было во-первых, теперь во-вторых когда код HTML и CSS в одном файле, то это становится нечитабельно и грамоздко. А теперь в-третьих, css сохраняются в браузере, поэтому если вынести весь CSS отдельно, то страница будет загружаться быстрее, потому что загружать css нужно только один раз. Я думаю вам уже стало понятным к чему я клоню?

CSS нужно стараться выносить в отдельный файл! Вот к этому я и клоню. А теперь давайте создавать отдельный css файл. Для этого есть тег <link>:

<html>
 <head>
  <title>Учебник CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
  <p>2 строка учите CSS вместе с drupalbook.org</p>
 </body>
</html>

У тега <link> есть следующие атрибуты:

type=»text/css» — так мы указываем то что это css,

rel=»stylesheet» — это указывает на то что этот файл является css-файлом,

media=»all» — этот css файл будет отображаться для всех устройств, через которые просматривают сайт,

href=»styles.css» — путь к css файлу, в нашем случае путь относительный.

Кажется разобрались с тем как подключать css файл, теперь создавайте этот файл styles.css в той же папке где и html-файл.

Теперь открывайте файл styles.css и вставьте него css-стили:

body{
  background: #eeeeee; /* фон страницы */
  font-size: 14px;            /* размер шрифта */
}
p{
  color: #ff0000; /* цвет текста */
}

Сохраните этот файл и откройте через браузер ваш html-файл. Теперь css подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.

Способы интеграции CSS в HTML

Введение

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

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

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

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

Способ 1. Внутренние стили

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

<p>Hello My World! p>

<br/>

<p>Первый простой пример p>

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

Способ 2. Таблицы глобальных стилей – в заглавии самого документа.

При таком варианте использования стили определяются непосредственно в веб-документе и определяются между тегами <head>…</head> веб-страницы внутри тега <style>, можно смело сказать, что этот способ намного превосходит предыдущий в гибкости и по своим возможностям, кроме того он упрощает работу с большим числом стилей на странице.

<head>

<style>

p {

font-family: ‘Segoe UI’;

font-size: 35px;

color: #43e936;

}

style>

head>

<body>

<p>Второй простой пример p>

<div>

<p>Второй простой пример, повтор р>

div>

body>

Теперь достаточно указать на странице только тег p, и его содержимому будут присвоены все те свойства, которые представлены правилами в теге style.

Способ 3. Таблицы связанных стилей – задаем в отдельном файле.

Пожалуй, один из самых мощных и удобных способов использования стилей и правил отображения элементов для многостраничного сайта. При нем стили, предопределённые разработчиком, размещаются в отдельном файле с произвольным названием example.css, который можно использовать для любой веб-страницы на сайте. Для того чтобы подключить этот файл на странице, необходимо в заголовке страницы (в пределах тега <head>…</head>) использовать тег <link>.

<head>

head>

<body>

<pre>Hello World pre>

<br/>

<p>Третий простой пример p>

body>

Содержимое файла example.css:

p {

font-size: 37px;

color: #ff0000;

}

CSS HTML уроки для начинающих академия

Манипулировать текстом

Цвета,
Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

Встроенный — с помощью атрибута Style в элементах HTML
Internal -с помощью <style> элемента в <head> разделе
Внешний — с помощью внешнего CSS-файла

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

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.

Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут style элемента HTML.

В этом примере устанавливается цвет текста элемента <h2> синим цветом:

Пример

<h2>This is a Blue Heading</h2>

Внутренняя CSS

Внутренний CSS используется для определения стиля для одной HTML-страницы.

Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :

Пример

body {background-color: powderblue;}
h2 {color: blue;}
p {color: red;}

<h2>This is a
heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Внешние CSS

Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:

Пример

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

Вот как выглядит «styles.css»:

body {
    background-color: powderblue;
}
h2 {
    color: blue;
}
p {
    color: red;
}

Шрифты CSS

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет размер текста, который будет использоваться.

Пример

h2 {
    color: blue;

font-family: verdana;
    font-size: 300%;
}
p {
    color: red;

font-family: courier;
    font-size: 160%;
}

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML:

Пример

p {
border: 1px
solid powderblue;
}

CSS заполнение

Свойство CSS padding определяет отступ (пробел) между текстом и границей:

Пример

p {
border: 1px
solid powderblue;
padding: 30px;
}

CSS маржа

Свойство CSS margin определяет поле (пробел) за пределами границы:

Пример

p {
border: 1px
solid powderblue;
margin: 50px;
}

Атрибут ID

Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:

<p>I am different</p>

then define a style for the element with the specific id:

Пример

#p01 {
color: blue;
}

Примечание: Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!

Атрибут class

Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:

<p>I am different</p>

Затем определите стиль для элементов с определенным классом:

Пример

p.error {
color: red;
}

Внешние ссылки

Внешние таблицы стилей можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для связывания с таблицей стилей:

Пример

Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:

Пример

Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:

Примере

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Справка

Использование атрибута HTML style для встроенного стиля
Используйте элемент HTML <style> для определения внутреннего CSS
Используйте элемент HTML <link> для ссылки на внешний файл CSS
Используйте элемент HTML <head> для хранения <Style> и <Link> элементов
Используйте свойство CSS color для текстовых цветов
Используйте свойство CSS font-family для текстовых шрифтов
Используйте свойство CSS font-size для размеров текста
Использовать свойство CSS border для границ
Используйте свойство CSS padding для пространства внутри границы
Использование свойства CSS margin для пространства за пределами границы

Теги стиля HTML

Тег	Описание
<style>	Определяет сведения о стиле для документа HTML
<link>	Определяет связь между документом и внешним ресурсом

HTML-ссылок Гиперссылки

Ссылки можно найти почти на всех веб-страницах. Ссылки позволяют пользователям переходить от страницы к странице.

HTML-ссылки — гиперссылки

HTML-ссылки являются гиперссылками.

Вы можете щелкнуть ссылку и перейти к другому документу.

Когда вы наводите указатель мыши на ссылку, стрелка мыши превращается в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением
или любой другой элемент HTML!

HTML-ссылки — синтаксис

Тег HTML определяет гиперссылку.Он имеет следующий синтаксис:

Пример

В этом примере показано, как создать ссылку на W3Schools.com:

Посетите W3Schools.com!

Попробуй сам »

По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:

Непосещенная ссылка подчеркнута синим цветом
Посещенная ссылка подчеркнута фиолетовым цветом
Активная ссылка подчеркнута красным

Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы
еще один взгляд!

HTML-ссылки — целевой атрибут

По умолчанию связанная страница будет отображаться в текущем окне браузера.Чтобы изменить это, вы должны указать другую цель для ссылки.

Атрибут цели указывает, где открыть связанный документ.

Атрибут цели может иметь одно из следующих значений:

_self — По умолчанию. Открывает документ в
то же окно / вкладка, в котором было щелкнуто
_blank — открывает документ в новом окне или вкладке
_parent — открывает документ в родительском фрейме
_top — Открывает документ полностью в окне

Пример

Используйте target = «_ blank», чтобы открыть связанный документ в новом окне или вкладке браузера:

Посетите W3Schools!

Попробуй сам »

Абсолютные и относительные URL-адреса

В обоих приведенных выше примерах используется абсолютный URL-адрес (полный веб-адрес).
в атрибуте href .

Локальная ссылка (ссылка на страницу на том же веб-сайте) указывается с
относительный URL (без
часть «https: // www»):

Пример

Абсолютные URL-адреса
W3C
Google

Родственник
URL-адреса

HTML-изображения

CSS
Учебник

Попробуй сам »

HTML-ссылки — использовать изображение как ссылку

Чтобы использовать изображение в качестве ссылки, просто поместите
внутри тега tag:

Пример

Попробуй сам »

Ссылка на адрес электронной почты

Используйте mailto: внутри href, чтобы создать ссылку, открывающую программу электронной почты пользователя (чтобы
пусть отправят новое письмо):

Кнопка как ссылка

Чтобы использовать кнопку HTML в качестве ссылки, необходимо добавить код JavaScript.

JavaScript позволяет указать, что происходит при определенных событиях, например, щелчком кнопки:

Пример

кнопка < > Учебное пособие по HTML

Попробуй сам »

Названия ссылок

Атрибут title определяет дополнительную информацию об элементе.
Информация чаще всего отображается в виде текста всплывающей подсказки при наведении курсора мыши на элемент.

Пример

Посетите наше руководство по HTML

Попробуй сам »

Подробнее об абсолютных и относительных URL

Пример

Используйте полный URL-адрес для ссылки на веб-страницу:

Учебник по HTML

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в папке html на текущем веб-сайте:

Учебник по HTML

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в той же папке, что и текущая страница:

Учебник по HTML

Попробуйте сами »

Краткое содержание главы

Используйте элемент для определения ссылки
Используйте атрибут href , чтобы определить адрес ссылки
Используйте атрибут target , чтобы определить, где открыть связанный документ
Используйте элемент (внутри )
использовать изображение как ссылку
Используйте mailto: схема внутри Атрибут href для создания ссылки, которая открывает программу электронной почты пользователя

HTML-теги ссылок

Тег	Описание
	Определяет гиперссылку

Как добавить CSS

Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с
информация в таблице стилей.

Это заголовок

Это абзац.

Попробуй сам »

Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.

Внешний файл .css не должен содержать никаких HTML-тегов.

Вот как выглядит файл mystyle.css:

«mystyle.css»

корпус {
background-color: светло-голубой;
}

h2 {
цвет: темно-синий;
margin-left: 20 пикселей;
}

Примечание. Не добавляйте пробел между значением свойства и единицей измерения (например, margin-left: 20 пикселей; ). Правильный способ: margin-left: 20px;

Внутренний CSS

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

Внутренний стиль определяется внутри элемента

Это
заголовок

Это абзац.

Попробуй сам "

Встроенный CSS

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

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. В
Атрибут style может содержать любое свойство CSS.

Пример

Встроенные стили определяются в атрибуте style соответствующего
элемент:

Это
это заголовок

Это абзац.

Попробуй сам "

Совет: Встроенный стиль теряет многие преимущества таблицы стилей (смешивая
содержание с презентацией). Используйте этот метод умеренно.

Несколько таблиц стилей

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

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента

:

h2
{
цвет: темно-синий;
}

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента

:

h2
{
оранжевый цвет;

}

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы

будут
«апельсин»:

Попробуй сам "

Пример

Однако, если внутренний стиль определен с до ссылки на внешнюю таблицу стилей, элементы

будут
«флот»:

Попробуй сам "

Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут «каскадом» переходить в новый «виртуальный» стиль.
лист по следующим правилам, где номер один имеет наивысший приоритет:

Встроенный стиль (внутри элемента HTML)
Внешние и внутренние таблицы стилей (в головной части)
Браузер по умолчанию

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

Попробуйте сами »

Проверьте себя упражнениями!

CSS для начинающих: что такое CSS и как его использовать в веб-разработке? | Джем Эйги | Запуск

Существует много разных способов определения селектора CSS, ниже вы можете увидеть несколько примеров типов селектора:

Селектор класса: находит элементы HTML по их атрибуту класса
Селектор идентификаторов: находит элементы по их конкретному идентификатору
Element Selector: находит элементы по их имени тега

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

Теперь вы узнали, зачем и как определять селектор и писать код CSS. Но этого недостаточно. Нам также нужно добавить CSS внутри HTML, иначе он не распознает изменения.

Мы можем добавить CSS в файл HTML тремя разными способами:

1. Внешний файл CSS:

Лучше всего хранить код CSS в отдельном файле. В реальном мире программирования нам нужно хранить код HTML, CSS и JavaScript в отдельных файлах, а затем при необходимости импортировать их.

Мы можем создать отдельный файл CSS с расширением .css и включите его в HTML. Например, мы можем создать такой CSS-файл: index.css

Внутри index.css мы можем написать наш CSS-код:

  p  {
 color: red; 
}

Затем мы можем импортировать index.css в HTML с тегом , как показано ниже:

  
    
    
 Я текст

Итак, теперь HTML-файл имеет код CSS, и изменения будут применены к элементам.

2. Внутренний CSS с тегом

Я текст

3. Встроенный стиль:

Третий способ - написать правила CSS непосредственно внутри элемента HTML, с атрибутом стиля .В этом методе мы определяем правила CSS непосредственно внутри тега, и нам не нужно создавать для него класс.

  style = "color: blue; font-size: 22px;" > Я текст

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

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

В мире CSS есть много других правил и возможностей. Я расскажу о них в следующих статьях.

Если вы хотите узнать больше о веб-разработке, не стесняйтесь подписывайтесь на меня на Youtube !

Большое спасибо и до следующего раза!

Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +446 678 человек.

Запугать CSS? Полное руководство, чтобы избавиться от страха »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше

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

Изображение справа не только менее интересно, но и намного сложнее в использовании.

В этом кратком руководстве мы познакомим вас с CSS, продемонстрируем синтаксис CSS, объясним, как работает CSS, покажем вам, как добавить разметку CSS в документ HTML, и укажем вам на полезные ресурсы в Интернете, где вы можете узнать больше о CSS.

Что такое CSS?

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

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

Чем CSS отличается от HTML?

Первое, что нужно понять, подходя к теме CSS, - это когда использовать язык стилей, такой как CSS, а когда использовать язык разметки, такой как HTML.

Все критическое содержимое веб-сайта должно быть добавлено на веб-сайт с использованием языка разметки, такого как HTML.
Представление содержимого веб-сайта должно определяться языком стилей, например CSS.

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

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

Синтаксис CSS

Синтаксис CSS включает селекторы, свойства, значения, объявления, блоки объявлений, наборы правил, at-правила и операторы.

Селектор - это фрагмент кода, используемый для идентификации элемента или элементов веб-страницы, на которые должны воздействовать стили.
Свойство - это аспект элемента, на который необходимо повлиять. Например, наиболее часто используемые свойства CSS - это цвет, отступ, поля и фон.
Значение используется для определения свойства . Например, цвету свойства может быть присвоено значение красного цвета следующим образом: color: red; .
Комбинация свойства и значения называется декларацией .
Во многих случаях несколько объявлений применяются к одному селектору . Блок объявлений - это термин, используемый для обозначения всех объявлений, применяемых к одному селектору .
Отдельный селектор и следующий за ним блок объявления вместе называются набором правил .
Ат-правила похожи на наборы правил , но начинаются со знака @ , а не с селектора . Наиболее распространенным at-правилом является правило @media , которое часто используется для создания блока правил CSS, которые применяются в зависимости от размера устройства, просматривающего веб-страницу.
Оба набора правил и at-rules являются операторами CSS .

Пример синтаксиса CSS

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

  h2 {
    красный цвет;
    размер шрифта: 3em;
    оформление текста: подчеркивание;
    }

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

Используя h2 в качестве селектора, мы говорим, что каждый заголовок уровня 1 на веб-странице должен следовать за объявлениями, содержащимися в этом наборе правил.

Набор правил содержит три объявления:

цвет: красный;
размер шрифта: 3em;
оформление текста: подчеркивание;

color , font-size и text-decoration - все это свойства. Вы можете использовать буквально сотни свойств CSS, но обычно используются лишь несколько десятков.

Мы применили значения красный , 3em и подчеркивание к свойствам, которые мы использовали. Каждое свойство CSS определено для приема значений, отформатированных определенным образом.

Для свойства color мы можем использовать ключевое слово цвета или формулу цвета в формате Hex, RGB или HSL. В этом случае мы использовали ключевое слово цвета красный . В CSS3 доступно несколько десятков цветовых ключевых слов, но миллионы цветов доступны с другими цветовыми моделями.

Мы применили значение 3em к свойству font-size . Мы могли бы использовать широкий диапазон единиц размера, включая пиксели, проценты и т. Д.

Наконец, мы добавили значение underline к свойству text-decoration . Мы также могли бы использовать overline или line-through в качестве значений для text-decoration . Кроме того, CSS3 позволяет использовать стили линий: сплошные, двойные, пунктирные, пунктирные и волнистые - это хорошо было спецификацией цветов оформления текста.Мы могли бы применить все три значения одновременно, используя такое объявление:

  text-decoration: blue double underline;

Это правило приведет к тому, что h2 в нашем первоначальном примере будет подчеркнуто двойной синей линией. Сам текст останется красным, как определено в нашем свойстве color .

Подготовка HTML-разметки для стилизации

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

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

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

Классы и идентификаторы не взаимозаменяемы. Важно знать, когда использовать каждый из них.

Когда использовать классы

Используйте классы, когда на одной веб-странице есть несколько элементов, которым необходимо стилизовать. Например, предположим, что вы хотите, чтобы ссылки в верхнем и нижнем колонтитулах имели единообразный стиль, но не так, как ссылки в теле страницы. Чтобы точно определить эти ссылки, вы можете добавить класс к каждой из этих ссылок или к контейнеру, содержащему ссылки.Затем вы можете указать стили, используя класс, и быть уверенным, что они будут применяться только к ссылкам с этим атрибутом класса.

Когда использовать идентификаторы

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

Вот пример кода HTML и CSS для простой панели навигации для базового сайта электронной коммерции.

  <стиль>
    #nav {
        фон: светло-серый;
        перелив: авто;
        }
    #nav li {
        плыть налево;
        отступ: 10 пикселей;
        }
    #nav li: hover {
        фон: серый;
        }



      На главную  
      Магазин  
      О нас  
      Свяжитесь с нами

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

Этот код не повлияет на любые дополнительные списки на той же веб-странице.

# example-nav {
background: lightgray;
перелив: авто;
}
# example-nav li {
float: left;
отступ: 10 пикселей;
}
# example-nav li: hover {
background: gray;
}

Когда не использовать хуки

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

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

  <стиль>
    ul {
        тип-стиль-список: верхний римский;
        маржа слева: 50 пикселей;
        }
    п {
        цвет: темно-синий
        }


 Здесь текст абзаца.Два коротких предложения. 

 Быстрый список 
 Всего два предмета. 

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

Этот код будет выглядеть так.

.code_sample ul {
список-стиль-тип: верхний римский;
margin-left: 50 пикселей;
}
.code_sample p {
color: darkblue
}

Здесь текст абзаца. Два коротких предложения.

Быстрый список
Всего два элемента

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

Другой список
По-прежнему всего два элемента

В этом случае, хотя мы писали правила стиля для элементов ul и p только один раз каждый, несколько элементов были затронуты. Использование селекторов элементов - отличный способ создать привлекательный, читаемый и единообразный интерфейс веб-сайта, создав согласованный стиль заголовков, списков и текста абзацев на каждой странице веб-сайта.

Способы связывания правил CSS с HTML-документом

Есть три способа добавления правил CSS на веб-страницу:

Встроенные стили
Внутренние таблицы стилей
Внешние таблицы стилей

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

Встроенные стили

Встроенные стили применяются к определенным элементам HTML. HTML-атрибут style используется для определения правил, которые применяются только к этому конкретному элементу. Вот синтаксис для написания встроенных стилей.

   Пример заголовка

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

Внутренние таблицы стилей

В предыдущих примерах в этом руководстве используются внутренние таблицы стилей. Внутренняя таблица стилей - это блок CSS, добавленный к элементу head HTML-документа. Элемент стиля используется между открывающим и закрывающим тегами head , а все объявления CSS добавляются между тегами стиля .

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

  <заголовок>
    <стиль>
        h2 {
            красный цвет;
            отступ: 10 пикселей;
            оформление текста: подчеркивание;
            }
    


     Пример заголовка

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

Внешние таблицы стилей

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

Чтобы использовать внешнюю таблицу стилей, сначала создайте документ CSS.

  / ********************************************* ***
Сохраните с именем, заканчивающимся на .css, например, styles.css.
*******************************************************************************************************************************************************************************************************************************
h2 {
    красный цвет;
    отступ: 10 пикселей;
    оформление текста: подчеркивание;
    }

Теперь, когда у нас есть внешняя таблица стилей с некоторыми стилями, мы можем связать ее с HTML-документом, используя элемент link .

  <заголовок>



     Пример заголовка

Когда этот HTML-документ загружен, тег link вызовет загрузку стилей в файле styles.css на веб-страницу. В результате все элементы заголовка уровня 1 будут отображаться с красным текстом, подчеркнутым и с отступом 10 пикселей, примененным к каждой стороне.

Когда использовать каждый метод

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

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

Встроенные стили можно использовать в двух случаях:

При написании правил CSS, которые будут применяться только к одному элементу на одной веб-странице.
При применении редактором WYSIWYG, например редактором tinyMCE, интегрированным в систему управления контентом, такую как WordPress.

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

Как работает CSS

При написании CSS часто записываются правила, которые конфликтуют друг с другом. Например, при стилизации заголовков все следующие правила могут применяться к элементу h2 .

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

Как может разработчик написать правила, достаточно общие, чтобы охватить все h2 , но достаточно конкретные, чтобы определять стили, которые должны появляться только в определенных экземплярах данного элемента?

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

Два правила, которые определяют поведение CSS, - это наследование и специфичность.

Каскадное наследование

Почему стили CSS называются каскадными ? Когда написано несколько правил, которые противоречат друг другу, будет реализовано последнее написанное правило. Таким образом, стили переходят вниз, и применяется последнее написанное правило.

Рассмотрим пример.Давайте напишем два правила CSS во внутренней таблице стилей, которые прямо противоречат друг другу.

  <заголовок>
    <стиль>
        p {цвет: красный;}
        p {цвет: синий;}
    


 Какого цвета будет текст этого абзаца?

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

.code_sample_p {цвет: красный;}
.code_sample_p {color: blue;}

Какого цвета будет текст этого абзаца?

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

Правила в styles_2.css будут применяться, если есть конфликты между стилями, содержащимися в этих двух таблицах стилей.

Наследование стилей - еще один пример каскадного поведения стилей CSS.

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

  <заголовок>
    <стиль>
        ul {цвет: красный;}
    


    
         Пункт 1 
         Пункт 2

Вот как будет отображаться этот код.

.code-sample-ul {color: red;}

Не каждое свойство передается от родительского элемента к его дочерним элементам.Браузеры рассматривают определенные свойства как ненаследуемых свойств . Поля - это один из примеров свойства, которое не передается от родительского элемента дочернему элементу.

Специфичность

Второе правило, определяющее, какие правила применяются к каждому элементу HTML, - это правило специфичности.

Правила CSS с более конкретными селекторами будут отменять правила CSS с менее конкретными селекторами , независимо от того, что происходит первым. Как мы уже говорили, три наиболее распространенных селектора - это теги элементов, классы и идентификаторы.

Наименее конкретным типом селектора является селектор уровня элемента.
Когда класс используется в качестве селектора, он отменяет правила CSS, записанные с тегом элемента в качестве селектора.
Когда идентификатор используется в качестве селектора, он отменяет правила CSS, написанные с помощью селекторов элементов или классов.

Еще одним фактором, влияющим на специфику, является место, где написаны стили CSS. Стили, записанные встроенными с атрибутом style , имеют приоритет над стилями, записанными во внутренней или внешней таблице стилей.

Еще один способ повысить специфичность селектора - использовать ряд элементов, классов и идентификаторов для точного определения элемента, к которому вы хотите обратиться. Например, если вы хотите точно определить элементы неупорядоченного списка в списке с классом «example-list», содержащимся в div с идентификатором «example-div», вы можете использовать следующий селектор для создания селектора с высоким уровнем специфичности.

  div # example-div> ul.example-list> li {стили здесь}

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

Как только вы поймете, как работают наследование и специфичность, вы сможете определять элементы на веб-странице с высокой степенью точности.

Что умеет CSS?

Лучше спросить: «Что не умеет CSS?»

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

Создайте гибкую сетку для разработки полностью адаптивных веб-сайтов, которые красиво отображаются на любом устройстве.
Стилизуйте все, от типографики до таблиц, форм и т. Д.
Расположите элементы на веб-странице относительно друг друга, используя такие свойства, как float , position , overflow , flex и box-sizing .
Добавьте фоновые изображения к любому элементу.
Создавайте формы, взаимодействия и анимацию.

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

Коробочная модель

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

CSS Box Model от разработчиков Mozilla, CC-BY-SA 2.5.

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

Два замечательных места, где можно узнать о блочной модели:

Создание макетов

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

Сеть разработчиков Mozilla предлагает хорошее введение в макеты CSS. Это краткое руководство охватывает основные концепции макетов CSS и быстро вводит такие свойства, как text-align , float и position .

На W3C доступно гораздо более подробное руководство по макетам CSS: Модель макета CSS. Этот документ является ресурсом для профессиональных разработчиков, поэтому, если вы новичок в CSS, не торопитесь, просматривая его.Это не быстрое чтение. Однако все, что вам нужно знать о создании макетов CSS, содержится в этом документе.

Макеты сетки были основной стратегией для разработки адаптивных макетов в течение нескольких лет. CSS-сетки создавались с нуля в течение многих лет, и на рынке существует множество различных веб-сайтов для создания сеток и фреймворков для разработки. Однако через несколько лет поддержка макетов сетки станет частью спецификации CSS3. Вы можете многое узнать о сетках, прочитав эту тему на веб-сайте W3C.Чтобы получить более легкое и короткое представление о макетах сетки, прочтите эту статью от Mozilla.

Ожидается, что через несколько лет CSS3 Flexible Box или flexbox станет доминирующей моделью для разработки макетов веб-сайтов. Спецификация flexbox еще не полностью завершена и доработана, а поддержка flexbox не согласована между браузерами. Однако каждый начинающий разработчик CSS должен быть знаком с flexbox и быть готовым реализовать его в ближайшем будущем. Сеть разработчиков Mozilla - одно из лучших мест, где можно быстро освоить flexbox.

Веб-шрифты и типографика

Можно многое сделать, чтобы добавить индивидуальности и улучшить читаемость контента на веб-сайте. Узнайте больше о выборе шрифтов и типографики для Интернета в нашем руководстве по шрифтам и веб-типографике.

Создание согласованного кросс-браузерного взаимодействия

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

Возьмем, к примеру, этот короткий фрагмент кода.

   Заголовок 1 
 Короткий абзац текста. Всего четыре предложения. Большинство предложений довольно короткие. Особенно этот. 
 Заголовок 2 

     Краткий список. 
     Три пункта в этом списке 
     Мы сделаем это неупорядоченным списком. 

 Заголовок 3 
 Последний короткий абзац текста.Всего четыре предложения. Большинство предложений довольно короткие. Особенно этот.

Если мы отобразим этот код в двух разных браузерах, мы увидим тонкие различия. Вот как Mozilla Firebox и Microsoft Edge обрабатывают этот код.

Вы видите тонкие различия? Firefox, слева, добавляет немного больше поля вокруг каждого элемента заголовка. Кроме того, при рендеринге в Edge маркеры становятся немного меньше. Хотя эти различия не имеют значения, есть случаи, когда эти незначительные различия между браузерами могут создавать проблемы.

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

Самый простой способ включить файл normalize.css в вашу проектную работу - это разместить ссылку на копию, размещенную в Google. Для этого просто поместите эту строку кода в элемент head HTML-документа.

Джон - писатель-фрилансер, энтузиаст путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

Начиная с HTML + CSS

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

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

В конце руководства вы создадите HTML-файл, выглядит так:

Итоговая HTML-страница с цветами и макетом, выполненная с CSS.

Обратите внимание, я не утверждаю, что это красиво ☺

разделов которые выглядят так, необязательны. Они содержат дополнительное объяснение кодов HTML и CSS в примере. В "тревога!" знак в начале указывает, что это более продвинутый материала, чем остальной текст.

Шаг 1: написание HTML

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

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

Шаг 1: откройте текстовый редактор (Блокнот, TextEdit, KEdit или все, что вам нравится больше всего), начните с пустого окна и введите следующий:

Моя первая стилизованная страница

Добро пожаловать на мою стилизованную страницу!

В нем отсутствуют изображения, но, по крайней мере, в нем есть стиль.И на нем есть ссылки, даже если они не идут где угодно & hellip;

Здесь должно быть больше, но я не знаю что еще. <адрес> Сделано 5 апреля 2004 г.
сам.

На самом деле вам не нужно вводить его: вы можете скопировать и вставить с этой веб-страницы в редактор.

(Если вы используете TextEdit на Mac, не забудьте указать TextEdit, что текст действительно является обычным текстом, перейдя в формат меню и выберите «Сделать обычный текст».)

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

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

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

Из тегов в примере

- это начало «элемента списка».
- это "Пункт."А - это" якорь ", и именно поэтому создает гиперссылку.
Редактор KEdit, показывающий исходный HTML-код.
Если вы хочу знать, что означают имена в <…>, одно хорошее место для start - Начало работы с HTML. Но всего несколько слов о структуре нашего примера HTML-страницы.
- «ul» - это список с одной гиперссылкой для каждого элемента. Это будет служат нашим «меню навигации по сайту», ссылаясь на другие страницы нашего (гипотетического) веб-сайта.Предположительно все страницы на нашем сайте есть подобное меню.
- Элементы «h2» и «p» образуют уникальное содержание этого страницы, а подпись внизу («адрес») снова будет аналогично на всех страницах сайта.
Обратите внимание, что я не закрыл элементы «li» и «p». В HTML (но не в XHTML) разрешено опускать

, которые я сделал здесь, чтобы текст немного легче читать. Но вы можете добавить их, если хотите.

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

Теперь выберите «Сохранить как…» в меню «Файл», перейдите к каталог / папка, в которую вы хотите его поместить (рабочий стол в порядке) и сохраните файл как «mypage.html». Редактор пока не закрывайте, мы нужно это снова.

(Если вы используете TextEdit в Mac OS X до версии 10.4, вы увидит параметр Не добавлять расширение .txt в поле "Сохранить как" диалог. Выберите этот вариант, потому что имя «mypage.html» уже включает расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Затем откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл с помощью файлового менеджера (Windows Explorer, Finder или Konqueror) и щелкните или дважды щелкните «mypage.html »файл. Это должен открыться в веб-браузере по умолчанию. (Если этого не произошло, откройте браузера и перетащите в него файл.)

Как видите, страница выглядит довольно скучно…

Шаг 2: добавление цветов

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

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

Нам нужно добавить элемент

[так далее.]

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

Стиль листы в CSS состоят из правил . В каждом правиле есть три части:

селектор (в примере: «тело»), который сообщает браузер, на какую часть документа действует правило;
свойство (в этом примере «цвет» и 'background-color' - оба свойства), который указывает, что устанавливается аспект макета;
и значение ('purple' и '# d8da3d'), которые дает значение свойства стиля.

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

тело {цвет: фиолетовый}
тело {background-color: # d8da3d}

, но поскольку оба правила влияют на тело, мы написали «тело» только один раз. и соедините свойства и значения. Для получения дополнительной информации о переключатели, см. главу 2 Lie & Bos .

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

Теперь сохраните этот файл (используйте «Сохранить» в меню «Файл») и вернитесь назад. в окно браузера. Если вы нажмете кнопку «Обновить», дисплей должен измениться с «скучной» страницы на цветной (но еще довольно скучная) страница.Помимо списка ссылок вверху, текст теперь должен быть фиолетовым на зеленовато-желтом фоне.

Как один браузер показывает страницу теперь, когда некоторые цвета были добавлен.

цветов могут быть указывается в CSS несколькими способами. В этом примере показаны два из них: по имени («фиолетовый») и по шестнадцатеричному коду («# d8da3d»). Есть около 140 названий цветов и шестнадцатеричные коды позволяют использовать более 16 миллион цветов. Добавление нотки стиля объясняет больше о эти коды.

Шаг 3: добавление шрифтов

Еще одна вещь, которую легко сделать, - это провести различие в шрифты для различных элементов страницы. Итак, давайте установим текст шрифтом «Джорджия», кроме заголовка h2, который мы дать «Helvetica».

В Интернете никогда нельзя быть уверенным, какие шрифты есть у ваших читателей. на их компьютерах, поэтому мы также добавляем альтернативы: если Грузия недоступен, Times New Roman или Times тоже подойдут, и если в противном случае браузер может использовать любой другой шрифт с засечками.Если Helvetica отсутствует, Geneva, Arial и SunSans-Regular очень похожи по форме, и если ни один из эти работы, браузер может выбрать любой другой шрифт, без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):




   Моя первая стилизованная страница 
  



[так далее.]

Если вы сохраните файл еще раз и нажмете «Обновить» в браузере, теперь должны быть разные шрифты для заголовка и других текст.

Теперь шрифт основного текста отличается от шрифта заголовка.

Шаг 4: добавление панели навигации

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

Меню уже находится на странице HTML. Это список

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

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

Есть и другие способы сделать это. Если вы ищете «столбец» или «Layout» на странице Learning CSS вы найдете несколько готовых к работе шаблоны. Но этот подходит для наших целей.

В окне редактора добавьте следующие строки в HTML файл (строки 7 и 12-16):




   Моя первая стилизованная страница 
  



[так далее.]

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

Основной текст перемещен вправо, а список ссылки теперь находятся слева от него, а не вверху.

'position: absolute' говорит, что элемент ul позиционируется независимо от текста, который стоит до или после него в документ, а «левый» и «верхний» указывают, что это за позиция.В этом случае 2em сверху и 1em слева окно.

«2em» означает, что размер шрифта в 2 раза больше текущего. Например, если меню отображается шрифтом из 12 пунктов, тогда 2em равно 24 точки. 'Em' - очень полезная единица в CSS, поскольку она может адаптировать автоматически к шрифту, который использует читатель. Большинство в браузерах есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что меню увеличивается в размере по мере того, как шрифт увеличивается, чего не было бы, если бы мы использовали размер в пикселях.

Шаг 5. Стилизация ссылок

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

Мы также не сказали, какими должны быть цвета ссылок, поэтому давайте добавим и это: синий для ссылок, которые пользователь не видел еще и фиолетовый для уже посещенных ссылок (строки 13-15 и 23-33):




   Моя первая стилизованная страница 
  



[так далее.]

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

В HTML гиперссылки создаются с помощью элементов , поэтому укажите цвет, нам нужно добавить правило стиля для «a». К различать посещенные и непосещенные ссылки, CSS предоставляет два «псевдокласса» (: ссылка и: посещенный). Они называются «Псевдоклассы», чтобы отличать их от атрибутов класса , , которые появляются непосредственно в HTML, например, class = "navbar" в нашем примере.

Шаг 6: добавляем горизонтальную линию

Последним дополнением к таблице стилей является горизонтальная линейка для отделите текст от подписи внизу.Мы будем использовать 'border-top', чтобы добавить пунктирную линию над <адрес> элемент (строки 34-37):




   Моя первая стилизованная страница 
  



[так далее.]

Теперь наш стиль завершен. Далее давайте посмотрим, как мы можем поставить таблица стилей в отдельном файле, чтобы другие страницы могли совместно использовать в том же стиле.

Шаг 7: размещение таблицы стилей в отдельном файле

Теперь у нас есть HTML-файл со встроенной таблицей стилей. Но если наш сайт растет, мы, вероятно, хотим, чтобы многие страницы имели один и тот же стиль. Есть способ лучше, чем копирование таблицы стилей в каждый страница: если мы поместим таблицу стилей в отдельный файл, все страницы могут укажите на это.

Чтобы создать файл таблицы стилей, нам нужно создать еще один пустой текст файл. Вы можете выбрать «Новый» в меню «Файл» редактора, чтобы создать пустое окно.(Если вы используете TextEdit, не забудьте сделайте это снова обычным текстом, используя меню Формат.)

Затем вырежьте и вставьте все, что находится внутри <стиля> элемент из HTML-файла в новое окно. Не копируйте

сами по себе. Они принадлежат HTML,
не в CSS. В новом окне редактора теперь у вас должен быть
полная таблица стилей:

тело {
  отступ слева: 11em;
  семейство шрифтов: Georgia, Times New Roman,
        Times, serif;
  цвет: фиолетовый;
  цвет фона: # d8da3d}
ул.navbar {
  тип-стиль-список: нет;
  отступ: 0;
  маржа: 0;
  позиция: абсолютная;
  верх: 2em;
  слева: 1em;
  width: 9em}
h2 {
  семейство шрифтов: Helvetica, Geneva, Arial,
        SunSans-Regular, без засечек}
ul.navbar li {
  фон: белый;
  маржа: 0.5em 0;
  заполнение: 0.3em;
  border-right: 1em сплошной черный}
ul.navbar a {
  text-decoration: none}
ссылка {
  цвет синий }
а: посетил {
  цвет: фиолетовый}
адрес {
  маржа сверху: 1em;
  padding-top: 1em;
  border-top: тонкая пунктирная}

Выберите «Сохранить как…» в меню «Файл», убедитесь, что вы находитесь в
тот же каталог / папка, что и mypage.html и сохраните
таблица стилей как «mystyle.css».

Теперь вернитесь к окну с HTML-кодом. Удалить все
от тега

включительно
тег и замените его элементом, как показано ниже (строка 5):




   Моя первая стилизованная страница 
     



[так далее.]

Это сообщит браузеру, что таблица стилей находится в
файл с именем «mystyle.css», и поскольку каталог не упоминается,
браузер будет искать в том же каталоге, где он нашел HTML
файл.

Если вы сохраните файл HTML и перезагрузите его в браузере, вы
не должно быть изменений: страница по-прежнему оформлена так же, но
теперь стиль берется из внешнего файла.

Окончательный результат

Следующим шагом будет размещение обоих файлов mypage.html и mystyle.css
на вашем веб-сайте. (Ну, возможно, вы захотите немного изменить их
сначала…) Но как это сделать, зависит от вашего интернет-провайдера.

Что такое CSS, как он работает и для чего используется?

Подходит ли вам технология? Пройдите нашу 3-минутную викторину!

Ты выучишь:
Если вам подходит карьера в сфере технологий
Какая техническая карьера соответствует вашим сильным сторонам
Какие навыки вам понадобятся для достижения ваших целей

Помните HTML (язык гипертекстовой разметки)? Язык кодирования, который служит основой для всей веб-разработки? Что ж, если HTML - это первый язык, который вам захочется выучить, когда вы заинтересованы в создании веб-сайтов, его двоюродный брат CSS - на втором месте.

Что такое CSS? И как это связано с HMTL?

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

Как работает CSS?

CSS привносит стиль на ваши веб-страницы, взаимодействуя с элементами HTML. Элементы - это отдельные HTML-компоненты веб-страницы, например абзац, которые в HTML могут выглядеть так:

  Это мой абзац!

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

 p {цвет: розовый; font-weight: жирный; }

В этом случае «p» (абзац) называется «селектором» - это часть кода CSS, определяющая, на какой элемент HTML будет влиять стиль CSS.В CSS селектор написан слева от первой фигурной скобки. Информация в фигурных скобках называется объявлением и содержит свойства и значения, которые применяются к селектору. Свойства - это такие вещи, как размер шрифта, цвет и поля, а значения - это настройки этих свойств. В приведенном выше примере «color» и «font-weight» являются свойствами, а «pink» и «bold» - значениями. Полный комплект

в скобках

 {цвет: розовый; font-weight: жирный; }

- это объявление, и снова «p» (означает абзац HTML) - это селектор.Эти же базовые принципы можно применять для изменения размеров шрифта, цвета фона, отступов полей и т. Д. Например. . .

 тело {background-color: lightblue; }

. . . сделает фон вашей страницы голубым или. . .

 p {font-size: 20px; красный цвет; }

. . .создаст абзац шрифтом 20 пунктов с красными буквами.

Внешний, внутренний или встроенный CSS?

Однако вам может быть интересно, как этот код CSS на самом деле применяется к содержимому HTML.Как и HTML, CSS пишется в виде простого текста с помощью текстового редактора или текстового процессора на вашем компьютере, и есть три основных способа добавить этот код CSS на ваши HTML-страницы. Код CSS (или таблицы стилей) может быть внешним, внутренним или встроенным. Внешние таблицы стилей сохраняются как файлы .css и могут использоваться для определения внешнего вида всего веб-сайта с помощью одного файла (вместо добавления отдельных экземпляров кода CSS к каждому элементу HTML, который вы хотите настроить). Чтобы использовать внешнюю таблицу стилей, ваш.html файлы должны включать раздел заголовка, который ссылается на внешнюю таблицу стилей и выглядит примерно так:

Это свяжет файл .html с вашей внешней таблицей стилей (в данном случае mysitestyle.css), и все инструкции CSS в этом файле будут применяться к вашим связанным страницам .html.

Внутренние таблицы стилей - это инструкции CSS, записанные непосредственно в заголовок конкретного файла.html-страница. (Это особенно полезно, если у вас есть одна страница на сайте, которая имеет уникальный внешний вид.) Внутренняя таблица стилей выглядит примерно так. . .

 
<стиль>
Тело {цвет фона: чертополох; }
P {размер шрифта: 20 пикселей; цвет: средне-голубой; }

. . . цвет фона чертополоха и абзацы из 20 пунктов, средний синий шрифт теперь будут применены к этой единственной странице .html.

Наконец, встроенные стили - это фрагменты CSS, записанные непосредственно в код HTML и применимые только к одному экземпляру кода.Например:

  Обратите внимание на этот заголовок!

приведет к тому, что один конкретный заголовок на одной странице .html будет отображаться фиолетовым шрифтом размером 40 пунктов.

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

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

Подходит ли вам технология? Пройдите нашу 3-минутную викторину!

Как работает CSS - Изучите веб-разработку

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

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

Браузер загружает HTML (например,грамм. получает его из сети).
Он преобразует HTML в DOM ( Document Object Model ). Модель DOM представляет собой документ в памяти компьютера. Подробнее о модели DOM в следующем разделе.
Затем браузер выбирает большинство ресурсов, на которые ссылается документ HTML, таких как встроенные изображения и видео ... и связанный CSS! JavaScript обрабатывается немного позже в этом процессе, и мы не будем говорить об этом здесь, чтобы упростить задачу.
Браузер анализирует полученный CSS и сортирует различные правила по типам их селекторов в разные «сегменты», например элемент, класс, идентификатор и т. д. На основе найденных селекторов он определяет, какие правила следует применять к каким узлам в DOM, и при необходимости прикрепляет к ним стиль (этот промежуточный шаг называется деревом визуализации).
Дерево рендеринга размещается в той структуре, в которой оно должно появиться после применения к нему правил.
Визуальное отображение страницы отображается на экране (этот этап называется рисованием).

Следующая диаграмма также предлагает простой вид процесса.

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

Понимание DOM помогает вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что DOM - это место, где встречаются ваш CSS и содержимое документа.Когда вы начнете работать с DevTools браузера, вы будете перемещаться по DOM при выборе элементов, чтобы увидеть, какие правила применяются.

Вместо длинного скучного объяснения давайте рассмотрим пример, чтобы увидеть, как реальный фрагмент HTML преобразуется в DOM.

Возьмите следующий HTML-код:

  
  Воспользуемся:
   Каскадный 
   Стиль 
   Таблицы

В модели DOM узел, соответствующий нашему элементу

, является родительским.Его дочерние элементы - это текстовый узел и три узла, соответствующие нашим элементам . Узлы SPAN также являются родительскими, а их дочерними узлами являются текстовые узлы:

 P
├─ «Давайте использовать:»
├─ SPAN
| └─ «Каскадный»
├─ SPAN
| └─ «Стиль»
└─ SPAN
   └─ «Листы»

Вот как браузер интерпретирует предыдущий фрагмент HTML - он отображает указанное выше дерево DOM, а затем выводит его в браузере следующим образом:

Допустим, мы добавили CSS в наш документ, чтобы стилизовать его.Опять же, HTML выглядит следующим образом:

  
  Воспользуемся:
   Каскадный 
   Стиль 
   Таблицы

Предположим, мы применили к нему следующий CSS:

  span {
  граница: сплошной черный 1px;
  цвет фона: салатовый;
}

Браузер проанализирует HTML и создаст из него DOM, а затем проанализирует CSS. Поскольку единственное правило, доступное в CSS, имеет селектор span , браузер сможет очень быстро сортировать CSS! Он применит это правило к каждому из трех s, а затем нарисует окончательное визуальное представление на экране.

Обновленный вывод выглядит следующим образом:

В нашей статье «Отладка CSS» в следующем модуле мы будем использовать DevTools браузера для отладки проблем с CSS и узнаем больше о том, как браузер интерпретирует CSS.

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

Ответ заключается в том, что он ничего не делает, а просто переходит к следующему биту CSS!

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

Точно так же, если браузер встречает селектор, которого он не понимает, он просто проигнорирует все правило и перейдет к следующему.

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

   Я хочу, чтобы этот текст был большим, жирным и синим.

  p {
  font-weight: жирный;
  цвет: синий;
  размер шрифта: 200%;
}

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

Это особенно хорошо работает, когда вы хотите использовать новое значение, которое поддерживается не везде.Например, некоторые старые браузеры не поддерживают calc () в качестве значения. Я мог бы указать резервную ширину для поля в пикселях, а затем перейти к ширине со значением calc () , равным 100% - 50px . Старые браузеры будут использовать пиксельную версию, игнорируя строку о calc () , поскольку они ее не понимают. Новые браузеры интерпретируют строку с использованием пикселей, но затем заменяют ее строкой с использованием calc () , поскольку эта строка появляется позже в каскаде.

 .коробка {
  ширина: 500 пикселей;
  ширина: calc (100% - 50 пикселей);
}

В последующих уроках мы рассмотрим еще много способов поддержки различных браузеров.

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