Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Как в html прописать css: Способы добавления стилей на страницу

Содержание

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

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

Первое, что мы рассмотрим, это три метода применения CSS к документу.

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

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

Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

Файл CSS может выглядеть следующим образом:

h2 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Атрибут href элемента <link> должен ссылаться на файл в файловой системе.

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


<link rel="stylesheet" href="styles/style.css">


<link rel="stylesheet" href="styles/general/style.css">


<link rel="stylesheet" href="../styles/style.css">

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

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style>, содержащейся внутри HTML <head>.

Таким образом, HTML будет выглядеть вот так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <style>
      h2 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.

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

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

index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <p>Пишите сюда свой код</p>

  </body>
</html>

styles.css:

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

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

 

Читайте дальше и получайте удовольствие!

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

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

h2  
a:link  
.manythings  
#onething  
*  
.box p  
.box p:first-child  
h2, h3, .intro  

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

Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

.special {
  color: red;
}

p {
  color: blue;
}

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

<p>Какого же я цвета?</p>

В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p {
  color: red;
}

p {
  color: blue;
}

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

Если говорить в общем, CSS строится на двух его составляющих:

Свойства 
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
Значения 
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h2, другое для селектора p. Правило для h2 выделено.

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

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

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

Функции

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

<div><div>The inner box is 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства <transform> rotate().

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

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

Некоторые свойства вроде font, background, padding, border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):


padding: 10px 15px 15px 5px;

делает то же самое, что и эти четыре, вместе взятые:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

или эти:

padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;

в то время как строка:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

делает то же, что и эти строки:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.

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

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

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.



body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  
  body {
    font-size: 130%;
  }
}

h2 {font-size: 1.5em;}



div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p{
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

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

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h2 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h2 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

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

margin: 0 auto;
padding-left: 10px;

А такие объявления не действительны:

margin: 0auto;
padding- left: 10px;

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

CSS- и HTML-атрибуты — Help Mail.ru. Mail.ru для бизнеса
































Тег Атрибуты
a class, href, id, style, target
b class, id, style
br class, id, style
p align, class, dir, id, style
font class, color, face, id, size, style
h2 align, class, dir, id, style
h3 align, class, dir, id, style
h4 align, class, dir, id, style
h5 align, class, dir, id, style
h5 align, class, dir, id, style
h6 align, class, dir, id, style
head dir, lang
hr align, size, width
i class, id, style
img align, border, class, height, hspace, id, src, style, usemap, vspace, width
label class, id, style
li class, dir, id, style, type
ol class, dir, id, style, type
p align, class, dir, id, style
s class, id, style
small class, id, style
span class, id, style
strike class, id, style
strong class, id, style
table align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width
td abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width
th abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width
tr align, bgcolor, class, dir, id, style, valign
u class, id, style
ul class, dir, id, style

Зачем нужен нормализатор CSS — Журнал «Код»: программирование без снобизма

Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает. 

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

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

А после этого посмотрим, как выглядит этот код в разных браузерах.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Делаем одинаково</title>
</head>
<body>
  <hr>
  <hr>
  <input type="text" placeholder="Напишите свой текст">
  <br>
  <br>
  <button>Кнопка</button>
  <br>
  <br>
  <a href="#">Привет, это журнал «Код»! </a>
</body>
</html>

Хром, версия 87.

Сафари, версия 14. Текст в стандартных элементах гораздо меньше, чем в Хроме.

Firefox, версия 84. Выглядит почти так же, как и в Сафари, но линии гораздо жирнее.

Почему так происходит

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

  • толщина линий обводки,
  • радиус скругления,
  • размер текста,
  • внешние и внутренние отступы у элементов,
  • правила оформления ссылок,
  • формы и кнопки.

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

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

Что такое нормализатор стилей

Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути это просто большой CSS-файл, который делает следующее:

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

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

Пример

Код ниже делает две вещи:

  1. Устанавливает одинаковую высоту строки во всех браузерах.
  2. Предотвращает изменения размера шрифта в iOS при повороте экрана.

html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}

-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей: 

-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.

text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.

Получается, что все браузеры поймут первую команду line-height, потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).

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

Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:

<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

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

Вот как будут выглядеть наши страницы после подключения нормализатора:

Хром

Сафари

Firefox

Опера

Но что-то же всё равно отличается даже на этих скриншотах!

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

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

Это единственный нормализатор?

Нет, на самом деле их много. Просто этот самый популярный и проверенный. 

Что дальше

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

Текст и скриншоты:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

10 ошибок начинающего верстальщика и как их избежать

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

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Программа обучения: «HTML-верстка: с нуля до первого макета»

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

1. Неправильные имена классов

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

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

Правильно:

.shopping-cart-block

.social-icon

Неправильно:

.korzina-block

.социальные-кнопки

.-3-block

.2-review

.shp-crt

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

