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

Именно они обеспечивают большее по сравнению с HTML управление форматированием содержимого сайта. Каскадность заключается в том, что форматирование имеет нисходящий характер, как водопад или каскад
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

 


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

Что такое PHP?

Что такое PHP?

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

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

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

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

Защита от DDoS

Защита от DDoS

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

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

На основе средней оценки и общего количества голосов