Pozdravljeni, dragi bralci projekta Anatomija poslovanja. Spletni skrbnik Alexander je z vami! V zadnjem članku smo pogledali, kaj sploh so slogi CSS in kako pomembni so pri SPLETNEM programiranju.

Povsem očitno je, da če slogi CSS pomembno vplivajo na prikaz datoteke HTML, morajo biti nekako povezani. Danes si bomo ogledali štiri glavne načine povezovanja sloga CSS s HTML.

Ne odlašajmo z zadevo dolga škatla in začnimo!

Vključno z ločeno datoteko CSS!

Eden najbolj priročnih in preprostih načinov povezovanje slogov je povezovanje ločene datoteke s slogi. To naredimo tako, da z urejevalnikom besedil notepad++ (ali katerim koli drugim) ustvarimo datoteko s končnico .css in jo postavimo v isto mapo kot datoteka, v katero jo želimo postaviti.

Nato v datoteki HTML med oznakama objavi naslednjo kodo:

Zdaj pa poglejmo, kaj vse to pomeni:

Link # v prevodu iz angleščine pomeni »povezava«. Na ta način pokažemo brskalniku, da je to, o čemer bomo govorili, povezava. rel= # s tem atributom pokažemo, kako je datoteka CSS povezana z datoteko HTML. "stylesheet" # in sicer, da je datoteka CSS kaskadna lista slogov. type="text/css" # tukaj je vse preprosto: to je znak, da je datoteka napisana v besedilni obliki in ima končnico .css href="style.css" # to je povezava do datoteke s slogi CSS.

Po mojem mnenju je to najprimernejši način za vključitev slogov CSS.

Sloge pišemo neposredno v datoteko HTML (prva metoda)

Naslednji način za določanje slogov CSS je, da jih zapišete neposredno v dokument HTML. Videti je takole:

Če pogledamo, kako bo ta dokument HTML prikazan v brskalniku, bomo videli, da je besedilo med oznakama postala rdeča. In z uporabo atributa sloga rečemo, da imamo naslednje parametre sloga prikaza. barva je selektor, odgovoren za barvo. Rdeča je vrednost tega izbirnika. Tako lahko z določenim načinom prikaza poudarimo določene dele besedila.

Postavitev kaskadnih slogovnih listov v HTML (druga metoda)

Drug način za vključitev slogov CSS je umestitev kaskadnih tabel v samo datoteko HTML. Po mojem mnenju ta metoda ni najbolj priročna, saj z njeno uporabo analiza kode spletnega mesta ni zelo priročna. Če želite začeti pisati sloge CSS, morate samo vstaviti oznake v datoteko HTML . V praksi izgleda takole:

Tukaj je primer: prikaz slogov CSS v dokumentu HTML

Upoštevajte, da znotraj oznake pišemo tudi kodo v skladu s pravili CSS z uporabo zavitih oklepajev. V naslednjih člankih bom podrobneje govoril o pravilih sintakse v CSS.

Povezovanje več datotek CSS v en dokument HTML.

Pravila HTML omogočajo vključitev več datotek CSS hkrati. Mnogi spletni skrbniki uporabljajo to: ustvarijo ločene datoteke CSS za besedilo in slike. Ali pa ločene datoteke za glavo, nogo in glavni del strani. Ugotovimo, kako to izvesti.

Ustvarimo več datotek s slogi CSS. Naj bosta njuni imeni style-1.css in style-2.css. Postavimo ga, kot pri metodi številka ena, v isto mapo z datoteko HTML.

Tukaj je primer: prikaz slogov CSS v dokumentu HTML

Vse je podobno prvi metodi, le da v tem primeru navedemo povezave do dveh datotek hkrati.

Povezava do datoteke CSS znotraj datoteke iste vrste.

Poleg vseh zgornjih metod obstaja metoda, ki vam omogoča, da v eno datoteko CSS postavite povezave do mnogih drugih!

To se izvaja na naslednji način:
Najprej moramo na enak način povezati vsaj eno datoteko CSS z vašo kodo.