Идентификатор #id также используется, чтобы передавать информацию в JavaScript. Поэтому можно запутаться среди разных #id, потому что некоторые используются для скриптов, а другие — для оформления.

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

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

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца <p> для разметки

Браузер по умолчанию добавляет к <p> некоторые внешние отступы, чтобы параграф текста выглядел отдельным блоком. Чтобы облегчить работу и не добавлять отступы к изображению с помощью стилей, некоторые верстальщики оборачивают его тегом <p>…</p>.

Как избежать: для разметки страницы использовать специальные теги <div> и <span>, прописать нужные стили для этих тегов.

5. Много изображений в высоком разрешении на странице

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

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

*{

margin:0;

padding:0;

}

Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.

7. Использование блочного элемента внутри строчного

В HTML существует два типа элементов: блоки и строки.

С помощью блоковых элементов выстраивается структура страницы. Это <div>, <ul>, <h2>, <h4> и другие элементы. Их свойство по умолчанию — display:block.

Строчные элементы, к которым относятся <span>, <li>, <a>, <label>, используются внутри блоковых. По умолчанию их свойство задается как display:inline.

Неправильно:

<span>

<h2> Заголовок </h2>

<ul>

<li> Пункт 1</li>

<li> Пункт 2</li>

</ul>

</span>

Правильно:

<div>

<h2> Заголовок </h2>

<ul>

<li> Пункт 1</li>

<li> Пункт 2</li>

</ul>

</div>

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block

8. Отступы между элементами сделаны с помощью тега переноса строки <br/>

Часто с помощью одного или нескольких тегов <br/> создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег <br/> должен использоваться внутри тега с текстом <p>…</p>.

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.

10. Не указан тип страницы

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: < !DOCTYPE html >

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

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

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

Итак, ошибки, которые нужно избегать:

  • Неправильные имена классов;
  • Использование идентификатора #id для описания стилей блока;
  • Описание стилей для элементов внутри атрибута style;
  • Использование тега абзаца <p> для разметки;
  • Много изображений в высоком разрешении на странице;
  • Не сброшены начальные настройки;
  • Использование блочного элемента внутри строчного;
  • Отступы между элементами сделаны с помощью тега переноса строки <br/>;
  • Страница не проверялась валидатором;
  • Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

описывайте стилями свою логику — CSS-LIVE

Перевод статьи Meaningful CSS: Style Like You Mean It с сайта alistapart.com для css-live.ru. Автор — Тим Бакстер.

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

И всё же слишком часто наша разметка напоминает клубок div-ов, а наш CSS — трясина классов, лишь отдаленно связанных с этими div-ами. Мы строим пирамиды вложенных div-ов и навешиваем на каждый div пачку классов — но при взгляде в CSS эти классы едва ли подскажут нам, что именно мы хотели описать. Даже когда разметка семантична и осмысленна, в итоге мы переопределяем ее CSS-классами, взятыми с потолка. У них нет внутреннего значения.

Много лет назад нас предупреждали насчет такого подхода:

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

Джефри Зельдман, «Разработка по веб-стандартам», 1-е изд.

Похожие доводы приводит и W3C:

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

Так почему же всё-таки наш CSS так нещадно злоупотребляет классами, и зачем мы мусорим своими классами в разметке? Что мешает нашему CSS быть столь же семантичным, как разметка? Почему они оба не могут стать семантичнее и осмысленнее, развиваясь в тандеме?

Совершенствуем объекты

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

Системы для надежного создания сложных, многоразовых компонентов породили проблему прогрессирующей злокачественной классянки — настолько, что сегодня разметку слишком часто пишут ради CSS, а не наоборот. Даже пытаясь писать семантичную, доступную разметку, мы всё равно вынуждены лепить поверх нее еще какие-то свои значения, чтобы угодить стилям. И в разметке, и в CSS у нас отразилось то время, когда для описания объектов у нас были div-ы да классы, только и всего. В любой непонятной ситуации добавляй еще тех и других. Так было безопаснее, особенно для старых браузеров, так что мы ориентировались на самые безликие объекты, какие были.

Сегодня мы уже не связаны этим. Мы можем определять объекты куда совершеннее. Мы можем создавать семантичный, самодокументируемый и осмысленный CSS, который понимает, что он описывает, и не уступает лучшей современной разметке в выразительности и доступности. Мы можем определить всего слона, а не писать что-то вроде «.колонна» или «.шланг».

Проясняем пару моментов

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

У Ларсона в серии «Противоположная сторона» есть одна карикатура, на которой человек таскает за собой краску и подписывает всё, что видит. По его входной двери стекает свежая надпись «Дверь», на дереве красуется подпись «Дерево», а на боку у кота отчетливо выведено «Кот». Довольный результатом, человек говорит: «Это должно прояснить пару моментов».

