CSS како неизбежен дел од front end програмирањето

HTML, CSS and JavaScript… трите главни технологии на Web Front-end Development.

Денес ќе зборуваме за основите на CSS. Ќе погледнеме што е CSS, како да напишеш CSS правила и како да ги додадеш истите на HTML. Како предуслов, ако не знаеш ништо за веб девелопмент, те советуваме најпрво да разбереш што е и како функционира HTML.

Што е CSS?

CSS (Cascading Style Sheets) е технологија со која ѝ се дава стилот на твојата веб страна, што значи се користи за подобар изглед и распоред на истата. Освен тоа, можеш да дефинираш како твојата страна ќе изгледа на различни екрани како компјутер, таблет, мобилен телефон.

CSS не е програмски јазик како C++ или JavaScript. Но, CSS не е едноставен како што изгледа. Ако пробаш да го користиш без претходно да го разбереш, веројатно ќе имаш потешкотии во твојот веб развој. Од ова можеме да заклучиме дека изучувањето на CSS е важно колку и учењето на некој програмски јазик.

Facebook без CSS

Facebook со CSS

Ова е пример кој го открива ефектот на CSS врз една веб страна. Како што можеш да забележиш, визуелната репрезентација е многу подобра со CSS.

CSS – синтакса:

Ајде да го напишеме првиот CSS код.

На пример, да го смениме изгледот на <h1> елементот:

                                            
                                                <h1>I'm a Header</h1>

Најпрво, треба да му кажеме на CSS како да го најде HTML елементот. Тоа можеме да го направиме со карактеристиката наречена “selector”. Селекторот во CSS се користи за да пронајде HTML елементи според нивната ознака (HTML тагот), име на класа (class атрибут), идентификација (id атрибут) и слично.

Подолу дефинираме селектор за HTML елементот, базиран на неговата ознака <h1>:

                                    
                                         h1{} /*An example of a selector*/

Потоа можеме да напишеме едно или повеќе CSS правила, меѓу заградите на селекторот, при што секое правило завршува со точка и запирка:

                                    
                                         h1{ /*CSS rules between brackets*/
                                            color: red;
                                         }

Врз база на дефинираниот селектор <h1>, CSS сега може да разбере каде да ги нанесе новите правила:

Има многу начини преку кои можеш да дефинираш CSS селектор, подолу можеш да видиш неколку примери:

Class Selector: Наоѓа елементи на HTML според име на класа (class атрибут) која ја содржи елементот.
Id Selector: Наоѓа елементи според нивната специфична идентификација (id атрибут)
Element Selector: Наоѓа елементи според нивната ознака (HTML таг)

Како да го додадеш CSS во HTML?

Само што научи зошто и како да дефинираш селектор и да напишеш CSS код. Но, тоа не е доволно. Сега треба да го поврзаеме вака напишаниот CSS со нашиот HTML документ, бидејќи без тоа нема да може да ги препознае промените кои се направени.

Истото можеме да го направиме на 3 различни начини:

1. Надворешен CSS file

Чувањето на CSS кодови во различни дадотеки е најдобрата пракса. Во реалниот свет на програмирање, мора да ги чуваме HTML, CSS и JavaScript кодовите во различни фајлови и подоцна да ги искористиме каде што се неопходни. Можеме да креираме одделни CSS фајлови со .css екстензија и истите да ги вклучиме во било кој HTML документ. На пример, можеме да создадеме CSS фајл како следниот: index.css

Во index.css, можеме да го запишеме нашиот CSS код:

                                    
                                         p{ /*CSS rules between brackets*/
                                            color: red;
                                         }

Потоа можеме да го внесеме index.css во HTML со помош на <link> тагот на следниот начин:

                                    
                                        <head>
                                              <link rel="stylesheet" href="index.css">
                                         </head>
                                        <body>
                                             <p> I'm a Text </p>
                                        </body>

Сега HTML фајлот е поврзан со CSS кодот и промените ќе се нанесат на елементот.

2. Внатрешен CSS со <style> ознака

Друг начин каде што можеш да напишеш CSS код е внатре во самиот HTML со помош на <style> ознакаката (тагот). На овој начин вие го додавате CSS кодот директно во HTML документот наместо во посебна датотека.

                                    
                                        <head>
                                             <style> 
                                                <p>{
                                                    color:red;
                                                }
                                             </style> 
                                        </head>
                                        <body>
                                             <p> I'm a Text </p>
                                        </body>

3. Inline Стил

Третиот начин е да напишеш CSS правило директно во внатрешноста на HTML елементот. Со овој метод, ги дефинираме CSS правилата внатре во HTML тагот и немаме потреба да креираме класа за нејзе.

Овам ожеме да го постигнеме со користење на style атрибутот на следниот начин:

                                    
                                         <p style="color: blue; font-size: 22px;" > I'm a Text </p>

CSS е неопходен дел од веб девелопмент. Во овој пост е објаснета наједноставната употреба и синтакса на CSS. Има многу други правила и карактеристики кои треба да се истражат во светот на CSS.

Во еден од нашите претходни постови навлеговме малку подлабоко во технологиите кои се користат за frond end програмирање и што треба да знаеш за да бидеш добар front end програмер. Доколку сето ова ти звучи привлечно и сакаш да влезеш во водите на програмирњето, SkillUp нуди 5 месечни академии кои ќе ти помогнат да ги совладаш технологиите и започнеш нова кариера.