Drugič, v že povezano datoteko vnesite naslednjo kodo:

@import url("style-2.css");

Ta vrstica se poveže z našo datoteko dodatna datoteka CSS. Če imate kakršne koli težave pri povezovanju CSS, jih lahko vprašate v komentarjih.
Kot smo se naučili iz prejšnjih dveh lekcij, je tehnologija CSS močno orodje, ki bi ga moral obvladati vsak spletni skrbnik! Za izboljšanje asimilacije gradiva sem se odločil, da na koncu vsake lekcije dodam videoposnetek za usposabljanje + test za utrditev prejetih informacij.

Test pritrditve materiala:

Datoteko CSS moramo vključiti tako, da v datoteko HTML postavimo povezavo do nje. Katera od naslednjih metod je pravilna?

Možnost 1:

Možnost 2:

Možnost 3:

Možnost 4:

Ali lahko postavimo kaskade CSS neposredno v datoteko HTML?

CSS = slogi in barve

Manipulirajte besedilo

Barve, škatle

Oblikovanje HTML s CSS

CSS okrajšava za Cascading Style Sheets.

CSS opisuje kako naj bodo elementi HTML prikazani na zaslonu, papirju ali drugem mediju X.

CSS prihrani veliko dela. Lahko nadzoruje postavitev več spletnih strani hkrati.

CSS je mogoče dodati elementi HTML na tri načine:

