CSS Chapter
Inline block
Ye adalah block tp dia punya width dalam keadaan inline
*untuk center sesuatu guna margin-auto. Wajib declare width atau max-width. Baru boleh center
*kalua nak center guna text-align: center; pastikan mende tu block-level element. Boleh tukar guna
display property dalam css kalua mende tu inline element
Rules utk margin
Untuk first value adalah margin-top dan margin bottom dan 2nd value adalah margin left dan margin
right
Contoh
.{
Margin:10px auto;
Maksudnya margin top dan btm adalah 10px dan left and right adalah auto
Html multiple class
Html element boleh guna multiple class dalam satu element dengan letok space. Contoh <div
class=”marker one”
Unset rule
Untuk pastikan nak remove css property yang sebelum ni. Boleh specify class dan property unset.
Contoh className{width:unset;}
Attribute selector
Selain dari classname dan id. Css buleh callout value name dengan specify element[value]
Contoh input[name="password"]{property:0;}
Apa itu em, rem, vh dan vw
Rem adalah unit multiply by root value
Em pula adalah unit multiply by parent [Link] x bagus utk website responsive
VW adalah viewport width. 1 vw= 1% screen width
Vh pulak adalah viewport height. 1vh = 1% screen width
Apa itu box-sizing?
Box sizing by default adalah content-box. Content-box by default behaviour ye akan membesorkan
lagi size kalau guna padding atau border. Border-box lagi memudahkan sbb kalau kita setting width
400px img contoh. Dan kite increase padding dan border dkt img. Size img still 400px dengan 400px
included border dan padding
Ap itu display:flex
Display flex ni kalau by default dia akan melintang. Flex ni bg sebarang child element akan placing
ikut row yg kita buat (kalau by default dia akan ke kanan).
Flexbox ni ada main dan cross axis. Mende ni kite buleh ejas by flex-direction property iaitu row,
row-reverse, column dan column-reverse
Ap aitu flex-wrap
Flex-wrap ni kite guna untuk wrapping element yang terjolor keluor.
Apa itu justify content
Justify content ni car akita nak alih mende yang ada dalam flex container tu dgn main axis dia
Kalau gambar pecah sbb kita sizing width terlalu lebar etc
Boleh guna object-fit: cover
CSS Selector-Important
[Link] = nk combine antara html element dan classname
Element * = nk pilih semua jenis element yang ada
Element/class + element/class = nk pilih element yang selepas element tersebut
Element/class ~ element/class = nk pilih element yang selepas element tersebut
Element/class > element/class = nk pilih child element dalam parent element tersebut
:first-child = guna untuk select first child element tersebut
:only-child = guna untuk select child. Contoh ul li:only-child. Akan select sume li dalam ul
:nth-child(A) = guna untuk select certain2 child element dalam bentuk nombor. Contoh div p:nth-
child(2) akan pilih p yang kedua dalam div tersebut
:nth-last-child(A) = akan pilih ikut turutan bermula dari last child
:first-of-type = akan pilih first element yg dinyatakan
:nth-of-type(A) = selector element yang boleh pilih element ganjil”odd” atau x ganjil “even”
:only-of-type = selector element yang pilih jenis child element dalam parent tersebut
:last-of-type = selector element yang pilih last type element
:empty = selector element yang pilih element xdok child dalam tu
:not(X) = selector element yang pilih element selain dari element yang dinyatakan dalam (). Contoh
div:not(.small) maksudnya akan pilih div yang xdok classname small
[attribute] = akan pilih element berdasarkan attribute dalam element. Contoh a[href] akan pilih
semua element a yang ada href
A[attribute] = sama dgn attribute
[attribute="value"]=pilih value dalam element attribute
[attribute^="value"] = akan pilih short value. Contoh mcm attr for=“bitcoin” jd kita set for^="bit"
akan pilih semua selector yang ada bit xkire la bitcoin atau bitfuck. Selagi ada bit dia akan pilih hok tu
[attribute$="value"] = akan pilih short value jugak. Tapi value akhir dia
[attribute*="value"] = lebih kurang je dengan yang atas. Tapi pilih yang tengah2
GRID
*grid-area
Cara nak define grid dgn pantas adalah dgn grid-area. Format dia grid-area row-start col-start row-
end col-end