Ang pagpopormat maaaring magtanggap bilang isang malaking bahagi sa paggawa ng mga mababasa para maging interesado sa iyong mga artikulo. Ang magandang pagpopormat ay magandang ahente, at ang gabay na ito ay pinagtatakip ang lahat - galing sa pangunahin at kinakailangan hanggang sa pinalayuang pagestilo ng CSS.
Bisitahin ang Widget Hub para sa mga natipong modyul, pormat at mga tema.
Mga Pormat ng Artikulo
- Pormat ng Artikulo
- Pormat ng Site
- Pormat ng mga Tauhan
- Pormat ng Mababa na Uring Bagay
- MGA MABABARING URI NA MGA LOKASYON
- Indeks Ng Mga Nangyayaring Anomalya
- Pormat ng Oplan
- Pormat ng Paglalarawan ng mga MST
- Footage Format
Pangunahing Template ng mga Artikulo
[[include component:rate]]
IMAGE BLOCK CODE (KUNG MAAARI)
SIMBOLO NG KLASE NG BAGAY
**Registered Phenomena Code:** XXX
**Object Class:** Alpha/Beta/Gamma/Omega (reto ng pagtatakip) - Yellow/Orange/Red (reto ng peligro)
**Hazard Types:**
**Containment Protocols:** [Paragraphs explaining the procedures]
**Description:** [Mga talata na nagdeskripsyon sa isang bagay]
**Addendum:** and/or **Discovery:** [Pilian na dagdag na mga talata]
[[footnoteblock]]
[[=]]
<< [[[RPC-XXX]]] | RPC-XXX | [[[RPC-XXX]]] >>
[[/=]]
Lagyan ng mga ugnayan patungo sa huli at nasusunod na artikulo dito ^
Halimbawa ng paglalaboy sa huli na dapat magmukha ng ganito:
« RPC-001 | RPC-002 | RPC-003 »
Alternatibong Pormat ng Artikulo
Template ng Panayam
> **Pinagpanayam:** [Ang tao, mga tao, o RPC na pinagpapanayaman]
>
> **Nagpanayam:** [Nagpapanayam, puwede mahadlangan gamit ng █]
>
> **Pangunahing Ulat:** [Liit na dinaanan na nagpapalarawan sa panayam]
>
> **<Panimula, [opsyonal ang impormasyon ng oras]>**
>
> **Nagpapanayam:** [pagsasalita]
>
> **Tauhan/RPC:** [pagsasalita]
>
> [Ulitin kung kinakailangan]
>
> **<Wakas, [opsyonal ang impormasyon ng oras]>**
>
> **Panghuling Ulat:** [Konting pagbubuo at pinagdaanan kung ano nangyari pagkatapos]
Simbolo ng mga Klasipikasyon ng Bagay
Kung magpapahayag ng artikulo, kailangan mong isabay ang simbolo ng klasipikasyon ng bagay. Para malaman kung anong klasipikasyon na nakakabagay sa iyong artikulo, kumunsulta sa Object Gabay sa mga Klase. Nandito ang lista ng mga utos na iyong madaling maipasok sa loob sa taas ng iyong artikulo para mapapakita ang wastong simbolo, ito ay makikita sa loob ng nakasunod ng Lebel ng Banta:
Alpha
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-white.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-yellow.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-orange.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-red.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-purple.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/alpha-black.png]]
Beta
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/beta-white.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/beta-yellow.png]]
[[f<image http://rpcauthority.wikidot.com/local--files/component:icons/beta-orange.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/beta-red.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/beta-purple.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/beta-black.png]]
Gamma
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-white.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-yellow.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-orange.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-red.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-purple.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/gamma-black.png]]
Omega
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-white.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-yellow.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-orange.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-red.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-purple.png]]
[[f<image http://http://rpcauthority.wikidot.com/local--files/component:icons/omega-black.png]]
Ang mga kodang ito ay mapupunta sa ilalim nang modyul ng reto.
Maaari kang magkoreo ng RPC sa pag-click sa nakaugnay sa Unang Serye at magselekta ng kahit anong basyo na RPC na artikulo. Siguraduhing lagyan ng "rpc" (walang mga kota) na-tag sa loob ng iyong pahina.
|
Table of Contents
|
Sintaks ng Wikidot
Sa kabubuohan na bahagi, maaari mong makakuha kahit sa pangunahaing sintaks ng Wikidot.
- Pagtatapang: **Halimbawang tektso** ⟶ halimbawang Teksto
- Paghihilis: //halimbawang teksto// ⟶ halimbawang teksto
- Paglilinya sa Ilalim: __halimbawang teksto__ ⟶ halimbawang teksto
- Pagtatagos: --halimbawang teksto-- ⟶ halimbawang teksto
Bilang natatagilid na nota, hindi mo na kailangang alaalahin ang lahat ng ito kasi nandoon sila sa toolbar ng Wikidot, pero nakakatulong din ang pagalaala nito.
Mga Imahe
Ang pagdagdag ng mga imahe ay isang magandang paraan para magpapaunlad ng inyong artikulo.
[[include component:image-block name=**Image_URL_Location**|caption=**Image_Caption**]]
Gumagawa ito ng image block na lumalaki kapag lumulutang sa ibabaw gamit ng mouse. Isalin ang matapang na tektso kung ano ang maaaring ilalagay.
May ibat-ibang mga bagay na puwede mong dagdagin para isalin kung paano uubra ang imahe.
[[include component:image-block name=**Image_URL_Location**|caption=**Image_Caption**|width=**###**]]
Ito ay naglalagay ng kalakihan ng image. Ang kinasasanayan ay 300 na piksel. Siguraduhing lalagyan ng yunit para uubra. Kapag "width=450px" magagawa itong kalaparan ng 450 na piksels. Kapag "width=50%" magagawa itong kahati ng nilalaman ng pahina.
[[include component:image-block name=Image_URL_Location|caption=Image_Caption|align=ALIGNMENT]]
Magagawa itong magbago ng sa pagpila ng imahe. Sa nakasanayan, ang imahe ay mapipila sa kanan ng screen. "align-left" magagawa itong magpapakita sa kaliwa. "align-center" sa gitna ng screen.
[[include component:image-block name=Image_URL_Location|caption=Image_Caption|enlarge=false]]
Magagawa itong hindi magpapalaki ng imahe kapag lumulutang sa ibabaw ang mouse. Sa nakasanayan, ang paglalaki sa pamaraan ng paglulutang ng mouse ay pinapayagan.
Kung gusto mong magdagdag ng nakakasanayan na imahe (kahit walang pagpopormat ng image block), gamitin ito:
[[image LINK]] ⟶ Normal na imahe.
[[<image LINK]] ⟶ Ang imahe ay nakapila sa kaliwa.
[[>image LINK]] ⟶ Ang imahe ay nakapila sa kanan.
[[=image LINK]] ⟶ Ang imahe ay nakapila sa gitna
[[f<image LINK]] ⟶ Gumagawa ng lumulutang na imahe sa kaliwa. (Pumapayag sa pagbalot ng tektso.)
[[f>image LINK]] ⟶ Gumagawa ng lumulutang na imahe sa kanan. (Pumapayag sa pagbalot ng tektso.)
There are more advanced uses of images that you can read about here.
Pagguho
Ang mga pagguho ay nagtatrabaho ng maayos sa pagtatago ng malalaking bahagi ng teksto.
[[collapsible show="pagpapakita ng teksto" hide="tagong teksto"]]
teksto
[[/collapsible]]
Dagdag nito, puwede mo rin magagamit ang hideLocation attribute para baguhin kung saan magsasara ang pagguho. Maganda ito para sa mga mala-talatang teksto. Halimbawa:
[[collapsible show="Ipakita ang mahabang teksto" hide="saraduhin" hideLocation="both"]]
Mahabang teksto
[[/collapsible]]
Mga Hyperlink
Maaari kang magugnay ng ibang pahina gamit ng nasusunod na koda.:
[PAGE-URL Nakaugnay na teksto]
Magagawa itong:
Kung ang pahina na pinaguugnay mo ay nasa loob ng kaparehong Wikidot site, maaari kang gumamit ng /pangalan-ng-pahina. Halimbawa:
[/formatting-guide Nakaugnay na teksto]
Magagawa itong:
Ang madaling paraan kung paano magugnay ng mg pahina sa kaparehong site ay nasusunod:
[[[formatting-guide]]]
Magagawa itong:
Mga Footnote at Footnote Blocks
Maaari kang dumagdag ng mga footnote gamit ng nasusunod na koda:
Halimbawang teksto.[[footnote]]Eksplanasyon.[[/footnote]]
Halimbawang teksto.1
Karagdagan nito, maaari kang magbago kung saan dapat makita ang mga footnote sa iyong pahina sa paggamit ng [[footnoteblock]]. Notahin mo na dapat may isang footnote block kada pahina
Mga Panguluhan
Maaari mong aksentuhan ang teksto gamit ng mga mgapanguluhan. Ang mga nasusunod na koda:
+ Pinakamalaking Panguluhan
++ Laki 2
+++ Laki 3
++++ Laki 4
+++++ Laki 5
++++++ Pinakamaliit na Panguluhan
Makagagawa ng mga panguluhan ng mga sari-saring kalakihan:
Pinakamalaking Panguluhan
Laki 2
Laki 3
Laki 4
Laki 5
Pinakamaliit na Panguluhan
Mga Lista
Maaari kang gumawa ng mga pagayos (sa paraan ng bilang), kaperaho sa di-ayos (puntong punglo) na mga lista. Ang pagdagdag ng pagitan bago sa na listang bagay ay magpadagdag ng kanilang napapalooban.
# Pinagayos na nilistang bagay 1
# Pinagayos na nilistang bagay 2
# Napapalooban na bagay 1
# Pinagayos na nilistang bagay 3
* Di-pinagayos na nilistang bagay 1
* Di-pinagayos na nilistang bagay 2
* Napapalooban na bagay 1
* Di-pinagayos na nilistang bagay 3
Will create:
- Pinagayos na nilistang bagay 1
- Pinagayos na nilistang bagay 2
- Napapalooban na bagay 1
- Pinagayos na nilistang bagay 3
- Di-pinagayos na nilistang bagay 1
- Di-pinagayos na nilistang bagay 2
- Napapalooban na bagay 1
- Di-pinagayos na nilistang bagay 3
Mga Lamesa
Ang mga lamesa ay maaaring magagamit para magayos ng impormasyon sa loob ng inyong artikulo:
||~ Pangulo 1 ||~ Pangulo 2 ||~ Pangulo 3 ||
|| Halimbawa 1. || Halimbawa 2. || Halimbawa 3. ||
Magagawa itong:
| Pangulo 1 | Pangulo 2 | Pangulo 3 |
|---|---|---|
| Halimbawa 1. | Halimbawa 2. | Halimbawa 3. |
You can expand this model for as many rows and columns as you need. Remember to add a tilde (~) to each box in your header row.
Mga Quote Block
Ang mga quote block ay maganda para sa mga testing log, exploration log, at mga nasusunod. Ang pagdagdag ng quote block ay madali lang madagdag ng "> " bago sa kada linya ng inyong teksto. Kaya:
> Linya 1
>
> Linya 2
Ay makagagawa ng:
Linya 1
Linya 2
Notahin na ang kawalan ng linya ay kinakailangan ng ">" din - kung hinde, ang iyong quote block ay mahahati! Gayon din, ang mga patlang sa harap ng ">" ay kinakailangan; ang koda ay hindi gagana kapag hinde.
Mga Angkla
Ang mga Angkla ay maaaring makagawa ng paglalakbay sa pahina nang madali
[[# pangalangangkla]] Para makagawa ng angkla
[#pangalangangkla Tekstong naugnay.] Para makabalik sa angkla.
This will create:
Pahiga na Paghahati
Ang Pahiga na Paghahati ay ginamit para sa paghati ng nilalaman ng pahina:
Teksto
-----
Maraming Teksto
Will create:
Teksto
Maraming Teksto
Nakapilang teksto
Maaari kang magpila ng teksto pa kaliwa, gitna at pa kanan ng pahina, at pagsa-ayos sa iyon:
[[<]]
Nakapilang Pakaliwa
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
[[/<]]
[[=]]
Nakapilang Pagitna
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
[[/=]]
[[>]]
Nakapila Pakanan
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
[[/>]]
[[==]]
Pinagayos na tekto
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
[[/==]]
Will create:
Nakapilang Pakaliwa
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
Nakapilang Pagitna
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
Nakapila Pakanan
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
Pinagayos na tekto
Walang forever, wag kang magaakto ng parang wagas. Gumising ka, kung ako sa iyo ako nalang pipiliin mo, ayaw ka niya gusto kita; pinagpapahirapan ka lang nyan.
Ang pagsaayos ng teksto ay nagagawa para ang lahat ng mga linya ay patas, para makita lang ito sa mga malalaking talata.
Pinagkukulayan na Teksto
Pagkulay ng teksto ay madali lang magawa.:
##blue|Asul na teksto.##
Maggawa: Asul na teksto.
Gumagana din ito gamit nang halaga ng sampuan (hex codes):
##71e02c|Berdeng teksto.##
Maggawa: Green teksto.
Mga Tab
Ang mga tab ay maaaring gamitin sa pagaayos ng mga pahina at maitataguyod ng iyong sandbox na hindi magiging di-ayos. Paanong gawin iyon:
[[tabview]]
[[tab Pangunahing Tab]]
Halimbawang teksto.
[[/tab]]
[[tab Pangalawang Tab]]
Dagdag na Halimbawang Teksto.
[[/tab]]
[[/tabview]]
Makes:
Halimbawang teksto.
Maaari kang magdagdag ng madaming [[tab]] kung kinakailangan. Halimbawa:
Ang paggawa ng dagdag na [[tabview]] … [[/tabview]] na mga elemento ay gumagawa ito ng madaming mga block ng mga tab.
[[tabview]]
[[Pinakaunang Tab]]
[[/tab]]
[[/tabview]]
[[tabview]]
[[Pangalawang Tab]]
[[/tab]]
[[/tabview]]
Ay Magagawa itong:
[[tabview]]
[[Pinakaunang Tab]]
[[/tab]]
[[/tabview]]
[[tabview]]
[[Pangalawang Tab]]
[[/tab]]
[[/tabview]]
Pagkawala ng Tab
Dahil sa paraan ng wikidot sa pagpormat ng teksto, ang pagmayari ng kawalan ng teksto ay sa nakasanayan ay dimaaari. Gayon man, maaari kang tumawid nito sa paggamit ng no-parse tags. Sa nasakasanayan ang paggawa ng walang linya ay magpapakita sa nasusunod:
Teksto
Teksto
Teksto
Teksto
Gayon man, sa paggamit ng no-parse-tags, maaari kang magpapakita ng iyon nang wasto:
Teksto
@@@@
@@@@
@@@@
Dagdag na teksto
Teksto
Dagdag na teksto
Ang mga tag na ito ay maaaring gamitin para makikita ang mga koda kahit hindi ito pinagparse. Halimbawa:
@@ [[div class="Halimbawa"]] @@
@@ [[/div]] @@
[[div class="Halimbawa"]]
[[/div]]
Panimula sa CSS
Ang CSS ay isang lenguwahe na ginagamit sa pagsagawa ng mga estilo sa tiyak na mga elemento sa isang webpage. Maaari itong magamit para magpapaganda ng iyong mga artikulo. Una, pagtatakip natin ang ilang pangunabin kung paano gumagana ang Wikidot Sintaks kasama ang CSS.
Elemento ng mga Div
Sa HTML, ang mga elemento ng div ay ginamit para markahin ang mga seksyon ng isang pahina
Kahit ang Sintaks ng Wikidot ay naiiba sa HTML, maaari ka pa din makagawa ng mga elemento ng div sa nasusunod:
[[div]] Nilalaman. [[/div]]
Naman, hindi ito magagawa sa sarili lang.
Mga Klase ng Div
Maaari kang magpilk ng klase o ID sa iyong mga elemento ng div sa pagdagdag sa nasusunod:
[[div class="firstDiv"]] Nilalaman [[/div]]
[[div id="secondDiv"]] Nilalaman. [[/div]]
Kinakailangan, ito ay nagbibigay na browser sa pagkilala ngnmga div. Mamaya, maaari nating gamitin ang mga klase/ID sa paglagay ng estilo sa kanila.
Ang pagestilo ng mga ID ay mahalaga kaysa sa ibang pagestilo ng mga klase. Maaari ka lang gumamit ng isang ID, para sa ibang tinutukoy na elemento, habang ang mga klase ay maaaring magagamit ng ulit-ulitin para maglagay ng parehong pagestilo sa madaming elemento.
Sintaks ng CSS
Bago tayo tumuloy, tingnan natin ang mga pangunahing sintaks ng CSS. Ang pagestilo ay pinaglagay sa pamamagitan ng rulesets, na pinagbubuan ng mga selector at declaration block. Mga ehemplo ng mga block:
.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}
Dito, ang ".firstDiv" ay isang selector, at ang seksyon sa gitna ay ang declaration block. Ang mga declaration block ay dapat ipapaloob sa paggamit ng braces ({}), at sa kada declaration dapat magtatapos sa semicolon (;). Ang pagbigay ng patlang at pagindent ay hindi kinakailangan, kahit magagawa itong stylesheet na puwedeng ma babasa. Kung gusto mo, maaari kang magmayari ng mga ruleset sa isang linya. :
.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}
Mga Selector
Mayroon tatlo na mga pangunahing tipo ng mga selectors:
- Element Selectors
- Class Selectors
- ID Selectors
Ito ang mga halimbawa ng mga kakaibang mga tipo.:
h1 {…}
.classDiv {…}
#idDiv {…}
Ang unang ruleset ay malalagay sa lahat ng h1 (heading 1) na mga elemento sa itaas ng pahina. Ang ikalawa ay malalagay sa lahat ng mga elemento na may class "classDiv". Ang pangatlo ay malalagay sa lahat ng elemento na may ID "idDiv". Paalala: ang mga class selectors ay nagsisimula ng may tuldok(.), ang mga ID selector ay nagsisimula ng mga hash (#).
May isa pang tipo ng selector kinikilala bilang universal selector, ginamit iyon para magpili ng lahat ng elemento sa pahina, pero di mo na kailangan gumamit nito, lol.
* {…}
Propidad
May isang bagay pa na kailangan natin pagtatalayakin: Mga Property. May mga daang-daan mga property sa CSS, pero huwag magaalala - hindi na kailangan gumagamit ng karamihan sa kanila. Dito may maigsing lista sa karamihan ng mga laging ginagamit na cssThere are hundreds of properties in CSS, but don't worry - you won't have to use most of them. Here's a short list of the most common properties you'll be using:
- color: Pagbabago ng kulay sa piliang elemento.
* Values: hex code (#000000), rgb (rgb(0, 0, 0)), etc.
- background-color: Nagbabago ng kulay sa background ng element
* Values: hex code, rgb, etc.
- background-image: Nagbibigay ng background image sa piliang elemento.
* Values: url('IMAGEURL'), linear-gradient(…)
- border: Nagbabago ng border ng elemento.
* Values: (size [1px, etc.]), (style [solid, dashed, dotted, etc.]), (color [hex, rgb, etc.])
- border-radius: Nagpapaikita ng mga kanto ng border ng elemento.
* Values: pixels, percentage, etc.
- margin: Nagbabago ng bahagi ng elemento at sa pinagtakipan (ang elemento sa loob.)
* Values: mga pixel, percentage, atbp.
* Sides ay maaaring magamit ng kahit walang tulong gamit ng margin-top, margin-bottom, atbp.
* Kapag magestilo ng lahat na apat na bahagi gamit ng isang attribute, ang pagpatlang ay pinaglagay ng clockwise nagsimula sa itaas; kaya "1px 2px 3px 4px" ay maglalagay ng 1px margin pupunta sa taas, 2px right, 3px bottom, and 4px left.
- padding: Nagbabago ng bahagi ng border ng elemento at nilalaman nito.
* Values: Mga pixel, percentage, atbp.
* Katulad ng mga margin, ang pagbahagk ay pinaglagay ng clockwise nagsimula sa top. Ang mga side ay maaaring maestilo ng hiwalay gamit ng padding-top, padding-bottom, etc.
- font-family: Nagbabago ng font ng teksto sa loob ng piliang elemento.
* Values: pangalan ng font
* Maaari kang magdagdag ng font dito (font-family: Arial, Tahoma, sans-serif;) Kung ang isang font ay dimagagamit sa kahit anong dahilan, ang browser ay pumipili sa nasusunod.
- font-size: Magbago ito ng laki ng teksto sa pinagpiliang elemento .
* Values: [8px, etc.], [1em, etc.], smaller, larger, [percentages]
* 'em' at percentage scale ay nababase sa dokyumento ng kasalukuyang font size. 1em = 100%.
- font-weight: Nagbabago ito ng bigat (lawak) ng teksto ng pinagpiliang elemento.
* Values: normal, bold, lighter, bolder, [100, 200, etc.]
* Nakadepende sa font, hindi lahat ng mga value ay maaaring kunin.
Isipin mo na ito ay liit lang ito sa mga nakakatulong na propidad - w3schools ay mahalagang batayan sa pagaaral ng madam!
Pagestilo ng Elemento
Ok, alam na natin tungkol CSS syntax. Paano magestilo ng div? May tatlong paraan sa paggawa nito:
- Inline styling
- Using a CSS module
- Importing a stylesheet
Sa ngayon now, ipagtatakip natin ang dalawa na nakauna.
Inline Styling
Inline styling ay pinakasimple, pero di masyadong magagamit na paraan ng estilo ng mga elemento. Kailangan mo talagang gamitin iyon kung magestilo ka ng isang elemento - kung hindi, mas magagamit pa ang paggamit ng CSS module. Para malagay ang inline styling sa elemento, dagdagin ang style attribute sa iyon:
[[div style=" "]] Nilalaman. [[/div]]
Maaari kang magdikit ng declaration block sa loob ng style attribute and ito ay maaaring malagay sa isang div. Halimbawa:
[[div style="background-color: rgb(0,0,0); color: white;"]] Nilalaman. [[/div]]
Magagawa itong:
Notahin na walang selector o mga brace na kinakailangan kapag gumamit ng inline styling, pero kinakailangan pa din maglagay ng semicolon sa kada tapos nang isang declaration.
CSS Module
Isang pinakamagagamit na paraan na pagestilo ng mga elemento ay sa pamamagitan ng paggamit CSS module. Ang kanilang mga analog sa HTML ay <style> tag. Para magdagdag ng CSS module, lagyan ito sa pinakamataas ng iyong dokyumento:
[[module CSS]]
[[/module]]
Maaari kang maglagay ng CSS rulesets sa loob ng module at malagay sila sa buong artikulo. Halimbawa:
[[module CSS]]
.exampleRuleSet {
background-color: rgb(0,0,0);
color: white;
}
[[/module]]
Halimbawa
Madaming sitwasyon kung saan ang paggamit ng CSS ay nakakatulong.
Nangyayari (A)
Sabihin natin gusto mo maggawa ng div block na para magmumukha itong terminal ng kompyuter. Ang background ay magiging maitim, na may maputing teksto. Ang monospace font ay maganda din. Gawin natin itong CSS!
[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| Dagdag na teksto
| Dagdag na teksto
[[/div]]
This creates:
[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| Dagdag na teksto
| Dagdag na teksto
Paghahatiin natin kung ano ang nangyari:
- "background-color: black" ang nagpapaayos ng background para maging maitim.
- "color: white" ang nagpapaayos ng font para maging maputi ang font.
- "font-family: monospace" ang nagpapaayos ng font para maging monospace, parakamukha itong terminal ng kompyuter
- "padding: 2%" nagdagdag ng pamamagitan ng teksto at sa kanto ng div block.
- "border-radius: 5px" nagpapaikot nang kanto ng div sa 5px.
Isang pang paraan ay:
[[module CSS]]
.terminal {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/module]]
…
[[div class="terminal"]]
| teksto
| dagdag na teksto
[[/div]]
Magagawa ito ng parehong resulta, pero may dagdag ng nakakatulong at puwedeng magamit muling mga div. Ilagay lang ang kada div sa "terminal" class at ok na.
Pinagpilian na mga Tema
Kung gusto mo magdagdag nang custom theme sa pahina, maaari kang gumawa ng sariling CSS o magbrowse sa mga nandoon na mga tema dito.
Ang Gabay sa paggawa ng sarili mong mga tema ay maaaring mababasa sa malalapit na panahon.Hindi dumating. Punyeta.
(Sa totoo lang guys, nahihirapan ko dito magsalin, sana maiintindihan mo lolz. -Agent Kleist)