Каждый из нас — этот персонаж Ларсона, радующийся подписям. Мы не задумываясь пишем <table> и <form>. На одном лишь Github можно наткнуться на множество примеров <main>. Но зачем? Элемент main может быть только один, так что уже ясно, как сослаться на него напрямую. Новым элементам HTML5 вот-вот пойдет второй десяток лет. Ничто не мешает нам вовсю использовать их. И мы уже не можем оправдываться тем, что их, мол, не поймут наши коллеги.

Зачем заново изобретать в классах те семантические значения, которые уже есть в спецификации? Зачем повторять их и делать из них кашу?

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

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

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

А на тот случай, когда семантики HTML5 мало, у нас есть ARIA — стандарт, специально призванный закрывать дыры. От ARIA часто отмахиваются как от «доступности и только», но на самом деле — в полном соответствии с названием — он про «Доступные насыщенные интернет-приложения». А значит, расширенной семантики в нем выше крыши.

Например, если хотите определить шапку в верху страницы, можно создать собственный класс .page-header, который не несёт никакого реального смысла. Можно использовать элемент header, но поскольку их может быть несколько, это может не сработать. Но в спецификации ARIA уже есть [role=banner], который как раз четко говорит: «Это шапка в верху страницы».

Когда уже есть <header role="banner">, добавлять еще какой-то класс попросту излишне, это мусор. Мы и так точно знаем, о чем говорим в CSS, никакой неоднозначности.

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

Внимание: не прописывайте ARIA-ролей для элементов, у которых уже есть та же самая семантика. Например, не пишите <button role="button">, поскольку эта семантика уже заложена в самом элементе. Вместо этого используйте [role=button] в элементе, который должен выглядеть и вести себя, как кнопка, и оформляйте соответственно:

button,
[role=button] {
    … 
}

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

Ладно, но почему?

А вот почему:

  • Если вы уже писали семантичную, доступную разметку, то вы здорово сокращаете размер кода, а разметка остается чистой, экономной и легковесной. Ее будет легче читать людям и — в большинстве случаев — быстрее загружать и парсить. Вы убираете весь свой мусор и браузеру достаются лишь знакомые элементы. У каждого элемента своя определенная задача и свой смысл.
  • Если же до сих пор вы бодались с мешаниной div-ов и class-ов, то вы изрядно выиграете в доступности, потому что теперь вам служат роли и разметка, полезная для вспомогательных технологий. Кроме того, вы нарабатываете стандартные паттерны разметки, упрощая их повторение и приводя его к единообразию.
  • Вы всячески поощряете последовательный визуальный язык многоразовых элементов. Последовательный визуальный язык — ключ к тому, что вашим продуктом будет достаточно удобно пользоваться, и вы обрадуете дизайнеров, поскольку избегаете тех пугающих моментов, где элементы выглядят почти полностью одинаковыми, но не до конца. Напротив, если что-то выглядит и крякает как утка, вы гарантируете, что это действительно утка, а не кролик.утка.
  • Не приходится переключаться между контекстами CSS и HTML, поскольку каждый из них чётко описывает, что он делает в соответствии со стандартами языка.
  • Вы получите более последовательные паттерны разметки, поскольку делать правильно проще и нагляднее, а неправильно — труднее.
  • Вам не потребуется долго обдумывать названия. Просто следуйте спецификации.
  • Вы сможете отказаться от сегодняшних CSS-фреймворков.

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

<form method="POST" action=".">
	<div>
		<label for="id-name-field">Ваше имя</label>
		<input type="text" name="name-field" />
	</div>
	<div>
		<input type="submit" value="Enter" />
	</div>      
</form>

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

Распространённая и оптимальная разметка формы
Как у вас сейчас Как могло бы быть Почему
.form form Большинство ваших форм будут — по крайней мере, в идеале — следовать последовательным паттернам разработки. Оставьте дополнительные идентификаторы для тех форм, у которых их нет. Доверяйте вашим паттернам разработки.
.form-group form > p или fieldset > p W3C рекомендует оборачивать элементы формы в теги абзаца. Это предсказуемый, рекомендуемый паттерн для оборачивания элементов формы.
.form-control или .text-input [type=text] Вы уже знаете, что это поле для текста.
.btn and .btn-primary или .text-input [type=submit] Отправка формы является по сути основным действием.

Некоторые распространенные паттерны разметки форм и их более оптимальная замена

Исходя из этого, вот новая, улучшенная разметка.

<form method="POST" action=".">
	<p>
		<label for="id-name-field">What’s Your Name</label>
		<input type="text" name="name-field" />
	</p>
	<p>
		<button type="submit">Enter</button>
	</p>
</form>

Функциональность та же самая.

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

[role=tab] {
	display: inline-block;
}
[role=tab][aria-selected=true] {
	background: tomato;
}

[role=tabpanel] {
	display: none;
}
[role=tabpanel][aria-expanded=true] {
	display: block;
}

Заметьте, что здесь можно было бы использовать и [aria-hidden], который семантичнее, чем служебный класс .hide, но aria-expanded подходит лучше. Но вообще панель вкладок может обойтись без них обоих.

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

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

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

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

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

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

