Кратък урок за езика на дизайна в мрежата.

CSS (Cascading Style Sheets) е това, което прави уеб страниците да изглеждат добре и да се представят. Това е съществена част от съвременната уеб разработка и задължително умение за всеки уеб дизайнер и разработчик.
В тази статия ще ви дам кратко въведение, което да ви помогне да започнете с CSS.
Също така стартирахме безплатен CSS курс в пълен размер за Scrimba. Щракнете тук, за да го проверите.
Предполагам, че имате основни познания по HTML, но освен че няма предпоставки за този урок.
Приготвяме се да започнем
Нека започнем с научаването как можем да включим CSS в нашите проекти. Обикновено има три начина да го направим.
1. Вграден CSS
Първо, можем да включим CSS директно в нашите HTML елементи. За това използваме style
атрибута и след това му предоставяме свойства.
Hello world!
Тук му даваме свойството color
и задаваме стойността на blue
, което води до следното:

Можем също да зададем множество свойства вътре в style
маркера, ако сме искали. Не искам обаче да продължавам по този път, тъй като нещата започват да се объркват, ако нашият HTML е затрупан с много CSS вътре в него.
Ето защо беше въведен вторият метод за включване на CSS.
2. Вътрешен CSS
Другият начин за включване на CSS е използването на style
елемента в head
раздела на HTML документа. Това се нарича вътрешен стил.
h1 { color: blue; }
В елемента стил можем да придадем стила на нашите HTML елементи, като изберем елемента (елементите) и предоставим атрибути за стилизиране. Точно както приложихме color
свойството към h1
елемента по-горе.
3. Външен CSS
Третият и най-препоръчителен начин за включване на CSS е използването на външна таблица със стилове. Създаваме таблица със стилове с .css
разширение и включваме връзката му в HTML документа, по следния начин:
В горния код сме включили връзката към style.css
файл, използващ link
елемента. След това записваме всичките си CSS в отделна таблица със стилове, наречена style.css
така, че да е лесно управляема.
h1 { color: blue; }
Тази таблица със стилове може да се импортира и в други HTML
файлове, така че това е чудесно за повторна употреба.
CSS селектори
Както обсъждахме по-рано, CSS е език за дизайн, който се използва за стилизиране на HTML елементи. И за да стилизирате елементи, първо трябва да ги изберете. Вече видяхте как това работи, но нека се потопим малко по-дълбоко в CSS селекторите и разгледаме три различни начина, по които можете да изберете HTML елементи.
1. Елемент
Първият начин за избор на HTML елемент е чрез просто използване на името, което направихме по-горе. Нека да видим как работи:
h1 { font-size: 20px; } p { color: green; } div { margin: 10px; }
Примерът по-горе е почти обяснителен. Ние сме избиране на различни елементи, като h1
, p
, div
и им дава различни атрибути стил. На font-size
управлява големината на текста, color
определя цвета на текста, и margin
добавя разстояние около елемента.
2. Клас
Друг начин за избор на HTML елементи е чрез използване на атрибута class. В HTML можем да присвояваме различни класове на нашите елементи. Всеки елемент може да има множество класове и всеки клас може да се приложи и към множество елементи.
Нека го видим в действие:
This is heading
.container { margin: 10px; }
В горния код сме присвоили класа на container
елемента div. В таблицата със стилове избираме нашия клас, използвайки .className
формат и му даваме 10px
поле.
3. ИД
Подобно на класовете, ние също можем да използваме идентификатори, за да избираме HTML елементи и да прилагаме стил към тях. Единствената разлика между клас и ID е, че един ID може да бъде присвоен само на един HTML елемент.
This is a paragraph
#para1 { color: green; font-size: 16px; }
Примерът по-горе показва как присвояваме идентификатор на елемента на абзаца и по-късно използваме селектора за идентификатори в таблицата със стилове, за да изберем абзаца и да приложим стила към него.
Шрифтове и цветове
CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:
1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)
2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)
For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS is Coooooool!!!!
.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; }

As you can see in the above example, we have a div element with the class of container
. Inside this div, there is an h1
tag with some text inside it.
In the stylesheet, we select the container class and set its width
, height
, background-color
, and text-align
.
Finally, we select the .heading1
class — which is applied to the h1
tag — and give it the attributes of font-family
and color
.
Conclusion
You might feel a bit overwhelmed by all this information, but don’t worry.
Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
