CSS. Урок 1 (Что это? Как подключить? Наследование)



п.1. Что такое CSS?

Что такое CSS? Это набор правил, обычно собранных в одном файле, который содержит сведения о том, как должны выглядеть все элементы сайта. До изобретения CSS изменение размера шрифта или цвета заголовка требовало изменения ВСЕХ страниц. Если у вас блог на 1000 страниц, значит изменение внешнего вида сайта потребует тысячи часов работы. При использовании CSS, описание всех одинаковых элементов всего сайта лежит в одном файле. Заменили параметры в нем и сайт преобразился в одну секунду. К тому же, некоторые эффекты есть только в CSS, такие параметры в HTML просто отсутствуют. Поэтому я и заострял внимание, что мы учим элементы HTML, а параметры пропускаем, т.к. почти все делается через CSS.

п.2. Как подключить CSS к странице?

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

<html>

<head> 
     
<link rel="stylesheet" type="text/css" href="http://website.ru/style.css">    

</head>

   <body>
...

</body>

</html> 

п.3. Структура файла. Общие теги.

Файл обычно разделяется на 3 логических части: основные теги (селекторы), идентификаторы и классы. Основные теги - это теги HTML, после которых следует описание свойств каждого тега в фигурных скобках. К примеру, мы хотим, чтобы ВСЕ таблицы сайта имели приятный голубой бордюрчик толщиной 1 пиксель. Тогда пишем имя тега, двоеточие и далее описание его свойств, разделенные точкой с запятой. Для наглядности размещают их на разных строках:
table {
border: 1px solid #0000ff;
}
Сначала мы указали, какой конкретно параметр будем описывать, т.е. "border". Далее идет указание толщины в пикселях. Есть другие величины типа миллиметров, типографских пунктов и т.д. но их использование на сайте не оправдано и нафиг нам не надо забивать голову лишней инфой. Далее идет тип линии - solid, т.е. цельная. Есть варианты none - нет линии, dotted - из точек, dashed - пунктирная и т.д. После этого идет номер RGB-цвета в шестнадцатиричном исчислении. Решетка как раз и указывает, что это шестнадцатиричная система исчисления. RGB - это сокращение от Red Green Blue, т.е. цветов, которые смешиваются. На каждый цвет выделяется 2 цифры, от 00 до ff. Сочетание всех цветов по максимуму (#ffffff) дает белый цвет, если все нули - черный. Чистый красный цвет получаем указанием максимального числа по красному спектру и нули во всех остальных: #ff0000. Чуть поиграетесь и сочетания будете сочинять на лету. Одинаковое сочетание всех цветов дает серый. #555555 - получаем темно-серый, а #dedede - светлосерый. Если нужно подобрать конкретный оттенок очень точно, лучше воспользоваться гуглояндексом для поиска первого попавшегося инструмента смешения цветов. Вводим в гуглояндексе фразу "html color picker" и попадаем к примеру на https://www.w3schools.com/colors/colors_picker.asp или http://htmlcolorcodes.com/color-picker/
Там мы можем удобно и плавно менять параметры цвета, подбирая нужный. Можно просто указать "таблица HTML цветов" и выбирать готовые. У некоторых цветов есть свое собственное название, которое можно указывать в таблицах стилей. Все стандартные чистые цвета есть в html: black, yellow, red, green и т.д. К ним добавлены всякие экзотические типа: gold, olive, royal blue и т.д. Но такое использование сильно некошерно, буду бить по рукам за такое.

Вот пример описания горизонтальной линии:

hr {
      color: #ffde55;

      width: 75%;

      height: 3px;

}

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

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

п.4. Классы

Что же делать, если нам надо на сайте иметь:

а) тонкую серую линию, шириной на пол экрана для подчеркивания заголовков

б) тонкую зеленую линию шириной почти на весь экран для разделения разделов текста

в) толстую черную линию для отделения страницы от нижней строки с копирайтами (она называется "подвал")

Для этого используют классы - самую распространенную конструкцию в CSS. Перед названием класса в CSS ставится точка. В названии класса желательно указывать тип элемента и его характеристики или функциональную принадлежность. Можно, конечно, сделать имена в виде ".line1", "line2", ".line3", но придется постоянно лазить в файл и подглядывать, какое обозначение что означает. Более наглядно будет ".line_green", ".line_95proc", ".line_footer" и т.д. Эти значения обозначают следующее: зеленая линия, линия 95% от экрана и линия, отделяющая "подвал". Какой вам вариант больше подходит - выбирайте сами. Зачастую приходится компонавать оба варианта для более понятного кода. Тогда мы получаем 3 описания:

.line_header {
      color: #dedede;

      width: 50%;

      height: 1px;

}

.line_text {
      color: #00ff00;

      width: 95%;

      height: 1px;

}

