Pikaopastus web-suunnittelukielestä.

CSS (Cascading Style Sheets) tekee verkkosivuista näyttävän hyvältä ja edustavalta. Se on olennainen osa nykyaikaista verkkokehitystä ja jokaisen verkkosuunnittelijan ja kehittäjän on pakko saada taito.

Tässä artikkelissa annan sinulle nopean johdannon CSS: n käytön aloittamiseksi.

Olemme myös käynnistäneet ilmaisen täyspitkä CSS-kurssin Scrimbasta. Napsauta tätä tarkistaaksesi sen.

Oletan, että sinulla on perustiedot HTML: stä, mutta muuten kuin tälle opetusohjelmalle ei ole edellytyksiä.

Päästä alkuun

Aloitetaan oppimalla, miten voimme sisällyttää CSS: n projekteihimme. Meillä on tyypillisesti kolme tapaa.

1. Sisäinen CSS

Ensinnäkin voimme sisällyttää CSS: n suoraan HTML-elementteihimme. Tätä varten käytämme styleattribuuttia ja annamme sitten sille ominaisuuksia.

 Hello world! 

Tässä annamme sille ominaisuuden ja asetamme colorarvon arvoksi blue, mikä johtaa seuraavaan:

Voimme myös asettaa useita ominaisuuksia styletunnisteen sisään, jos haluamme. En kuitenkaan halua jatkaa tätä polkua, koska asiat alkavat sotkea, jos HTML-koodimme on täynnä ja siinä on paljon CSS: ää.

Siksi otettiin käyttöön toinen menetelmä CSS: n sisällyttämiseksi.

2. Sisäinen CSS

Toinen tapa sisällyttää CSS on käyttää styleelementtiä headHTML-asiakirjan osiossa. Tätä kutsutaan sisäiseksi muotoiluksi.

  h1 { color: blue; }   

Tyylielementissä voimme antaa tyylin HTML-elementeillemme valitsemalla elementin (elementit) ja tarjoamalla tyylimääritteet. Aivan kuten käytimme colorominaisuutta h1yllä olevaan elementtiin.

3. Ulkoinen CSS

Kolmas ja suositeltavin tapa sisällyttää CSS on ulkoisen tyylitaulukon käyttäminen. Luomme tyylitaulukon, jossa on .csslaajennus, ja sisällytämme sen linkin HTML-dokumenttiin seuraavasti:

Yllä olevaan koodiin olemme sisällyttäneet style.csstiedoston linkin linkelementin avulla. Sitten kirjoitamme kaikki CSS-tiedostomme erilliseen tyylitaulukkoon, jota kutsutaan style.cssniin, että se on helposti hallittavissa.

h1 { color: blue; } 

Tämä tyylitaulukko voidaan tuoda myös muihin HTMLtiedostoihin, joten se sopii erinomaisesti uudelleenkäytettävyyteen.

CSS-valitsimet

Kuten aiemmin keskustelimme, CSS on suunnittelukieli, jota käytetään HTML-elementtien tyyliin. Ja elementtien tyylin luomiseksi sinun on ensin valittava ne. Olet jo nähnyt vilauksen tämän toiminnasta, mutta sukeletaan hieman syvemmälle CSS-valitsimiin ja tarkastellaan kolmea eri tapaa valita HTML-elementtejä.

1. Elementti

Ensimmäinen tapa valita HTML-elementti on yksinkertaisesti käyttää nimeä, mitä teimme yllä. Katsotaanpa, miten se toimii:

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

Yllä oleva esimerkki on melkein itsestään selvä. Olemme valitsemalla eri elementtejä, kuten h1, p, divja antaa heille erilaisia tyyliattribuutit. font-sizeOhjaa koko tekstin, colorasettaa tekstin väri, ja marginlisätään väli kappaleen ympärille.

2. Luokka

Toinen tapa valita HTML-elementit on käyttää class-määritettä. HTML-muodossa voimme määrittää elementeillemme erilaisia ​​luokkia. Jokaisella elementillä voi olla useita luokkia, ja kutakin luokkaa voidaan soveltaa myös useisiin elementteihin.

Katsotaanpa se toiminnassa:

 This is heading 

 .container { margin: 10px; } 

Yllä olevassa koodissa olemme määrittäneet luokan containerdiv elementille. Tyylitaulukossa valitsemme luokkamme käyttämällä .classNamemuotoa ja antamalla sille 10pxmarginaalin.

3. Henkilötunnus

Sarjojen tavoin voimme käyttää tunnuksia myös HTML-elementtien valitsemiseen ja tyyliin. Ainoa ero luokan ja tunnuksen välillä on, että yksi tunnus voidaan määrittää vain yhdelle HTML-elementille.

 This is a paragraph 

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

Yllä olevassa esimerkissä näkyy, kuinka osoitamme kappalelementille tunnuksen ja myöhemmin käytämme tyylitaulukon ID-valitsinta kappaleen valitsemiseksi ja tyylin soveltamiseksi siihen.

Fontit ja värit

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.

Lopuksi valitsemme .heading1luokan - jota käytetään h1tagiin - ja annamme sille attribuutit font-familyja color.

Johtopäätös

Saatat tuntea, että kaikki nämä tiedot ovat hieman hukkua, mutta älä huoli.

Tutustu vain ilmaiseen CSS-intro-kurssillemme Scrimbassa ja olet web-suunnitteluninja alle tunnissa.

Kiitos lukemisesta! Nimeni on Per Borgen, olen Scrimban perustaja - helpoin tapa oppia koodaamaan. Sinun kannattaa tutustua reagoivaan verkkosuunnittelun käynnistyskampaan, jos haluat oppia rakentamaan modernia verkkosivustoa ammattitasolla.