Еще может быть опасение, что придется писать гигантские списки селекторов. Иногда полезно создать обёрточный класс, но если честно, у вас не должно быть большой пачки селекторов, поскольку сами элементы семантически различаются и не должны иметь так много общих стилей. Суть осмысленного CSS в том, чтобы знать из CSS, что этот button или [role=button] относится ко всем кнопкам, а [type=submit] — всегда основной элемент действия в форме.

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

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

P.S. Это тоже может быть интересно:

Определение CSS селекторов | База знаний

В этой статье подробно разберем, как найти CSS селекторы, которые необходимы для сбора данных с сайта

Важно! Не переживайте, если ранее не были знакомы с html и CSS, здесь не потребуется специальных знаний в программировании 😉

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

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome). 

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

Следующий этап работы — определить тег, который нам нужен. Сделать это можно несколькими способами:

  • кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
  • переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;
  • через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

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

Тег — это элемент, который может быть состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например <br> (перенос текста на новую строку). 

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь  style=»font-size: 200%; text-align: center;» является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег <strong></strong> ребенок и тега <h3></h3>, и тега <div></div>, а они соответственно его родители:

Правила обозначения CSS селекторов

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

Название тега — достаточно просто указать span, div, img, h3  в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h2, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обознаются не так, как все остальные. Пример:

Здесь селектор  class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

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

Другие атрибуты — все остальные атрибуты записываются по единому правило: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

Использования элементов нескольких тегов — иногда атрибуты у нужного тега не уникальны или вовсе отсутствуют. В этих случаях можно использовать атрибуты родителей для определения селектора. Например, мы хотим использовать для сбора данных информацию из тега <strong>:

Сначала пробуем ближайшего родителя, то есть тег <span>. Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги <strong>, которые находятся в теге <span>. Аналогично будет выглядеть и с родителей <h3>: h3 strong

Мы можем задать и более четкое условие, что нам нужно все теги <strong>, которые находятся непосредственно в теге <span>. Для этого используем символ >: span > strong

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h3.font-header span span strong.

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

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги <input>, в которых есть атрибут type=»submit» и они должны являться детьми тега <div>, в котором есть атрибут. В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг): 

<div class=»button»>
<input type=»submit»></input>
</div>

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

Проверка уникальности CSS селектора

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

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

Три типа CSS правил | bookhtml.ru

И так, давайте уже начнем заполнять нашу таблицу стилей CSS. Для примера поработаем с тегами <p> (абзацами). Наша html-страничка имеет несколько тегов <p> (несколько абзацев).

Первый тип CSS правил позволяет нам прописать в таблице стилей — как будут выглядеть все теги <p> (все абзацы) в html-документе.

Пример:

p {

color:#424242;

font-size:16px;

font-family:Verdana, Tahoma;

}

 

p имя тега, к которому будут применены свойства таблицы стилей. Свойства прописываем внутри фигурных скобок {   }. После имени свойства обязательно ставим двоеточие, а после значения — точку с запятой.

color:#424242; — цвет текста — серый.

font-size:16px; — размер шрифта 16px.

font-family:Verdana, Tahoma; — гарнитура шрифта. Мы указали два шрифта. Если в системе не окажется первого — будет применен второй.

Вот так, при помощи таблицы стилей CSS, мы прописываем свойства для всех тегов <p> (абзацев) на html-странице. Так же можно прописывать свойства и для других тегов.

Возникает следующий вопрос: как же тогда из всех этих абзацев в каком то одном прописать другие свойства? Как создать правило для определенного абзаца? Это будет второй тип CSS правил.

Создаем новое правило и прописываем ему свои свойства.

Пример:

p.new {

font-weight:bold;

color:#cc0000;

}


p.new — имя нового правила.

font-weight:bold; — текст написан жирным шрифтом.

color:#cc0000; — цвет текста — красный.

Теперь, как нам прописать данное правило конкретному абзацу? Для этого открываем в блокноте html-код нашей странички и к выбранному тегу <p> с помощью атрибута class прописываем данное правило.

Пример:

<p>Текст абзаца</p>

Данное правило применимо только к тегам <p>. С другими тегами оно работать не будет.

Третий тип CSS правил — это правила которые можно применять к любому тегу. Создаются они через простую точку (точка, имя правила).

Пример:

.rule {

color:#00cc00;

}

Это правило будет работать уже и с тегом <p> и с тегом <h> и с другими тегами.

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

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

Во-первых, давайте рассмотрим три метода применения CSS к документу: с внешней таблицей стилей, с внутренней таблицей стилей и со встроенными стилями.

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

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

Вы ссылаетесь на внешнюю таблицу стилей CSS из элемента HTML :

  

  
    
     Мой эксперимент с CSS 
    
  
  
    

Привет, мир!

Это мой первый пример CSS

Файл таблицы стилей CSS может выглядеть так:

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

