Kurso na Talaan

Advanced CSS Tutorial

• 课外书 ng CSS
• Kabatiran ng CSS
• Bastang Balitaan ng CSS
• Napakalaking Balitaan ng CSS
• Pahalang Deribatibo ng CSS
• Pahalang ID ng CSS
• Pahalang Class ng CSS
• Paglikha ng CSS
• Background ng CSS
• Tekstong CSS
• Font ng CSS
• Listahan ng CSS

CSS Box Model

• Ulas ng Model ng Frame ng CSS
• Interior Margin ng CSS
• Border ng CSS
• Exterior Margin ng CSS
• Pagkakasamang Exterior Margin ng CSS

CSS sa paglalagay

• Ulas ng Pag定位 ng CSS
• Pag定位 ng Relative ng CSS
• Pag定位 ng Absolute ng CSS
• Paglilipad ng CSS

CSS Selector

• Pahalang Element ng CSS
• Pagsasama ng Pahalang Pilihin ng CSS
• Detalye ng Pahalang Class ng CSS
• Detalye ng Pahalang ID ng CSS
• Detalye ng Pahalang Atributo ng CSS
• Pahalang Anak ng CSS
• Pahalang Anak ng Element ng CSS
• Pahalang Kapatid na Malapit ng CSS

Pilmograpiya ng Kurso

Rekomendasyon sa Kurso:

• Kabibitang Bayan ng CodeW3C.com

Ang katangian ng paglalagay sa CSS ay nagbibigay-daan sa iyo na ilagay ang elemento.

CSS sa paglalagay at floating

Ang CSS ay nagbibigay ng ilang katangian para sa pagsasaayos at floating, gamit ang mga katangian na ito, maaring magtayo ng disenyo ng kolumna, pag-ooverlap ng isang bahagi ng disenyo sa ibang bahagi, at maaaring tapusin ang gawain na kailangan ng ilang tabli sa loob ng ilang taon.

Ang pangunahing kaisipan ng pagsasaayos ay napakasimple, ito ay nagbibigay-daan sa iyo na magtakda ng posisyon ng kahon ng elemento sa kanyang normal na posisyon, o sa kanyang magulang na elemento, ibang elemento, o kahit sa mismong window ng browser. Malinaw na, ang katangian na ito ay napakamakapangyarihan at napakasurpise. Upang malaman, ang suporta ng user agent sa pagsasaayos sa CSS2 ay mas higit sa suporta nito sa iba pang aspeto, at ito ay hindi dapat naisipin na nakakasorpresa.

Sa kabilang banda, ang unang paglalathala ng float sa CSS1 ay nagsisimula sa isang tampok na idinagdag ng Netscape sa paunang panahon ng pag-unlad ng Web. Ang floating ay hindi ganap na pagsasaayos, ngunit, ito ay siguradong hindi pangkaraniwang pagsasalayong disenyo. Malamang, magiging maliwanag namin sa mga susunod na kabanata ang kahulugan ng floating.

Ang lahat ay kahon

Ang mga elemento tulad ng div, h1 o p ay palaging tinatawag na bloke na elemento. Ibig sabihin, ang mga elemento na ito ay magpakita bilangna

Maaari mong gamitin Display na halagaBaguhin ang uri ng pagkakalat ng kahon na ginawa. Ibig sabihin, sa pamamagitan ng pagtatakda ng halaga ng display bilang block, maaaring magpakita ng linya na elemento (tulad ng <a> elemento) tulad ng bloke na elemento. Maaari rin itong ilagay bilang none, upang ang ginawa na elemento ay walang kahon. Sa ganitong paraan, ang kahon at lahat ng kanyang nilalaman ay hindi na ipapakita, hindi nag-occupy ng espasyo sa dokumentong nilalaman.

Ngunit sa isang sitwasyon, kahit walang pagkakakilala, ay magkakaroon ng bloke na elemento. Ito ay nangyayari kapag dinagdag ang ilang teksto sa simula ng isang bloke na elemento (tulad ng div). Kahit hindi nilagay ang teksto bilang paragrafo, ito ay magiging paragrafo:

<div>
some text
<p>Some more text.</p>
</div>

Sa ganitong sitwasyon, ang kahon ay tinatawag na walang pangalang bloke kahon, sapagkat ito ay walang kaugnayan sa mga natukoy na elemento.

