Обзор и конспект 4-ого урока курса (CSS) " HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend" GOIT.

Это продолжение обзора и конспектов по курсу HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend (по ссылке нужно переходить со включенным VPN).

Сайт авторов курса

---

Предыдущие уроки

1-ый урок (HTML)

2-ой урок (HTML)

3-ий урок (CSS)

---

Пройденные темы в уроке:

• Margin, padding, border
• Blocks, inline, inline-blocks
• Отрицательный margin
• Замещаемые элементы
• Высота блочного элемента
• Вертикальные отступы auto
• Анонимный текст
• Пробелы в строчных элементах
• line-height
• vertical-align
• Влияние свойств на строчные элементы
• Строчные блоки “inline-block”
• Замещаемые блоки
• Отрицательный отступ
• border
• Цвета
• Background
• background-clip
• float
• background у float элементов
• Вертикальный отступ после float
• linear-gradient Линейный градиент
• background-size

---

Ощущение от урока

Урок №4 был сложнее всех предыдущих. Ведущий курса 2 часа 10 минут очень плотно давал новый материал, но всё равно не успел пройти весь запланированный объем, и часть тем было отдано на самообучение. На мой взгляд при такой плотной и быстрой подаче, заниматься в группе в «живом режиме» малопродуктивно. Если бы я не делал постоянно остановки, что-то гуглил делая подробный конспект занятия, то КПД всего этого был бы крайне низким. Даже детально всё прорабатывая и конспектируя в итоге, я не смог сделать полностью д/з к этому уроку, а если бы я сидел в этой группе онлайн, то не смог бы сделать ни одного задания из д/з.

Объем подаваемого материала в курсе впечатляет, всего в нём примерно 53 урока, если сделать конспект по каждому занятию и перевести это всё в книжный вид, то получится книжища в несколько тысяч страниц. Со временем постараюсь пройти все уроки этого курса, и сделать по ним конспекты. Надеюсь времени и терпения на это у меня хватит…

План занятия

• Основы модели визуального форматирования
• Blocks, inline, inline-blocks
• Margin, padding, border
• Цвета и фон
• Свободное перемещение и позиционирование

Margin, padding, border

В данном примере у нас есть “div” – блочный элемент у которого могут быть следующие свойства:

Название	Свойство
Width	Ширина
Height	Высота
Padding-top (left, right, bottom)	Внутренний верхний (левый, правый, нижний) отступ
Border-top (left, right, bottom)	Внешняя граница идущая за «padding»
Margin-top (left, right, bottom)	Внешний отступ блока, то как он отступает от остальных блоков

Из-за добавления размеров “padding” и “border”, к уже заданным, итоговый размер элемента может не помещаться в предназначенный для него контейнер, из-за того что “padding” и ”border” откладываются во внутрь размера элемента:

С помощью CSS свойства «box-sizing: border-box;» эта несостыковка устраняется, после задания этого свойства браузер считает ширину элемента по “border”:

Подобные свойства бывают следующих видов:
• “content-box” – итоговая ширина задаётся по контенту
• “border-box” – итоговая ширина задаётся по “border”
• “padding-box” – итоговая ширина задаётся по “padding”

Указывать отступы можно так:

div {
  margin-top: 100px;
  margin-left: 50px;
  margin-bottom: 50px;
  }

Но удобнее это делать одной строкой:

div {
margin: 10px 20px 30px 40px;
  }

Порядок задания отступов идет по часовой стрелке начиная с верхнего отступа (верх, право, низ, лево)
Таким образом в одну строчку можно задавать свойства для “padding”,”border”, “margin”.

Если нужно сделать одинаковый отступ для всех сторон то код пишется так:

div {
margin: 10px; 
  }

Если добавить второе значение:

div {
margin: 10px 20px;
  }

То верхний и нижний отступ будет по 10px, а левый и правый по 20px

Если значения будет три:

div {
margin: 10px 20px 30px;
  }

10px –верхний отступ ; 20px – левый и правый отступ; 30px – нижний отступ.

В CSS если задаём любой размер, всегда нужно писать его в “px”. Единственный случай когда при указании размера “px” не пишутся это когда заданное значение «0».

Отступы “margin” не складываются друг с другом. Если у верхнего и нижнего блока отступы по 20 px, то между ними будет отступ в 20px.

Blocks, inline, inline-blocks

Картинка является примером для последующего кода

Блочные элементы стремятся занять максимум от возможного места в шириун внутри “родителя”. Если значения “margin” и “widh”: auto ( то есть они не заданы), часть блока с контентом (width) растягивается на всю ширину родителя.

.d1
{
    width: 400px;
}

Если у блока задана ширина и огромное правое поле, то оно просто займет все свободное пространство до границ родителя горизонтального скролла не будет скролл появится если поменять -right на –left теперь есть что толкать — сам блок:

.d2
{
    width: 400px;
    margin-right: 3000px;
}

Блочный элемент можно выровнять по центру горизонтали экрана следующим образом (обязательно нужно задать ширину “width”, иначе этот способ работать не будет):

.d3
{
width: 400px;
margin: auto;
}

