CSS — каскадные таблицы стилей

CSS — каскадные таблицы стилей

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

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

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

В предыдущем разделе описано три варианта добавления CSS на веб страницы. Сущест вует последовательность распознавания и применения . сss стилей браузером. Сначала текст форматируется стилем вepxнeгo уровня, который описан в . сss файле. Следующий уровень каскада это стиль, объявленный с помощью тeгa <STYLE>. В последнюю очередь форматирование осуществляется уже внyтренними стилями. То есть последние имеют наивысший приоритет .

Осознав эту особенность CSS, можете считать, что уже ознакомились с селекторами. Ce лекторы  это просто названия элементов, форматирование которых меняет разработчик. Скажем, в предыдущих при мерах селектором являлся элемент H1. Если разработчик намерен изменить лишь отдельные атрибуты элементов, а не абсолютно все, нужно использовать классы и идентификаторы. Классы объявляют внyтри тегa <STYLE> в разделе <HEAD>, либо в отдельном css файле.

Синтаксис будет следующим:

<head>
<style>
.classl {color:blue}
.class2 {font family:Arial, Helvetica, sans serif}
</style>
</head>

Если классы определяются в отдельном . сss файле, то теги style и head не используются. Любой элемент с атрибутом class, значение котopoгo равно class1, будет отформати рован синим цветом, а элемент со значением атрибута class2 шрифтом Arial. (Или oд ним из шрифтов, указанных в порядке приоритета. Любая операционная система обязательно распознает хотя бы один из шрифтов. Поэтому высока вероятность тoгo, что разработчика удовлетворит полученный результат.)

В CSS классы объявляют с помощью точки, за которой следует имя класса. Для тoгo что бы обратиться к СSS классу, в НТМL- коде нужно просто удалить точку перед именем класса.

<h1 сlаss="сlаssl">Этот текст будет синеrо цвета.</h1>
<h2 сlаss="сlаss2">Этот текст будет отформатирован шрифтом Arial.</h2>

Несколько примеров использования

Выравнивание элементов: по центру и справа

Итак, пусть требуется выровнять пару-тройку элементов в CSS следующим образом: 1-2 элемента будут по центру, а третий должен располагаться справа. Как это реализовать?

Верстка:

<div class="group">
  <div class="child">
    <button id="el1">Кнопка 1</button>
    <button id="el2">Кнопка 1</button>
  </div>
  <div class="el-right child">
    <button id="el3">Кнопка 3</button>
  </div>
</div>

Теперь стили:

.group {
  text-align: center;
  position: relative;
  width: 100%;
}
.group .child {
  display: inline-block;
}
.group .el-right {
  position: absolute;
  right: 0;
}

Как это работает? Все элементарно, просто обратите внимание на использование свойств position: relative и position: absolute. Кроссбраузерно.

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

HTML

<div id="block1">
  <div id="block2">Демонстрация</div>
</div>

CSS

#block1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin: 15px;
  padding: 10px;
  border: 2px solid orange;
}

#block2 {
  padding: 20px;
  position: absolute;
  border: 2px solid red;
  background-color: yellow;
  -ms-transform: rotate(45deg); /* IE 9 */
  -ms-transform-origin: 20% 40%; /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Opera, Safari */
  -webkit-transform-origin: 20% 40%; /* Chrome, Opera, Safari */
  transform: rotate(50deg);
  transform-origin: 20% 40%;
}

Используем CSS свойства transform-origin и transform:

  • transform-origin — устанавливает координаты точки относительно которой производится трансформация блока;
  • transform — трансформирует блок, позволяя его масштабировать, сдвигать, вращать, наклонять и даже комбинировать виды трансформаций. В нашем случае используем его для вращения, поворота на 45 градусов.

Эффект свечения

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

Свечение для блочного элемента DIV:

box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
Пример — простенькая тень для DIV

С помощью пиксельных значений (в показанном случае это 8px) можно отрегулировать положение «света».

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

-moz-box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
box-shadow: 8px 8px 8px rgba(0,0,0,0.4);

Для эффекта тени на тексте используется text-shadow. Вот например неоновое свечение надписи:

text-shadow: 0 0 3px #43a047, 0 0 5px #2e7d32;
Неоновое свечение текста на CSS3

 


Может будет интересно?

HTML теги для текста

HTML теги для текста

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

Топ хостинг-провайдеров