Введение в CSS

        Введение в CSS

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

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.

С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы. То есть селекторы — это снайперский прицел, а свойства — это кисть, рубанок, скальпель и перфоратор.

В курсе (здесь ссылка на курс «Структура HTML – документа» ) Структура HTML-документа были описаны различные способы подключения стилей. В этом курсе мы будем пользоваться редактором CSS.

Пример вначале страницы.

CSS-правила

Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор {

  свойство1: значение;

  свойство2: значение;

}

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

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

p {

  /* стили для абзацев */

}

h1 {

  /* стили для заголовков */

}

Продвинутые селекторы

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.

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

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

<p class="help"></p>

<p class="help error"></p>

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

Селектор с использованием класса задаётся так: .имя_класса. Например:

.help { ... }

.error { ... }

Более подробно об использовании селекторов, я расскажу в отдельном посте «Селекторы».

Свойства для оформления текста

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

•       оформление текста;

•       работа с размерами и отступами;

•       позиционирование элементов;

•       создание сеток;

•       декоративные: цвета, фон, тени;

•       другие.

В этом задании мы познакомимся с несколькими свойствами для оформления текста, а более подробно об этом я расскажу в посте «Оформление текста с помощью CSS». А пока что вы можете посмотреть примеры составления кода !
(ссылка на пост с кодами к «Знакомство с CSS» пример № 1)

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

С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее.

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

В этом примере № 2 мы познакомимся с некоторыми свойствами из блочной модели, а более подробно и полно о них я расскажу в посте «Блочная модель документа».

Позиционирование элементов.

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

Главным свойством для работы с позиционированием является position, которое переключает режимы позиционирования элемента. Ещё четыре свойства: top, right, bottom, left, управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв.

В этом примере № 3 мы изменим стандартный режим позиционирования элемента на абсолютный и поперемещаем элемент.

Более подробно теория и практика позиционирования элементов будет рассмотрена в посте «Позиционирование».

Создание сетки страницы.

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

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

В этом примере № 4 мы создадим простейшую раскладку из двух колонок. А в посте «Сетки» рассмотрим приёмы создания сеток и потренируемся строить более сложные раскладки страниц.

Декоративные свойства.

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

Работа с декоративными свойствами будет подробно рассмотрена в серии  «Фоны» и «Оформление текста с помощью CSS».

Пример создания красивых полей и кнопок вы можете увидеть на этом примере №.5

Каскадность

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Почему именно каскадные?

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

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

Название «каскадные» появилось из-за описанного механизма комбинирования стилей из разных CSS-правил.

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Каскадность</title>

    </head>

    <body>

        <h1>Каскадность и просветление</h1>

        <p>Каскадность — это очень мощный механизм.</p>

        <p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

        <p>Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

    </body>

</html>

CSS:

p {

    outline: 2px solid rgba(0, 0, 0, 0.1);

    padding: 10px;

}

.truth {

    background-color: #dff0d8;

   

}

Каскадность. Переопределение стилей .

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

p {

  padding: 10px;

}

       +

.truth {

  background-color: #dff0d8;

}

       =

стили второго абзаца {

  padding: 10px;

  background-color: #dff0d8;

}

Свойства в CSS-правилах были разными. А что произойдёт, если в разных CSS-правилах будут совпадающие свойства? Сейчас и проверим.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Каскадность. Переопределение стилей</title>

    </head>

    <body>

        <h1>Каскадность и просветление</h1>

        <p>Каскадность — это очень мощный механизм.</p>

        <p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

        <p>Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

    </body>

</html>

CSS:

p {

    padding: 10px;

    outline: 2px solid rgba(0, 0, 0, 0.1);

    background-color: #dff0d8;

}

.truth {

    background-color: #aaddff;

   

}

Каскадность и приоритеты

Когда в предыдущем задании мы задали цвет фона для правила с классом truth, одно из свойств второго абзаца переопределилось:

p {

  padding: 10px;

  background-color: #dff0d8;

}

       +