Блочный элемент можно выровнять по правому краю так:

{
    width: 400px;
    margin-left: auto;
}

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

.d5
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;

    width: 50px;
    height: 50px;

    margin: auto;
    background: red;
}

Отрицательный margin

“margin” может быть отрицательным. Результат на скриншоте:

.d1
{
    margin-left: -10px;
    margin-right: -50px;
    background: red;
}

Замещаемые элементы

Замещаемые элементы – те элементы которые замещаются на что-то, например “img”, “input” он уже хранит в себе размер, поэтому он не заполняет родителя когда становится блочным.

img, input
{
    display: block; 
    width: auto;
}

Изображение не расползлось на всю ширину.

Высота блочного элемента

Высота блочного элемента определяется высотой его потомков

Вертикальные отступы auto

.d
{
    width: 50px;
    height: 20%;
    margin-top: auto;
    margin-top: 50%;
    background: red;
}

При расчёте вертикального отступа размер в % берётся от ширины контейнера, а не от его высоты.

Анонимный текст

p
{
    line-height: 5em;
    background: red;
}

Стили применённые к “p” не работают, т.к. их не к чему применять.

Анонимный текст – это текст написанный вне тегов, он отображается в браузере.

Пробелы в строчных элементах

В строчных элементах при любом количестве пробелов отображается подин пробел. Так же эти элементы выстраиваются в одну строку, даже если в коде они находятся на разных строках.

line-height

Свойства заданные в “line-height” наследуются всеми элементами находящимися внутри того элемента к которому было применено это свойство. Если “line-height” не задан, то он будет равняться «“font-size” * 1.2» родителя. Если “line-height” задан, то он будет равняться заданному значению. Для строчных элементов находящихся внутри родителя можно переопределить свойство “line-height”.

vertical-align

— baseline: по базовой линии строки, default

— super/sub: смещение вверх/вниз
(надстрочный и подстрочные элементы)
смещение на усмотрение браузера
влияет на контейнер строки.

— bottom/top: низ/верх строчных элементов по низу
контейнера строки

— text-bottom/top: выравнивается по верху/низу 

области содержимого строки (это видимая часть текста,
включая прописные буквы и выносы букв, например хвост "у")

— middle: почти середина :) выравнивает середину
вырвниваемого элемента
по линии, которая находится на 0.5ex от
базовой линии родительского элемента,
ex считается от шрифта родителя.

— процентные значения и фиксированные значения
положительные процентные сдвигают вверх и отрицательные вниз

Базовую линию элемента, процент считается от line-height
сдвигаемого элемента. Фиксированные просто сдвигают на указанное расстояние
оба значения влияют на высоту контейнера строки

Влияние свойств на строчные элементы

Свойства которые не применяются и не влияют на строчные элементы:

height: 200px; 
width: 200px;
margin-bottom: 200px;   

Свойства которые применяются и влияют на строчные элементы:

margin-left: 30px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;    
border-left: 10px solid #000;
border-right: 10px solid #000;      

Свойства которые применяются и влияют на строчные элементы:

padding-top: 30px;  
padding-bottom: 45px;   
border-top: 10px solid #000;
border-bottom: 10px solid #000;     

Строчные блоки “inline-block”

“inline-block” сочетают в себе свойства строчных и блочных элементов, к ним можно применять свойства для обоих типов элементов.
Можно изменить представление любого блока, добавляя ему свойства блочного или строчного элемента.

Замещаемые блоки

Замещаемые элементы увеличивают контейнер строки.

До подключения замещаемых элементов:

После подключения замещающих элементов:

CSS код:

img, 
input
{
    height: 200px; 
    width: 200px;
    margin-bottom: 10px;    
    margin-left: 30px;
    margin-right: 30px;
    padding-left: 30px;
    padding-right: 30px;    
    border-left: 10px solid #000;
    border-right: 10px solid #000;      

    padding-top: 30px;  
    padding-bottom: 30px;   
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;     
    
    vertical-align: top;

    background: red;
}

Отрицательный отступ

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

border

Линии “border-style” могут быть следующих видов:
“Solid” – линия
“Dashed” - пунктир
“Dotted” – пунктир точками
“double” – двойная линия
Для каждой из 4-ёх сторон “border” можно задать свой вид линии и цвет, порядок задания стандартный (верх, право, низ, лево и т.д.)

С помощью “border” можно нарисовать треугольник:

border-color: transparent transparent transparent orange; - все стороны прозрачные кроме одной, в результате получается треугольник.

Цвета

Цвета в CSS задаются по типам:

• RGB/RGBA - красный, зеленый, синий, прозрачность color: rgba(0-255,0-255,0-255,0-1)
• HSL/HSLA - тон, насыщенность, светлота, прозрачность color: hsla(0-360, 0-100%, 0-100%, 0-1)
• HEX - #RRGGBB 0—F (0-255); #ff0000 > #f00 именованные цвета red, green, blue

На практике обычно всё пишется в HEX, когда необходимо работать с прозрачностью используется RGBA.

Цвет “border” по умолчанию берется из “color” шрифта:

Background

