Този урок е достъпен само в платената версия на курса.
Вземи достъп до всички уроци 💫 цена: 99лв.
Основи на уеб програмирането
В същината си CSS е задаване стойности на различни свойства. В този урок ще разгледаме различните типове и тяхното приложение. Ще видим и някой от по-популярните мерни единици.
Стойностите в CSS се използват за определяне на различните атрибути на елементите в документа, като цвят, размер и позиция. Например, стойност 10px може да се използва за определяне на ширината на елемент, а стойност #ff0000 за определяне на цвета на елемент.
Мерната единица px често се използва за определяне на размерите на шрифтове, разстояния между елементи и размерите на самите елементи. Например, font-size: 16px; ще зададе размера на шрифта на елемента да е 16 пиксела.
em и rem са две от мерните единици, които се използват в CSS за измерване на размерите на елементите в документа.
em е относителна мерна единица, която се изчислява спрямо текущия размер на шрифта. Това означава, че ако зададете размера на шрифта на елемента да е 16px, то стойността 1em ще е равна на 16px. Използваме тази мерна единица когато искаме елементите да са пропорционални на текущия размер на шрифта.
rem е друга относителна мерна единица, която се изчислява спрямо размера на шрифта на основния елемент <html> елемент в документа. Това означава, че ако зададете размера на шрифта на <html> да е 16px, то стойността 1rem ще е равна на 16px.
В CSS можете да зададете цвят на елементите в документа по няколко различни начина. Един от тях е чрез използването на именувани цветове, които са предефинирани в CSS. Например, можете да зададете цвета на текста на елемент да е червен чрез използването на декларацията color: red;.
Друг начин за задаване на цвят е чрез използването на шестнадесетичен код. Този код се състои от шест символа, които се пишат с # и са съставени от три двойки символи, представляващи стойностите на червено, зелено и синьо. Например, color: #ff0000; ще зададе червен цвят.
Друг начин за задаване на цвят е чрез използването на функциите rgb и rgba. При rgb функцията представяме цвета с числа от 0 до 255. Например, декларацията color: rgb(255, 0, 0); ще зададе цвета на текста на елемента да е червен. rgba функцията представлява разширение на rgb функцията и позволява да се зададе и прозрачност на цвета. Тя се използва по същия начин като rgb функцията, но се добавя четвърто число от 0 до 1, което представлява степента на прозрачност на цвета. Например, rgba(255, 0, 0, 0.8).
Практиката е най-бързия начин да усвоиш знания трайно. Подготвил съм ти малка задача свързана с урока.
Материали свързани с урока:
→ https://github.com/kra ... samples/css-values
→ https://developer.mozi ... Building_blocks/Values_and_units
