Класс заголовка css – Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Содержание

Классы | htmlbook.ru

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

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут (пример 8.1).

Пример 8.1. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   P { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
     Они отличаются высокой световой отдачей, продолжительным сроком службы, 
     малой яркостью светящейся поверхности, близким к естественному спектральным 
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

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

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

.Имя класса { свойство1: значение; свойство2: значение; … }

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   .gost {
    color: green; /* Цвет текста */
    font-weight: bold; /* Жирное начертание */
   }
   .term {
    border-bottom: 1px dashed red; /* Подчеркивание под текстом */
   }
  </style>
 </head> 
 <body>
   <p>Согласно <span>ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b>предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

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

Пример 8.3. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #666; /* Рамка вокруг таблицы */
   }
   th {
    background: #009383; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   tr.odd {
    background: #ebd3d7; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Белый</td><td>10</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
   </tr>
   <tr>
    <td>Аметист</td><td>Голубой</td><td>7</td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
   </tr>
   <tr>
    <td>Сапфир</td><td>Голубой</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако тегов</title>
  <style type="text/css">
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">цвет</a> 
   <a href="/term/95">фон</a> 
   <a href="/term/11">палитра</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свет</a> 
   <a href="/term/44">панели</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">прямоугольник</a> 
   <a href="/term/14">пиксел</a> 
   <a href="/term/27">градиент</a> 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

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

Вопросы для проверки

1. Какое имя класса написано правильно?

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.

3. Как задать стиль у тега <div>DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. div=iddqd { color: red; }

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

 s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4

Суффикс css класса модуля украшение любого шаблона

172

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

Как это работает на практике, смотрите в этом видео.

 

Суффикс css класса модуля

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

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

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

Как это работает на практике, сейчас разберем.

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

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

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

Я создал два одинаковых html-модуля. К одному добавил суффикс css «box1», к другому «box2»

Суффикс css

В таблице стилей шаблона добавил свойства для обеих вариантов.

Синий фон и белый шрифт

.box1 {
 background-color: #2D5881;
 color: #fff;
 }

Результат на скриншоте.

Класс модуля

Во втором случае фон черный, а шрифт так же оставил белый.

.box2 {
 background-color: #3D3D3D;
 color: #fff;
 }

Результат.

Вариант отображения модуля

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

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

Поэтому суффикс css класса модуля лучше подходит для оформления блоков на joomla-сайте. Это относится не только к последним версиям joomla, но и к версиям 2.5.

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

Суффикс css класса модуля в разных позициях шаблона

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

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

Для правого сайтбара в шаблоне protostar — один класс (well). Для левого — другой, для других позиций вообще может не быть никакого класса.

well

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

well-left

Как исправить такую ситуацию?

Для этого в joomla тоже есть «секретная» кнопка, которая находится в тех же дополнительных параметрах в поле «стиль модуля».

style-modul

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

оформление модулей joomla

Это далеко не все секреты cms-joomla, которые помогают грамотно и эффективно администрировать систему.

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

 

Использование CSS классов – удобный путеводитель

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

tag {
  /*
 Внешний вид и функциональные изменения.
*/
name:value;
}

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

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

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

Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала разметить элементы с атрибутом class=»class-name». Вот пример:

<div>
 Контейнер 1
</div>
<div>
 Контейнер 2
</div>
<div>
 Контейнер 3
</div>

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

Давайте посмотрим, что нужно сделать в нашем CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#ddd;
 margin-right:10px;
}

Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname{ }, мы используем tagname.classname{ }. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.

В этом примере использовалось свойство margin-right:10px. Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.

Такое сочетание должно дать вам что-то вроде этого:

Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»:

<div>
Контейнер 4
</div>

Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {} не применяется. Потому что вы не указали значение класса.

Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname{ }. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class!

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

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

<div>
 Контейнер 1
</div>
<div>
Контейнер 2
</div>
<div>
 Контейнер 3
</div>

Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red». Иначе class=»red» будет применяться до class=»box». Надеюсь, это понятно!

