Кратък урок за езика на дизайна в мрежата.
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.