п {
  красный цвет;
}  

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

 






  

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

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

Привет, мир!

Это мой первый пример CSS

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

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

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

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

  

  
    
     Мой эксперимент с CSS 
  
  
    

Привет, мир!

Это мой первый пример CSS

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

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

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

index.html:

  

  
    
     Мои эксперименты с CSS 
    
  
  

    

Создайте здесь свой тестовый HTML

styles.css:

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

В качестве альтернативы вы также можете использовать интерактивный редактор, расположенный ниже.

Читайте и получайте удовольствие!

Селектор нацелен на HTML для применения стилей к содержимому.Мы уже обнаружили множество селекторов в руководстве «Начало работы с CSS». Если CSS не применяется к содержимому, как ожидалось, ваш селектор может не соответствовать так, как вы думаете, он должен соответствовать.

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

  h2
ссылка
.много вещей
#одна вещь
*
.box p
.box p: первый ребенок
h2, h3,.введение  

Попробуйте создать несколько правил CSS, в которых используются указанные выше селекторы. Добавьте HTML, который будет стилизован селекторами. Если какой-либо из приведенных выше синтаксисов вам не знаком, попробуйте поискать в MDN.

Примечание : Вы узнаете больше о селекторах в следующем модуле: Селекторы CSS.

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

Вы можете столкнуться со сценариями, когда два селектора выбирают один и тот же элемент HTML. Рассмотрим таблицу стилей ниже с селектором p , который устанавливает синий цвет для текста абзаца.Однако существует также класс, который устанавливает красный цвет для текста выбранных элементов.

  .special {
  красный цвет;
}

п {
  цвет синий;
}  

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

  

Какого я цвета?

В языке CSS есть правила, определяющие, какой селектор будет сильнее в случае конфликта.Эти правила называются каскадом и специфичностью . В блоке кода ниже мы определяем два правила для селектора p , но текст абзаца будет синим. Это связано с тем, что объявление, которое устанавливает синий цвет текста абзаца, появляется позже в таблице стилей. Более поздние стили заменяют конфликтующие стили, которые появляются ранее в таблице стилей. Это правило каскада .

  п {
  красный цвет;
}

п {
  цвет синий;
}  

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

Попробуйте сами! Добавьте HTML, затем добавьте два правила p {...} в свою таблицу стилей. Затем измените первый селектор p на . Special , чтобы увидеть, как он меняет стиль.

Поначалу правила специфичности и каскада могут показаться сложными.Эти правила легче понять, если вы ближе познакомитесь с CSS. В разделе «Каскад и наследование» в следующем модуле это подробно объясняется, в том числе о том, как вычислить специфичность.

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

На самом базовом уровне CSS состоит из двух компонентов:

  • Свойства : это удобочитаемые идентификаторы, указывающие, какие стилистические особенности вы хотите изменить.Например, font-size , width , background-color .
  • Значения : каждому свойству присваивается значение. Это значение указывает, как стилизовать свойство.

В приведенном ниже примере выделяется одно свойство и значение. Имя свойства - , цвет , значение - , синий, .

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

Наконец, блоки объявления CSS объединяются с селекторами для создания наборов правил CSS (или правил CSS ). Пример ниже содержит два правила: одно для селектора h2 и одно для селектора p . Цветное выделение указывает на правило h2 .

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

Важно: Свойства и значения CSS чувствительны к регистру. Свойство и значение в каждой паре разделяются двоеточием. (: )

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

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

Важно : В CSS (и других веб-стандартах) согласовано, что орфография в США является стандартом там, где есть языковые вариации или неточности. Например, цвет следует записать как цвет , так как цвет работать не будет.

Функции

Хотя большинство значений являются относительно простыми ключевыми словами или числовыми значениями, есть некоторые значения, которые принимают форму функции.Примером может служить функция calc () , которая может выполнять простые вычисления в CSS:

  
Внутреннее поле 90% - 30 пикселей.
  .outer {
  граница: сплошной черный цвет 5 пикселей;
}

.коробка {
  отступ: 10 пикселей;
  ширина: calc (90% - 30 пикселей);
  цвет фона: rebeccapurple;
  цвет белый;
}  

Это отображается как:

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

Другим примером могут быть различные значения для transform , такие как rotate () .

  .box {
  маржа: 30 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: rebeccapurple;
  преобразовать: повернуть (0.8 оборот);
}  

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

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

CSS @rules (произносится как «at-rules») содержат инструкции о том, что CSS должен выполнять или как он должен себя вести. Некоторые @rule просты с ключевым словом и значением. Например, @import импортирует таблицу стилей в другую таблицу стилей CSS:

Одно из распространенных @rule, с которым вы, вероятно, столкнетесь, - это @media , которое используется для создания медиа-запросов.Медиа-запросы используют условную логику для применения стилей CSS.

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

  кузов {
  цвет фона: розовый;
}