Изменим наш код CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#dddddd;
 margin-right:10px;
}
div.red{
 background-color:#ffcccc;
}
div.green{
 background-color:#ccffcc;
}
div.blue{
 background-color:#ccccff;
}

Поскольку у каждого из трех контейнеров есть CSS класс .box, к ним всем применяются свойства, прописанные в div.box. Но к каждому <div> применяется также дополнительный класс (red, green, или blue). Конечный результат:


Примечание: несмотря на то, что div.box определяет background-color:#cccccc; «цветовые» классы определяются после него. Например, в box red свойство background-color, указанном в div.red, перезаписывает аналогичное свойство в div.box. Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.

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

  • Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail{ width:200px;height:200px; };
  • Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button {};
  • Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover{ } a.nav: Hover {}.

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

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

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

Данная публикация представляет собой перевод статьи «Using CSS Classes – A Handy Guide» , подготовленной дружной командой проекта Интернет-технологии.ру

CSS: — классы CSS.

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

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

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

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

Теперь простой пример использования классов:

<!DOCTYPE html>
<html>
<head>
	<title>Классы в CSS</title>
	<style>
		ul.menu-1 { color: red; }
		ul.menu-2 { color: green; }
		ul.menu-3 { color: blue; }
	</style>
</head>
<body>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>
<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
	<title>Классы в CSS</title>
	<style>
		div.menu-top {
			position: absolute;
			top: 0; left: 80px;
			height: 50px;
		}
		ul.menu-top > li {
			display: inline;	/* Располагаем элементы по горизонтали */
			list-style: none;	/* Убираем маркеры списка */
			padding: 5px;		/* Поля вокруг текста */
		}
		ul.menu-top > li > a {
			border: 1px solid #666;		/* Параметры рамки */
			padding: 5px;			/* Поля вокруг текста */
			font-size: 80%;			/* Размер шрифта */
			color: red;
		}

		div.menu-left {
			position: absolute;
			top: 50px; left: 0;
		}
		ul.menu-left {
			padding-left: 10px;
		}
		ul.menu-left > li {
			list-style: none;	/* Убираем маркеры списка */
			padding: 5px;
			padding-left: 0;
		}
		ul.menu-left > li > a {
			background: #DEE1AE;	/* Цвет фона */
			border: 1px solid #666;	/* Параметры рамки */
			padding: 5px;		/* Поля вокруг текста */
		}
	</style>
</head>
<body>
<div>
<ul>
		<li>Пункт 1</li>
		<li>Пункт 2</li>
		<li>Пункт 3</li>
</ul>
</div>

<div>
<ul>
		<li>Пункт 1</li>
		<li>Пункт 2</li>
		<li>Пункт 3</li>
</ul>
</div>
</body>
</html>

Результат работы кода:

Рисунок 1. Пример использования классов в создании меню.

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

Давайте рассмотрим ещё один простой пример использования классов. Создадим класс для оформления абзаца (тег <p>) в виде цитаты.

<!DOCTYPE html>
<html>
<head>
	<title>Классы в CSS</title>
	<style>
		p.citata {
			color: navy;		/* Цвет текста */
			font-family: Courier, monospace;
			font-size: 90%;
			margin-left: 25px;		/* Отступ слева */
			border-left: 2px solid red; /* Граница слева от текста */
			padding-left: 10px;		/* Расстояние от линии до текста */
		}
</style>
</head>
<body>

<p>CSS является незаменимым инструментом в вёрстке html-документов. Как говорил великий Тутанхомон:</p>

<p>Используйте CSS во всех областях вашей жизни: на кухне, в ванной, в саду и огороде.</p>

</body>
</html>

Работа кода:

Рисунок 2. Пример использования классов в создании цитаты.

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

<!DOCTYPE html>
<html>
<head>
	<title>Классы в CSS</title>
	<style>
		table.towns {
			widht: 300px;
			border: 1px solid navy;
		}
		th {
			background: #519E70; /* Цвет фона */
		}
		tr.zebra {
			background: #C4E1CF; /* Цвет фона */
		}
	</style>
