Sužinokite CSS per 5 minutes - pamoka pradedantiesiems

Greita žiniatinklio dizaino kalbos pamoka.

CSS (Cascading Style Sheets) yra tai, dėl ko tinklalapiai atrodo gerai ir pateikiami. Tai būtina šiuolaikinio interneto kūrimo dalis ir įgūdžiai, kuriuos turi turėti bet kuris interneto dizaineris ir kūrėjas.

Šiame straipsnyje pateiksiu jums trumpą įvadą, kuris padės jums pradėti naudotis CSS.

Mes taip pat pradėjome nemokamus viso ilgio CSS kursus apie „Scrimba“. Spustelėkite čia, kad patikrintumėte.

Darau prielaidą, kad turite pagrindinį HTML supratimą, tačiau nėra jokių šios mokymo programos sąlygų.

Darbo pradžia

Pradėkime nuo to, kaip išmokti įtraukti CSS į savo projektus. Paprastai tai darome trimis būdais.

1. Įterpta CSS

Pirmiausia, mes galime įtraukti CSS tiesiogiai į savo HTML elementus. Tam mes naudojame styleatributą ir tada pateikiame jam savybes.

Hello world!

Čia mes suteikiame jam savybę colorir nustatome vertę į blue, o tai lemia:

Taip pat, stylejei norime, žymės viduje galime nustatyti kelias ypatybes . Tačiau nenoriu toliau eiti šiuo keliu, nes viskas pradeda netvarkinga, jei mūsų HTML yra užgriozdintas daugybe CSS.

Štai kodėl buvo įvestas antrasis CSS įtraukimo metodas.

2. Vidinė CSS

Kitas būdas įtraukti CSS yra styleelemento naudojimas headHTML dokumento skyriuje. Tai vadinama vidiniu stiliumi.

  h1 { color: blue; }   

Stiliaus elemente mes galime suteikti stilių savo HTML elementams, pasirinkdami elementą (-us) ir pateikdami stiliaus atributus. Panašiai kaip mes pritaikėme colornuosavybę h1aukščiau esančiam elementui.

3. Išorinė CSS

Trečias ir labiausiai rekomenduojamas būdas įtraukti CSS yra išorinio stiliaus lapo naudojimas. Mes kuriame stiliaus lapą su .cssplėtiniu ir įtraukiame jo nuorodą į HTML dokumentą taip:

Į aukščiau pateiktą kodą įtraukėme style.cssfailo nuorodą naudodami linkelementą. Tada mes parašome visą savo CSS į atskirą stiliaus lapą, vadinamą style.css, kad jį būtų lengva valdyti.

h1 { color: blue; } 

Ši stiliaus lentelė taip pat gali būti importuojama į kitus HTMLfailus, todėl tai yra puikus pakartotinis naudojimas.

CSS selektoriai

Kaip aptarėme anksčiau, CSS yra dizaino kalba, naudojama HTML elementų stiliui kurti. Norėdami stilizuoti elementus, pirmiausia turite juos pasirinkti. Jūs jau matėte žvilgsnį, kaip tai veikia, tačiau panardinkime šiek tiek giliau į CSS parinkiklius ir pažvelkime į tris skirtingus HTML elementų pasirinkimo būdus.

1. Elementas

Pirmasis būdas pasirinkti HTML elementą yra tiesiog naudoti pavadinimą, ką mes padarėme aukščiau. Pažiūrėkime, kaip tai veikia:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

Aukščiau pateiktas pavyzdys yra beveik savaime suprantamas. Mes tikriname įvairių elementų, tokių kaip h1, p, divir suteikti jiems skirtingus stiliaus atributus. Į font-sizekontrolė teksto dydį, colornustato teksto spalvą ir marginprideda tarpai aplink elementą.

2. Klasė

Kitas HTML elementų pasirinkimo būdas yra klasės atributo naudojimas. HTML elementuose mes galime priskirti skirtingas klases. Kiekvienas elementas gali turėti kelias klases, o kiekviena klasė taip pat gali būti taikoma keliems elementams.

Pažiūrėkime, kaip tai veikia:

This is heading

 .container { margin: 10px; } 

Aukščiau pateiktame kode priskyrėme container„div“ klasę . Stilių lape mes pasirenkame savo klasę naudodami .classNameformatą ir suteikdami jai 10pxparaštę.

3. ID

Kaip ir klasės, mes taip pat galime naudoti ID, kad pasirinktume HTML elementus ir pritaikytume jiems stilių. Vienintelis skirtumas tarp klasės ir ID yra tas, kad vieną ID galima priskirti tik vienam HTML elementui.

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

Aukščiau pateiktame pavyzdyje rodoma, kaip mes skiriame pastraipos elementui ID, o vėliau stiliaus lape naudodami ID parinkiklį pasirinkite pastraipą ir pritaikykite jai stilių.

Šriftai ir spalvos

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.

Galiausiai mes pasirenkame .heading1klasę, kuri taikoma h1žymelei, ir suteikiame jai font-familyir color.

Išvada

Galite jaustis kiek priblokšti visos šios informacijos, bet nesijaudinkite.

Tiesiog patikrinkite mūsų nemokamą „Scrimba“ CSS kursą ir per mažiau nei valandą būsite žiniatinklio dizaino nindzė.

Ačiū, kad skaitėte! Mano vardas Peras Borgenas, esu „Scrimba“ įkūrėjas - lengviausias būdas išmokti koduoti. Jei norite išmokti kurti modernią svetainę profesionaliu lygiu, turėtumėte sužinoti mūsų interaktyvų interneto dizaino „bootcamp“.