• Vgradna- uporaba atributa Style na elementih HTML
• Interno- z uporabo
  
  

  To je naslov

  
  

  To je odstavek.

  
  

  Zunanji CSS

  Zunanji slogovni list se uporablja za definiranje sloga za številne strani HTML.

  Z uporabo zunanjega slogovnega lista lahko spremenite videz celotno spletno mesto s spremembo ene datoteke!

  Če želite uporabiti zunanjo slogovno datoteko, dodajte povezavo do nje v razdelku HTML strani:

  Primer

  
  
  
  
  
  

  To je naslov

  
  

  To je odstavek.

  
  

  Zunanji slogovni list lahko napišete v katerem koli urejevalnik besedil. Datoteka ne sme vsebovati kode HTML in mora biti shranjena s pripono . CSS.

  Tako izgleda "styles.css":

  telo (
  barva ozadja: prašno modra;
  }
  h1 (
  barva: modra;
  }
  p(
  barva: rdeča;
  }

  pisave CSS

  Lastnost barve CSS določa barvo besedila, ki naj se uporabi.

  Lastnost družine pisav CSS določa pisavo za uporabo.

  Lastnost CSS font-size določa velikost besedila, ki bo uporabljeno.

  Primer

  
  
  
  
  
  

  To je naslov

  
  

  To je odstavek.

  
  

  Border CSS

  Lastnost obrobe CSS definira obrobo okoli elementa HTML:

  Primer

  p(
  }
  

  oblazinjenje CSS

  Lastnost oblazinjenja CSS določa oblazinjenje (presledek) med besedilom in obrobo:

  Primer

  p(
  obroba: 1px polna prašno modra;
  oblazinjenje: 30px;
  }

  Od avtorja: Pozdravljeni, dragi bralci portala webformyself. Pri razvoju spletnega mesta je oblikovanje spletnega vira zelo pomembno. Za to je odgovoren jezik CSS (cascading style sheets), o katerem bomo govorili danes. Oziroma o njegovi povezavi in ​​uporabi. Oglejmo si nekaj slogov css za spletno mesto, ki se uporabljajo pri oblikovanju spletnih strani.

  Povezovanje css

  Danes skoraj ne boste nikjer našli spletne strani, ki bi jo ustvaril izključno funkcije html. Pravzaprav bi bil videz takšnih spletnih mest preprosto grozen, zato, ko je oznaka potrebnih elementov pripravljena, jih je treba takoj oblikovati in to storiti z z uporabo css V ločena datoteka.

  Povedati je treba, da na splošno obstajajo tudi možnosti za vključitev slogov v datoteko html. Na primer, lahko jih definirate z uporabo atributa style ali iste oznake. To se imenuje vgrajeni slogi. Ta pristop danes ni dobrodošel in krši sodobne razvojne standarde.

  Kako to narediti prav, se sprašujete? Če želite to narediti, morate ustvariti nova datoteka s pripono css in jo nato povežite s html. To se naredi zelo preprosto z uporabo oznake povezave, ki je odgovorna za povezovanje zunanjih datotek. To se naredi takole:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Oznaka je enojna, kot ste že razumeli. Povedal vam bom nekaj več o njegovih lastnostih:

  rel = “stylesheet” – na splošno je atribut rel napisan za določitev vloge datoteke na strani. V našem primeru je vloga slogovni list, kar je označeno.

  type = “text/css” – tako imenovana vrsta MIME, ki je običajno določena za vse vključene datoteke, tako da jih brskalnik pravilno interpretira. V sodobnih spletnih brskalnikih lahko ta atribut izpustite.

  href = “style.css” je standardni atribut, ki označuje naslov našega zunanja datoteka. V tem primeru je napisan na podlagi dejstva, da ima datoteka slog imena, pripono css in se nahaja v isti mapi kot dokument html.

  Kot lahko vidite, se pri povezovanju datotek css spremeni le atribut href; vsega drugega ni treba spreminjati. Na stran lahko povežete poljubno število slogovnih listov, vendar največ 2-4 veljajo za optimalne, ker tudi preveč zahtev strežniku ni dobro.

  Kje lahko dobim že pripravljene sloge CSS za spletno mesto?

  No, v redu, s povezavo, upam, da je vse bolj ali manj jasno. Toda ustvarjate prazno datoteko in da bo učinek dodajanja viden, morate pravila napisati sami ali jih vzeti od nekje.

  

  Na internetu je na primer veliko brezplačnih predlog HTML. Če prenesete katerega koli od njih, bo v notranjosti zagotovo že pripravljen slogovni list s potrebnimi pravili za oblikovanje spletnega mesta. Vendar bo pravilno deloval samo za lasten dokument html. Dejstvo je, da sta ta dva jezika povezana s tako imenovanimi izbirniki.

  Izbirnik je značilnost jezika CSS, ki je edinstvena zanj. Zakaj so potrebni? No, predstavljajte si to kodo:

  Besedilo glave

  Besedilo v odstavku

  In kako lahko na primer oblikujemo odstavek in naslov v CSS? Zato so selektorji ustvarjeni za dostop le do tistih elementov, ki so potrebni. Na primer:

  p(velikost pisave: 12px; ) .title(velikost pisave: 36px; )

  velikost pisave: 12px; Naslov ( velikost pisave: 36px;

  Velikost pisave za vse odstavke smo nastavili na 12 pikslov, elementi z naslovnim razredom (v našem primeru h1) pa so prejeli veliko večjo velikost pisave 36 pikslov. Upoštevajte, da v primeru odstavkov slogi veljajo za vse, ne glede na to, koliko jih je na strani.

  Drugi izbirnik je obravnaval samo en element - z naslovnim razredom. Seveda lahko ustvarimo druge elemente s popolnoma enakim razredom, to ni prepovedano in bodo prejeli isto pravilo, vendar če le vpišemo html oznako h1 (brez naslovnega razreda), potem zanj ne bodo dodana nobena pravila.

  Tako vam css priročno omogoča, da izberete elemente, ki jih potrebujete, in pustite tiste, ki jih ne potrebujete. Kaj ima to opraviti že pripravljeni slogi ki jih lahko najdete na internetu? Tam je vse vezano na določene razrede in identifikatorje, zato teh tabel ne morete enostavno povezati z nobeno datoteko; ne bodo delovale, če zahtevani elementi nimajo ustreznih razredov v html-ju.

  Na primer, v slogovnem listu vidimo naslednjo kodo:

  Nav( širina: 300 slikovnih pik; ozadje: aqua; ... ) .nav a( zaslon: blok; barva: #ccc; ... )

  Nav( širina: 300px;

  Že iz tega lahko sklepamo, da bi nekje na naši html strani moral biti element z razredom nav in bi moral vsebovati povezave. Če je to res, bo na njih uporabljen dizajn in njihov videz se bo ustrezno spremenil. Če takšni elementi niso zaznani, bo koda preprosto prezrta.

  Še enkrat, na internetu lahko najdete veliko že pripravljenih predlog, v katerih lahko vidite to razmerje med razredi, tako da, če nekaj spremenite v html, je treba ustrezne operacije izvesti v slogovnem listu.

  Kako sami narediti sloge CSS za svojo spletno stran?

  Css ni nekaj strašnega ali izjemno težkega. To je običajna tehnologija, ki so jo ustvarili ljudje za oblikovanje spletnih strani in ima svoja pravila. Dovolj je, da jih razumete, in tudi vi boste lahko ustvarili videz spletnih virov s tem jezikom.

  

  Najpomembnejši pogoj za hitro obvladovanje je stalna praksa, povezana z novim znanjem, ki se ga boste naučili sami. Naš vam lahko ponudi podobno prakso.

  Poleg tega se lahko naučite in osvojite osnove CSS v našem premium razdelku. Eden od tečajev je v celoti posvečen osnovnim lastnostim tega jezika. .

  Najpomembnejša stvar je biti odločen študirati in ovreči predsodke, da je to zelo težko. V pomoč so vam lahko tudi brezplačna gradiva na naši spletni strani, članki in video vadnice. Če želite, jih lahko uporabite tudi za pridobitev osnovnega znanja, ki ga potrebujete pri delu s CSS.

  S tem se poslavljam od vas. Sami preberite naš blog webformy, da izboljšate svoje znanje na področju izdelave spletnih strani.

  Že vemo, da moramo delati z datoteko CSS, da bo spletna stran videti lepa in elegantna. Da bi lahko uporabili naše sloge, moramo združiti datoteko HTML in datoteko CSS.

  Obstaja več možnosti za izvedbo te operacije: uporaba ugnezdenih slogovnih listov, zunanjih slogovnih listov in vgrajenega sloga.

  Danes bomo govorili o slednji metodi.

  Vstavljanje sloga v oznako HTML

  Bistvo ta metoda je, da implementiramo potreben dizajn znotraj oznake. Ločeno atribut - slog. Ta atribut se lahko uporabi kateri koli oznaki, vendar samo znotraj telesa spletnega mesta, tj znotraj telesa. Vrednost tega atributa so operatorji slogov, ki jih je treba uporabiti za dani element.

  Na primer, nastavimo različne velikosti pisava za dva različna odstavka besedila:

  < p style= "font-size:25px;" >Ta del besedila nastavite na višino črk 25 slikovnih pik. < p style= "velikost pisave:15px; barva:#2400ff;"> In to besedilo bo s črkami, visoko 15 slikovnih pik, poleg tega pa ga bomo obarvali modro, da prikažemo uporabo več slogov hkrati.

  Napake

  Primer odlično prikazuje, kako takšno oblikovanje zamaši kodo strani.

  Opazite lahko tudi nekaj več pomanjkljivosti uporabe te tehnike stilizacije. Prva od njih je širjenje sloga po celotnem dokumentu, kar bo v prihodnosti urejanje znatno zapletlo postopek.

  Prav tako bo težko oblikovati velike količine besedila. Mislim, da nihče ni zadovoljen z možnostjo določanja velikosti pisave za vsak odstavek, še posebej, če je takih odstavkov 40.

  Tudi pri uporabi vgrajenih slogov je uporaba psevdorazredov nemogoča, kar močno zveže roke spletnemu oblikovalcu.

  Omeniti velja tudi zmedo, ki bo zagotovo nastala pri uporabi atributa style. Ta zmeda bo nastala zaradi uporabe različni citati pri dodajanju stilov.

  Za jasnost si poglejmo spodnji primer:

  < div style= "družina pisav: "Roboto Condensed", sans-serif"> Vnos je pravilen. < div style= "družina pisav: "Roboto Condensed", sans-serif"> To je tudi pravilno. < div style= "font-family: " Roboto Condensed ", sans-serif" >To ni pravilen vnos. < div style= "font-family: " Roboto Condensed ", sans-serif" >In tudi to ni res

  Če pogledamo zgornje izračune, sledi logičen zaključek, da je uporaba vgrajenih stilov povezana s številnimi pomembnimi zapleti in neprijetnostmi.

  Kdaj uporabiti slog v vrstici

  Kljub vsem pomanjkljivostim vgrajeni slog ni bil izumljen zaman. Spletni skrbniki se pogosto obrnejo nanje v primeru dodelitve programskega sloga. Na primer, poglejmo to kodo

  < div id= "productRate" > < div style= "width: 40%" >

  Beleženje zahtevane širine za ta blok bo preprosta operacija.

  Podobna situacija se lahko pojavi, če je treba zamenjati sliko ozadja (na primer) uporabnika z vlogo skrbnika. V tem primeru oznaka img morda ni primerna. Zato se je vredno sklicevati na atribut sloga:

  < div style= "background:url(fon.jpg)" >

  Poleg tega se programerji pri postavljanju pojavnih oken pogosto obrnejo na vgrajene sloge. Pogosto gre ta postopek takole: bloku, katerega načrtovanje se dela, se dodeli display:block, preostala okna pa so skrita z uporabo display:none, tako da vizualno ne motijo ​​programerjevega dela. Tukaj je primer:

  < div class = "element" style= "display:block" >Pojavno okno, ki je trenutno v oblikovanju

  Bottom line

  Uporaba vgrajenih slogov je povezana s številnimi težavami in nevšečnostmi, vendar se spletni skrbniki v procesu oblikovanja določenih elementov pogosto obrnejo na to metodo, da optimizirajo svoje delo.

  Spletni strani lahko dodate sloge na več načinov, ki se razlikujejo po svojih zmožnostih in namenu. V nadaljevanju si jih oglejmo podrobneje.

  Zunanji slogovni list

  Slogi se nahajajo v ločeni datoteki s pripono css, ki se uporablja za povezavo dokumenta HTML z datoteko CSS . Nahaja se v notranjosti , kot je prikazano v primeru 1.

  Primer 1. Povezovanje zunanjih stilov

  Naslov

  Vrednost atributa rel vedno bo obstajala tabela slogov in ostala nespremenjena. Vrednost href je pot do datoteke CSS; pot je lahko določena relativno ali absolutno. Upoštevajte, da lahko na ta način povežete slogovni list, ki se nahaja na drugem mestu. V zgornjem primeru povežemo cirilično pisavo Lobster s spletne strani Google Fonts.

  Vsebina datoteke style.css je prikazana v 2. primeru.

  Primer 2: Vsebina datoteke style.css

  H1 (družina pisav: "Lobster", kurziv; barva: zelena; )

  Kot lahko vidite iz tega primera, je slogovna datoteka normalna besedilna datoteka in vsebuje samo Sintaksa CSS. V zameno pa dokument HTML vsebuje samo kazalec na datoteko s slogom; na ta način je načelo ločevanja kode in oblikovanja spletnega mesta v celoti izvedeno. Zato je uporaba zunanjega slogovnega lista najbolj vsestranski in priročen način dodajanja sloga spletnemu mestu. To omogoča neodvisno urejanje datoteke HTML in CSS.

  Notranji slogovni list

  Slogi so zapisani v samem dokumentu HTML, znotraj elementa.

  Naslov

  V tem primeru je slog elementa nastavljen na

  , ki se nato lahko uporablja na celotni spletni strani (slika 1). Upoštevajte, da lahko varno kombiniramo z

  Naslov 1

  Naslov 2

  V tem primeru je prvi naslov nastavljen na rdečo in velikost je 36 slikovnih pik z uporabo atributa style, drugi naslov pa je nastavljen na rdečo zelena prek elementa

  Naslov 1

  Naslov 2

  Ta primer prikazuje uvoz slogovne datoteke s spletnega mesta Google Fonts za povezavo cirilične pisave Lobster.

  Facebook

  Twitter

  VKontakte

  Google+
  Delovanje