.line_footer {
      color: #000000;

      width: 100%;

      height: 4px;

}

 А в самом документе HTML мы указываем класс в качестве свойства абсолютно любого элемента:

<hr class="line_footer">

или

<hr class="line_header">

 п.4. Уникальные теги (селекторы)

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

#line_footer {.....}

 В файле документа указываем уже не "class", а "id":

<hr id="line_footer"> 

 Учтите, что на каждой странице уникальный идентификатор с таким именем должен быть один! Два и более элементов с одинаковым идентификатором на странице недопустимы! В противном случае поведение браузера непредсказуемо! Т.е. нельзя использовать 2-3 раза на странице <hr id="line_footer">, а классы можно использовать сколько угодно. JavaScript от дублирующихся идентификаторов просто распидорасит и все рюшечки, менюшечки, свистелки и перделки перестанут работать. Используя уникальные селекторы важно четко понимать, как выводится документ. Если собирается по кускам с помощью какого то движка (к ModX скоро подберемся), то за их использованием нужен глаз да глаз.

Для сайтов начального уровня уникальные идентификаторы не нужны. Обходитесь классами. Уникальные идентификаторы нужны при работе с JavaScript-ом для обращения к конкретному элементу и изменения его внешнего вида. 

п.5. Самое сложное для понимания на первых порах - группировка и наследование свойств

К примеру, вы знаете, что на сайте будет огромное количество картинок, таблиц, линий, других блоков максимум 3-х размеров: 100% от ширины экрана, 60% и 20%. А высота может быть нескольких размеров: 800 пикселей, 600  пикселей, 400  пикселей, 200  пикселей, 50  пикселей. Сочетания могут быть самые разные, поэтому сколько мы классов получаем? Правильно, 3х5=15! Кроме того, что мы увеличиваем размер файла, мы замудохаемся все варианты перечислять. Если добавить еще одну характеристику - отступы со всех сторон с пятью вариантами свойств, то получаем 15х5=75 стилей. Хороший айтишник - скотина ленивая, поэтому должен все упрощать. Поэтому мы не будем заводить кучу классов типа .table_100proc_50px, а заведем классы только по значениям:

.width_100proc {

      width: 100%;

}

.width_60proc {

      width: 100%;

}

 .height_800px {

      height: 800px;

}

 .height_400px {

      height: 400px;

}

 В нужном теге сайта в поле класса через пробел указываем нужные нам классы:

<img class="width_60proc height_400px">

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

К примеру, у вас есть 2 класса таблиц:

.table_green {
      border: 1px solid #00ff00;

      width: 95%;

}

.table_red {
      border: 1px solid #ff0000;

      height: 800px;

 }

 В HTML документе мы создали таблицу и указали оба класса:

<table class="table_red table_green">

 У класса "table_green" указан уникальный параметр - ширина 95%, а у класса "table_red" указан уникальный параметр - высота 800 пикселов. Значит на странице таблица будет иметь оба этих значения. НО! У класса "table_green"  есть параметр - зеленые границы, а у класса "table_red" - красные границы. Т.к. в файле CSS класс "table_red" прописан ниже, то его значение цвета границ перебивает любые обозначенные ранее. Этот прием иногда может быть так называемым "костылем", т.е. "некрасивым" с точки зрения программирования приемом, который позволяет избежать объявления линих классов. Поместив нужный класс ниже в файле, мы можем сэкономить кучу писанины. 

Иногда нужно, чтобы значение одного класса гарантированно перебивало значения любых других классов, независимо от их положения на странице. В этом случае к самому значению параметра добавляем "!important". 

.table_red {
      border1px solid #ff0000;

      height: 800px !important;

 }

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

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

.table_red,  .table_green, .img_big, .img_small {
      margin: 10px;

      box-shadow: 5px 5px;

      border-radius: 10px

 }

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

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

.td_menu {
      padding: 10px;

      text-align: center;

      border: 1px dotted #ffff00

 }

 Вот только мы хотим, чтобы в таблице ".table_menu_boots" у нас текст внутри ячеек ЭТОГО КОНКРЕТНОГО КЛАССА был зеленый, а если этот же класс попал внутрь таблицы ".table_menu_clothes", то текст внутри ячеек ЭТОГО КОНКРЕТНОГО КЛАССА был красный. Что же делать? Городить еще один класс? Если значений всего 3-4, то проблемы нет, можно и класс отдельный слепить. А если у этого класса 20-30 значений, размером на страницу А4? Перечислять внутри таблицы каждой ячейке по несколько классов?

<td class="td_menu green">

<td class="td_menu green">

<td class="td_menu green">

<td class="td_menu green">

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

.table_menu_boots .td_menu

 {
        color: #00ff00

 }

.table_menu_clothes .td_menu

 {
        color: #ff0000

 }

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