@media (min-width: 30em) {
  тело {
    цвет фона: синий;
  }
}  

В этих уроках вы встретите и другие правила @.

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

Некоторые свойства, такие как font , background , padding , border и margin , называются сокращенными свойствами. Это связано с тем, что сокращенные свойства устанавливают несколько значений в одной строке.

Например, эта строка кода:

 
отступ: 10px 15px 15px 5px;  

эквивалентно этим четырем строкам кода:

  padding-top: 10px;
отступ справа: 15 пикселей;
padding-bottom: 15 пикселей;
отступ слева: 5 пикселей;  

Эта одна строка:

  фон: красный url (bg-graphic.png) 10px 10px repeat-x исправлено;  

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

  цвет фона: красный;
фоновое изображение: URL (bg-graphic.png);
background-position: 10px 10px;
фон-повтор: повтор-х;
background-attachment: исправлено;  

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

Попробуйте использовать объявления (см. Выше) в собственном упражнении CSS, чтобы лучше понять, как это работает.Вы также можете поэкспериментировать с разными значениями.

Предупреждение : Менее очевидный аспект использования сокращений CSS - это сброс пропущенных значений. Значение, не указанное в сокращении CSS, возвращается к своему исходному значению. Это означает, что упущение в сокращении CSS может иметь значение вместо ранее установленных значений .

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

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

 

тело {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  заполнение: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  
  тело {
    размер шрифта: 130%;
  }
}

h2 {размер шрифта: 1.5em;}



div p, #id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  заполнение: 1em;
}

div p + p {
  padding-top: 0;
}  

Код «Комментирование» также полезен для временного отключения участков кода для тестирования. В приведенном ниже примере правила для .special отключены путем «комментирования» кода.

Добавьте комментарии в свой CSS.

Пробел означает фактические пробелы, табуляции и новые строки. Так же, как браузеры игнорируют пробелы в HTML, браузеры игнорируют пробелы внутри CSS.Ценность пробелов в том, как они могут улучшить читаемость.

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

  кузов {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  заполнение: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  тело {
    размер шрифта: 130%;
  }
}

h2 {
  размер шрифта: 1.5em;
}

div p,
#id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  заполнение: 1em;
}

div p + p {
  padding-top: 0;
}
  

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

  body {font: 1em / 150% Helvetica, Arial, sans-serif; заполнение: 1em; маржа: 0 авто; max-width: 33em;}
@media (min-width: 70em) {body {font-size: 130%;}}

h2 {размер шрифта: 1.5em;}

div p, #id: первая строка {цвет фона: красный; радиус границы: 3px;}
div p {маржа: 0; заполнение: 1em;}
div p + p {padding-top: 0;}
  

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

Важно: Хотя пробелы разделяют значения в объявлениях CSS, в именах свойств никогда не бывает пробелов .

Например, эти объявления являются действительными CSS:

  наценка: 0 авто;
отступ слева: 10 пикселей;  

Но эти декларации недействительны:

  маржа: 0авто;
отступ слева: 10 пикселей;  

Вы видите ошибки с интервалом? Во-первых, 0auto не распознается как допустимое значение для свойства margin .Запись 0auto предназначена для двух отдельных значений: 0 и auto . Во-вторых, браузер не распознает padding- как допустимое свойство. Правильное имя свойства ( padding-left ) отделено ошибочным пробелом.

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

Чтобы узнать, как интервал может нарушить CSS, попробуйте поиграть с интервалом внутри вашего тестового CSS.

Полезно понять, как браузер использует HTML и CSS для отображения веб-страницы. Следующая статья, Как работает CSS, объясняет этот процесс.

Организация вашего CSS - Изучите веб-разработку

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

Предварительные требования: Базовая компьютерная грамотность, базовое установленное программное обеспечение, базовые знания работы с файлами, основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучение первых шагов CSS).
Цель: Чтобы узнать несколько советов и передовых методов организации таблиц стилей, а также узнать о некоторых соглашениях об именах и инструментах, которые обычно используются, чтобы помочь в организации CSS и совместной работе.

Вот несколько общих советов о том, как поддерживать порядок и порядок в таблицах стилей.

Есть ли в вашем проекте руководство по стилю кодирования?

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

Например, взгляните на рекомендации CSS для примеров кода MDN.

Поддерживайте согласованность

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

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

Форматирование читаемых CSS

