Урок 2. Код CSS. Селекторы. Родительские и дочерние элементы. Блочная модель.

Курс html/css для подростков 12+

Урок 2. Код CSS. Селекторы. Родительские и дочерние элементы. Блочная модель.

Вставка кода css html документ. Синтаксис языка css. Селекторы. Классы. ID (идентификаторы). Размеры в css. Родительские, дочерние элементы. Блочная модель. Схлопывание margin. Background (фон элемента).


Css  (от англ. Cascading Style Sheets) - каскадные таблицы стилей. Язык, на котором описываются свойства HTML элементов. С помощью css можно изменить цвет, размер и т.д. 

 

Вставка кода css html документ. 

Код css вставляется в Html документ следующими способами: 

1. С помощью атрибута style в html тэг: 
 

<p style="color:red;">Этот параграф с красным шрифтом.</p> 

 

2. С помощью тэга style в голове документа (в нутрии тэга <head>): 

<head> 

 

    <style> 

        h1 { 

            color:brown; 

        } 

    </style> 

</head> 

 

3. Подключением отдельного файла css: 

Сам файл содержащий код css: 

 

Подключение файла css производится с помощью тэга link в голове html документа: 

<head> 

    <link rel="stylesheet" href="styles.css"> 

</head> 

Здесь атрибут rel указывает, что подключается файл css, атрибут href указывает url (адрес) файла. 

 

Синтаксис языка css. 

Код css состоит из следующих элементов: 

1. Селекторт англ. select - выбирать) – буква, слово или сочетание слов, указывающие на элемент html документа. В следующей конструкции селектором является буква p. 

p { 

    color:aqua; 

} 

Буква p говорит о том, что свойства css надо применить ко всему тексту, который находится внутри всех тэгов <p>. 

2. Свойства. В предыдущем примере слово colorэто свойство, a слово aqua значение, которое присваивается этому свойству. 

3. Фигурные скобки нужны для объединения всех свойств одного селектора. 

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

p { 

    color:aqua; 

    background-color: azure; 

} 

 

Описание свойств для нескольких html элементов идут один за другим: 

h1 { 

    color:brown; 

} 

 

p { 

    color:aqua; 

    background-color: azure; 

} 

 

 

Селекторы. 

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

 

Классы. 

Классы позволяют применить css свойства ко множеству html элементов. Делается это следующим образом. В html тэге указываем атрибут class и присваиваем ему какое либо имя: 

    <p class = "red-paragraphs">Этот параграф с красным шрифтом.</p> 

    <p class = "red-paragraphs">Этот параграф то же с красным шрифтом.</p> 

 

Далее в css коде селектор будет выглядеть так: 

        .red-paragraphs { 

            color: red; 

        } 

Т.е. ставиться точка и пишется имя класса. 

 

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

    <p class = "red-paragraphs">Этот параграф с красным шрифтом.</p> 

    <p class = "red-paragraphs">Этот параграф то же с красным шрифтом.</p> 

    <p class = "blue-paragraphs">Этот параграф с синим шрифтом.</p> 

    <p class = "blue-paragraphs">Этот параграф то же с синим шрифтом.</p> 

 

        .red-paragraphs { 

            color: red; 

        } 

        .blue-paragraphs { 

            color: blue; 

        } 

 

Так же можно создать элементы на разных тэгах, но с одинаковыми свойствами. 

    <h1 class="red-element">Это красный заголовок</h1> 

    <p class="red-element">Это красный параграф</p> 

 

        .red-element { 

            color: red; 

        } 

 

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

<p class = "blue-paragraphs font">Этот параграф принимает свойства нескольких классов</p> 

 

        .blue-paragraphs { 

            color: blue; 

        } 

        .font { 

            font-family: Georgia, "Times New Roman", serif; 

        } 

 

 

ID (идентификаторы) 

Помимо классов существуют идентификаторы. Они позволяют присвоить те или иные свойства только одному html элементу. 

Для этого существует атрибут id, которому нужно присвоить уникальное имя: 

<p id="unique-paragraph">Это уникальный параграф</p> 

 

В коде css id селектор начинается с символа #(шарп или решетка), после которого пишется уникальное имя элемента: 

        #unique-paraphraph { 

            color:cyan; 

        } 

 

Свойства, отвечающие за отображение текста. 

