Sa kabanatang ito ay pag-uusapan natin kung paano ipatupad ang CSS sa isang HTML na dokumento, iyon ay, i-link ang paglalarawan ng istilo ng isang elemento nang direkta sa elemento mismo, ilang HTML tag.
Ipatupad gawaing ito posible sa tatlong paraan:
- Sumulat ng paglalarawan ng istilo nang direkta sa mismong elemento. Ang pamamaraang ito ay mabuti lamang kung mayroon lamang isang ganoong elemento sa HTML na dokumento na nangangailangan ng hiwalay na paglalarawan ng istilo.
- Sumulat ng paglalarawan ng istilo para sa lahat ng magkakaparehong elemento ng HTML na dokumento. Ang pamamaraang ito ay nabibigyang katwiran kung ang istilo ng pahina ay sa panimula ay naiiba sa pangkalahatang disenyo ng site (isang pangkat ng mga magkakaugnay na pahina).
- I-extract ang paglalarawan ng istilo ng mga elemento ng HTML sa isang hiwalay na CSS file. Papayagan ka nitong pamahalaan ang disenyo ng buong site, ang bawat pahina ng site kung saan ipinahiwatig ang isang reference sa isang CSS file. Ang pamamaraang ito ay ang pinaka epektibong paggamit cascading style sheets.
Tingnan natin ang bawat opsyon, at sa parehong oras ay kilalanin ang mga patakaran ng CSS writing syntax.
Ang katangian ng istilo.
Halos bawat HTML tag ay may katangian istilo, na nagsasaad na ang isang partikular na paglalarawan ng istilo ay inilapat sa tag na ito.
Ito ay nakasulat tulad nito:
style="">
Lahat ng isusulat sa pagitan ng mga attribute quotes istilo at magiging isang paglalarawan ng istilo para sa ng elementong ito, V sa kasong ito elemento
Well halimbawa:
style="color: #ff0000; font-size:12px"> ito ay isang talata na may personal na istilo
Sa kasong ito, tinukoy namin na ang talatang ito ay dapat ipakita sa pula at may laki ng font na 12 pixels. Sa mga susunod na kabanata ay magsasalita ako nang detalyado tungkol sa kung ano ang nakasulat sa mga quote, ngayon pinag-uusapan natin tungkol sa kung paano ilapat ang CSS sa anumang HTML tag.
Gamit ang parehong prinsipyo, maaari mong tukuyin indibidwal na istilo para sa halos bawat elemento ng HTML.
style="background-color: #c5ffa0">
style="color: #0000ff; font-size:18px">Lahat ng tungkol sa mga elepante
Bumili ng elepante
style="color: #ff0000; font-size:14px">
style="color: #0000ff; font-size:16px"> Magrenta ng elepante
style="color: #ff0000; font-size:14px">
Ngunit uulitin ko muli ang pamamaraang ito Pagpapatupad ng CSS mabuti lamang kung kailangan mong magbigay ng isang tiyak na istilo sa isang maliit na bilang Mga elemento ng HTML.
Tag
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (hindi malito sa katangian ng parehong pangalan) kung saan inilalarawan ang mga elementong kailangan natin.
Tingnan ang halimbawa, magkakaroon ng mga komento sa ibaba.
Lahat tungkol sa mga elepante
Sa site na ito makikita mo ang anumang impormasyon tungkol sa mga elepante.
Bumili ng elepante
Sa amin kaya mo paborableng mga presyo bumili ng pinakamahusay na mga elepante!!
Magrenta ng elepante
Dito lang pwede magrenta ng kahit anong elepante!!
Tulad ng makikita mula sa halimbawa, nakamit namin ang eksaktong parehong resulta tulad ng sa unang kaso, ngayon lamang kami ay hindi nagtatalaga ng isang estilo sa bawat elemento nang paisa-isa, ngunit inilagay ito sa "ulo" ng dokumento, sa gayon ay nagpapahiwatig na ang lahat ng mga heading ,
- ang mga talata ay magiging asul
- pula. Isipin kung gaanong magiging madali ang ating gawain kung mayroong isang daang ganoong mga talata at humigit-kumulang labinlimang heading sa isang pahina, at ang dokumento mismo ay magiging mas mababa sa pamamagitan ng "pag-aalis" ng lahat ng paulit-ulit na paglalarawan ng istilo para sa bawat indibidwal na elemento.
Ngayon ang mga ipinangakong komento:
Tag mayroong direktang deklarasyon ng mga istilo ng ilang partikular na elemento ng HTML ayon sa sumusunod na syntax:
Kung ang ilang mga katangian ng isang elemento ay tinukoy sa isang bloke ng deklarasyon ng istilo, ang mga ito ay pinaghihiwalay ng isang semicolon.
CSS sa isang hiwalay na panlabas na file.
Gaano katagal aabutin upang makagawa ng isang mahabang kuwento maikli, dumating kami sa pangunahing, sa palagay ko, bentahe ng CSS, lalo na ang kakayahang ilagay ang lahat ng impormasyon na may kaugnayan sa disenyo ng site sa isang hiwalay na panlabas na file.
Kaya, buksan ang notepad (o isa pang editor) at isulat ang sumusunod na teksto dito:
Katawan (kulay ng background: #c5ffa0)
a (kulay:#000060; timbang ng font: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (kulay: #0000ff; laki ng font:18px)
h2 (kulay: #ff00ff; laki ng font:16px)
p (kulay: #600000; laki ng font:14px)
Susubukan kong ipaliwanag nang detalyado ang isinulat namin tungkol sa kakaibang bagay na ito sa mga susunod na kabanata ng aklat na ito.
Lahat! Nagawa na ang file ng paglalarawan ng estilo! Ngayon ang lahat na natitira ay kaunti na lamang, ibig sabihin ay pilitin mga kinakailangang pahina aming website upang makakuha ng impormasyon mula sa file na ito.
Ginagawa ito gamit ang tag (koneksyon). Tag multi-purpose at nagsisilbing "i-link" ang isang HTML na dokumento na may karagdagang mga panlabas na file na nagsisiguro sa wastong operasyon nito. Tag ay isang uri ng link, hindi lamang nilayon para sa mga user, ngunit para sa mga browser program (browser). kasi nagdadala ng eksklusibong impormasyon ng serbisyo; ito ay matatagpuan sa ulo ng HTML na dokumento sa pagitan ng mga tag at hindi ipinapakita sa screen ng mga browser.
Tag may mga katangian:
href- Path sa file.rel- Tinutukoy ang relasyon sa pagitan ng kasalukuyang dokumento at ang file na tinutukoy.
- icon ng shortcut - Tinutukoy na ang kasamang file ay isang .
- stylesheet- Tinutukoy na ang kasamang file ay naglalaman ng style sheet.
- application/rss+xml - File in XML na format para ilarawan ang news feed.
Dahil nagsasama kami ng cascading style sheet bilang isang external na file, ang aming link ng serbisyo ay nasa sumusunod na anyo:
Inuulit ko, para tiyak na iwaksi ang mga posibleng hindi pagkakaunawaan. Katangian rel magtalaga ng halaga stylesheet Dahil kami ay nagkokonekta ng isang cascading style sheet bilang isang panlabas na file, ipinapahiwatig namin ang landas sa css file (sa halimbawang ito ang file ay tinatawag na mystyle.css at namamalagi sa tabi ng HTML na dokumento kung saan ito nakasulat ang link na ito) ipinapahiwatig din namin iyon ang file na ito teksto at naglalaman ng paglalarawan ng istilo type="text/css"
Ngayon ay ipinasok namin ang linyang ito sa mga header ng pahina ng aming site at tamasahin ang resulta..
mystyle.css file
katawan (kulay ng background: #c5ffa0)
a (kulay:#000060; timbang ng font: bold;)
a:hover (kulay:#ff0000; font-weight: bold; text-decoration: wala)
h1 (kulay: #0000ff; laki ng font:18px)
h2 (kulay: #ff00ff; laki ng font:16px)
p (kulay: #600000; laki ng font:14px)
Index.html file
Menu:
Lahat tungkol sa mga elepante.
Bumili ng elepante.
Magrenta ng elepante.
Lahat tungkol sa mga elepante
Sa site na ito makikita mo ang anumang impormasyon tungkol sa mga elepante.
File elephant.html
Menu:
Lahat tungkol sa mga elepante.
Bumili ng elepante.
Magrenta ng elepante.
Bumili ng elepante
Sa amin maaari kang bumili ng pinakamahusay na mga elepante sa mapagkumpitensyang presyo!!
File elephant1.html
Menu:
Lahat tungkol sa mga elepante.
Bumili ng elepante.
Magrenta ng elepante.
Magrenta ng elepante
Dito lang pwede magrenta ng kahit anong elepante!!
Sa halimbawa sa itaas, "site tungkol sa mga elepante", sa sa ngayon, mayroong tatlong pahina, bawat isa ay nauugnay sa isang panlabas na css file - mystyle.css. Kaya, makabuluhang "na-unload" namin ito at ginawang "mobile-friendly" ang disenyo ng buong site. Isipin kung gaano karaming kilobytes ang mapapanalo natin kung ang site na ito ay may isang daang ganap na pahina!? At gayundin, gaano karaming oras ang matitipid natin kung kailangan nating baguhin ang anumang bagay sa disenyo nito!?
Sa kabanatang ito, tumingin kami sa tatlong paraan upang i-embed ang CSS sa isang HTML na dokumento. Alin ang mas magandang gamitin?
- Gumamit ng katangian istilo para sa anumang elemento, kung ang elementong ito na may kakaibang istilo sa ibang mga elemento ay ang isa lamang sa buong site.
- Gumamit ng tag
Unang antas ng header
Pangalawang antas ng header, asul
Pangatlong antas ng heading