</head>
<body>

<table>
<tr>
	<th>Планета</th>
	<th>Город</th>
	<th>Население</th>
</tr>
<tr>
	<td>Земля</td>
	<td>Токио</td>
	<td>Много</td>
</tr>
<tr>
	<td>Земля</td>
	<td>Лондон</td>
	<td>Много</td>
</tr>
<tr>
	<td>Земля</td>
	<td>Мухосранск</td>
	<td>Мало</td>
</tr>
<tr>
	<td>Марс</td>
	<td>Еулоаей</td>
	<td>Неизвестно</td>
</tr>
</table>

</body>
</html>

Работа кода:

Рисунок 3. Пример использования классов в создании таблицы.

Но стоит отметить что этот код некорректен. Дело в том, что в html документе все теги <th> будут имень фоновый цвет #519E70. Чтобы правило для тега <th> действовало только в рамках таблицы с классом towns, селектор должен быть следующим table.towns th { … }.

Одновременное использование разных классов

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Классы в CSS</title>
	<style>
		a.tag { color: #449C70; /* Цвет ссылок */ }
		.level-1 { font-size: 1em; }
		.level-2 { font-size: 1.3em; }
		.level-3 { font-size: 1.6em; }
		.level-4 { font-size: 1.9em; }
		.level-5 { font-size: 2.1em; }
	</style>
</head>
<body>

<div>
<a href="/CSS/">CSS</a>
<a href="/CSS/selectors.php">Селекторы</a>
<a href="/CSS/tsveta_v_css.php">Цвета в CSS</a>
<a href="/CSS/tablitsa_tsvetov_v_css_i_html.php">Таблица цветов</a>
<a href="/CSS/rabota_s_tekstom.php">Работа с текстом</a>
<a href="/CSS/blochnaja_model_v_css.php">Блочная модель CSS</a>
</div>

</body>
</html>

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

Рисунок 3. Пример одновременного использования 2 классов в создании облака тегов.

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

Список популярных названий классов CSS

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Состояния

active, current — активный элемент, например, текущий пункт меню

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Дополнительно

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающие подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Источник: «Слова, часто используемые в CSS-классах»

CSS h2, h3: стилизация h2, h3 заголовков

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

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

Ниже предоставлены примеры и способы css стилизации h2, h3 заголовков.

Способы стилизации h2, h3 заголовков

Западный способ

Мой способ

Примеры CSS h2, h3

CSS стилизация h2 заголовка

CSSh2 + h3 (совместная стилизация)

CSS стилизация h3 заголовка

Способы стилизации h2, h3 заголовков

Способы стилизации h2, h3 тегов, мы будем рассматривать на создании ленты. Разберем, два варианта реализации заголовка в виде ленты: западный и мой вариант. Заранее скажу, что приоритетнее мой способ, но если вы имеете свои варианты (способы) стилизации заголовков, буду благодарен, если поделитесь ими в комментариях.

Западный способ

Как вариант неплохой, только мне не очень нравится CSS способ реализации ленты. Данный метод создания css h2 ленты, я нашел на одном из западных сайтов. Данная лента реализована на чистом css коде, хотя кроссбраузерность пострадала (в IE выглядит простым блоком). Ниже приведен исходный код css стиля.

h2.ribbon { 

font-size: 16px !important; 

position: relative; 

background: #ba89b6; 

color: #fff; 

text-align: center; 

padding: 1em 2em;

margin: 0 0 3em;

} 

h2.ribbon:before, h2.ribbon:after { 

content: ""; 

position: absolute; 

display: block; 

bottom: -1em; 

border: 1.5em solid #986794; 

z-index: -1; 

} 

h2.ribbon:before { 

left: -2em; 

border-right-width: 1.5em; 

border-left-color: transparent; 

} 

h2.ribbon:after { 

right: -2em; 

border-left-width: 1.5em; 

border-right-color: transparent; 

} 

h2.ribbon .ribbon-content:before, h2.ribbon .ribbon-content:after { 

content: ""; 

position: absolute; 

display: block; 

border-style: solid; 

border-color: #804f7c transparent transparent transparent; 

bottom: -1em; 

} 

h2.ribbon .ribbon-content:before { 

left: 0; 

border-width: 1em 0 0 1em; 

} 

h2.ribbon .ribbon-content:after { 

right: 0; 

border-width: 1em 1em 0 0; 

}

В HTML коде, h2 лента, выглядит таким образом:

<h2><strong>CSS стилизация h2, h3 заголовков на sitear.ru</strong></h2>

Мой способ

Как видите, css код громоздкой, как для стилизации только h2 тега. Поэтому, предлагаю свой способ создания подобной ленты. Кросбраузерность тестировалась на IE, FireFox, Opera, Chrome.  Ниже предоставлен css код и все исходные файлы.

h2 {height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;} 

h2 strong {height:67px; display:block; max-width:450px; margin-left:56px; padding-right:56px; background: url(ribbon_right.png) right top no-repeat;}

Способ применения в HTML:

<h2><strong>CSS h2 заголовок на sitear.ru</strong></h2>

Картинки:

стилизация h2

стилизация h2

Общий вес картинок – 750 байт. CSS код занимает не более двух строк, вес – 236 байт. Я доволен результатом, притом все просто и понятно, в отличии от западного метода, где вес CSS кода – 980 байт.  Хотя мой и западный вариант по весу идентичны, в коде гораздо хуже разобраться, нежели обработать картинку в фотошопе. Можно предположить, что скорость загрузки одного css файла, быстрее, нежели  трех файлов (сумарно идентичных весу одного css файла), но можно реализовать background в виде спрайтов, которые увеличат скорость загрузки сайта. Узнать об увеличении скорости методом CSS спрайтов.

Примеры CSS h2, h3

Все примеры будут реализованы по принципу стилизации заголовков моим методом (пример, сайт sitear.ru).

CSS стилизация h2 заголовка

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

CSS код:

.heading { width:500px; background: #888;}

h2 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} 

h2 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}