Свойство 

Значения 

Описание 

Пример 

color 

цвет 

Цвет текста элемента. 

.red-element { 

    color: red; 

} 

font-family 

Названия шрифтов через запятую. Так же можно указать одно из следующих названий группы шрифтов: serif, sans-serif, monospace, fantasy, cursive. 

Устанавливает шрифт, которым будет отображаться текст. Если указать несколько через запятую, то при отсутствии на компьютере пользователя первого шрифта, отображаться будет вторым. Если плюсом указана группа шрифтов, то браузер выберет шрифт из этой группы самостоятельно. Пример: font-family: Times New Roman, Times, serif; 

.font { 

font-family: Georgia, "Times New Roman", serif; 

} 

 

font-size 

larger 

Размер шрифта больше или меньше основного соответственно. 

font-size: larger; 

smaller 

font-size: smaller; 

Одно из следующих значений: xx-small, x-small, small, medium, large, x-large, xx-large. 

Размер шрифта будет установлен в соответствии с приведёнными значениями. 

font-size: x-small; 

Размер 

Размер шрифта будет установлен в соответствии с числом. Примечание emширина одной буквы основного шрифта, exвысота одной буквы основного шрифта. in, cm, mm – размер в дюймах, сантиметрах и миллиметрах соответственно. 

font-size: 15px; 

font-style 

normal 

Обычный шрифт. 

font-style: normal; 

italic 

Курсивный шрифт. 

font-style: italic; 

oblique 

Наклонный шрифт. 

font-style: oblique; 

font-variant 

normal 

Обычный шрифт. 

 

small-caps 

Шрифт, в котором маленькие буквы выглядят так же как большие. Например маленькая буква А будет выглядеть так же как большая. 

 

font-weight 

normal 

Нормальный шрифт. 

 

bold 

Полужирный шрифт. 

 

bolder 

Шрифт жирнее обычного. 

 

lighter 

Шрифт менее жирный обычного. 

 

Число в диапазоне от 100 до 900 шагом в 100. 

Шрифт будет установленной «жирности». Нормальный шрифт имеет «жирность» равную 700. Будет работать только, если загружены соотвтетствующие каждому числу шрифты. 

 

letter-spacing 

normal 

Автоматическая установка интервала между буквами в строке. 

 

Размер 

Интервал между буквами в строке устанавливается в зависимости от указанного значения. 

 

line-height 

normal 

Обычный интервал между строк. 

 

число 

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

 

Размер 

Интервал между строками будет установлен в соответствии с указанным значением. 

 

word-spacing 

Размер 

Расстояние между словами. 

 

text-indent 

Размер 

Отступ первой строки элемента. (Красная строка). 

 

text-align 

left 

Выравнивание элемента по левому краю его границ. 

 

right 

Выравнивание элемента по правому краю его границ. 

 

center 

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

 

justify 

Выравнивание элемента по ширине от его границ. 

 

text-decoration 

none 

Ни как не выделенный шрифт 

 

underline 

Подчёркнутый снизу шрифт. 

text-decoration: underline;   

overline 

Подчёркнутый сверху шрифт 

 

line-through 

Подчёркнутый посередине шрифт (зачёркнутый). 

 

blink 

Мигающий шрифт. 

 

text-decoration-style 

solid 

Одинарная линия (пример). 

 

double 

Двойная линия (пример). 

text-decoration-style: double; 

dotted 

Точечная линия (пример). 

 

dashed 

Пунктирная линия (пример). 

 

wavy 

Волнистая линия. 

 

 

Размеры в css. 

 Пиксели. Обозначают количество точек на экране компьютера. 

        .font { 

font-size: 15px; 

} 

 

auto. Всегда можно задать размер словом auto. В таком случае размер будет вычислен автоматически в зависимости от ситуации. 

 

emразмер относительно размера шрифта в родительском элементе. Если к примеру размер шрифта в родительском элемента 10px, то 0.5em будет означать 5px. 

font-size: 1.5em; 

 

remразмер относительно базового размера шрифта документа. Т.е. если у html документа в целом базовый размер шрифта 10px, то 0.5rem будет означать 5px независимо от того, где этот элемент находится. Базовый размер шрифта устанавливается у тэга <html> 

 

        html { 

            font-size: 30px; 

        } 

        .font { 

            font-size