.truth {

  background-color: #aaddff;

}

       =

стили второго абзаца {

  padding: 10px;

  background-color: #dff0d8;

  background-color: #aaddff;

}

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

1.     CSS-правила в значении атрибута style самые приоритетные,

2.     за ними идёт селектор с id,

3.     затем селектор с классом,

4.     затем селектор с именем тега.

На самом деле, механизм определения приоритетов и специфичности более сложный. Подробно он будет описан в курсе «Наследование и каскадирование». Пока чо можно разобрать на примере № 6

Каскадность. Коктейль из классов

Похоже, вы решили головоломку! Поздравляем!

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

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

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

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

Наследование .

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

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

Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.
Это хорошо видно из примера № 8

Ненаследуемые свойства.

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

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

Более подробно наследование описано в курсе «Наследование и каскадирование» и на примере № 9                                                                     

Теперь можно перейти к  посту "Выравнивание текста, цвет текста, подчеркиваниев CSS и прочее"                                                                                 

Примеры для знакомства с СSS.

       Знакомство с CSS  лучше начинать с азов в моем посте 
"Введение в CSS"Пример к «Знакомство с CSS» пример№1

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Введение в CSS</title>

    </head>

    <body>

        <div class="scene">

            <div class="roof"></div>

            <div class="house">

                <div class="door"></div>

            </div>

        </div>

    </body>

</html>

CSS

/*

.scene {

    width: 400px;

    height: 500px;

    margin: 0 auto;

}

.roof {

    width: 0;

    margin: 0 auto;

    margin-top: -50px;

    border: 150px solid white;

    border-bottom-color: red;

}

.house {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: blue;

    overflow: hidden;

}

.door {

    height: 100px;

    width: 50px;

    margin-top: 100px;

    margin-left: 50px;

    background-color: red;

}

*/

Еще один пример:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Свойства для оформления текста</title>

    </head>

    <body>

        <h1>Оформление текста и CSS</h1>

        <p>При оформлении текста с помощью CSS очень часто используется тег &lt;span&gt; с классами.</p>

        <p>Например, можно выделять слова <span class="underline">подчёркиванием</span>, <span class="bold">жирностью</span> или <span class="italic">курсивом</span>.</p>

        <p class="bold">Можно выделять не только отдельные слова, но и целые абзацы.</p>

        <p class="italic underline">И даже комбинировать классы.</p>

    </body>

</html>

CSS

.underline {

text-decoration: underline;   

}

.bold {

font-weight: bold;   

}

.italic {

font-style: italic;   

}

Пример№2

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Свойства для задания размеров и отступов</title>

    </head>

    <body>

        <h1>Блочные элементы и CSS</h1>

        <p class="p-first">Размеры и отступы с помощью CSS можно задавать блочным элементам. Абзац, тег &lt;p&gt;, является одним из них.</p>

        <p class="p-second">Блочным элементам можно задавать внутренние и внешние отступы.</p>

        <p class="p-third">Также им можно задавать ширину и высоту.</p>

    </body>

</html>

CSS:

p {

    margin: 16px 0 16px 0;

    background-color: #dff0d8;

}

.p-first {

margin-left: 50px;

}

.p-second {

padding: 20px;   

}

.p-third {

width: 50%;   

}

Пример №3

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Позиционирование элементов</title>

    </head>

    <body>

        <h1>Как выпасть из потока?</h1>

        <p>Существует понятие «document flow» или «поток документа». Оно определяет то, как располагаются элементы на HTML-странице.</p>

        <p class="p-absolute">Абсолютно позиционированные элементы исключаются из потока.</p>

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

    </body>

</html>

CSS:

.p-absolute {

    padding: 20px;

    background-color: rgba(0, 255, 0, 0.25);

    position: absolute;

    left: 100px;

    bottom: 200px;

}

Пример № 4

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Создание сетки страницы</title>

    </head>

    <body>

        <div class="header">Логотип и меню</div>

        <div class="left-column">Основное содержание страницы</div>

        <div class="right-column">Боковая колонка</div>

        <div class="footer">Подвал</div>

    </body>

