Magandang araw sa lahat.
Kaya, sa isa sa mga nakaraang artikulo na nakilala namin.
Pero wala pa kaming masyadong tinitingnan mahalagang tanong. Namely - kung paano itali ang mga istilo ng CSS sa HTML code mga pahina ng aming website.
Ang tanong na ito ay talagang napakahalaga. Kung tutuusin kung mali ang pagkakatali namin sa mga istilo ng css sa mga pahina ng aming site, pagkatapos ay hindi namin magagamit ang mga istilong ito. Babalewalain lang sila ng browser at hindi natin makikita ang resulta na ibinibigay ng paggamit ng ilang mga istilo.
Maaari mong itali ang mga estilo ng CSS sa code ng pahina sa iba't ibang paraan at ngayon ay susubukan naming isaalang-alang ang lahat ng ito.
Magsimula na tayo.
Sa pamamagitan ng likas na katangian ng pagkonekta ng mga cascading table Mga istilo ng CSS sa isang HTML na dokumento ay mayroong panlabas at panloob na mga style sheet.
1. Panloob na CSS style sheet.
Ang mga panloob na style sheet ay matatagpuan sa loob mismo ng aming web page. Oo, oo... Sa loob mismo ng HTML code ng bawat indibidwal na pahina.
Ito ay, siyempre, medyo hindi maginhawa, ngunit mayroon pa ring ganoong posibilidad at hindi ko maiwasang sabihin ang tungkol dito.
Kaya, ang unang paraan upang i-link ang mga istilo ng CSS sa page code ay ang paggamit ng tag, ilapat sa buong nilalaman ng HTML na dokumento. Maaaring magkaroon ng marami sa kanila hangga't gusto mo, kahit na ang lahat ng mga estilo para sa buong site. Ngunit ito ay isang maliit na mali. Pag-uusapan ko ito sa ibang pagkakataon kapag tumingin ako sa mga panlabas na style sheet.
Minsan kailangan mo magsulat ng mga istilo ng CSS sa loob ng HTML code.
Halimbawa, kapag nag-post ka ng isang bagay banner ng advertising sa iyong website - ilalagay mo ang code ng banner na ito sa page code.
Upang maipakita nang tama ang banner na ito (hindi lumampas sa mga hangganang inilaan dito, marahil kailangan nito ng isang frame, atbp.), minsan kailangan mong ilakip ang ilang mga tagubilin sa CSS dito.
Ngunit walang punto sa paggawa ng mga pagbabago sa pangkalahatang style sheet. Ang banner ay isang pansamantalang kababalaghan. Ngayon isa, bukas isa pa. Samakatuwid, mas madaling magsulat ng mga istilo para dito nang direkta sa loob ng code ng banner na ito.
Ibig sabihin, kailangan nating ikonekta ang mga istilo ng CSS sa isang partikular na elemento ng page. Ginagawa ito nang napakasimple - gamit ang katangian ng estilo.
Ang mga istilong nakasulat sa paraang ito ay nakakaapekto lamang sa elemento kung saan nakalagay ang mga ito. SA sa kasong ito, para lamang sa talatang ito (tag
). At walang iba!
2. Panlabas na mga style sheet.
Tinatawag na panlabas Mga talahanayan ng CSS styles ay nangangahulugan na ang mga ito ay nakasulat hindi sa katawan ng HTML na dokumento, ngunit sa isang hiwalay espesyal na file. Ang mga file na ito ay may extension .css
Kaya, tulad ng ipinangako, sasabihin ko sa iyo kung bakit mas mahusay na gumamit ng mga panlabas na style sheet.
Ang katotohanan ay pinapayagan nito ang mga pahina ng iyong site na mag-load nang kaunti nang mas mabilis. Siguro sa isang fraction ng isang segundo, ngunit mas mabilis. Ito binabawasan ang pagkarga sa iyong site at mas maginhawa para sa iyong mga bisita - kailangan nilang maghintay nang mas kaunti para sa pag-load ng mga pahina.
Bakit ito nangyayari?
Kung ang mga istilo ng CSS para sa iyong site ay nasa isang hiwalay na file, hindi na kailangang i-load ng browser ng user ang mga istilong ito sa tuwing naglo-load ito bagong pahina. Na-download niya ang mga ito nang isang beses, inilagay ang mga ito sa cache (lugar ng memorya sa computer ng bisita) at kapag nagda-download susunod na pahina kinukuha ang mga istilo mula doon.
Mayroong dalawang paraan upang mag-attach ng mga CSS stylesheet file sa isang web page.
Ang unang paraan, ang pinakakaraniwan, ay ang paggamit ng tag may mga katangian: rel = "stylesheet" type = "text/css" href = "style file.css" sa loob ng page header code (tag
).Halimbawa:
| 1 2 3 4 | <ulo > ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </ulo> |
Ang halimbawang data ay naka-attach sa CSS page mga istilong nakasulat sa style.css file. May bisa ang mga ito sa buong dokumento.
May isa pang paraan ilakip ang mga panlabas na style sheet sa HTML dokumento. Ito ay gumagamit ng @import na direktiba. Pinapayagan ka nitong i-import ang mga nilalaman ng isang CSS file sa kasalukuyang style sheet.
Magagamit mo itong pareho para magdagdag ng isang style sheet sa isa pa, at para mag-attach ng style sheet file sa isang HTML na dokumento. Upang gawin ito, kailangan mong isulat ito sa loob ng tag . Sa pagsasagawa, ganito ang hitsura:
Narito ang isang halimbawa: pagpapakita ng mga istilo ng CSS sa isang HTML na dokumento
Pakitandaan na sa loob ng tag ay nagsusulat din kami ng code ayon sa Mga panuntunan sa CSS gamit braces. Sa mga susunod na artikulo ay magsasalita ako nang mas detalyado tungkol sa mga patakaran ng syntax sa CSS.
Pagkonekta ng maraming CSS file sa isang HTML na dokumento.
Binibigyang-daan ng mga panuntunan ng HTML ang maramihang mga CSS file na maisama nang sabay-sabay. Maraming webmaster ang gumagamit nito: lumikha hiwalay na mga CSS file para sa teksto at para sa mga larawan. O hiwalay na mga file para sa header, footer at pangunahing katawan ng page. Alamin natin kung paano ito ipatupad.
Lumilikha kami ng ilang mga file na may mga estilo ng CSS. Hayaan ang kanilang mga pangalan ay style-1.css at style-2.css. Inilalagay namin ito, tulad ng sa paraan ng numero uno, sa parehong folder na may HTML file.
Narito ang isang halimbawa: pagpapakita ng mga istilo ng CSS sa isang HTML na dokumento
Ang lahat ay katulad ng unang paraan, tanging sa kasong ito ipinapahiwatig namin ang mga link sa dalawang file nang sabay-sabay.
Mag-link sa CSS file sa loob sa isang file ng parehong uri.
Bilang karagdagan sa lahat ng mga pamamaraan sa itaas, mayroong isang paraan na nagpapahintulot sa iyo na maglagay ng mga link sa marami pang iba sa loob ng isang CSS file!
Ito ay ipinatupad tulad ng sumusunod:
Una, kailangan naming ikonekta ang hindi bababa sa isang CSS file sa iyong code sa parehong paraan.
Pangalawa, ipasok ang sumusunod na code sa nakakonektang file:
@import url("style-2.css");
Ang linyang ito ay kumokonekta sa aming file karagdagang file CSS. Kung mayroon kang anumang mga problema sa pagkonekta ng CSS, maaari mong tanungin sila sa mga komento.
Tulad ng natutunan natin mula sa nakaraang dalawang aralin, ang teknolohiya ng CSS ay ang pinakamakapangyarihang kasangkapan, na dapat makabisado ng bawat webmaster! Upang mapabuti ang asimilasyon ng materyal, nagpasya akong magdagdag ng isang video ng pagsasanay + pagsubok upang pagsamahin ang impormasyong natanggap sa dulo ng bawat aralin.
Pagsubok sa pag-aayos ng materyal:
Kailangan nating isama ang CSS file sa pamamagitan ng paglalagay ng link dito sa HTML file. Alin sa mga sumusunod na pamamaraan ang tama?
Opsyon 1:
Opsyon 2:
Opsyon 3:
Pagpipilian 4:
Maaari ba tayong maglagay ng mga CSS cascades nang direkta sa isang HTML file?
Ngayon mahirap isipin ang pagbabago sa hitsura at Pag-format ng HTML mga dokumento nang hindi gumagamit ng mga style sheet ng CSS, dahil matagal nang tumigil ang HTML na maging isang self-sufficient na wika para sa disenyo at nagsimulang gawin ang mga orihinal nitong tungkulin sa pagbubuo at pagmamarka ng mga dokumento sa web. Sa artikulong ito, idedetalye namin ang mga paraan kung saan maaari mong isama ang CSS sa isang HTML na dokumento.
Maikling tungkol sa CSS at HTML
Dati, ang disenyo ng web page ay ginawa ng eksklusibo gamit ang HTML. Sa ngayon, ang diskarte na ito ay hindi ginagawa, at para sa stylization ginagamit ang mga ito Mga tool sa CSS na may napaka sapat na pagkakataon upang lumikha ng mga nakamamanghang disenyo.
Upang maipakita nang tama ang disenyo ng site, kailangan mong ikonekta ang CSS sa dokumentong HTML na gumagana nang hindi mapaghihiwalay sa isa't isa - nilikha ng HTML ang istraktura, at ang mga style sheet ay responsable para sa hitsura.
Mayroong ilang mga pangunahing paraan kung saan maaari mong i-customize ang pagpapakita ng mga estilo sa iyong HTML code, bawat isa ay may sarili nitong mga kalamangan at kahinaan.
Pagkonekta sa CSS file
Ito ang pangunahing paraan na itinuturing ng mga developer bilang ang pinaka-praktikal at maginhawa.
Gamit ang paraang ito, maaari mong mabilis na baguhin ang disenyo ng isang web page kung mayroong ibinigay istraktura ng HTML dokumento - halimbawa, para sa parehong site maaari kang magsulat ng ilang mga pagpipilian sa disenyo at ikonekta ang mga ito depende sa kaukulang pangangailangan.
Upang maisama ang isang file na may mga istilo, kailangan mo munang i-configure istraktura ng file- ito ay ginagawa upang ang tamang landas sa ang kinakailangang dokumento direkta sa code.
Lumikha ng isang direktoryo kung saan matatagpuan ang pangunahing HTML na dokumento, sa parehong folder na gumawa sa text editor file na tinatawag na style at i-save ito sa .css resolution. Maglalaman ito ng CSS code kasama ang lahat ng tinukoy na mga panuntunan sa pag-istilo ng dokumento.
Ang koneksyon ng CSS ay tapos na gamit HTML tag na may katangiang href. Mukhang ganito:
Narito ang code ay matatagpuan sa kung ano ang itinuturing na pinakamainam, ngunit hindi kinakailangan. Matatagpuan ito kahit saan sa dokumento.
Ang pamamaraang ito ay maginhawa dahil ang lahat ng mga pagbabago sa style sheet ay ginawa sa isang hiwalay na file, na ginagawang mas madaling maunawaan at basahin ang code at ginagawang mas malinis ang dokumento.
Kung gagawa ka ng mga pagbabago sa style.css at buksan ang index.html sa browser, makikita mo ang lahat ng mga pagbabagong ipinasok.
Sa parehong paraan, maaari mong itakda hindi lamang ang landas sa file sa istraktura ng site, kundi pati na rin ang isang link sa pahina na may estilo na matatagpuan sa Internet. Sa kasong ito, umaangkop din ito sa mga panipi pagkatapos ng katangiang href.
Ang paraan ng pagsasama ng isang style sheet mula sa isang hiwalay na file ay nag-o-optimize sa pagganap ng site, dahil pinapayagan nito ang browser na mag-load ng data mula sa cache, bilang isang resulta kung aling mga pahina ang naglo-load nang mas mabilis.
Mga style sheet sa loob ng isang HTML na dokumento
Minsan ang halaga ng isang parameter ng estilo ay direktang itinakda sa katawan ng HTML na dokumento gamit ang katangian ng estilo.
Syntax:
Ang teksto sa talatang ito ay pula
Ang halatang disbentaha ay ang kawalan ng pagiging pangkalahatan; kakailanganin mong tukuyin ang halaga para sa bawat tag.
Gayundin, ang pagkonekta gamit ang mga panloob na style sheet ay hindi nagpapahintulot sa browser na mag-cache ng impormasyon, hindi katulad ng nakaraang pamamaraan.
Pandaigdigang istilo
Kung kailangan mong mag-istilo ng isang partikular na elemento sa kabuuan ng isang HTML na dokumento, gamitin ang tag
Ang tinukoy na istilo ay ilalapat sa tag
, sa sandaling ito ay nakarehistro sa pahina.
Ang pagsasama ng CSS sa ganitong paraan ay babasahin sa mas mataas na priyoridad ng browser kaysa panlabas na talahanayan mga istilo.
Paano magdagdag ng font sa isang website
Ang font ay isa sa mga pangunahing elemento ng disenyo ng anumang web page. Ang impression na ginagawa ng isang website sa isang user ay direktang nakasalalay sa font na ginamit. Sa kabutihang palad, hindi mo kailangang limitahan ang iyong sarili sa mga karaniwang headset;
Sa pamamagitan ng Koneksyon ng CSS Ang mga font ay ginawa tulad ng sumusunod:
- Maghanap at mag-download ng angkop na headset.
- Buksan ang CSS file at isulat ang sumusunod na code dito:
Una, ang pangalan ng font ay tinukoy, pagkatapos ay ang landas patungo dito, at sa wakas ang mga parameter. Mangyaring tandaan na sa halimbawang ito ang font file ay matatagpuan sa folder ng mga font, na, naman, ay matatagpuan sa root directory. Para sa kaginhawahan, mas mahusay na lumikha magkahiwalay na mga folder Para sa iba't ibang mga file at mga elemento (mga imahe, script, style sheet, atbp.).
Kaya, sa folder ng mga font mayroon kaming isang file na tinatawag na OpenSans.ttf, na may karaniwang mga parameter. Lalabas na ito ngayon sa browser.
Pagkonekta sa font sa pamamagitan ng Google Fonts
Ang isa sa mga pinakakaraniwang paraan upang ikonekta ang mga font sa CSS at HTML ay ang serbisyo Mga Font ng Google.
Ang interface ay madaling maunawaan - kailangan mong makahanap ng angkop na font ayon sa pangalan o ibinigay na mga parameter, i-click ang button na Piliin ang font na ito, at ang serbisyo ay agad na bumubuo ng isang code na ipinasok sa field ng tag
HTML na dokumento, pati na rin ang kaukulang CSS file na may mga istilo.Paano ito dapat magmukhang sa HTML:
At sa CSS file may mga istilo:
Font-family: "Open Sans", sans-serif;
Ang pamamaraang ito ay maginhawa dahil pinapayagan ka nitong mabilis na makahanap gustong font mula sa isang napakalaking database at nakakatipid ng maraming oras, at inaalis din ang mga problema na lumitaw dahil sa hindi tamang pagpapakita ng mga font sa ilang mga browser.
Isa-isahin natin
Kaya, tiningnan namin ang mga pangunahing paraan upang ikonekta ang mga istilo ng CSS Mga HTML na dokumento. Batay sa mga gawaing itinakda para sa developer sa bawat partikular na kaso, maaari mong piliin ang pinakamataas na priyoridad na opsyon.
Ang disenyo ng web page ay malikhaing proseso, na, gayunpaman, ay nangangailangan ng maingat na diskarte. Samantalahin ang kakayahang magkomento sa code at huwag kalimutan ang tungkol sa pag-optimize ng website.
Magandang araw sa lahat. Si Alexey Gulynin ay nakikipag-ugnayan. Sa unang artikulong ito sa CSS, gusto kong pag-usapan ang tungkol sa CSS sa pangkalahatan, at kung paano . Ang CSS ay Cascading Style Sheets(o simpleng matatawag na mga estilo), na responsable para sa kung paano ipakita ang mga elemento sa iyong html na pahina. Kung magdaragdag ka lang ng mga elemento sa isang HTML na pahina nang walang mga katangian, ilalagay silang lahat mula sa itaas hanggang sa ibaba at ihahanay sa kaliwang bahagi ng browser. Ito ay boring at monotonous.
Ang mga elemento ng HTML ay ang balangkas ng aming pahina, ibig sabihin. Ang html ay responsable para sa ANO ang ipapakita sa pahina. Sinasagot naman ng CSS kung PAANO ipakita ang lahat ng elementong ito. Maaari kang lumikha ng parehong pahina ng HTML at makabuo ng libu-libong mga pagpipilian sa disenyo para dito. At lahat ng ito ay magiging hitsura ng iba't ibang mga site. Maaari kang mag-surf sa Internet at makita kung gaano karaming magagandang site ang nasa mga kalawakan nito.
Naka-on sa ngayon, dapat napagtanto mo na kung gusto mong lumikha magandang disenyo, kung wala kang kaalaman sa CSS, hindi mo ito magagawa. Samakatuwid, magpatuloy upang maunawaan ang agham na ito na tinatawag na CSS.
Ikonekta natin ang CSS style file sa html page. Ginagawa ito sa header ng dokumento, sa pagitan ng mga tag
.. :
Alamin natin kung ano ang isinulat natin dito. Nakakonekta ang mga style file gamit ang link tag. Ang katangian ng href, na pamilyar sa amin, ay tumuturo sa landas patungo sa style file. Dito maaari mong tukuyin ang parehong ganap at mga kamag-anak na landas. Sa kasong ito, ipinapalagay na ang aming style.css file ay matatagpuan sa parehong direktoryo ng file kung saan kami nagsasama ng mga estilo. Isinasaad ng attribute na type="type/css" na ang uri ng dokumento ay css, ang attribute na rel="stylesheet" ay nagsasabi sa browser na nagsasama kami ng mga istilo (rel mula sa English na "relationship" - relationships).
Maaari ka ring mag-istilo ng mga elemento sa iba pang mga paraan. Gumawa tayo ng html page na may sumusunod na nilalaman:
Unang talata
Unang talata
Unang talata
Unang talata
Bilang karagdagan sa paggawa ng style file, maaari tayong magsulat ng mga istilo sa ulo ng dokumento gamit ang tag
Unang talata
Pangalawang talata
Pangatlong talata
Ikaapat na talata