Каскадните стилски листови, или CSS, е јазик кој ѝ кажува на веб-страницата како да изгледа. CSS додава боја, стил и распоред на едноставната структура на веб-страницата. Исто како што ја избирате вашата облека за да се чувствувате добро и да изгледате уредно, CSS ѝ помага на веб-страницата да се облече и да изгледа привлечно. Во веб-развојот, ние користиме CSS за да ја промениме бојата, големината и позицијата на текстот и полињата на страницата. Оваа лекција ќе ве запознае со основите на CSS на едноставен јазик. Ќе научиме што е CSS , зошто е важен и како работи со HTML.
CSS е кратенка од Cascading Style Sheets (Каскадни стилски листови). Тоа е посебен јазик што се користи за стилизирање на веб-страници. Замислете го CSS како боја и декорации за зграда. Зградата е направена од HTML , а CSS ја прави убава. Користејќи CSS , можете да ја промените бојата на позадината, стиловите на фонтови и просторот околу елементите на вашата веб-страница. CSS е алатка што им помага на веб-дизајнерите да ги направат веб-страниците да изгледаат подобро и позабавно.
Замислете дека боите цртеж. Линиите на цртежот се како основна структура на веб-страница. CSS е како боички и маркери што додаваат живот на цртежот. Со неколку едноставни правила, можете да го промените целиот цртеж од обичен во шарен!
CSS се користи за да ги направи веб-страниците привлечни и лесни за користење. Го одвојува стилот од содржината. Ова значи дека зборовите и сликите на страницата (обезбедени од HTML ) остануваат исти, додека CSS контролира како изгледаат. Кога го ажурирате стилот, не треба да ја менувате содржината. Ова одвојување им помага на веб-развивачите да работат побрзо и ги прави страниците попријатни за посета.
Замислете го CSS како облеката што ја избирате. Ако носите различна облека, изгледате различно, но сепак сте истата личност. CSS го менува изгледот на веб-страницата без да ги менува информациите на неа. Ова го олеснува ажурирањето на дизајнот на целата веб-страница со уредување само на една CSS датотека.
CSS работи рака под рака со HTML. HTML е основата што одредува каде одат работите на веб-страницата. Потоа CSS влегува во игра за да додаде бои, фонтови и стилови. Кога прелистувачот вчитува веб-страница, прво ја гради структурата со HTML, а потоа ги применува стиловите дефинирани во CSS .
CSS е напишан како збир правила. Секое правило има два дела: селектор и блок за декларација. Селекторот му кажува на прелистувачот кој HTML елемент да го стилизира. Блокот за декларација содржи една или повеќе декларации. Секоја декларација има својство и вредност. Својството е она што сакате да го промените, а вредноста кажува како да го промените.
На пример, за да ја поставите бојата на позадината на страницата во светло сина, можете да напишете правило што изгледа вака:
<code>тело {
боја на позадина: светло сина;
</code>Ова едноставно правило ја менува позадината на целата страница.
Основното CSS правило следи едноставен образец. Го прикажува селекторот и блок од својства и вредности. Образецот изгледа вака:
<code>селектор {
својство: вредност;
</code>Тука, селекторот избира кој HTML елемент да се таргетира. Својството е она што сакате да го промените, а вредноста е начинот на кој сакате да го промените.
На пример, ако сакате целиот текст на пасусот да биде син, пишувате:
<code>p {
боја: сина;
</code>Ова правило му кажува на веб-прелистувачот дека секој елемент <p> (пасус) треба да има син текст.
CSS селектори ви овозможуваат да изберете кои елементи на вашата веб-страница ќе бидат засегнати од правилата за стил. Постојат неколку видови селектори, и секој од нив работи малку поинаку.
Овие различни селектори ви даваат голема моќ да стилизирате одредени делови од вашата веб-страница. Тие ви овозможуваат прецизно да ги таргетирате елементите и да одлучите како треба да изгледаат.
CSS нуди многу различни својства што можете да ги користите за стилизирање на вашата веб-страница. Секое својство ви овозможува да промените специфичен аспект од изгледот на елементот. Некои вообичаени својства се:
Секое CSS својство е проследено со вредност. На пример, за да му дадете црвена боја на текстот, можете да напишете:
<code>p {
боја: црвена;
</code>Ова едноставно правило ги прави сите пасуси да имаат црвен текст. Својството боја контролира како ќе се појави текстот, а вредноста црвена му кажува која боја да биде.
Зборот „каскадно“ во CSS значи дека стиловите можат да течат од едно правило до друго. Ако две правила можат да се применат на истиот елемент, редоследот може да одлучи кое од нив ќе победи. Ова е слично на редење блокови каде што еден блок понекогаш покрива дел од друг.
Едно вообичаено правило е дека стиловите напишани директно во HTML елемент (наречени вградени стилови) ќе ги заменуваат стиловите во вашата CSS датотека. Друго правило е дека ако родителскиот елемент е стилизиран, неговите подредени елементи можат да го наследат тој стил освен ако не им е кажано поинаку.
На пример, ако ја поставите бојата на текстот на <div> на зелена, тогаш текстот во <div> честопати ќе се појавува зелено поради наследување. Ова помага да се одржи конзистентен дизајн на веб-страницата.
Со CSS , можете да ги менувате боите на многу начини. Можете да користите вообичаени имиња на бои како црвена , сина и зелена . Можете исто така да користите хексадецимални кодови како што е <code>#FF0000</code> за црвена или RGB вредности како <code>rgb(255, 0, 0)</code>.
Фонтите се уште еден важен дел од CSS . Фонтот е како стилот на ракопис што го избирате во тетратка. Во CSS , можете да го промените семејството на фонтови, големината, дебелината и стилот. На пример, ако сакате вашите пасуси да се појавуваат во Arial, можете да користите:
<code>p {
семејство на фонтови: Arial, sans-serif;
</code>Ова правило му кажува на прелистувачот да го прикаже текстот во фонтот Arial ако е достапен и да користи друг сличен фонт ако не е достапен.
Менувањето на боите и фонтовите со CSS го прави текстот полесен за читање, а вашата веб-страница поинтересна за гледање.
CSS моделот на кутија е начин да се разбере како различните делови од елементот се распоредени на страницата. Секој елемент е како кутија. Моделот на кутија има четири дела:
Замислете фотографија. Самата фотографија е содржината. Подлогата што ја опкружува фотографијата е како полнење. Рамката што ја држи целата фотографија заедно е рамката. А просторот околу рамката е маргината. Користејќи го овој модел, можете да се осигурате дека сите делови од вашиот дизајн имаат соодветен простор и рамнотежа.
CSS не е само за бои и фонтови; тој ви помага и да ги распоредите елементите на веб-страницата. Ова се нарекува распоред и позиционирање. Со CSS, можете да одлучите каде се појавува секој елемент на страницата.
Постојат неколку начини за контрола на распоредот на веб-страница, вклучувајќи:
Користењето на овие техники на распоред е како распоредување играчки на полица. Вие одлучувате каде ќе оди секоја играчка за сите да имаат доволно простор и да изгледаат уредно. Ова ја прави вашата веб-страница поорганизирана и попривлечна.
Еве еден пример за тоа како HTML и CSS работат заедно. Овој примерок код прикажува едноставна веб-страница со одреден стил:
<код><!DOCTYPE html>
<html>
<глава>
<стил>
тело {
боја на позадина: светло сина;
}
h1 {
боја: морнарско сина;
големина на фонт: 24px;
}
п {
боја: зелена;
големина на фонт: 18px;
}
</style>
</head>
<тело>
<h1>Мојата прва веб-страница</h1>
<p>Ова е едноставна веб-страница стилизирана со CSS.</p>
</body>
</html></code>Овој код креира веб-страница со светло сина боја на позадината. Текстот на заглавието е морнарско сина, а текстот на пасусот е зелен. CSS кодот во ознаката <code><style></code> покажува како се пишуваат и применуваат правилата.
Можете да додадете CSS во вашиот HTML на три главни начини. Секој метод има своја употреба во зависност од ситуацијата:
Надворешниот метод е најчест во професионалниот веб развој бидејќи го одржува HTML уреден и ви овозможува да ги ажурирате стиловите на повеќе страници одеднаш.
CSS е многу корисен на многу начини. Еве некои придобивки од користењето на CSS во веб-развојот:
Користењето на CSS е како да имате посебна кутија со алатки. Секоја алатка во кутијата со алатки ви помага лесно да го подобрите изгледот на вашата веб-страница. Додека вежбате, ќе видите колку моќен може да биде CSS во правењето веб-страници убави и лесни за користење.
Секоја веб-страница што ја посетувате користи CSS на некаков начин. Од вашите омилени страници со цртани филмови до страници со училишни проекти, CSS помага да се создаде забавен и лесен за читање распоред. Кога ќе видите шарена веб-страница со уредни празни места и јасен текст, тоа е CSS на дело.
Размислете за дизајнот на популарни веб-страници како оние за игри, цртани филмови или онлајн приказни. Внимателната употреба на бои, фонтови и распореди помага овие веб-страници да бидат возбудливи и привлечни. CSS се користи и во апликации и мобилни страници, осигурувајќи дека содржината изгледа добро и на големи екрани и на мали телефони.
Во секојдневниот живот, CSS е сличен на уредување соба. Можете да изберете тема за вашата соба, да закачите шарени слики и уредно да го распоредите мебелот. CSS го прави истото и за веб-страниците. Тој внесува ред и убавина во дигиталниот простор, правејќи го пријатен за посетителите.
Еве ги главните поенти што ги научивме за CSS:
CSS е витален дел од веб-развојот, правејќи ги страниците убави и лесни за навигација. Додека истражувате повеќе и се обидувате да ги креирате сопствените веб-страници, запомнете дека CSS е вашата алатка за изразување креативност. Забавувајте се експериментирајќи со бои, фонтови и распореди, бидејќи секоја мала промена додава на магијата на добро дизајнираната веб-страница.
Продолжете да вежбате и да ги набљудувате вашите омилени веб-страници. Забележете како се користат различни стилови за да го привлечат вашето внимание и да создадат пријатно искуство. Со текот на времето, ќе видите колку моќен може да биде CSS во трансформирањето на едноставни HTML структури во визуелно привлечни веб-страници.