</html>

CSS:

div {

    margin-bottom: 15px;

    padding: 10px 25px 10px 25px;

    background-color: #dff0d8;

}

.left-column {

    width: 50%;

    min-height: 100px;

    background-color: #fcf8e3;

    float: left;

}

.right-column {

    width: 25%;

    min-height: 100px;

    background-color: #d9edf7;

    float:right;

}

.footer {

    clear: both;

    

}

Пример № 5 Декоративные свойства.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Декоративные свойства</title>

    </head>

    <body>

        <h1>Красивые оповещения</h1>

        <p>Чтобы создать красивое сообщение-оповещение, нужно подобрать подходящие цвета текста и фона.</p>

        <div class="alert">

            Используйте CSS для оформления элементов.

        </div>

    </body>

</html>

CSS:

.alert {

    padding: 10px;

    border: 1px solid #d6e9c6;

    background-color: #dff0d8;

    color: #468847;

    border-radius: 5px;

}

 Пример № 6 Приоритеты.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Каскадность и приоритеты</title>

    </head>

    <body>

        <h1>Каскадность и приоритеты</h1>

        <p class="blue">Каскадность — это очень мощный механизм.</p>

        <p class="green">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

        <p class="blue green">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

    </body>

</html>

CSS:

p {

    padding: 10px;

    outline: 2px solid rgba(0, 0, 0, 0.1);

}

.green {

    background-color: #dff0d8;

}

.blue {

    background-color: #aaddff;

}

Переносим выделенное вверх. И меняется приоритет.

вот так

p {

    padding: 10px;

    outline: 2px solid rgba(0, 0, 0, 0.1);

}

.blue {

    background-color: #aaddff;

}

.green {

    background-color: #dff0d8;

}

Теперь приоритет у зеленого!!!!

Пример № 7

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Каскадность. Коктейль из классов</title>

    </head>

    <body>

        <h1>Каскадность. Коктейль из классов</h1>

        <p class="blue nice-box">Каскадность — это очень мощный механизм.</p>

        <p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

        <p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

    </body>

</html>

Здесь ко всем обзацам добавили   класс = nice-box

p {

    padding: 10px;

}

.green {

    background-color: #dff0d8;

}

.blue {

    background-color: #aaddff;

}

.nice-box {

    border-radius: 15px;

    box-shadow: 3px 3px 4px #cccccc;

}

изменили border-radius:5px; на 15.

Получили более закругленные углы, во всех случаях

Пример № 8

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Наследование</title>

    </head>

    <body>

        <h1>CSS-свойства</h1>

        <p>В CSS существует огромное количество свойств. Их можно разбить на следующие группы:</p>

        <ul>

            <li>оформление текста;</li>

            <li>работа с размерами и отступами;</li>

            <li>позиционирование элементов;</li>

            <li>работа с сеткой страницы;</li>

            <li>декоративные: цвета, фон, тени;</li>

            <li>другие.</li>

        </ul>

    </body>

</html>

CSS:

body {

 color:red;  

}

ul {

font-style: italic;   

}

В это примере добавили свойства для body  и ul. Получили всю таб красную и курсив в списке.

Пример № 9

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Ненаследуемые свойства</title>

    </head>

    <body>

        <h1>CSS-свойства</h1>

        <p>В CSS существует огромное количество свойств. Их можно разбить на следующие группы:</p>

        <ul>

            <li>оформление текста;</li>

            <li>работа с размерами и отступами;</li>

            <li>позиционирование элементов;</li>

            <li>работа с сеткой страницы;</li>

            <li>декоративные: цвета, фон, тени;</li>

            <li>другие.</li>

        </ul>

    </body>

</html>

CSS:

body {

    padding: 20px;

   

}

ul {

 border: 1px solid #cccccc;

 padding: 30px;

}

В этом примере мы добавили ВСЕ свойства элементов. И все изменилось. Посмотрите как.