CSS od vrha do dna – vključno s CSS3

Razkritje: Vaša podpora pomaga pri vzdrževanju spletnega mesta! Za nekatere storitve, ki jih priporočamo na tej strani, zaslužimo naročnino.


Cascading Style Sheets ali CSS je jezik, zaradi katerega je splet lep. Skupaj s HTML in JavaScript je ena od tehnologij, ki jo mora obvladati vsak razvijalec.

Medtem ko je splet poln virov, ki vam pomagajo pri učenju CSS-a, boste morda že začetnik težko ločili velike vire od tistih, ki so v redu.

V tem priročniku ponujamo osnovni uvod o tem, kaj je CSS, česa je sposoben, pa tudi funkcije, ki so predstavljene v najnovejši različici: CSS3.

Uvod v CSS

Če ste pripravljeni na skok, je opisano v tem priročniku:

  • Uvod v CSS: če niste novi v CSS-ju, je to začetek. Ta razdelek ponuja osnovni pregled CSS-ja in vas usmerja k drugim velikim virom.
  • Kaj je novega v CSS3: če želite raziskati module, ki so bili uvedeni v CSS3, pojdite na to temo, kjer boste izvedeli o medijskih poizvedbah, velikosti polja, 3D-preobrazbah, animacijah, več postavitvah stolpcev in še več.
  • Izdelava odzivnih spletnih mest s CSS-om: spletna mesta morajo danes lepo prikazati na napravi katere koli velikosti, CSS pa je jezik, ki to omogoča.
  • Kako narediti gumbe drsnih vrat: osnovni premaz za kombiniranje jQueryja s CSS-om, da se ustvarijo res kul učinki.
  • Vse o barvah CSS: vstani in pojdi z barvami CSS. Ta razdelek vključuje veliko barvno referenco.
  • Pisanje učinkovitega CSS-ja:: hitro nalaganje strani je bolj pomembno kot kdaj koli prej. To vam bo pokazalo, kako napisati CSS, ki lahko znatno zmanjša vaše obremenitve.
  • Glavni CSS Online: ti viri zagotavljajo pot do obvladovanja CSS. Če vam je ljubše, da se učite stil učenja, je ta razdelek za vas.
  • Neverjetna dela CSS-ja: iščete navdih? Tu smo zbrali nekaj najbolj neverjetnih CSS-jevih stvaritev na spletu.
  • Uradna beseda o CSS3: zdaj, ko poznate nekaj CSS-a in ste se naučili, kateri moduli so bili uvedeni v CSS3, je dobro, da se seznanite z W3C, organizacijo, ki poganja razvoj CSS-ja..
  • Priporočeno branje: če se raje učite s pomočjo e-knjige ali mehke knjige, preverite naš seznam priporočenih knjig, kjer boste zagotovo našli naslov, ki vas zanima.

Uvod v CSS

Uvod v CSS

CSS ali Cascading Style Sheets je jezik, ki se uporablja za določanje sloga in videza spletnega mesta.

Vsebina spletnega mesta, vključno z naslovi, odstavki in slikami, se naloži v skladu z navodili v dokumentu HTML, CSS pa brskalniku pove, kako predstaviti vsak element v tem dokumentu HTML.

CSS se uporablja za stvari, kot so pozicijski elementi na spletnem mestu, in za določanje stvari, kot so barva ozadja, velikost in slog obrobe, presledek med enim in naslednjim, družina pisav in še veliko več.

Temeljna prednost CSS-ja je, da ustvarja ločnico med oblikovanjem spletnega mesta in vsebino spletnega mesta. Z ločitvijo vsebine od oblikovno obsežnih oblikovnih sprememb je mogoče narediti celotno spletno mesto s prilagoditvijo le nekaj pravil CSS v eni datoteki CSS.

Tri mesta za pisanje pravil CSS

Preden lahko napišete eno vrstico CSS, morate vedeti, kam jo napisati in kako jo povezati z vsebino HTML, na katero vpliva. CSS lahko napišete na tri različna mesta:

  • Zunanji slog slog: dokument, ustvarjen samo zato, da vsebuje pravila CSS, ki jih je mogoče uporabiti za več dokumentov HTML z uporabo elementa LINK v glavi dokumenta HTML.
  • Notranji list slogi: Slogi CSS, vdelani neposredno v glavo dokumenta HTML med oznakami elementov sloga.
  • Spletni slogi: CSS slogi, dodani enemu elementu HTML s pomočjo atributa slog v dokumentu HTML.

Medtem ko obstaja čas in kraj za uporabo notranjih slogovnih vrstic in inline slogov, je velika večina CSS sloge je najbolje uporabiti z zunanjim slogom.

Zunanji slog slog je lahko povezan s poljubnim številom dokumentov HTML, ki omogoča nadzor nad videzom celotnega spletnega mesta iz ene datoteke CSS.

Povezava pravil CSS s posebnimi elementi HTML

Pravila CSS so sestavljena iz dveh delov: izbirnika in deklaracije. Vsaka izjava je sestavljena tudi iz dveh delov: lastnine in vrednosti.

  • Izbirniki določite ali izberite elemente HTML, na katere naj se uporabi pravilo CSS.
  • Lastnosti so imena, ki opisujejo funkcijo, ki jo bo naslovil pravilo. Nekaj ​​pogosto uporabljenih lastnosti CSS so rob, rob, barva ozadja, poravnava besedila in slog pisave.
  • Vrednote opišite, kako naj se pojavi lastnost Če je zadevna lastnost rob, lahko skupna vrednost znaša 10 slikovnih pik.

Izbirniki in posebnosti

Pogosto bo v seznamu slogov vsebovala nasprotujoča si pravila za en element HTML. Koncept selektorska specifičnost bo določil, katera pravila se uporabljajo za vsak element HTML.

Na primer, če se za glavno navigacijo uporablja seznam povezav in so dodatni seznami predstavljeni v glavnem delu strani, bodo za navigacijski seznam in sezname v telesu potrebni različni nizi pravil CSS.

V nasprotnem primeru za navigacijski meni in seznam v telesu strani veljajo enaka pravila CSS.

Razumevanje delovanja izbirnikov CSS je ključno za pisanje pravil, ki vplivajo na prave elemente HTML.

Medtem ko so najpogostejši izbirniki CSS izbirniki id, razreda in oznake ali elementov, pa lahko druge izbirnike, kot so atributi, izbirniki pozicij, izbirniki psevdov in kombinacije izbirnikov, uporabimo za ustvarjanje pravil z večjo specifičnostjo.

Pogoste uporabe CSS

Obstaja veliko lastnosti CSS, ki se uporabljajo na skoraj vseh straneh HTML. Če se seznanite s temi skupnimi lastnostmi CSS, se boste lahko lotili večine nalog za oblikovanje in določanje položaja.

Stilirna pisava

CSS lahko uporabite za ustvarjanje želenega sloga pisave. Ne glede na to, ali gre za barvo, velikost, težo, višino črte, poravnavo, velikost, vrsto pisave ali okraske, kot so podčrtani in prečrtani, ki jih želite nadzorovati, lahko lastnosti CSS uporabite za ustvarjanje želenega učinka.

Z uporabo načel specifičnosti lahko za vsak element HTML na strani dodamo drugačen slog pisave.

Model škatle

Prostor okoli vsakega elementa HTML je najbolje razumeti, če razmislimo o tem, kaj se imenuje model polja:

Shema modela škatle

Model polja je sestavljen iz treh lastnosti CSS: oblazinjenje, obroba in rob. Te lastnosti je mogoče uporabiti za kateri koli element HTML. Te tri lastnosti je najlažje razumeti s primerom.

Upoštevajte naslednji element odstavka HTML:

Odstavek besedila.

Kakšen bi bil učinek pisanja naslednjega pravila CSS?

p {
oblazinjenje: 10px;
obroba: trdna 1px;
marža: 10px;
}

Odstavek bi bil videti obkrožen z:

  • Najprej 10 pik oblazinjenja (prazen prostor) na vseh straneh besedila odstavka,
  • Drugič, 1 piksla široka obroba okoli odstavka in oblazinjenje,
  • Tretjič, 10 slikovnih pik (prazen prostor) med obrobo in katerim koli sosednjim elementom.

To je tisto, kar je znano kot model škatle. Vsak element je najprej v praznem prostoru, ki se imenuje oblazinjenje, nato obrobje in na koncu prazen prostor, imenovan rob.

Uporaba plovcev

Floats se uporabljajo za pošiljanje elementov HTML na levo ali desno od nadrejenega elementa, ne da bi jih prekinili iz celotnega toka dokumenta HTML. Skupaj s sestrsko lastnino jasno, so eden najboljših načinov za ustvarjanje postavitev spletnih strani.

Medtem ko ne bomo poskušali zajeti vsega, kar je treba vedeti o plovcih, je ključnega pomena osnovno razumevanje, kako delujejo, ko začnete učiti CSS.

Lebdeče je najlažje razumeti v kontekstu dokumenta za urejanje besedil. Razmislite o sliki v besedilnem dokumentu.

Običajno bo vsaka slika nameščena do konca na desni strani, besedilo pa se pretaka na levi strani slike ali pa vse do leve strani, besedilo pa se pretaka na desni strani slike. Na spletnem mestu je ta videz dosežen z uporabo lastnosti float.

Lastnost float ima štiri sprejemljive vrednosti: levo, desno, nič in podedovati. V primeru zgornjega primera:

  • Če za sliko velja pravilo CSS s floatom lastnosti in vrednostjo levo, bo nameščena na levi strani nadrejenega elementa, besedilo pa se pretaka na desni strani.
  • Pravica vrednosti bi delovala tako, kot bi pričakovali.
  • Noben element ne bi preprečil, da bi element plaval v nobeni smeri.
  • Dedovanje bi povzročilo, da element podeduje vrednost float, uporabljeno za nadrejeni element.

Floats se običajno uporabljajo za ustvarjanje navigacijskih menijev po spletnem mestu. Običajno meni za krmarjenje po spletnem mestu je sestavljen iz neurejenega seznama HTML, pri čemer vsak element seznama plava levo ali desno, zaradi česar so elementi seznama, ki se prikažejo drug poleg drugega, namesto da so zloženi v črnem slogu seznama.

Na primer, običajen navigacijski meni lahko izgleda tako v HTML-ju:

  • Domov

  • Naša trgovina

  • O nas

  • Kontaktiraj nas.

Brez kakršnih koli pravil CSS bi bil ta meni prikazan kot seznam s črkami, pri čemer bi se vsak element pojavil v novi vrstici. Če želite, da se vsak element prikaže v eni horizontalni vrstici, ki se začne na levi strani strani, lahko uporabite naslednje pravilo CSS.

li {
plovec: levo;
}

Za poenostavitev tega primera smo kot izbirnik CSS uporabili oznako postavke seznama li. V resnici tega nikoli ne bi storili. Običajno bi bil razred dodeljen samemu seznamu ali vsaki postavki seznama in ta razred bi bil uporabljen kot izbirnik.

Počisti plovec

Druga lastnost, ki se pogosto uporablja v povezavi s floats, je jasna lastnost. Ko en element pluje, se vsi naslednji elementi drsijo navzgor in se poravnajo poleg plavajočega elementa.

V primerih, ko želite, da se naslednji elementi začnejo pod plavajočim elementom in ne poleg njega, lahko uporabite lastnost počitka, da jih prisilijo, da začnejo v novi vrstici.

Pravkar smo opraskali površino tega, kar je mogoče storiti s floats in jasno lastnostjo, vendar smo našli ta odličen članek iz CSS-trikov, ki daje poglobljen pogled na to temo.

Uporaba lastnosti lastnosti

Lastnost položaja CSS je še ena metoda, ki se pogosto uporablja za ustvarjanje postavitev spletnega mesta. Za razliko od lastnosti float se pozicijska lastnost pogosto uporablja za razbijanje elementov iz naravnega toka dokumenta HTML in natančno narekovanje njihovega položaja..

Z lastnostjo položaja se lahko uporabljata dve vrednosti: relativna in absolutna. Po uporabi ene od teh vrednosti lahko dodatne lastnosti, kot so zgornja, spodnja, leva in desna, uporabite za natančen položaj prizadetega elementa.

Uporaba lastnosti položaja za ustvarjanje postavitev ni brez tveganja. Za razliko od lastnosti float bodo elementi, ki jih postavi lastnost položaja, prekrivali druge elemente, kar bo povzročilo več težav z brskalnikom in velikostjo preglednega polja..

Vendar je to široko uporabljena lastnost v razvojnem svetu CSS in dobro bi se naučili osnov uporabe lastnosti položaja.

Kaj je novega v CSS3

Kaj je novega v CSS3

Medtem ko je bil CSS2 ena sama specifikacija, je CSS3 razdeljena na več kot petdeset različnih modulov, vsak na različni stopnji razvoja in sprejemanja.

Tekoče delo na CSS3 upravlja World Wide Web Consortium ali W3C in nudijo centralizirano lokacijo, kjer lahko spremljate vsa tekoča dela na področju standardizacije CSS3..

Medtem ko delo na različnih modulih CSS3 še poteka, mnogi moduli že imajo široko sprejemljivost in jih mnoga spletna mesta pogosto uporabljajo. Tukaj je deset najpomembnejših lastnosti CSS3, ki so že pridobile široko sprejemljivost in jih podpirajo vsi sodobni brskalniki.

  • Medtem ko je sposobnost ustvarjanja preprosta animacije je že dolgo mogoče z JavaScriptom, animacije CSS lahko zdaj ustvarite z uporabo preprostejše sintakse CSS.
  • The izračun funkcija, ki je zdaj na voljo s CSS3, je izredno koristna za ustvarjanje odzivnih postavitev. Lahko se uporablja za seštevanje, odštevanje, množenje ali deljenje, rezultat izračuna pa se uporabi kot vrednost lastnosti.
  • Raznolikost napredni izbirniki so bili dodani s CSS3, kar omogoča povečano stopnjo specifičnosti pri izbiri elementov za pravila CSS.
  • Dodatek nakloni tip ozadja je omogočil razvijalcem CSS, da ustvarijo impresivna ozadja, ki se hitro prenesejo in prikažejo.
  • Lastnosti širine in višine, uporabljene na elementu, ne vsebujejo oblazinjenja, obroba in roba. Kot rezultat, oblazinjenje, rob in rob povečajo velikost elementa, ki presega določeno širino in višino. Razvijalci CSS to že dolgo motijo, da se zatečejo k kompleksni matematiki za natančno nastavitev postavitev spletnih strani. Vendar pa lahko z novo lastnostjo velikosti polja nastavite vrednost mejnega polja, kar sili oblazinjenje, obrobo in rob znotraj omejitev določene širine in višine ter tako poenostavi oblikovanje postavitve spletnih strani.
  • CSS je mogoče uporabiti za nanašanje meja na kateri koli element HTML, z lastnostjo slike meja pa je ustvarjanje in uporaba meje po meri lažje kot kdajkoli prej. Sintaksa lastnosti lastne lastnosti je precej zapletena, vendar ko jo enkrat obesite, lahko hitro ustvarite edinstvene meje za kateri koli element na spletnem mestu.
  • Poizvedbe v medijih ugotovite, ali vidno polje naprave, ki se uporablja za dostop do spletnega mesta, ustreza določenim lastnostim. Modul @media CSS3 je eno ključnih orodij, ki se uporablja za izdelavo odzivnih spletnih mest. Z uporabo medijskih poizvedb razvijalec CSS lahko ustvari pravila CSS, ki se uporabijo le, če so izpolnjene določene predstavnostne funkcije, na primer širina in višina vidnega polja ter zmožnosti barvnega prikaza. Na ta način lahko razvijalci CSS na podlagi rezultatov medijske poizvedbe repozicionirajo in spremenijo velikost elementov ali jih skrijejo skupaj.
  • Uporaba več ozadij ustvariti določen učinek ozadja je s CSS3 lažje kot kdajkoli prej. Z uporabo lastnosti ozadja lahko na kateri koli element uporabimo več slik ozadja, barv in gradientov.
  • Uporaba stolpcev z lastnostjo stolpcev v CSS3 je lažje kot kdaj koli prej ustvariti postavitev, ki je navdihnjena s časopisi. Lastnost je mogoče uporabiti za enostavno nastavitev števila stolpcev in širine, pri čemer ustvarite vsebnik, v katerem vsebina zlahka teče iz enega stolpca v drugega. Stolpci so uporabni tudi za ustvarjanje prilagodljivih menijev za navigacijo.
  • 3D transformacije omogočajo CSS3. To je zapletena tema, ki jo morate obvladati, in dobro boste začeli z branjem o CSS preobrazbah in nato skozi nekaj vaj..

Izdelava odzivnih spletnih mest s CSS-om

Izdelava odzivnih spletnih mest s CSS-om

Vsak dan je na stotine, če že ne na tisoče različnih velikosti zaslonov in ločljivosti naprav, ki se uporabljajo za dostop do spleta, in posledično ni več dovolj enotnega spletnega mesta in ena ali dve zasnovi za manjše naprave.

Danes mora biti vaše spletno mesto vidno na velikih zaslonih, majhnih napravah in v vseh velikostih vidnega polja.

Če želite to narediti, mora vaše spletno mesto CSS upoštevati tri ključne principe odzivnega spletnega oblikovanja.

  • Najprej mora biti hrbtenica ali mreža, ki določa vašo celotno postavitev, tekoča.
  • Drugič, slike morajo biti samodejno spremenjene, da se lahko lepo prikažejo v kateri koli napravi.
  • Tretjič, medijska poizvedba mora biti uporabljena za obravnavo točk, na katerih se pokvari originalna zasnova tekočine.

Mnogi izkušeni oblikovalci se pri pristopu k novemu projektu spletnega oblikovanja začnejo z najprej mobilni tehnika. Spletno mesto, zasnovano s to tehniko, se začne z najpreprostejšim dizajnom, namenjenim najmanjšim vidnim poljem, dodani pa so dodatni slogi, ko velikost vidnega polja narašča.

Prva mobilna tehnika ponuja dve pomembni prednosti:

  • Najprej prisili oblikovalca, da opredeli bistvene funkcije spletnega mesta in jih uporabi kot temelj za oblikovanje spletnega mesta. Velikokrat spletno mesto v polni velikosti vsebuje vsebino, kot so gradniki, meniji in podobno, ki niso del spletnega mesta, če jih gledate na mobilni napravi. Prvi pristop za mobilne naprave pomaga zagotoviti, da je osrednji namen in funkcionalnost spletnega mesta osrednja stopnja pri vseh velikostih vidnih okvirov.
  • Drugič, obiskovalci spletnega mesta, ki dostopajo do spletnega mesta z mobilnega telefona, prenesejo manj pravil CSS in virov spletnega mesta. Če se celotno spletno mesto prvič naloži, bo mobilni uporabnik naložil veliko več sredstev, kot je potrebno. Prvi pristop za mobilne naprave nalaga samo ustrezne predmete na mobilni napravi, s čimer prihrani nekaj dragocenih podatkov obiskovalcev in ustvari izkušnjo nalaganja spletnega mesta.

Učenje odzivno oblikovanje

Eden najboljših načinov za učenje odzivnih tehnik oblikovanja je s preprostim praktičnim odzivnim projektnim projektom. Z ustvarjanjem prvega odzivnega oblikovanja spletnega mesta boste bolje razumeli koncepte, o katerih smo govorili.

Z rastjo priljubljenosti postavitve stolpcev v slogu se je za oblikovalce spletnih mest pojavil nov izziv: izziv prilagajanja postavitev stolpcev napravam vseh velikosti.

Na srečo obstajajo sredstva za pomoč začetnikom in izkušenim razvijalcem CSS, da se naučijo delati s to novo lastnostjo CSS v odzivnem okolju.

Drug odličen način, da začnete razumeti, kako najboljši razvijalci CSS-ja prilagajajo spletna mesta, je, da si ogledate odzivno spletno mesto v različnih velikostih. Media Queries je eno mesto, na katerem si lahko na enem zaslonu ogledate na stotine odzivnih zasnov spletnih strani v različnih velikostih.

Kako narediti gumbe drsnih vrat

Kako narediti gumbe drsnih vrat

S pomočjo CSS lahko ustvarite odlične in močne gumbe. Z malo jQueryja lahko naredite še več.

Spodaj vam bomo pokazali, kako narediti preproste slike gumbov in jih nastaviti tako, da jih lahko uporabite kot preklopljive gumbe vseh velikosti na vašem spletnem mestu. Na koncu boste ustvarili kodo gumbov za večkratno uporabo, ki jo lahko uporabite za ustvarjanje gumbov, kot so ti.

Kliknite sliko, če želite preklopiti animacijo.

Gumbi drsnih vrat Primer 1

Ustvarjanje slik

Tehnika, ki jo bomo uporabili pri ustvarjanju teh gumbov, se imenuje CSS z drsnimi vrati. Za nastavitev teh gumbov potrebujemo dve sliki za vsako različico gumba – v našem primeru dve sliki črnega gumba in dve sliki modrega gumba, skupaj štiri slike.

Za ustvarjanje teh slik začnemo s slikami s trdnimi gumbi.

Modri ​​gumb
Črni gumb

Kar moramo storiti, je, da vsak gumb razdelimo na dve sliki:

  • Slika na levi strani bo čim bolj ozka, obenem pa zajame polni polmer vogalov gumba.
  • Slika na desni strani bo čim širša, pravzaprav bomo želeli nekajkrat uporabiti program za urejanje slike, da kopiramo telo gumba, tako da bomo lahko ustvarili res dolge gumbe s sliko.

Tu so slike, na katerih bomo na koncu, ko jih razrežemo na ustrezne velikosti:

Modra tipka levoModra tipka desnoModra tipka desno
Črna tipka levoČrna tipka desnoČrna tipka desno

Ko ustvarite vse štiri slike, ste pripravljeni začeti s kodiranjem.

Gumb HTML

Naš gumb HTML bo sestavljen iz treh komponent: zunanjega ovoja div, sidrnega elementa in razponskega elementa.

Besedilo besedila

V zgornjem bloku kode so vsi trije elementi razdeljeni v ločene vrstice, da boste lažje videli, kaj se dogaja.

Vendar boste v praksi verjetno želeli ohraniti vse inline, še posebej, če uporabljate sistem za upravljanje vsebine (CMS), kot je WordPress, ki bo vstavil oznake odstavkov po vsakem prelomu vrstice.

Dodajanje slik gumbov

Če zdaj iz zgornjega primera pokažete košček HTML-ja, boste dobili le povezavo z besedilom “Besedilo gumba.” Naslednji korak, ki ga bomo želeli narediti, je, da v kodo dodamo sliko gumba.

Preden to storimo, pa dodamo še malo stajlinga v zunanji ovoj, da bomo lahko malo bolj jasno videli, kaj se dogaja.

.drsni gumb {
zaslon: inline-block;
širina: samodejno;
marža: 20px;
}

Ta košček kode bo preprosto dodal nekaj prostora okoli našega gumba in prisilil vsebovalni div, da se skrči na velikost povezave in besedila. Zdaj smo pripravljeni dodati slike gumbov.

.drsna povezava {
ozadje-slika: url (‘blue-button-right.png’);
velikost ozadja: samodejno 100%;
ozadje-položaj: desno;
ozadje-ponovite: brez ponovitve;
}
.drsno besedilo {
ozadje-slika: url (‘blue-button-left.png’);
velikost ozadja: samodejno 100%;
ozadje-položaj: levo;
ozadje-ponovite: brez ponovitve;
}

Zdaj smo dodali sliko gumba. Na žalost še ni veliko pogledati. Če povečate in pogledate natančno, boste opazili, da slika na levi strani dejansko stoji levo na desni sliki. Ne učinek, ki ga gremo.

Slaba tipka

Styling gumba

Dodajmo še nekaj oblazinjenja okoli besedila. Tako bo naš gumb bolj podoben gumbu. Poleg tega bomo morali spremeniti prikaz razponskih in sidrnih elementov, da bodo vgrajeni blok, da se bodo oba odzvala na oblazinjenje in rob, kot želimo.

.drsna povezava {
zaslon: inline-block;
}
.drsno besedilo {
oblazinjenje: 20px;
zaslon: inline-block;
}

Ta koda bo našemu gumbu dala neko velikost. Še vedno pa imamo težavo s prekrivanjem leve in desne slike. Moramo uporabiti margin za premik slike desne roke malo v desno in nato na levi sliki uporabiti popolnoma enak negativni rob..

.drsna povezava {
roba levo: 17px;
}
.drsno besedilo {
levo obrobje: -17px;
}

Vrednost 17 slikovnih pik je uporabna za naše slike gumbov. Če uporabljate različne slike, boste morali to vrednost natančno prilagoditi s poskusom in napako, dokler gumb ne bo videti pravilno.

Preden nadaljujemo, nadaljujmo in dodajmo nekaj besedila v besedilo gumba.

.drsno besedilo {
barva: #fff;
velikost pisave: 14pt;
družina pisav: ‘Open-Sans’, Arial, sans-serif;
preoblikovanje besedila: velika črka;
pisava: krepka;
poravnava besedila: sredina;
}

V tem trenutku je naš gumb dejansko videti kot gumb!

Dober gumb

Učinek gumba s kazalcem

Če miškin kazalec pritisnete nad gumb, ni vidnih znakov, da je miška nad gumbom. Odpravimo to tako, da dodamo učinek kazanja.

.drsno besedilo: hover, .sliding-text: active {
okvirček-senca: vstavite 0 0 0 1000px rgba (255,255,255, .2);
}

Čeprav to zagotovo deluje, je nekoliko grobo. Prvič, učinek lebdenja prehitro prestopi sem in tja. Drugič, če gumb postavite na temno ozadje, boste opazili, da se lebdeči učinek razteza čez zaobljene vogale gumba.

Obe težavi lahko odpravimo z nekaj vrsticami kode, dodane elementu span.

.drsno besedilo {
-lastnost webkit-tranzicije: polje-senca; / * Safari * /
-webkit-prehod-trajanje: .2s; / * Safari * /
lastnost prehoda: polje-senca;
prehodno trajanje: .2s;
meja polmera: 12px;
}

Zdaj bo naš učinek lebdenja skozi dvestotino sekunde prehodil sem in tja – majhno olajšanje, vendar dovolj, da se prehod počuti gladko. Drugič, pravilo polmera meje zaokroži vogale učinka lebdenja, da se prilega sliki.

Upoštevajte, da je vrednost 12 slikovnih pik, ki smo jo uporabili za polmer obroba, značilna za našo sliko gumba. Če uporabljate drugo sliko, boste morali to vrednost natančno prilagoditi.

Preklapljanje slik gumbov

Trenutno lahko dodamo URL atributu href element sidra in naši gumbi bodo odlično delovali kot povezave. Vendar je bil na vrhu te objave gif, ki je pokazal efekt preklopa, ki je spremenil sliko gumba. Poglejmo zdaj postopek ustvarjanja preklopnih gumbov.

Najprej bomo morali dodati novo sliko gumbom. Tako bomo storili tako, da slike gumbov dodamo v nov razred in nato s pomočjo jQuery za vklop in izklop gumba ob pritisku gumba..

Začnimo s CSS.

.trenutni gumb. drsna povezava {
background-image: url (‘črni gumb-desni.png’);
}
.trenutni gumb. drsno besedilo {
background-image: url (‘črni gumb-levi.png’);
}

Trenutno efekt preklopa ne deluje. Če pa ročno dodate razred trenutnega gumba v div vsebnika gumbov, boste videli drugo različico gumba.

Če želite preklopiti med dvema različicama gumba ob kliku, morate uporabiti jQuery za vklop in izklop trenutnega razreda gumba.

Preden pa bomo morali to storiti, se bomo morali odločiti, katere gumbe želimo preklopiti. To lahko storimo tako, da razredu dodamo poljuben gumb, ki ga želimo uporabiti kot preklopne gumbe. V ta namen uporabimo preklopni gumb razreda.

Torej, da označimo kateri koli gumb kot preklopni gumb, bi le ta razred dodali v zunanji ovoj div:

Zdaj lahko uporabimo jQuery za vklop in izklop razreda trenutnih gumbov za ta gumb.

$ (‘. preklopna tipka’). Kliknite (funkcija () {
$ (this) .toggleClass (‘trenutni gumb’);
vrniti napačno;
});

V tej kodi se dogaja nekaj stvari. Pojdimo skozi to.

Najprej naložimo jQuery iz Google Hosted Libraries. Če vaše spletno mesto že uporablja jQuery, lahko prvi element skripta izpustite.

Drugi element skripta vsebuje preprosto funkcijo jQuery.

Funkcija opazuje kateri koli element s preklopnim gumbom razreda. Ko kliknete kateri koli element tega razreda, se sproži funkcija za vklop ali izklop trenutnega gumba razreda za kliknjeni element.

Končno funkcija vrne vrednost false, ki prepreči privzeto vedenje povezave, to je, da ponovno naložite stran, saj bo naš atribut href element sidra prazen na preklopnem gumbu.

Z dodanimi koščki kode lahko gumb preusmerimo na vsebino našega srca.

Kliknite sliko, če želite preklopiti animacijo.

Gumb za drsna vrata Primer 2

Celotna izvorna koda

Če ste nadaljevali korak za korakom, boste za te gumbe že ustvarili polno različico izvorne kode. Če pa še niste nadaljevali, lahko v tej vadnici zgrabite celotno izvorno kodo za gumb, tako da kopirate spodaj v dokument HTML.

Gumbi za drsna vrata

.drsni gumb {
zaslon: inline-block;
širina: samodejno;
marža: 20px;
}
.drsna povezava {
ozadje-slika: url (‘blue-button-right.png’);
velikost ozadja: samodejno 100%;
ozadje-položaj: desno;
ozadje-ponovite: brez ponovitve;
zaslon: inline-block;
roba levo: 17px;
}
.drsno besedilo {
ozadje-slika: url (‘blue-button-left.png’);
velikost ozadja: samodejno 100%;
ozadje-položaj: levo;
ozadje-ponovite: brez ponovitve;
zaslon: inline-block;
oblazinjenje: 20px;
levo obrobje: -17px;
barva: #fff;
velikost pisave: 14pt;
družina pisav: ‘Open-Sans’, Arial, sans-serif;
preoblikovanje besedila: velika črka;
pisava: krepka;
poravnava besedila: sredina;
-lastnost webkit-tranzicije: polje-senca; / * Safari * /
-webkit-prehod-trajanje: .2s; / * Safari * /
lastnost prehoda: polje-senca;
prehodno trajanje: .2s;
meja polmera: 12px;
}
.drsno besedilo: hover, .sliding-text: active {
okvirček-senca: vstavite 0 0 0 1000px rgba (255,255,255, .2);
}
.trenutni gumb. drsna povezava {
background-image: url (‘črni gumb-desni.png’);
}
.trenutni gumb. drsno besedilo {
background-image: url (‘črni gumb-levi.png’);
}


Preklopi gumb

Gumb za povezavo

$ (‘. preklopna tipka’). Kliknite (funkcija () {
$ (this) .toggleClass (‘trenutni gumb’);
vrniti napačno;
});

Dajanje gumba v dobro uporabo

Zadnji kos sestavljanke je, da svoje nove gumbe dobro izkoristite. Tu je nekaj idej za začetek:

  • Dodajte URL atributu href element sidra in uporabite gumb za povezavo do katere koli spletne strani. Upoštevajte, da želite to izpustiti iz preklopnega gumba iz ovoja gumbov.
  • Uporabite dodatno jQuery ali JavaScript, če želite prikazati ali skriti dodatne informacije, ko gumb preklopite.
  • Če ste resnično ambiciozni, uporabite gumbe za krmarjenje po spletnem mestu in s pomočjo jQuery ugotovite, ali se trenutna stran ujema z URL-jem gumba in preklopite razred trenutnega gumba, če se dve ujemata.

Vse o barvah CSS

Vse o barvah CSS

Ena od najpomembnejših – in potencialno zmede – stvari, ki jih je mogoče določiti s CSS, je barva. Skoraj vsi elementi na spletni strani so lahko obarvani s pomočjo CSS.

Lastnosti barv CSS

Ena podrobnost, ki pogosto privablja nove razvijalce, je barvna lastnost CSS. Zmede to, da barva ne nadzoruje samega elementa, ampak besedilo znotraj elementa.

Barvo samega elementa (polje) ponavadi nadzirajo barva ozadja, barva obrobe ali lastnosti ozadja in okrajšav, ki vključujejo informacije o barvi. Barvo lahko nastavite tudi na senčniku.

Običajno barva ozadja elementa pokriva vsebino, oblazinjenje in obrobje elementa. To je običajno vedenje, ki so si ga zamislili ustvarjalci standarda CSS. Vendar obstajajo načini, kako oblazinjenje in vsebina narediti različne barve.

Barvne deklaracije

Poleg različnih lastnosti CSS, s katerimi lahko določite barvo, obstajajo trije različni načini za prepoznavanje barve v CSS: RGB, šestnajsta vrednost ali ime.

/ * Vsi trije bodo iste barve. * /

.red-rgb {
barva ozadja: rgb (255, 0, 0);
}

.rdeč hex {
barva ozadja: # ff0000;
}

.rdeče ime {
barva ozadja: rdeča;
}

Druga (šestnajsta vrednost) je najpogostejša, vendar bomo začeli z RGB, ker šestnajstih vrednosti nima smisla, razen če razumete, kako deluje RGB.

Vrednosti RGB

Računalniški monitorji, televizijski zasloni in drugi podobni zasloni imajo slikovne pike. Na barvnih zaslonih je vsak slikovni pik razdeljen na tri podpiksele: rdečo, zeleno in modro.

To so tako imenovane “primarne barve svetlobe”. Kombinacijo teh treh barv z različno intenzivnostjo je mogoče uporabiti za ustvarjanje katere koli barve, ki jo je človeško oko sposobno videti. To je znano kot “aditivno mešanje barv.”

(Vredno je vedeti, da ima to vse opravka s človeškim očesom in ne s svetlobo.)

Različni zaslonski zasloni imajo različne zmogljivosti glede na obseg intenzitet, ki jih lahko proizvedejo vsak podpiksli. Zelo preprost zaslon ima lahko le dve intenzivnosti za vsako barvo (izklopljeno ali vklopljeno), medtem ko ima zelo kakovostni zaslon veliko več gradacij.

Računalniki običajno za vsak podpiksel uporabljajo razpon od nič (0 – vse do konca) do 255 (vse do konca) (na primer, 128 je na pol poti). To je 256 možnih intenzivnosti za vsak podpiksel, kar pomeni, da je vrednost vsakega podpiksela lahko shranjena kot 8-bitni bajt (2 8 = 256).

Ker obstajajo tri barve, vsaka predstavljena z 8 biti, je skupno število barv, ki jih lahko predstavimo na ta način, več kot 16 milijonov (256 3 = 16,777,216).

To paleto barv lahko predstavite tako, da preprosto zabeležite vrednost vsakega podpiksela, kot je ta:

rgb (0, 128, 255)

V tem primeru je rdeči podpiksel povsem oddaljen, zeleni podpiksel je na pol poti, modri podpiksel pa je ves čas vklopljen. Ta barva izgleda takole:

V tem sistemu sta bela (vse barve vse do konca) rgb (255, 255, 255), črna (vse barve izklopljene) pa rgb (0, 0, 0).

RGB barve lahko določite tudi v odstotkih z uporabo decimalke, ne z eno samo zadnjo števko:

rgb (0,0, 50,0, 100,0)

Ta uporaba ni zelo pogosta.

Šestnajstih vrednosti

Kompaktnejši način pisanja enakih natančnih informacij je uporaba šestnajstih vrednosti. Šestnajsta barvna vrednost se zapiše s heš (znakom funta), ki ji sledi šest šestnajstih znakov v treh parih, kot je ta:

# 0080ff

Prvi par predstavlja rdečo vrednost, drugi par predstavlja zeleno vrednost, tretji par pa modro vrednost. V tem primeru 00 pomeni nič rdeče, 80 pomeni zeleno na pol poti, ff pa pomeni modro vse do konca. Torej je to iste barve kot rgb (0, 128, 255).

To se lahko zdi malo zmedeno, če ne uporabljate šestnajstih številk. V našem običajnem decimalnem sistemu ima lahko vsaka številka 10 vrednosti (0-9). V šestnajstiškem oštevilčenju ima vsaka številka 16 možnih vrednosti (0-9, a-f).

Tako je mogoče vse vrednosti od 0-255 predstaviti z dvema števkama, 0-ff. Za več informacij glejte to šestnajstično vadnico.

V tem sistemu je bela #ffffff, črna pa # 000000.

Šestnajstih barvnih vrednosti so najpogostejši način določanja barv v CSS.

CSS imena barv

Končni način določitve določene barve je uporaba enega od vnaprej določenih imen barv. W3C vzdržuje in občasno posodablja seznam uradnih imen barv, ki jih lahko uporabite namesto oštevilčenih barvnih kod. Na primer, črno lahko uporabite namesto # 000000.

V prvih dneh spleta so te imenovane barve pomagale določiti majhen, neuradni nabor “spletnih varnih barv”, ki so bile dobro podprte v večini brskalnikov in zaslonskih zaslonov.

Danes je največja prednost barvnih imen ta, da jih je lažje zapomniti. Na primer, lahke barve si je lažje zapomniti (in pravilno vnesti) kot njene ustreznike, # add8e6 ali rgb (173, 216, 230).

Seznam imen CSS barv

Ime barve
Šestnajstih vrednosti
Primer barve
aliceblue# f0f8ff
antiquewhite# faebd7
aqua# 00ffff
akvamarin# 7fffd4
azurni# f0ffff
bež# f5f5dc
bisque# ffe4c4
Črna# 000000
blanchedalmond# ffe4c4
modro# 0000ff
blueviolet# 8a2be2
rjav# a52a2a
burlywood# deb887
cadetblue# 5f9ea0
chartreuse# 7fff00
čokolada# d2691e
korale# ff7f50
cornflowerblue# 6495ed
koruzno mleko# fff8dc
crimson# dc143c
temno modra# 00008b
temnopolti# 008b8b
darkgoldenrod# b8860b
temno siva# a9a9a9
temno zelena# 006400
temno siva# a9a9a9
temniki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
darkorange# ff8c00
darkorchid# 9932cc
temno rdeča# 8b0000
darksalmon# e9967a
temnozeleni# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
temno-turkizna# 00ced1
darkviolet# 9400d3
deeppink# ff1493
deepkyblue# 00bfff
dimgray# 696969
dimgrey# 696969
dodgerblue# 1e90ff
ognjišče# b22222
cvetni beli# fffaf0
gozdna zelenica# 228b22
fuksija# ff00ff
Gainsboro#dcdcdc
ghostwhite# f8f8ff
zlato# ffd700
goldenrod# daa520
siva# 808080
zelena# 008000
zelenkast# adff2f
siva# 808080
medena rosa# f0fff0
hotpink# ff69b4
indijansko# cd5c5c
indigo# 4b0082
slonovina# fffff0
kaki# f0e68c
sivka# e6e6fa
sivkasta rdečica# fff0f5
lawngreen# 7cfc00
limonin šifon#fffacd
svetlo modra# add8e6
svetlobe# f08080
lahki# e0ffff
lightgoldenrodyellow# fafad2
svetlosiva# d3d3d3
svetlo zelena# 90ee90
svetlo siva# d3d3d3
svetlobna pika# ffb6c1
lightalmon# ffa07a
svetlobezeleni# 20b2aa
svetilka# 87cefa
lightlategray# 778899
lightlategrey# 778899
svetilka# b0c4de
svetlo rumena# ffffe0
apno# 00ff00
apnenec# 32cd32
posteljnina# faf0e6
maroon# 800000
mediumakvamarin# 66cdaa
mediumblue# 0000cd
mediumorchid# ba55d3
srednje vijolična# 9370db
srednjezeleni# 3cb371
mediumslateblue# 7b68ee
srednjevega zelenja# 00fa9a
srednje tirkizna# 48d1cc
srednje vezan# c71585
polnočna barva# 191970
metina krema# f5fffa
mistyrose# ffe4e1
mokasin# ffe4b5
navajowhite#ffdead
mornarica# 000080
oldlace# fdf5e6
olivno# 808000
olivedrab# 6b8e23
oranžna# ffa500
oranžna# ff4500
orhideja# da70d6
palegoldenrod# eee8aa
bledozelena# 98fb98
paleturkizno#afeeee
bledoletno# db7093
papayawhip# ffefd5
breskev# ffdab9
peru# cd853f
roza# ffc0cb
sliva# dda0dd
puder# b0e0e6
vijolična# 800080
rebeccapurple# 663399
rdeča# ff0000
rožnat# bc8f8f
kraljevsko modra# 4169e1
sedlarski# 8b4513
losos# fa8072
peščena# f4a460
morsko zeleno# 2e8b57
školjka# fff5ee
siena# a0522d
srebro# c0c0c0
modro nebo# 87ceeb
skrilavca# 6a5acd
skrilavca# 708090
skrilavca# 708090
sneg#fffafa
Springgreen# 00ff7f
jekleni plašč# 4682b4
porjavelost# d2b48c
zelenomodra# 008080
dušica# d8bfd8
paradižnik# ff6347
turkizna# 40e0d0
vijolična# ee82ee
pšenica# f5deb3
bela#ffffff
belina# f5f5f5
rumena# ffff00
rumenozelena# 9acd32

Drugi barvni viri CSS

  • CSS Color Tutorial iz W3Schools je hiter pregled teme z dodatnimi primeri.
  • CSS Color Converter je spletno orodje, ki prevzame poljuben barvni format in ga pretvori v vse ostale, poleg tega pa nudi možne izbire barvne palete.
  • CSS Color Reference iz Mozilla Developer Network je eno najboljših mest za informacije o različnih barvnih standardih in specifikacijah.
  • Barve, ozadja in gradienti: Dodajanje individualnosti s CSS (2015), avtor Eric A Meyer, je odlična knjiga, ki podrobno zajema barve CSS.

Pisanje učinkovitega CSS-ja

Pisanje učinkovitega CSS-ja

Pisanje učinkovitega CSS je zelo pomembno. Današnji uporabniki interneta imajo zelo kratka obdobja pozornosti, zato dlje kot se vaše spletno mesto naloži, večje so možnosti, da bodo pritisnili na gumb nazaj.

Če ustvarjate preprosto spletno mesto, učinkovit CSS ni toliko pomemben. Toda takšna spletna mesta so vedno bolj redka. Če gradite veliko in kompleksno spletno mesto, bi morali skrbeti za učinkovitost svojega CSS-ja.

Spodaj poudarjamo, zakaj je pomemben učinkovit CSS, kako napisati učinkovitejše izbirnike in ponuditi nekaj orodij, ki vam bodo pomagala pri nadaljnji optimizaciji kode.

Zakaj učinkovita vprašanja CSS

Če pri pisanju kode ne upoštevate učinkovitosti CSS, lahko resno škodite splošni učinkovitosti vaše strani. In zadnje, kar želite, je, da imate spletno mesto s počasnim nalaganjem.

Vaš cilj je, da brskalniku čim bolj olajšate upodabljanje kode – tudi brskalniki, ki delujejo manj učinkovito.

Pojavili so se argumenti, da avtorju ni treba skrbeti za optimizacijo izbirnikov, ampak mora biti motor motorja, ki sestavlja kodo. Čeprav to do neke mere drži, ne bo vsak uporabnik uporabljal sodobnega brskalnika.

Še vedno obstajajo uporabniki po vsem svetu, ki imajo dostop le do starejših računalnikov in brskalnikov. Sovražili bi, da bi te uporabnike kaznovali samo zato, ker nimajo dostopa do najnovejše tehnologije. Mogoče se bo sčasoma to spremenilo.

Ampak če imate uporabnike v mislih, ko pišete kodo, je vedno dobra ideja.

Izbirniki so najpomembnejši

Eden najpomembnejših vidikov pisanja učinkovitega CSS je razumevanje, kako brskalniki to berejo in sestavljajo. Velika stvar, ki jo je treba razumeti, je, da berejo od desne proti levi.

Začne se z izbirnikom tipk in se premakne v levo, da išče prednike v izbirniku pravil. Nato se nadaljuje v levo, dokler se pravilo ne dokonča, ali če pride do neusklajenosti.

Torej, če vaša koda glasi ul > li img, potem je prva stvar, ki jo bomo razlagali, img.

Izbirnik tipk je zadnji del, ki smo ga dodelili koncu izbirnika.

Štiri vrste izbirnikov CSS

Obstajajo štiri glavne vrste izbirnikov CSS, ki se jih morate zavedati in uporabljati pravi način, da bo vaša CSS koda učinkovita. Spodnji izbirniki so razvrščeni glede na njihovo učinkovitost. Tisti na vrhu so najučinkovitejši, najmanj pa spodaj.

Izbirnik ID-jev

Izbirnik ID se nanaša na določen element HTML z atributom ID in izgleda kot:

# glavna navigacija

V HTML-ju bi to uporabili na naslednji način:

Izbirnik razredov

Izbirnik razredov bo izbral elemente znotraj določene atribucije razreda in je videti kot:

.center

V HTML-ju bi to uporabili na naslednji način:

Izbirnik oznak

Izbirniki oznak so manj učinkoviti kot ID-ji in razredi, zato jih je treba uporabljati zmerno. Vendar so še vedno lahko učinkoviti v pravih okoliščinah. Izbirniki oznak običajno izgledajo tako:

ul

V HTML-ju bo oznaka preprosto oblikovana tako, kot jo narekuje CSS, kadar koli je oznaka uporabljena (ul v tem primeru).

Univerzalni izbirnik

Univerzalni izbirnik je mogoče uporabiti za kateri koli element vašega dokumenta. Če želite pisati učinkovit CSS, se izogibajte uporabi univerzalnega izbirnika, kadar koli je to mogoče. Univerzalni izbirnik je označen z naslednjim:

*

Učinkovita CSS pravila, ki jih morate imeti v mislih

Upoštevati morate nekaj ključnih pravil, ki vam bodo pomagala napisati učinkovitejši CSS. Z upoštevanjem teh pravil se bo CSS koda naložila veliko hitreje in bolje delovala v vseh spletnih brskalnikih.

Ne uporabljajte izbirnikov potomcev

Izbirnik potomcev je kateri koli izbirnik, ki ga ločevalnik ne loči. Izbirnik potomcev je najmanj učinkovit selektor in lahko resnično negativno vpliva na uspešnost.

Nekaj ​​primerov izbirnikov potomcev, ki jih ne bi smeli uporabljati, vključuje:

glava h3

footer p

.body div

ID-jev ne označujte kot kvalificirane

Ker se ID-ji lahko nanašajo samo na en element, jih ni smiselno razvrščati s posebno oznako, s katero bodo uporabljeni. Na primer,

li # levo-navigacija

Brskalniku ni treba povedati, na katero oznako bo uporabljen izbirnik. Namesto tega je to učinkovitejše:

# levo-navigacija

Upoštevajte, da enako velja za razrede, vendar v manjši meri. Torej ne sodite niti v razrede.

Uporabite Dedovanje CSS čim več

Zapuščanje lastnine je pomembna stvar. Naučite se, katere lastnosti se bodo prenašale iz elementa v element in jih pustite, da opravljajo svoje delo.

Na primer, velikost pisave se podeduje. Če ga nastavite za telo dokumenta, ga za oznake p in li ni potrebno nastaviti.

Omejite svoja pravila

Če dodate preveč pravil v oznake, boste upočasnili vašo kodo CSS in močno zapletli postopek ujemanja.

Na primer

body .widget-left #widget

To je slaba koda. Preveč se dogaja. Po drugi strani:

#widget

.widget-left

Te so veliko bolj učinkovite.

Izvajanje zgornjih nasvetov bo pripomoglo k večji učinkovitosti vaše kode CSS. Če želite preizkusiti svojo kodo ali poiskati še več načinov za njeno učinkovito uporabo, si oglejte nekaj spodnjih orodij..

Orodja za izboljšanje vašega CSS-ja

Če upoštevate zgornja pravila, bo vaša koda CSS veliko bolj učinkovita.

Če pa želite še izboljšati svojo kodo CSS, obstajajo orodja, ki vam bodo pomagala priti tja. Spodaj prikazujemo nekaj orodij, ki vam bodo pomagala stisniti CSS, definirati izbirnike in celo izdelati vaše ID-je za vas.

  • CSS stres testiranje: to je super, ker omogoča mikro prilagoditve spletnega mesta, kot so drsenje, povečavo, spreminjanje velikosti in še več. Poleg tega vse to naredi v manj kot 30 sekundah. Nato vam pošlje poročilo o učinkovitosti vašega CSS-ja.
  • Določite ID-je CSS: Nalaganje CSS spletnega paketa je zelo uporabno orodje. Pomaga vam lahko določiti razrede in ID-je in lahko celo opravi nekaj optimizacije CSS za vas.
  • Zmanjšajte svoje izbirnike CSS: to prikazuje vse trenutno izbrane izbirnike CSS, skupaj z izbirniki elementov. To vam omogoča zmanjšanje števila izbirnikov, ki jih uporabljate, tako da lahko zmanjšate celotno nalaganje pomnilnika. S tem orodjem lahko priključite kateri koli URL, tako da lahko preučite tudi druga spletna mesta.
  • Skrčite kodo CSS: skrčite obstoječo kodo CSS. Manj kode morate sestaviti, tem bolje. Zagotavlja posnetek zaslona »pred« in »po«, tako da si lahko ogledate spremembe, ki jih je to orodje izvedlo.
  • Stisnite datoteke CSS: gzipping datotek CSS bo pomagal očistiti. Tako lahko pomaga zmanjšati skupno velikost odziva HTTP in s tem čas odziva strežnika.

Pisanje učinkovitega CSS je dobra ideja

Ali boste izbrali optimizacijo svojega CSS ali ne, je odvisno od vas. Pri današnjih sodobnih brskalnikih to ni povsem potrebno. Če pa ustvarjate zapleteno spletno mesto, je vsekakor vredno storiti.

Še več, še vedno lahko imate uporabnike, ki imajo starejše nastavitve, in pametno je, da zadovoljijo tudi njihove potrebe. Upajmo, da vam bo ta razdelek pomagal narediti prav to in napisati učinkovitejši CSS.

Master CSS Online

Master CSS Online

V spletu je veliko krajev, kjer lahko v brskalniku gledate videoposnetke, celotne vaje in celo kodo v brskalniku. Medtem ko je na voljo več deset, če že ne na stotine virov, je tu nekaj najljubših brezplačnih mest za spoznavanje CSS-a.

Če ste za CSS res čisto novi, Ne bojte se interneta je začetnikom prijazna video serija, ki uvaja tako CSS kot HTML. Če začnete iz nič, je to dobro izdelana serija, ki ne bo ustrašila tistih, ki so se šele podali na pot, da bi se naučili CSS.

Če še nikoli niste napisali stilskega lista, je dobro mesto, da napišete svoj prvi Vadnica za CSS, ki jo je zagotovil konzorcij World Wide Web (W3C). Ta vadnica ne daje veliko razlag, tako da, če ste praktični učenec, je to morda idealno mesto za začetek.

Za pisanje HTML in CSS morate uporabljati urejevalnik besedil, shraniti datoteke z ustreznim oblikovanjem in glavami ter uporabljati brskalnik za ogled svojega dela. Če raje poiščete program, ki vam omogoča urejanje datotek neposredno v brskalniku, Codecademy je točno tisto, kar iščete.

Drug vir, ki zajema večino istega temelja kot Codecademy, toda tisti, ki bo zahteval, da se naučite uporabljati urejevalnik besedil in kako shraniti datoteke v pravilni obliki, je Naučite se kodirati HTML in CSS avtor Shay Howe Ko boste osvojili osnove, je na voljo tudi napredni program.

Nadzor postavitve strani je ena najzahtevnejših in najpomembnejših nalog, opravljenih s CSS-om. Če imate težave z nadzorom nad tlorisi, je vadnica iz Naučite se postavitve je samo tisto, kar potrebuješ.

Mreža za razvijalce Mozilla ponuja vadnico o CSS, ki zajema vse osnovne funkcije CSS na način, ki vas bo pripravil na prehod na zahtevnejše teme.

Če želite trdno podlago, iz katere lahko prerastete v popolnega razvijalca CSS, bi lahko naredili veliko slabše kot MDN CSS tutorial.

Nazadnje noben seznam virov ne bi bil popoln, ne da bi omenjali organizacijo, ki poganja razvoj CSS.

Čeprav na tem seznamu zagotovo ni najlažja vadnica, je obsežen in podroben. Če je vaš cilj, da se naučite malo CSS-a, to ni vadnica za vas, če pa se odpravite na pot, da postanete polnopravni razvijalci CSS-ja, je to dobra vadnica, da se pod svoje pas.

Navdih za oblikovanje

Neverjetna dela CSS

Če iščete oblikovalsko navdih ali želite boljše razumeti, kaj lahko CSS naredi, na nekaj mestih si oglejte razstavljena dela CSS-ja.

  • Creative Bloq je sestavil ta kurirani seznam dvaindvajsetih impresivnih CSS animacij. Ko jih gledate, ne pozabite, da mnoge od teh animacij poleg CSS uporabljajo tudi JavaScript.
  • Nagrade CSS Design Awards so ustvarile ta seznam desetih animacij skupaj z demo in vadnicami, tako da boste koncepte lahko uporabili pri svojih projektih.
  • MDS DemoStudio je mesto, kjer si lahko ogledate na stotine predstavitev CSS, razvrščenih bodisi po priljubljenosti, številu ogledov, statusu trenda, bodisi tako, da si najprej ogledate najnovejše predstavitve.
  • Številne animacije, izbrane na prejšnjih seznamih, so gostil kod Code Pen, če se boste usmerili neposredno do flomastrov, pa boste imeli dostop do ogromnega števila impresivnih animacij, izdelanih z uporabo HTML, CSS in JavaScript.
  • Če ste videli vse domišljijske animacije, ki jih želite videti, in namesto tega želite videti, kako je mogoče CSS uporabiti za popolno spremembo celotnega spletnega mesta, ne da bi v HTML spremenili niti eno spremembo, si oglejte te elegantne zasnove spletnega mesta, ki poudarjajo moč CSS.

Uradna beseda o CSS3

Uradna beseda o CSS3

W3C je organizacija, ki poganja razvoj spletnih standardov, vključno z moduli CSS3. Ko se naučite CSS-ja in izpopolnite svoj nabor spretnosti, se morate seznaniti z W3C in tehnično dokumentacijo, ki jo ponujajo.

Domača stran W3C CSS je začetna ploščica za vse stvari CSS na W3C. S te strani lahko najdete informacije o tekočem standardnem razvojnem delu.

Priporočljivo branje

Priporočljivo branje

Eden najučinkovitejših načinov za boljše razumevanje in znanje s pomočjo CSS3 je uporaba več virov in metod poučevanja.

Če ste preizkusili vadnico ali dve in želite preizkusiti dodatno metodo ali če raje delate iz napisanega besedila, je tukaj nekaj najboljših besedil CSS na trgu:

  • CSS3 za spletne oblikovalce (2010), Dan Cedarholm: S predgovorom Jeffreyja Zeldmana, ustanovitelja A List Apart, in podpori Chrisa Coyierja iz CSS-Tricks in Eric Meyer, avtor več knjig o CSS, Dan Cedarholm, soustanovitelj Dribbble-a, je zlati standard za besedila CSS3.
  • HTML in CSS: Oblikovanje in izgradnja spletnih strani (2011), avtor Jon Duckett: Ta besedila vključujejo HTML in CSS in je ena najbolj priljubljenih in spoštovanih predstavitev obeh tem..
  • Naučite se CSS-a v enem dnevu in ga naučite dobro (2015), avtor Jamie Chan: Če ste začetnik CSS-ja in želite hitro obvladati osnove, je ta knjiga za vas.
  • CSS: Manjkajoči priročnik (2015), David Sawyer McFarland: To besedilo ni namenjeno zgolj začetnikom, temveč zajema napredne teme, kot sta Flexbox in uporaba Sass. Če ste pripravljeni na stopnjo navzgor od statusa začetnika, vam bo to besedilo pomagalo priti tja.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map