Есть несколько способов увидеть форматирование CSS. Некоторые разработчики помещают все правила в одну строку, например:

  .box {background-color: # 567895; }
h3 {цвет фона: черный; цвет белый; }  

Другие разработчики предпочитают разбивать все на новую строку:

  .box {
  цвет фона: # 567895;
}

h3 {
  цвет фона: черный;
  цвет белый;
}  

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

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

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

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

Вы могли использовать свойство CSS определенным образом, чтобы обойти несовместимость старых браузеров, например:

 .коробка {
  цвет фона: красный;
  фоновое изображение: линейный градиент (вправо, # ff0000, # aa0000);
}
  

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

Создайте логические разделы в таблице стилей

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

  • корпус
  • п
  • h2 , h3 , h4 , h5 , h5
  • ul и ol
  • Таблица Свойства
  • Ссылки

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

 

тело { ... }

h2, h3, h4, h5 {...}

ул {...}

blockquote {...}
  

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

 

.nobullets {
  стиль списка: нет;
  маржа: 0;
  отступ: 0;
}

...

  

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

 

.main-nav {...}

.logo {...}
  

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

 

.product-list {...}

.product-box {...}
  

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

Избегайте чрезмерно специфичных селекторов

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

с классом box внутри

с классом main .

  article.main p.box {
  граница: 1px solid #ccc;
}  

Если вы затем захотите применить те же правила к чему-то за пределами main или к чему-то другому, кроме

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

  .box {
  граница: 1px solid #ccc;
}  

Будут времена, когда будет иметь смысл делать что-то более конкретное; однако это, как правило, будет скорее исключением, чем обычной практикой.

Разбивайте большие таблицы стилей на несколько меньших

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

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

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

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

Методологии CSS

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

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

OOCSS

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

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

  .comment {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
}

.comment img {
  граница: 1 пиксель сплошного серого цвета;
}

.comment .content {
  размер шрифта: .8rem;
}

.пункт списка {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
  нижняя граница: сплошной серый 1px;
}

.list-item .content {
  размер шрифта: .8rem;
}  

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

  .media {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
}

.media .content {
  размер шрифта: .8rem;
}

.comment img {
  граница: 1 пиксель сплошного серого цвета;
}

.пункт списка {
  нижняя граница: сплошной серый 1px;
}  

В вашем HTML для комментария потребуются классы media и comment применены классы:

  

К элементу списка будет применено носителей и элемент списка :

  

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

БЭМ

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

  <форма>
  
  <ввод
   
    type = "submit" />
  

Дополнительные классы аналогичны тем, которые используются в примере OOCSS; однако они используют строгие соглашения об именах БЭМ.

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

Подробнее об этой системе БЭМ 101 читайте на сайте CSS Tricks.

Другие общие системы

В настоящее время используется большое количество таких систем. Другие популярные подходы включают масштабируемую и модульную архитектуру для CSS (SMACSS), созданную Джонатаном Снуком, ITCSS от Гарри Робертса и атомарный CSS (ACSS), первоначально созданный Yahoo !.Если вы столкнетесь с проектом, в котором используется один из этих подходов, то преимущество состоит в том, что вы сможете искать и находить множество статей и руководств, которые помогут вам понять, как кодировать в том же стиле.

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

Системы сборки для CSS

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

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

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

Определение переменных

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

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

  $ базовый цвет: # c6538c;

.тревога {
  граница: 1px solid $ base-color;
}  

После компиляции в CSS вы получите следующий CSS в окончательной таблице стилей.

  .alert {
  граница: 1px solid # c6538c;
}  
Составление таблиц стилей компонентов

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

Так, например, с партиалами у вас может быть несколько файлов стилей внутри каталога, скажем foundation / _code.scss , foundation / _lists.scss , foundation / _footer.scss , foundation / _links.scss и т. Д. Затем вы можете использовать роль Sass @use , чтобы загрузить их в другие таблицы стилей:

  // фундамент / _index.дерзость
@ использовать 'код'
@ использовать 'списки'
@ использовать "нижний колонтитул"
@use 'links'  

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

  // style.sass
@use 'foundation'  

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

Постобработка для оптимизации

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

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

Чтобы узнать больше о макете в CSS, см. Раздел «Изучение макета CSS».

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

Применение CSS | HTML Dog

Встроенный

Встроенные стили вставляются прямо в теги HTML с помощью атрибута стиля .

Выглядят они примерно так:

 

текст

Это сделает этот конкретный абзац красным.

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

Ссылка на нас!
Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

внутренний

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

 



 Пример CSS 
  <стиль> 

  п {
  цвет: красный; 
 } 

  a {
  цвет: синий; 
 } 

   
...
  

Это сделает все абзацы на странице красными, а все ссылки - синими.

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

Внешний

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

 
п {
    красный цвет;
}

a {
    цвет синий;
}
  

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

 



     Пример CSS 
    
...
  

Применить!

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

Теперь измените свой HTML-файл так, чтобы он начинался примерно так:

 



     Моя первая веб-страница 
    

...
  

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

Как создать внешнюю таблицу стилей CSS

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

  1. Начните с файла HTML, который содержит встроенную таблицу стилей, такую ​​как эта. Скопируйте этот текст и вставьте в новый HTML-файл.
      
    
    
    
     Встроенная таблица стилей 
    <стиль>
      h2 {
        цвет: # 009;
        размер шрифта: 1em;
        нижнее поле: .3em;
        выравнивание текста: центр;
        текст-оформление: подчеркивание;
      }
      
      стол {
        прибыль: .3em;
        ширина: 290 пикселей;
      }
      
      th {
        заполнение: .2em;
      }
      
      td {
        цвет фона: #ffc;
        граница: 1px solid # 900;
        отступ слева: .5em;
        отступ справа: .5em;
      }
      
      #trHeader {
        цвет: # 900;
        текст-оформление: подчеркивание;
      }
      
      .centerCell {
        выравнивание текста: центр;
      }
    
    
    
    
    

    Рекорд домашнего бега за все время

    <таблица> Игрок Хоум-раны Команда Барри Бондс 762 Гиганты Хэнк Аарон 755 Храбрые Бэйб Рут 714 Янки Уилли Мэйс 660 Гиганты
  2. Создайте новый файл и сохраните его как StyleSheet.css в том же каталоге. (Вы можете дать файлу любое имя, если у него есть расширение .css).
  3. Переместите все правила CSS из файла HTML в файл StyleSheet.css . Не копируйте теги стиля .
      h2 {
      выравнивание текста: центр;
      размер шрифта: 1em;
      цвет: # 009;
      нижнее поле: .3em;
      текст-оформление: подчеркивание;
    }
    
    стол {
      маржа: .3em;
      ширина: 290 пикселей;
    }
    
    th {
      заполнение: .2em;
    }
    
    td {
      отступ слева: .5em;
      отступ справа: .5em;
      граница: 1px solid # 900;
      цвет фона: #ffc;
    }
    
    #trHeader {
      текст-оформление: подчеркивание;
      цвет: # 900;
    }
    
    .centerCell {
      выравнивание текста: центр;
    }  
  4. Удалите блок стиля из файла HTML.
  5. В HTML-файле добавьте тег link после закрывающего тега title , который указывает на StyleSheet.css .
        

    Атрибуты включают:

    href указывает на расположение внешней таблицы стилей
    rel должен быть установлен как «таблица стилей» для связывания таблиц стилей
    type должен быть установлен на «text / css» для связи с каскадными таблицами стилей
  6. Откройте HTML-файл в браузере.Это должно выглядеть так:

Решите, где писать CSS - Создайте свои первые веб-страницы с помощью HTML и CSS

https://vimeo.com/270702669

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

CSS можно записать либо:

  • вне вашего HTML-файла

  • внутри вашего HTML-файла

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

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

Внешний CSS

В проекте HTML и CSS часто используется следующая файловая структура:

Типичная структура проекта веб-сайта

Существует:

  1. Общая папка для проекта («веб-сайт»).

  2. Папка «веб-сайт» содержит файл с именем index.html.

  3. В папке «website» есть еще одна папка с именем «css.«

  4. Папка« css »содержит файл с именем« style.css ».

У вас также может быть папка с именем images, которая будет содержать изображения, используемые на ваших веб-страницах.

Это то, что больше всего ваших простых проектов веб-сайтов будет выглядеть так! Вы напишете HTML в файле index.html, а CSS - в файле style.css.

Файл HTML - это то, что читается браузером пользователя. Поэтому вам нужна ссылка в нем. в файл CSS; в противном случае ваши красивые стили не будут применены к нужным вам HTML-элементам.😢

  

    
         НАЗВАНИЕ ВАШЕЙ СТРАНИЦЫ 
        
    
    
        

НЕКОТОРЫЙ HTML, УУХУ

Посмотрите на строку 5.

Элемент в HTML сообщает странице, где найти соответствующий CSS. Он должен иметь следующие атрибуты:

  • href: путь к файлу CSS.Если вы структурируете свой проект, как показано на изображении в верхней части главы, это будет «css / style.css».

  • type: описывает тип ссылки, которая всегда будет «text / css» для ваших таблиц стилей.

  • rel: описывает отношения между страницами, которые всегда будут «таблицей стилей» для ваших таблиц стилей. таблицы стилей
    Для элемента не требуется закрывающий тег!

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

Внутренний CSS

Вы также можете написать CSS в своем HTML следующим образом:

  

    
         Внутренний CSS 
        
    
    
        

НЕКОТОРЫЙ HTML, УУХУ

Посмотрите строки 5–9.

Тег

Сэмми - величайшая акула в океане.
Им нравится плавать с друзьями.

Внутри элемента

Сэмми - величайшая акула в океане.
Им нравится плавать с друзьями.

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

index.html

  

    
         Сэмми Шарк 
        <стиль>
            div {
                цвет: темно-синий;
                семейство шрифтов: без засечек;
            }
        
    
    
        
Сэмми - величайшая акула в океане.
Им нравится плавать с друзьями.

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

Сэмми - величайшая акула в океане.
Им нравится плавать со своими друзьями .

Сохраните файл и обновите страницу в браузере или посмотрите на следующее изображение, чтобы обнаружить, что теперь оба слова, использующие элемент , имеют синий цвет:

В этом разделе вы написали селекторы CSS в элементе