Каскадни листови со стилови, или CSS, е јазик кој и кажува на веб-страницата како да изгледа. CSS додава боја, стил и распоред на обичната структура на веб-локацијата. Исто како што ја избирате вашата облека за да се чувствувате добро и да изгледате уредно, CSS и помага на веб-страницата да се облече и да изгледа привлечно. Во веб-развојот, ние користиме CSS за промена на бојата, големината и позицијата на текстот и полињата на страницата. Оваа лекција ќе ве запознае со основите на CSS на едноставен јазик. Ќе научиме што е CSS, зошто е важно и како работи со HTML.
CSS е кратенка за Каскадни листови со стилови. Тоа е посебен јазик што се користи за стилизирање на веб-страници. Размислете за 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 Box е начин да се разбере како различните делови од елементот се распоредени на страница. Секој елемент е како кутија. Моделот на кутија има четири дела:
Замислете фотографија. Самата фотографија е содржината. Простирка што ја опкружува фотографијата е како баласт. Рамката што го држи сето тоа заедно е границата. А просторот околу рамката е маргината. Користејќи го овој модел, можете да бидете сигурни дека сите делови од вашиот дизајн имаат соодветен простор и рамнотежа.
CSS не е само за бои и фонтови; исто така ви помага да организирате елементи на веб-страница. Ова се нарекува распоред и позиционирање. Со CSS, можете да одлучите каде секој елемент се појавува на страницата.
Постојат неколку начини за контрола на изгледот на веб-страницата, вклучувајќи:
Користењето на овие техники на распоред е како да ги распоредувате играчките на полица. Вие одлучувате каде оди секоја играчка за сите да имаат доволно простор и да изгледаат уредно. Ова ја прави вашата веб-страница поорганизирана и покана.
Еве пример за тоа како HTML и CSS работат заедно. Овој примерок код покажува едноставна веб-страница со одреден стил:
<code><!DOCTYPE html>
<html>
<глава>
<стил>
тело {
боја на позадина: светло сина;
}
h1 {
боја: морнарица;
големина на фонтот: 24 px;
}
стр {
боја: зелена;
големина на фонтот: 18 px;
}
</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 структури во визуелно привлечни веб-страници.