Исходные картинки:

пример css h2

пример css h2

HTML код:

<div>

<h2><strong>Текст h2 заголовка</strong></h2>

</div>

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

CSS h2 + h3 (совместная стилизация)

Стилизировать h2 и h3 вместе, уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h3. Например:

h2 – Стилизация h2, h3 заголовков;
h3 – Учимся оформлять h2, h3 заголовки на css.

Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта. Пример css h2 + h3, схож с пред идущим, рассмотрим css код.

.left{height:100px; background: url(left.png) left top no-repeat;}

.right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;}

h2 {color:#FFF; font-size:18px; padding:15px;} 

h3 {color:#CCC; font-size:16px; padding:5px;}

Исходные картинки:

css h2 + h3

css h2 + h3

HTML код:

<div>

<div>

<h2>Текст h2 заголовка</h2>

<h3>Маленькое вступление, или описание статьи, заключенное в h3 тег.</h3>

</div>

</div>

Отображение:

Суть совместной (h2 + h3) стилизации заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.

CSS стилизация h3 заголовка

Стилизация h3 заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h2 и h3 заголовков, мы рассмотрим все до конца.

Как правило, тег h3, используют для выделения подпунктов статьи или другого материала на сайте. Например, как на сайте sitear.ru. Я бы советовал создавать, скромные, неброские, но удобные h3 заголовки. Мне очень нравится идея, как организовано на Википедии. Советую и вам создать подобно. Это просто и удобно. Например:

<style>

h3 {font: bold 18px Arial; color:#595; border-bottom:#CCC solid 1px; margin-top:25px;}

</style>

<h3>Пример стилизации h3 заголовка</h3>

<p>Lorem ipsum dolor sit amet, <a href="http://sitear.ru">consectetuer adipiscing</a> elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<h3>Еще подраздел вашей статьи</h3>

<p>Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>

Отображение:


Просто, удобно и кроссбраузерно.

Надеюсь, вам помогла моя статья. Если остались вопросы или предложения по поводу css стилизации h2, h3 заголовков, пишите в комментарии.

Дальше: Конвертация трафика сайта


Удобная настройка дополнительных имен классов CSS

Описательные имена классов CSS

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

Классы состояний

Любой компонент может иногда нуждаться в состоянии — определенном условии, в котором к нему применяется определенный стиль.

Если мы возьмем, к примеру, main-nav, иногда нам придется определить, открыт он или нет. Здесь на помощь приходят классы состояний CSS.

<nav> </nav>

<nav> </nav>

Описательные имена классов CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

<div> <!— Gray Message —></div> <div><!— Green Message —></div> <div> <!— Red Message —></div> <div> <!—Yellow Message —></div>

<div> <!— Gray  Message —></div>

<div><!— Green Message —></div>

<div> <!— Red   Message —></div>

<div> <!—Yellow Message —></div>

Или любое другое состояние, например: is-wide, is-top, is-small, is-double-size, is-scrolled, is-full-width и т.д. В этих случаях вы можете использовать столько классов, сколько вам нужно.

Как это выглядит в файле CSS / Sass:

.common-message{ /*component styles*/ &.is-approved { color:green; } &.is-error { color:red; } &.is-alert { color:yellow; } }

.common-message{

    /*component styles*/

    &.is-approved { color:green; }    

    &.is-error    { color:red; }    

    &.is-alert    { color:yellow; }    

}

Служебные классы

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

Еще одна особенность моих служебных классов в том, что мы всегда используем их с правилом «!important». Служебные классы — единственный хороший пример использования !important. Зачем нам это нужно?! Все просто, когда мы используем эти классы, мы всегда хотим, чтобы они не изменялись для всего каскада CSS. Если мы не хотим, чтобы они переопределяли другие стили, нам нужно удалить класс из элемента HTML.

Пример служебных классов CSS:

.u-hide{ display:none!important;}

.u-hide{ display:none!important;}

Пример использования служебных классов в HTML:

<div class»common-message u-hide»></div>

<div class»common-message u-hide»></div>

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

Классы сущностей и классы страниц

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

Сущности — при использовании компонента, стили которого должны слегка измениться, я добавляю к нему другое имя класса, которое начинается с префикса ‘e-’ , представляющего сущность, в дополнение к имени класса компонента.

Этот класс может добавлять или переопределять стили. Мое эмпирическое правило заключается в том, что вы можете добавить только одну сущность для каждого компонента. Если есть другой случай использования этого компонента, стили которого не на 100% одинаковы, лучше вместо этого создать другую сущность! Пример:

Описательные имена классов CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<section> </section>

<section> </section>

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

<section> </section>

<section> </section>

Использование CSS:

.e-datepicker-popup{ /*add or override styles*/ }

.e-datepicker-popup{

     /*add or override styles*/

}

Примечание. Чтобы класс сущностей преобладал в борьбе каскадных стилей, его необходимо всегда записывать после имен классов обычных компонентов. Пример:

.common-popup{ /*common popup styles*/ } .e-datepicker-popup{ /*add or override style of common-popup */ }

.common-popup{       /*common popup styles*/ }

.e-datepicker-popup{ /*add or override style of common-popup */ }

Страницы — каждую страницу на вашем сайте можно считать большой сущностью. Класс страницы используется в элементе body или в главном элементе, который охватывает все, имена этого класса начинаются с «p-». Например: «p-homepage» или «p-news» и т. д.

<body></body>

<body></body>

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

.p-homepage .common-popup{ /*do some styles manipulations*/ }

.p-homepage .common-popup{ /*do some styles manipulations*/ }

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

Классы JavaScript

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

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

<section> </section>

<section> </section>

Заключение

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

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.

Описательные имена классов CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Описательные имена классов CSS

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *