KALDA…

Tasuta kursus: ajaveebi loomine nullist

See võib olla lihtsam kui ette kujutada

Enne artikli juurde jõudmist tahan lihtsalt jagada, et loon toodet ja tahaksin hea meelega koguda andmeid selle kohta, kuidas veebiarendajaid paremini teenindada. Koostasin lühikese küsimustiku, et enne või pärast selle artikli lugemist läbi vaadata. Palun kontrollige seda - tänud! Ja nüüd tagasi meie tavapärase plaanitud programmeerimise juurde.

Ajaveeb, mille ehitame Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Kui olete nagu mina, olete huvitatud veebist ja selle valdavast ulatusest, kuid olete ka üleujutatud teabe jama, mis õpib HTML-i ja CSS-i. Asi on selles, et need keeled erinevad erinevalt teistest domeenidest, näiteks tekstitöötlusprogrammid ja programmeerimiskeeled. Veeb on teine ​​maailm ja see pole kõige uhkem asi.

Pärast veebi tundmaõppimist julgustan siin õrnalt, sest väikese juhendamise korral võivad need domeenid olla palju lihtsamad, kui te ette kujutate. Jätkake lugemist ja me ehitame nullist ilusa ajaveebi. Õpime ka mõnda CSS-ruudustikku, Flexboxi ja tundlikku disaini.

Eesmärk on teha teie heaks seda, mille olen ise teinud; õppige HTML-i ja CSS-i esmapõhimõtetest.

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Õpetasin ka tasuta HTML / CSS-i kursust Scrimba kohta, kus õpetasin, kuidas luua nullist * ilus blogi. Registreerumiseks klõpsake siin!

Scrimba.com on interaktiivne esiotsaplatvorm, kus veebisaite registreeritakse sündmuste, mitte videotena - ja neid saab redigeerida!

Kust HTML pärineb?

HTML on esimese meta- või märgistuskeele järeltulija: GML. Millennial lugejad on nüüd välja töötanud, et GML tähistab üldist märgistuskeelt, kuid see pole veel kõik, mida see tähistab. See oli Charles Goldfarb, Edward Mosher ja Raymond Lorie, kes lõid selle, mida me IBMis praegu meta- või märgistuskeelena tunneme. Ja 1996 kirjutas Charles Goldfarb:

“Andsin GMLile selle praeguse nime, et meie initsiaalid alati tõestaksid, kust see pärit on. Tehnoloogiasiirde üks kole tõde on see, et arendajad kipuvad olema teadusuuringute eest tänulikud, kui nad esimest korda vastu võtsid, ja on pika arendustsükli lõpuks sellele peaaegu teadmata ... ”
- Charles Goldfarb, 1996

GML sai hiljem standardiseeritud, saades seega SGML-iks. Seejärel laenas CERNis töötanud Tim Berners-Lee SGL-ilt ML-i (ei, mitte masinõppeks või mis iganes hipsterid seda nimetavad) ML-i HTML-i loomiseks, kus HT tähistab HyperText.

Vau, lahe sõna. Ja nagu ma aru saan, on selle juured pärit interaktiivsest autorikeskkonnast nimega HyperCard, Apple Atkinsonilt, kes töötas. Põhjalikumaks uurimiseks esitan järgmised videod:

Lisateabe saamiseks klõpsake mõlemal

Niisiis - vaatame uuesti. HTML ei võtnud lihtsalt maailma üle. Tegelikult oli HTMLi ees terve maailm. WUT? Ma tean, et ma värisen šokis - aga ma ei olnud sündinud -, nii et sellist maailma ei olnud.

Ja HTML võlgneb oma eelkäijatele palju. Nagu me kõik oma vanematele. Sellegipoolest teeme koodi tekstist. Nüüd õpetan neljas üheminutilises õppetükis HTML-i, CSS-i ja tundliku disaini põhitõdesid.

HTML ja CSS 4 minutiga

Esimene minut: veebisaiti saab paremini mõista kui veebirahu


     
     

Kõik veebisaidid alustavad oma elu sellisena. Kuid - ja see on kohutav - sisu puudub. Sellegipoolest alustame siit, sest peame kõigepealt mõistma, mis on veebisait. Mõelge sellele kui puule - tagurpidi puule * - veebi. Html-element on juur, pea ja keha on meie veebitee esimesed harud:

   html <- juur
   / \
pea keha <- oksad

Peaelement (või silt - sama asi) on metaandmete või meie veebisaidi teabe jaoks. Kereelement on seevastu meie veebisaidi sisu jaoks. Ja kuna CSS on meie veebisaidi stiil, läheb see põhielementideks, sisu aga nagu lõigud, kassivideod (≧ ∇ ≦) ja nii edasi, põhiosa.

Teine minut: elementidel või siltidel on mitu esinemist


 väärtus 
 väärtus 
  1. Esimene element on isesulguv element, kus me edastame brauseriga midagi, kuid sellel pole ka väärtust. Selle näiteks on element element
    , mis lisab reavahetuse.
  2. Teine element on ühine element, kus edastame väärtuse mingile elemendile kuuluvana. Näiteks

    tere, maailm!

    on lõiguelemendi väärtus “tere, maailm!”.
  3. Viimaseks on meil element atribuudiga. Ja atribuut on see, mis kõlab - neetud, see on atribuut! See annab elemendile rohkem konteksti või tähendust. Atribuutidel võib olla mitu väärtust ja elementidel võib olla mitu atribuuti. Atribuudi kinnitamine.
 väärtus 

Nüüd - ma pean mainima - me ei loo oma HTML-i elementide nimesid. Laename need umbes 100 elemendi loendist, mis on eelnevalt kindlaks määratud. Muidugi, see teeb mõned asjad lihtsamaks ja mõned asjad palju-palju raskemaks, näiteks meeldejätmine!

Kolmas minut: kuidas HTML ja CSS omavahel suhelda saavad



    
        
        
selektor {omadus: väärtus; }
        
    
    
         väärtus 
    

HTML! DOCTYPE täpsustab, et kirjutame HTML5 - nagu kõigi teiste HTML-i versioonide puhul, mida soovime vältida. Ja arvestades isesulguvat elementi meta koos atribuudi kooditabeli ja väärtusega UTF-8, on meie tekst kodeeritud Unicode'is. UTF-8 tähistab Unicode Transformation Format… 8. Nüüd saame kirjutada ! Ükskord otsustas isa teksti saata ainult emotikonide abil.

¯ \ _ (ツ) _ / ¯

Lisasime ka stiilielemendi, mis on üks võimalikest CSS-i sisenemispunktidest. Kui valija valib elemendi ja rakendab sellele vastava väärtusega omaduse. Uurime seda ja enamat järgmisel minutil.

Jällegi - pean mainima - me ei loo oma CSS-i omaduste nimesid. Laename neid sadade eelmääratud atribuutide loendist. Muidugi, see teeb mõned asjad lihtsamaks ja mõned asjad palju-palju raskemaks, näiteks ____________!

Neljas minut: tere, maailm!



    
        
        
p {värv: roheline; }
@media (maksimaalne laius: 8,5in) {p {värv: sinine; }}
@media (maksimaalne laius: 5,0in) {p {värv: punane; }}
        
    
    
        

tere, maailm!

    

Enam pole meie veebisait kohutav! Meil on rohelise tekstiga tere, maailm! Siin kasutasime meediumipäringuid CSS-i alistamiseks teatud asjaoludel, nagu näiteks meie veebisaidi laius.

Mis on CSS-i lähtestamine ja silumine?

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Kasutame lähtestamist, et tagada meie kujunduse järjepidevus, ja siluri, et vastuolusid paljastada.

Me vajame lähtestamist, kuna brauserid on oma arvamuse saanud ja määravad meile mõned CSS-i atribuudid, mida me soovime tühistada. Populaarsed CSS-i lähtestamised on olemas, kuid me teeme need ise. Ja oma veebisaidi kujunduse hõlpsaks säilitamiseks vajame silurit.

Lähtestamise ja siluri majutamiseks saame luua stiilide kausta:

stiilid /
       reset.css
       debug.css

Ja meie uute CSS-failide linkimiseks meie index.html-ga lisame lingi elemendid:

        …
        
        
        
        
        …

Meie CSS-i lähtestamine

Atribuutidest, mida me soovime tühistada, on siin järgmine loetelu:

: juur {font: 20 pikslit / 1,2 sans-serif; }
keha, keha * {
    marginaal: unset;
    kasti suurus: unset;
    polster: unset;
    kirjasuurus: unset;
    värv: unset;
    teksti kaunistamine: unset;
}

Ignoreerige rida 1. praegu - alustagem kehaga, kehaga * {…}, kus keha ja kõik keha elemendid valitakse tähega *. Tärn tähendab, et valige kõik lapsed. Kas mäletate meie veebiväljakut?

   html
   / \
pea keha <- valitud
 / \ \
…… P <- valitud

keha, keha * {…} valib keha ja - a tähistab ja - p, kuna see on üks keha lastest. Seda nimetatakse vanema ja lapse suhteks, kus keha on vanem ja p on laps. Ja me käsime neil elementidel ühiseid omadusi tühistada. Minu valitud omadused on vaid lühinimekiri. Siin on näide ühe kuulsaima CSS-i lähtestamise kohta:

/ * http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   Litsents: puudub (üldkasutatav)
* /
html, keha, div, span, aplett, objekt, iframe,
h1, h2, h3, h4, h5, h6, p, plokkikvoot, eel,
a, abbr, lühend, aadress, suur, tsiteerima, kood,
del, dfn, em, img, ins, kbd, q, s, samp,
väike, streik, tugev, sub, sup, tt, var,
b, u, i, keskel,
dl, dt, dd, ol, ul, li,
väljade komplekt, vorm, silt, legend,
tabel, pealdis, tbody, tfoot, thead, tr, th, td,
artikkel, kõrvale, lõuend, üksikasjad, manusta,
joonis, joonis, jalus, päis, hgroup,
menüü, navigeerimine, väljund, rubiin, jaotis, kokkuvõte,
kellaaeg, märk, heli, video {
    veeris: 0;
    polster: 0;
    äär: 0;
    kirjasuurus: 100%;
    font: pärima;
    vertikaalne joondamine: lähtejoon;
}
/ * HTML5 kuvatava rolli lähtestamine vanematele brauseritele * /
artikkel, kõrvale, detailid, kujundus, joonis,
jalus, päis, grupp, menüü, navigeerimine, jaotis {
    kuva: blokeerima;
}
keha {
    joone kõrgus: 1;
}
ol, ul {
    nimekirja stiil: puudub;
}
plokkkood, q {
    tsitaadid: pole;
}
blockquote: enne, blockquote: pärast,
q: enne, q: pärast {
    sisu: '';
    sisu: puudub;
}
laud {
    piiri-kokkuvarisemine: kokkuvarisemine;
    piiride vahe: 0;
}

Yikes! Tagasi meie lähtestamise juurde. Ülaosas on meil: root {font: 20px / 1,2 sans-serif; }. Mis on: juur? Kas mäletate meie veebiväljakut? See on juur, teisisõnu html-element. See pseudoelement kuulub psuedoklassidena tuntud eriklassi elemente, mida saab kasutada meie CSS-i paremaks korraldamiseks ja mõistmiseks.

WAAAIT! Kas me ei vaja kõigi lasteelementide valimiseks tärni *, siis kas nende fondi atribuudid on seatud? Noh - suur küsimus - mõned atribuudid, näiteks teksti atribuudid, pärivad nende vanematelt ja font ka need. Selle asemel saame selle asemel fondi üks kord juure sisestada: root, mis levib kõigile lastele. Vara omandamine.

Meie CSS-silur

Silur rõhutab elementide sisu ja piiri:

keha * {
    värv: hsla (000, 100%, 100%, 0,88)! oluline;
    taust: hsla (210, 100%, 50%, 0,33)! oluline;
    kontuur: 0,25rem tahke hsla (000, 100%, 100%, 0,50)! oluline;
}

Vaata! Ainult kolmes reas meie silur. See nutikas tehnika alistab kolm ühist omadust: värv, taust ja kontuur. Meie värvid koosnevad hsla () väärtustest, milleks on lühidalt toon, küllastus, heledus ja alfa. Siluri lubamiseks linkime faili.

Kui tahame siluri keelata, võime faili nime valesti kirjutada, et seda meie arvuti failisüsteemist peita, nt:

Või lihtsalt kustutage rida. ٩ (^ ᴗ ^) ۶

Meie silur kasutab lõbusaid! Olulisi väärtusi, väites, et neid omadusi ei tohi mingil juhul alistada. Kas mäletate meediumipäringuid?

p {värv: roheline! oluline; }
@media (maksimaalne laius: 8,5in) {p {värv: sinine; }}
@media (maksimaalne laius: 5,0in) {p {värv: punane; }}

Kui oleksime täpsustanud, et meie p-värv on oluline, oleksid meie meediumipäringud nende väiksema tähtsuse tõttu inertsed.

Tutvuge CSS Gridi ja Flexboxiga

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Ma väidaksin, et enne CSS Gridi ja Flexboxi oli veebi kujundamine kangelase teekond.

Asi on selles, et veebidisain oli varem häkkimise žongleerimine, kus pettisime brauserit oma kujunduse renderdamiseks. See muutub aja jooksul vähem tõeseks. Ma ei ole religioosne, kuid tänan Jumalat! - või tänan brauseri insenere! - nüüd saame CSS Gridile ja Flexboxile toetuda, et oma disaini käivitada.

Kui te pole teadlik, on CSS Grid ja Flexbox uuemad tehnoloogiad, mis on küpsetatud tänapäevastesse brauseritesse ja mis eemaldavad kangelase teekonna veebidisainist. Ja CSS Grid ja Flexbox on sõbrad - kasutame neid koos nii ruudustiku loomiseks kui ka paindlikuks muutmiseks.

Meie esimene ruudustik: HTML

    …
    
        
            

ARTIKKEL

        
        
            

ARTIKKEL

                  …

Kas mäletate meie veebiväljakut?

      keha
      / \
artiklikiri
    / \
   lk lk

Koostame ajaveebi, nii et iga postitust võib pidada artikliks. Ja meie artiklid sisaldavad artiklit p, mis on veel üks nutikas trikk, mida saame kasutada. Elemendi nime kasutamine elemendi väärtusena aitab meil mõista, kus ja mis asjad asuvad. Väärtuse kindlaksmääramine.

Meie esimene võrk: CSS

    …
    
artikkel {
    kuva: ruudustik;
    ruudustik-mall-veerud: 1fr minmax (0, 8,5in) 1fr;
    kõrgus: 11in; / * temp fix * /
}
artikkel * {ruudustik-veerg: 2/3; }
    
    …

Sisestage CSS Grid. Esiteks valisime artikli ja rakendasime kolme omadust: kuvar määratleb elemendi ruudustikuna, ruudustik-mall-veergude mallide veerud ja kõrgus simuleerivad iga artiklit ühe lehe kõrgusega. Kõrgus on siiski liimikoodiga ja kustutatakse.

Keskendume kahele kõige olulisemale reale:

artikkel {ruudustik-mall-veerud: 1fr minmax (0, 8,5in) 1fr; }
artikkel * {ruudustik-veerg: 2/3; }

Või muul ajal:

Sul peab olema kolm veergu,
Kelle kesksammas peaks varjama teie lapsi.

Esiteks, kui oleksime määranud ruudustiku-veerud väärtuseks 1fr 1fr 1fr, kus fr on murdosaühiku jaoks lühike, jaguneks meie kolm veergu kolmandikuks. Kuid meie keskveeru laius on minimaalne, mis tähendab, et see on tundlik. 8,5-tollise või väiksema täpsusega meie keskne veerg on 100% laiune ning vasak ja parem vasakpoolne veerg kaovad, kuna järelejäänud osa pole.

Külgriba: pange tähele, et reageeriv disain ei piirdu meediumipäringutega. See on näide sellest, kus meie kujundus reageerib kaudselt, mitte aga otseselt reageerivale. See on parim reageeriv disain, kuna see pole kõvasti kodeeritud. Ja see on üks põhjus, miks CSS Grid ja Flexbox on nii võimsad.

Teiseks, et suhelda selle artikli lastega keskmisesse veergu või alustame teisest veerust ja lõpetame kolmandaga, seame ruutvõrgu veeruks 2 / 3. Pange tähele väiksemat erinevust ruudustiku-malli-veeru ja ruudustiku veeru vahel, kas malli- või võrdlusveergudele.

CSS Grid on suurepärane - ja nii see on -, kuid nüüd toetame artiklit ARTIKLI teksti tsentreerimisel Flexboxil. Mida me teeme, on utiliidiklassi loomine ja see on veel üks CSS-i kirjutamise paradigma. Siinkohal kasutame asjaolu, et elementidel võivad olla p-elemendisiseste stiilide atribuudid:

ARTIKKEL

CSS HTML-is ?!
(╯ ° □ °) ╯︵ ┻━┻

Toimub järgmiselt: elementidel on klassi atribuut. Ja me võime seda atribuuti kasutada mitte ainult CSS-i kirjutamiseks elementidele, vaid ka mingisugusele elemendile või elementide klassile. See tähendab, et saame klasse uuesti kasutada mitme elemendi vahel, olenemata nende sarnasusest. Paraku - midagi pole muutunud - peame ka kusagil oma CSS-is looma .veebikeskuse klassi. Kuidas oleks meie siluriga:

.veakeskus {
    kuva: flex;
    õigusta-sisu: kese;
    joonda üksused: keskel;
}

Pange tähele, et kasutame a. eesliide klasside eristamiseks elementidest.

Kui iganes element on meie silumiskeskme klassiga omistatud, siis selle tekst koondub. Esiteks seadsime ekraani paindlikuks, muutes kumb element Flexbox-elemendiks, mitte CSS-ruudustikuelemendiks. Seejärel seadsime õigustatud sisu horisontaalselt keskele keskele ja joondame üksused vertikaalselt keskele keskele. Aaagh!

Kujutage ette seda: veebisaidi kujunduse paigutamiseks kasutame ruudustikku Grid ja ruudustiku elementide paindmiseks Flexboxi soovitud asukohta.

Korrates meie võrku

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Meil on probleem: ilma vigadeta artiklit ARTIKKEL kallutab vasak ja parem sein. Vajame vertikaalseid ja horisontaalseid vihmaveerennid, et meie sisu saaks hingata. Aaah. Vastasel korral muutuks lugemine pettumuseks ja tooks kaasa halva kasutajakogemuse.ヾ (• ́д • ̀;) ノ

Vertikaalse polsterduse jaoks:

artikkel {
    polster: 0,5in 0;
    …
}

Ja horisontaalse polsterduse jaoks võiksime kasutada polstrit ja mõlemad töötaksid:

polster: 0,5 in 0,5 in;
polster: 0,5 in;

Soovime siiski, et meie vihmaveetorud oleksid reageerivad, seega kasutame CSS Grid:

artikkel {
    …
    ruudustik-mall-veerud: 1fr 0,5 in [algus] 7,5 in [end] 0,5in 1fr
}

Siin tegime kolme asja: 1. määratlesime, et meie horisontaalsed vihmaveerennid on 0,5-tollised (need muutuvad reageerivaks - ma luban!). 2. meie sisu veerg tõusis 8,5-st 7,5-ni, summa oli endiselt 8,5-inine, ja 3. koosnesid algusest ja lõpust identifikaatorid, et nimetada meie siseruumi veeru algus ja lõpp.

Uute veergude lisamisel tuli värskendada ka artiklit *:

artikkel * {ruudustik-veerg: 3/4; }

Kuid veergude loendamine pole ideaalne. Kasutagem selle asemel meie valmis tunnuseid:

artikkel * {ruudustik-veerg: algus / lõpp; }

Uuendasime oma ruudustikku sisu voogu katkestamata, niikaua kuni jätkame meie koostatud alguse ja lõpu identifikaatorite kasutamist. ⊂◉‿◉ つ

Viimaseks - nagu lubatud - peame oma vihmaveerennid olema reageerivad. minmax () ühel või teisel põhjusel siin ei tööta, seetõttu kasutame meediumipäringuid:

@media (maksimaalne laius: 8,5in) {
    artikkel {
        ruudustik-mall-veerud: 1fr 5% [algus] 90% [lõpp] 5% 1fr;
    }
}

Nüüd 8,5in või vähem või vähem kasutab artikkel veergude jagamiseks sisestuspunkti asemel% ja vasak ja parempoolne veerg kaovad, kuna - jällegi - järelejäänud pole. Vaatamata kõigele oleksime võinud sama efekti saavutamiseks panna polstri väärtuseks 0,5 kuni 5%, mis siis annab? Loe edasi!

Kordan jälle meie võrku

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Meie ruudustiku mõistmiseks kasutagem pilte veergude võrdlemiseks: töölaual 100% -lt 8,5 tolli ja 7,5 tolli ning mobiilis 100% kuni 90%. Viimase pildi jaoks, vasakul allosas oleva pildi jaoks, peame oma ruudustikku lisama veel paar veergu. AF) UBQWF * VBQPWIFB, kas mul on õigus?

Ärge hirmutage - CSS-i võrk on fantastiline. Lisageme veel kaks veergu:

artikkel {
    …
    ruudustik-mall-veerud:
        1fr 0,5in [algus] 1,25in 5in 1,25in [end] 0,5in 1fr;
}
@media (maksimaalne laius: 8,5in) {
    artikkel {
        ruudustik-mall-veerud:
            1fr 5% [algus] 15% 60% 15% [lõpp] 5% 1fr;
    }
}

Jagasime oma siseruumide veeru kolmeks veeruks: 1,25 in 5 in 1,25 in. Lisasime oma meediapäringu jaoks ka proportsionaalsed protsendid: 15% 60% 15%. Plaan on ette nähtud, et tekst hõlmab meie algset 7,5-sisulist veergu ja väikeste piltide jaoks meie uus 5-veerg.

Piltide lisamiseks kasutame elementi img ja selle atribuuti src - allikas:

        …
        
            
            
            
            
        
        …

Need on kohalikud, st meie arvutis. Ja kas nad olid serveris, st serveris:

Pange tähele, et igal pildil on üks neljast klassist: suurus *. Ja kuna me soovime, et meie veebisaidi ruudustik hõlmaks enamat kui pilte, näiteks videoid, on eelistatav kasutada klasse, et saaksime CSS-i uuesti kasutada. Need suuruse * klassid on ka utiliidiklassid, nii et soovitud suuruse muutmine on lihtne.

Teeme meie suurusklassid erinevatele veerukomplektidele:

.size-1 {ruudustik-veerg: 4/5; }
.size-2 {ruudustik-veerg: 3/6; }
.suurus-3 {ruudustik-veerg: 2/7; }
.suurus-4 {ruudustik-veerg: 1/8; }

Puudub see, et meie pildid ei reageeri. Me vajame:

img.suur-1, img.suur-2, img.suur-3, img.suurus-4 {laius: 100%; }

Kuna pildid renderdavad nende tegelikul suurusel, näiteks 400x400 kujutise renderdusel 400 pikslit, pidime selle käitumise meie omaga alistama: laius: 100%. Seega, kui kujutisele omistatakse klass *, saab selle suurust muuta ükskõik millise veeru korral. Pange tähele, et me ei pea kõrgust seadma.

Teksti elementide lisamine

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Veebisaidi ja sisulinkid

Nüüd, kui hakkame oma artikliga tõsiselt tegelema, teeme asjad ametlikuks:

        …
        
        …

Nüüd on iga artikkel seostatav. Seotud? Noh - veebisaidid on lingid:

https://website.com/index.html

Ja meie veebisaidi sisu, näiteks artiklid, saab linkida ka järgmisega:

https://website.com/index.html#article

Siin on artikkel atribuudi id väärtus, mis on analoogne ajatempli linkimisega YouTube'i videol (näiteks see). Parem kui soovitada „alustada 4 minutit ja 7 sekundit” või „lugeda teisest artiklist”, saame linkida oma veebisaidi sisu nagu video ajatempel.

Veebisaidi või sisu linkimiseks kasutame atribuuti element ja href:

        …
        
             Kosmos 
        
        …

Tekst “Kosmos” seob nüüd artikli algust: # -kosmos.

See linkimisidee (veebisaitide ja veebisaitide sisu linkimine) on üks HTML-i punkte. HyperCard õppis seda, kuid veebisaitide ja sisu linkimise asemel tundis ta huvi ideede ja ühenduste vastu. Sel ajal oli see 1987 ja HTML-i pakuti esmakordselt välja 1989. Vaadake mõni sekund videost, mille ma varem postitasin - siin olen linkinud ajatempli:

Teksti elemendid

Lisage pealkirjad, ilmumiskuupäev, tugev ja rõhutatud tekst ning lingid:

    

Kosmos on kõik olemas

    

Või oli kunagi või saab kunagi olema

    
    

Põlvkonna tagasi seisis siin astronoom Carl Sagan ja käivitas sajad miljonid meist suur seiklus teaduse poolt avastatud universumi uurimiseks. On aeg uuesti minna. Alustame teekonda, mis viib meid lõpmatuseni lõpmatusse, aegade algusest kaugesse tulevikku. Uurime galaktikaid, päikesi ja maailmu, surfame kosmoseaja gravitatsioonilainetel, kohtume olenditega, kes elavad tules ja jääs, uurime tähtede planeete, mis kunagi ei sure, avastame nii massiivseid aatomeid kui päikesed ja aatomitest väiksemad universumid.     

    
    

COSMOS ON KA LUGU MEIST

    

See on saaga sellest, kuidas jahimeeste ja koristajate ekslevad ansamblid leidsid tee tähtede juurde - üks seiklus paljude kangelastega. Selle reisi jaoks on vaja kujutlusvõimet. Kuid ainult kujutlusvõimest ei piisa, sest looduse reaalsus on palju imelisem kui miski, mida me suudame ette kujutada. Selle seikluse teevad võimalikuks põlvkonnad otsijaid, kes järgivad eksperimentide ja vaatluste abil rangelt lihtsaid reegleid, testivad ideid, mis testi läbivad, ebaõnnestunud ideed tagasi lükkavad, järgivad tõendeid kõikjal, kus see viib, ja seavad kõik kahtluse alla. Nõustuge nende tingimustega ja kosmos on teie oma.     

Need on avasõnad meie isiklikule astrofüüsiku - Neil deGrasse Tysoni 2014. aasta kosmosele: Kosmoseaja Odüsseia, Carl Sagani originaalse 1980. aasta kosmose: isikliku teekonna kujutlus. See on ulme ilma -fita. Ja seda uuendatakse 2019. aastal!

Ülalpool tutvustasime mõnda elementi: h1, h2, h3, aeg, tugev ja em.

  1. h1 – h6 elemendid on pealkirjad.
  2. Ajaartikli ajatemplid on meie artiklis. Elemendi väärtuse jaoks võime panna kõik, mida soovime, sest arvutid loevad datetime atribuudi väärtust, mis peaks olema masinloetav.
  3. Tugev element on tugeva teksti jaoks ja em element rõhutatud teksti jaoks. Ka h * elemendid on tugevad.

Pange tähele, et h * ja p elemendid katkevad ühelt realt teisele või blokeeruvad, samas kui aeg, tugev ja em elemendid seda ei tee. Selle põhjuseks on asjaolu, et brauserid seavad elemendi h * ja p displei blokeerima ning kellaaja, tugeva ja em elemendi kuvarid rivisse.

Rems ja ems

Kui elementide ühest reast teise blokeerimiseks ei piisa, kasutame reavahetusi, nii et erinevalt polsterdusest või vihmaveetorudest on elementide eristamine lihtsam. Võiksime siin kasutada br elemente, kuid on eelistatav, et kõrvalise HTML-i asemel kasutame kõrvalist CSS-i.

Siit saate teada, kuidas lükata sisu kahte reavahetust, järgides h2 ja p elemente:

h2, p {veerise põhi: 2,4rem; }

2,4rem?

Kas mäletate meie lähtestamist? Valisime fondi suuruseks 20 px / 1,2 sans-serif. Ma ei seletanud seda toona - ja on mul häbi -, aga 2.4 on kaherealine reavahet 1,2 rea kõrgusel, näiteks ühe vahega tekst. Loetavam tekst võiks olla 1,5 ja kahe vahega tekst võiks olla 2.

* Ahem * Mis on rems?

* Ahem ahem * Ja mis on ems?

rem on juur em ja mõlemad on kordajad. 1rem on 20 pikslit ja 1em on vanema kirjasuurus. Kui oleksime määratlenud oma ridade katkestused ems-is, mitte ümbermõõtudes, ja seadsime h2 ja p erinevatele fondi suurustele, siis oleks nende reavahetus erinev! Seetõttu kasutavad järjekindlad joonekatked rems ja ebajärjekindlad kasutavad ems.

Ja see on võimas idee - kirjutada CSS nii, et disain oleks ühendatud. Seda valgustust arvestades on palju mõistlikum mõelda CSS-ile mitte reeglite, vaid suhete kaudu. Seega, kui teeme muudatuse kuskil, saame muudatuse teha igal pool.

… Muuda kuskil…
… Tee kõikjal muudatusi…
Tõeline Apple'i emotikon. Sellel oli pressiteade

Vastuvõtlik reageeriv disain

Mis siis, kui kirjutame CSS-i ümbermõõtmetesse ja ems-i ning kasutame meediumipäringuid muutmiseks: root-i fondi suurus? Siis muutuvad kõik - ja ma mõtlen kõike - proportsionaalselt. Saame minna isegi sammu võrra kaugemale ja esitada mitu meediumipäringut mitme laiuse kohta:

@media (maksimaalne laius: 8,5in) {: juur {fondi suurus: 18 pikslit; }}
@media (max laius: 5,0 in) {: root {fondi suurus: 16 pikslit; }}

Hämmastav on see, et me ei ole lihtsalt omandi ülevõtmine, vaid ka relvade ja emside omand. Nüüd võime kirjutada CSS-i, mis pole lihtsalt reageeriv, vaid reageerib ka meie reageerivale kujundusele. See on võib-olla kõige olulisem lause kogu selles postituses:

Saame kirjutada CSS-i, mis pole lihtsalt reageeriv, vaid reageerib ka meie reageerivale kujundusele.

See pole lihtsalt lahe, vaid see, kuidas me peaksime kirjutama CSS-i. Veebisaidid kipuvad olema kohutavad ja arvan, et see võib selleni jõuda: CSS-i kirjutades peaksime kirjutama kujundussüsteemides, mitte silokoodina. Kui me kasutame koos meediumipäringutega rems ja ems, on see kujundussüsteem ja koodi ei kuvata.

Teksti stiil

Lisage stiiliarmastus:

h1 {font: 700 2,0rem / 1,2…; värv: hsl (000, 000%, 33%); }
h2 {font: 400 1,5rem / 1,2…; värv: hsl (000, 000%, 33%); }
aeg {font: 700 1,0rem / 1,2…; värv: hsl (250, 100%, 83%); }
h3 {font: 700 1,0rem / 1,2…; värv: hsl (250, 100%, 67%); }
p {font: 400 1,0rem / 1,5…; värv: hsl (000, 000%, 33%); }

Nagu varem oleme näinud, võib atribuutidel olla lühendeid; polster: 0,5in, samaväärne polsterdusega: 0,5in 0,5in. Ja siin kasutame fonti fondi kaalu, fondi suuruse ja rea ​​kõrguse ühendamiseks. Pärast fonti on meil hsl-väärtustega värv, nagu siluri hsla-väärtused.

Lahendamata probleem on meie element. Lähtestades tühistame värvi ja teksti kaunistamise, muutes lingid tekstist valimatuks. Need omadused kaotatakse, kuna teksti kaunistamine: allajoonimine on liiga peen. Nii et saame neile tugeva allajoonimise anda järgmiselt:

{kast-vari: sisestus 0 -0,25em hsl (55, 100%, 75%); }

Pöörame kasti varju ümber, et luua elemendi sees olev allajoon. Kui oleksime seadnud sisestuse ilma negatiivse väärtuseta, oleks meie allajoon ületõmbamine. Me kasutame ka em, nii et allajoonitud skaalad on kirjasuurusega. See on näide sellest, kui soovime ebajärjekindlat skaleerimist, nagu meie joonekatkestuste puhul arvatakse.

Lahtrivarju on veel palju muud: klõpsake lisateabe saamiseks nuppu.

Viimane samm: kalded

Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Wohoo! Kõik, mida vajame, on meie lugejate jaoks näpunäide selle kohta, kus artikkel algab ja lõpeb. Ilma selleta tunnevad iga artikli otsad lõputut jätkumist, mis põhjustab kehva kasutajakogemuse. Seega peame oma lugejatele vihje andma… (◔̯◔)

Minu pakutav on lihtne: gradient, mis ulatub iga artikli ülaosast kuni selle elemendi h2 lõpuni. Ja võime kirjutada oma gradiendi ems-i, nii et meie veebisaidi suuruse muutumisel muutuks ka meie gradient:

artikkel {
    …
    taust: lineaarne gradient (hsl (55, 100%, 96%), valge 6,83em);
}

Siin määratlesime värvi-valge gradiendi ja kasutasime 6.83em, nii et meie gradient ei laienda kogu artiklit, vaid lõpeb meie h2 elemendi põhjas olevaga. Täpne väärtus sõltub siiski.

Suuruse määramiseks võite teha matemaatika, näiteks 6.83em, kuid teine ​​meetod on suuruse määramine ülemisele värvile, näiteks hsl (55, 100%, 96%) 6.83em. Kui see on alumise värvi suurusega võrdne või sellest suurem, kuvatakse see joone ja mitte gradiendina, muutes selle intuitiivseks, milleks seda muuta.

Palju õnne

Ajaveeb, mille ehitasime! Kas eelistate videot? Scrimbas avamiseks klõpsake siin

Palju õnne! ٩ (˘.˘) ۶ Olete astunud maailma, kus on hädasti vaja paremaid disainereid ja insenere. Ja koos CSS Gridi, Flexboxi, Responsive Designi ja brauseri tasemel siluritega pole veebi arendamine kunagi olnud hõlpsamini juurdepääsetav.

Ärge unustage, et Scrimba peal on ka tasuta kursus, kus õpetan, kuidas teha sama veebisait nullist *. Registreerumiseks klõpsake siin!