Ang mga linya ng teksto ng bloke ng elemento ay magiging katulad din. Pagkatapos, mayroon kang isang paragrafo na naglalaman ng tatlong linya ng teksto. Bawat linya ng teksto ay gumagawa ng isang walang pangalang kahon. Hindi maaaring ilagay ang estilo sa walang pangalang bloke o kahon ng linya, sapagkat walang lugar kung saan mapapatnubayan ang estilo (paalam, ang kahon ng linya at ang kahon ng linya ay dalawang magkakaibang konsepto). Gayunpaman, ito ay makakatulong upang maunawaan na ang lahat ng bagay na nakikita natin sa screen ay nagkakaroon ng uri ng kahon.

Mekanismo ng pag-locate ng CSS

Ang CSS ay may tatlong pangunahing mekanismo ng pag-locate: pangkaraniwang stream, paglilipat at tunay na pag-locate.

Maliban sa pagtatakda, lahat ng kahon ay naka-locate sa pangkaraniwang stream. Ibig sabihin, ang posisyon ng elemento sa pangkaraniwang stream ay pinasasalamin ng posisyon ng elemento sa (X)HTML.

Ang kahon ng bloke ay napapakita mula sa itaas hanggang sa ilalim, isa sa isa, at ang pagitan ng kahon ay naka-iskala ng pagkakabulag ng vertical na margin ng kahon.

Ang kahon ng linya na nasa isang linya ay hinahanda ng pabilog. Maaaring gamitin ang horizontal na padding, border at margin upang ayusin ang paghahawak ng kanila. Subalit, ang vertical na padding, border at margin ay hindi apektado sa taas ng kahon ng linya. Ang horizontal na kahon na nabuo sa pamamagitan ng isang linya ay tinatawag naKahon ng linya (Line Box)Ang taas ng kahon ng linya ay palaging sapat para mapagamit ng lahat ng kahon ng linya na nakakabahagi. Gayunpaman, ang pagtatakda ng taas ng linya ay maaaring madagdagan ang taas ng kahon.

Sa mga susunod na kabanata, amin na magtuturo sa iyo ng detalyadong pagsasaliksik ng kahalintulad na pag-locate, ang tunay na pag-locate at ang paglilipat.

Atributo ng position ng CSS

Sa pamamagitan ng paggamit ng Position na halagaMaaari naming piliin ang apat na iba't ibang uri ng pag-locate, na magiging epekto sa paraan ng pagkakalat ng kahon ng elemento.

Ang kahulugan ng halaga ng position:

static

Ang normal na pagkakalat ng kahon ng elemento. Ang mga bloke na elemento ay gumagawa ng isang rectanggulo ng kahon, bilang bahagi ng dokumentong stream, habang ang mga elemento na nasa loob ng linya ay gumagawa ng isang o ilang mga kahon ng linya, na inilalagay sa kanilang magulang na elemento.

relative

Ang bloke ng elemento ay inililipat nang ilang distansya. Ang elemento ay mananatili sa hugis nito bago ito ilagay ang posisyon, at ang espasyo na orihinal na inalakad nito ay mananatili.

absolute

Ang bloke ng elemento ay talagang inalis mula sa daloy ng dokumento at inilagay sa posisyon patungo sa kanyang bloke na kasama. Ang bloke na kasama ay maaaring maging isa pang elemento sa dokumento o ang unang bloke na kasama. Ang espasyo na orihinal na inalakad ng elemento sa normal na daloy ng dokumento ay nagsasara, tulad ng kung ang elemento ay wala sa lahat. Pagkatapos nilagay ang posisyon, ang elemento ay gumawa ng bloke na pang-block, kahit anong uri ng bloke na itinatag ng elemento sa normal na daloy.

fixed

Ang pagganap ng elementong kwadrado ay katulad ng sa pag-set ng position na absolute, ngunit ang bloke na kasama ay ang window mismo.

Paalala:Ang posisyon na kaugnay sa posisyon ay sinasalamin bilang bahagi ng modelo ng posisyon ng pangkaraniwang daloy, dahil ang posisyon ng elemento ay kaugnay sa kanyang posisyon sa pangkaraniwang daloy.

Atributo ng pag定位 ng CSS

Ang atributo ng pag定位 ng CSS ay nagbibigay-daan sa iyo na ilokasyon ang elemento.

Box ng Tools

Manwal ng CSS

Halimbawa ng CSS

Pagsusuri ng CSS

Tutorial ng CSS

Link ng Sponsor