NA VRH
CSS vadnica
DOMOV HTML CSS JavaScript jQuery PHP MySQL Python C# Sass WordPress
glave/headings

CSS Kaj je CSS? Zbirniki: - preprosti zbirniki - pseudo-razredi - pseudo-elementi Oblikovanje spletne strani: - zunanji (ang. external) CSS - notranji (ang. internal) CSS - vgrajeni (ang. inline) CSS Barve Gumbi Okvirji Zamiki Oblazinjenje Ozadja Ikone Besedila Pisave Oznake Animacije

CSS

CSS Urejevalnik je pripomoček s katerim urejamo HTML dokument, in skrbi za prezentacijo spletnih strani. Z njim definiramo stil ali obliko HTML strani, v smislu kaj se naj na strani prikaže. Določimo lahko barve, velikosti, odmike, poravnave, obrobe, pozicije in ogromno drugih stvari. Pravila so sestavljena iz zbirnika (ang. Selector), in označevanja bloka.

CSS

Zbirnik kaže na HTML element, ki ga želimo oblikovati, oblikovalski blok pa vsebuje izjave ločene s podpičji. Vsaka izjava vključuje CSS lastnosti in vrednosti, ločenih s podpičjem, medtem ko se izjava konča s podpičjem, se bloki končajo z zavitimi oklepaji. Zbirniki (ang. Selectors) se uporabljajo za 'iskanje' HTML elementov, ki jih želimo preoblikovati, in jih delimo v pet kategorij.

CSS se uporablja za definiranje oblike, naše spletne strani, vključno z zasnovo, postavitvijo in spremembami zaslona, na različnih napravah. To so mobilni aparati, tablice, prenosniki. CSS je rešil velik problem pri oblikovanju, in izdelavi spletnih strani. HTML sam nikoli ni bil namenjen oblikovanju spletne strani. Problem za spletne razvijalce je prišel ob specifikaciji HTML 3.2, ko so prišle oznake (ang. Tags), kot so pisave, in barve. Ker je bilo delo v HTML izredno zamudno, je W3C (World Wide Web Consortium) ustvaril CSS.

  • Kratica CSS pomeni Cascading Style Sheets.
  • CSS opisuje, kako naj bodo HTML elementi prikazani v brskalniku.
  • Z zunanjim (ang. External) CSS lahko nadzorujemo postavitev več spletnih strani hkrati.
  • Zunanje (ang. External) tabele so shranjene v CSS datotekah na naših strežnikih.

Zbirnik kaže na HTML element, ki ga želimo oblikovati, oblikovalski blok pa vsebuje izjave ločene s podpičji. Vsaka izjava vključuje CSS lastnosti in vrednosti, ločenih s podpičjem, medtem ko se izjava konča s podpičjem, se bloki končajo z zavitimi oklepaji. Zbirniki (ang. Selectors) se uporabljajo za "iskanje" HTML elementov, ki jih želimo preoblikovati, in jih delimo v pet kategorij.

Zbirniki (ang. Selectors)
ZBIRNIK OPIS
Simple selector izbere element gleda na ime, id...
Combinator selector izbere elemente na podlagi razmerja med njimi
Pseudo-razredi izbere elemente na podlagi določenega stanja
Pseudo-elementi izbere element in del elementa preoblikujemo
Attribute selector izbere element na podlagi atributa ali njegove vrednosti

Kadarkoli brskalnik prebere CSS vstavek, bo oblikoval HTML dokument v skladu s podatki zapisanih v tej obliki. Poznamo tri oblikovne vrste, ki so napisane v spodnji tabeli.

Oblikovanje spletne strani

Celotni videz spletne strani lahko spremenimo z External CSS, tako da spremenimo samo eno datoteko. Vsaka HTML stran mora vsebovati sklic na zunanjo stilsko datoteko, ki se nahaja znotraj elementa <link>. Če delamo samo na eni spletni strani, lahko uporabimo Internal CSS, ki je določen znotraj stilskega atributa, prav tako tudi <heading>. Za Inline obliko se uporabi kar notranji slog, in če želimo uporabljati vgrajeni CSS, dodamo stilski atribut ustreznemu elementu. Stilski atribut lahko vsebuje katerokoli CSS lastnost.

Kar se tiče zunanjega (ang. External CSS) css-a, moramo napisati css datoteko v beležnici. Ni potrebno dodajati atributa <style>, samo napišemo celoten css, shranimo pod .css, in ga nato naložimo na naš strežnik. Povezavo, ki jo dobimo iz strežnika, samo prilepimo v <link>. Če želimo dodati samo ime zunanje css datoteke, kot to prikazuje primer, moramo css datoteko kopirati v isto mapo kjer se nahaja index.

External CSS 1
External CSS 2
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>external</title>
        <link rel="stylesheet" type="text/css" href="demo.css">
    </head>
    <body>
    <h1>Welcome to my external CSS course!</h1>
    <p class="paragraph">First class we made is 'paragraph' and we will add some <a href="#">href</a>.</p>
    <p class="p2">Second is 'p2'.</p>
    </body>
    </html>
            

Stvar deluje zelo dobro, in če delamo na več straneh, je ta rešitev idealna.

Za notranjo (ang. Internal) obliko moramo iti takoj pod </head>, kamor vpišemo <style> in nato dodamo stilsko obliko po naših željah, na koncu moramo obliko zapreti s </style>.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>internal</title>
    </head>
    <style>
      h1 {
          padding: 8px;
          margin: auto;
          font-weight: 400;
          font-family: "Trebuchet MS", sans-serif;
          text-align: center;
      }
      p {
          padding: 10px;
          font-weight: 600;
          border: 4px double grey;
          border-radius: 6px;
          background-color: yellow;
          color: red;
      }
    </style>
    <body>
    <h1>Example of internal css - heading h1</h1>
    <p>Example of internal css - paragraph p</p>
    </body>
    </html>
            

Vse kar je napisano v <style> se bo spremenilo, torej vsi <h4> in vsi <p> elementi bodo spremenjeni.

Vgrajeni (ang. Inline) CSS vpišemo v element sam. Jaz sem napisal obliko za element <kbd>, lahko je to <div>, <p>, itd. kamorkoli želimo, seveda, če želimo uporabiti enako obliko v več elementih, potem uporabimo zunanji ali notranji CSS.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>inline</title>
    </head>
    <body>
    <h1 style="background-color: greenyellow;padding: 20px;display: inline-block;width: 526px;border-radius: 8px">
        Primer vgrajene oblike elementa <h1>
    </h1>

    <p style="background-color: orange; font-size: 20px;padding: 10px;border-radius: 12px">
        Primer vgrajene oblike elementa <p>
    </p>
    </body>
    </html>
            

Tukaj sta potem še Multiple Style Sheets in Cascading order, ki spadata pod Inline CSS. S tem dvema slogoma se vgrajeni CSS približa zunanjemu. Deluje tako, da enako kot pri zunanjemu videzu napišemo obliko v beležnico, jo shranimo pod .css, in damo na strežnik. Potem samo uporabimo <link>.