“background” можно брать по ссылке “url” и размещать его следующим образом:
Left, right, top, bottom, left top, left bottom и т.д.
“Repeat-x” – повторить по горизонтали; “repeat-y” – по вертикали; “repeat” – просто повторить; “no-repeat” – не повторять.
При задании “background” часто используется свойство “fixed” – оно позиционирует фоновое изображение в одном месте на странице вне зависимости от использования скроллинга в окне.

Так же все задавать все свойства можно делая короткую запись в следующем порядке:

background: 
        #ccc - цвет
        url(http://img.yandex.net/i/www/logo.png) - ссылка
        50% 50% - позиционирование
        fixed – закрепить позиционирование
        no-repeat; - не повторять

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

• padding-box - Фон отображается внутри границ.
• border-box - Фон выводится под границами.
• content-box - Фон отображается только внутри контента.

float

“float” - элемент вынимается из нормального потока документа. Ссдвигается в определенную сторону от того места, где он дожен был располагаться. Перестает занимать место и влиять на блочные элементы, но продолжает влиять на текст блочных элементов своего родителя и потомков родителя таким образом заставляет обтекать себя. Если его сдвинуть вверх, то он не будет влиять на текст, если вниз, то текст будет его обтекать. Так же у элементов “float” образуется свой поток документов, и один “float” не может залезть на другой.

background у float элементов

Если нужно сделать background к float элементам, то просто так его задать не получится, т.к. у этих элементов нет “haight” (высоты).

Что бы добавить background нужно к родительскому элементу float добавить свойство:

overflow: hidden

Вертикальный отступ после float

Если нужно сделать отступ от контейнера float, то в том случае ели мы будет задавать свойство отступа к элементу “I am next” считаться оно будет не от контейнера float, а от предыдущего текста “I am normal” и что бы этот отступ стал заметен он должен быть больше высоты контейнера float. Проще в этой ситуации задать контейнеру float свойство “margin-bottom” и оно подвинет текст “I am next” на столько px на сколько нужно.

linear-gradient Линейный градиент

Градиентом называют постепенный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство “background-image” или универсальное свойство “background”
Пример:

<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .gradient {
    background: linear-gradient(to top, #fefcea, #f1da36);
    padding: 10px;
    border: 1px solid #333;
   }
  </style>
 </head>
 <body>
  <p class="gradient">Здесь обсценная идиома традиционно начинает прозаический 
  образ, но языковая игра не приводит к активно-диалогическому пониманию.</p> 
 </body>
</html>

Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left.

Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента.

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию.
Код:

<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    background: #b5bdc8;
    background: linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    font-size: 16px; /* Размер шрифта */
    padding: 10px 20px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    border: 1px solid #333; /* Параметры рамки */
    border-radius: 20px; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
   <button>Нажми меня нежно</button>
 </body>
</html>

Результат:

http://www.cssmatic.com/gradient-generator - конструктор linear-gradient можно скопировать код для CSS.

http://lea.verou.me/css3patterns/ - это собрание готовых интересных бекграундов исключительно на CSS, для каждого бекграунда можно скопировать код.

background-size

background-size: xx% auto;

Масштабирование “background-size” задаётся:

• в точных единицах: “px” – пикселях; “cm” – сантиметрах и т.д.
• в процентах: задаётся в размере фонового изображения от ширины или высоты элемента
• auto: “auto auto” – размеры остаются исходными; “100% auto” – 100% ширины элемента, высота высчитывается автоматически по пропорциям изображения.
• cover: масштабирование изображения с оригинальными пропорциями чтобы ширина или высота изображения равнялись ширине или высоте блока
• contain: масштабирование изображения так, чтобы изображение полностью помещалось внутрь блока.

---

Домашнее задание.

Полностью решать домашнее задание я не стал, сделал 2 задания из 3-ёх, посмотрел на 3-е и решил пока его отложить, потому что увы но не понимаю как его выполнить. Так же я записался на обучение в школу программирования на Голосе @studychain где непонятные мне моменты по изученному материалу в этом уроке будут входить в программу обучения. К заданию 3 вернусь тогда когда дорасту до него, уверен что @studychain мне в этом поможет.
Пока решил вернуться к первым двум урокам этого курса, конспекты по которым я не делал, пересмотрю их и сделаю конспекты. Конечно они делаются не быстро, зато когда появляется необходимость вспомнить что проходили на уроках, с их помощью это происходит очень оперативно, поэтому оно того стоит.

Задание 2, является продолжением задания 1, вот выполненная работа:

Задание 2

Мне кажется, я выполнил это работу какими-то обходными путями, не так как она была задумана. В моём коде был побочный эффект - при наведении на линию без текста выделялась одна из частей меню. Чтобы устранить эту неполадку я добавил в HTML пустой блочный элемент, по хорошему так код не пишется, тем не менее поставленная задача была выполнена и я на этом закончил…

Не выполненное мною задание 3:
Необходимо сделать такое меню на HTML и CSS:

---

Предыдущие уроки

1-ый урок (HTML)

2-ой урок (HTML)

3-ий урок (CSS)

---