Ki sa ki Cascading Style Sheets (CSS)?
Li pi ba a pou yon eksplikasyon konplè sou fason kaskad stylesheets travay. Nou montre aplikasyon nou yo nan tèt paj la pou li fasil pou jwenn ak itilize. Si w ap li atik sa a pa imel oswa manje, klike sou konprese CSS ou.
Sòf si w ap aktyèlman devlope sit, ou ka pa konplètman konprann fèy style kaskad (CSS). CSS se yon langaj style ki itilize pou dekri aparans ak fòma yon dokiman ekri HTML or XML. CSS ka itilize pou presize estil pou divès eleman tankou font, koulè, espas, ak layout. CSS pèmèt ou separe prezantasyon dokiman HTML ou a ak kontni li yo, sa ki fè li pi fasil kenbe ak mete ajou style vizyèl nan sit entènèt ou a.
Estrikti langaj CSS
Jounal selektè se eleman HTML ou vle style, ak la pwopriyete ak valè defini estil ou vle aplike nan eleman sa a:
selector {
property: value;
}
Pou egzanp, CSS sa yo pral fè tout <h1>
eleman sou yon paj gen yon koulè wouj ak yon gwosè font 32px:
CSS
h1 {
color: red;
font-size: 32px;
}
Sòti
Tit
Ou kapab tou presize CSS pou yon ID inik sou yon eleman:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}
Sòti
Oswa aplike yon klas atravè plizyè eleman:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}
Sòti
mwen vle rekò yon mo nan tag span.
Ou ka mete CSS nan dokiman HTML ou nan twa fason:
- Inline CSS, lè l sèvi avèk la
style
atribi sou yon eleman HTML - Entèn CSS, lè l sèvi avèk yon
<style>
eleman nan<head>
nan dokiman HTML ou a - CSS ekstèn, lè l sèvi avèk yon dosye .css separe ki lye ak dokiman HTML ou lè l sèvi avèk
<link>
eleman nan<head>
nan dokiman HTML ou a
CSS reponn
CSS se ekstrèmman fleksib epi yo ka itilize yo ajiste ekspozisyon an nan eleman ki baze sou rezolisyon ekran, konsa ou ka gen menm HTML la men bati li. reponn nan rezolisyon aparèy la:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}
CSS konpresyon
Ou ka wè nan egzanp ki anwo a ke gen yon kòmantè, yon rechèch medya, ak plizyè estil ki itilize espas ak liy liy yo òganize gade nan CSS la. Li se yon bon pratik pou minify oswa konprese CSS ou sou sit ou a diminye gwosè dosye epi, answit, tan li pran pou mande ak rann manier ou. Se pa yon ti kantite... ou ka wè plis pase 50% ekonomi sou kèk nan egzanp ki anwo yo.
Anpil konfigirasyon sèvè ofri zouti ki pral otomatikman konprese CSS sou vole ak kachèt fichye minified la pou ke ou pa oblije fè li manyèlman.
ki sa ki SCSS?
Sassy CSS (SCSS) se yon preprosesè CSS ki ajoute plis fonksyonalite ak sentaks nan lang CSS la. Li pwolonje kapasite CSS yo lè li pèmèt itilizasyon varyab, mixin, fonksyon, ak lòt karakteristik ki pa disponib nan CSS estanda.
Avantaj SCSS
- Amelyore antretyen: Avèk itilizasyon varyab, ou ka estoke valè yo nan yon sèl kote epi reitilize yo nan tout fèy style ou a, sa ki fè li pi fasil kenbe ak mete ajou estil ou yo.
- Pi bon òganizasyon: Avèk mixins, ou ka gwoupe epi reitilize seri estil, fè fèy style ou a pi òganize epi pi fasil pou li.
- Ogmante fonksyonalite: SCSS gen ladan anpil karakteristik ki pa disponib nan CSS estanda, tankou fonksyon, estrikti kontwòl (egzanp si/lòt), ak operasyon aritmetik. Sa a pèmèt yon manier plis dinamik ak ekspresif.
- Pi bon pèfòmans: dosye SCSS yo konpile nan CSS, sa ki ka amelyore pèfòmans lè yo diminye kantite kòd ki bezwen analize pa navigatè a.
Dezavantaj SCSS
- Koub aprantisaj: SCSS gen yon sentaks diferan de CSS estanda, epi w ap bezwen aprann nouvo sentaks sa a anvan ou ka itilize li efektivman.
- Konpleksite adisyonèl: Malgre ke SCSS ka fè fèy style ou a pi òganize epi pi fasil pou kenbe, li kapab tou entwodui plis konpleksite nan baz kod ou a, sitou si ou pa abitye ak nouvo karakteristik ak sentaks yo.
- Zouti: Pou itilize SCSS, w ap bezwen yon du pou tradui kòd SCSS ou an CSS. Sa a mande konfigirasyon adisyonèl ak zouti, ki ka yon baryè pou antre pou kèk devlopè.
Nan egzanp sa a anba a, kòd SCSS la sèvi ak varyab pou estoke valè ($primary-color
ak $font-size
) ki ka reyitilize nan tout fèy style la. Kòd CSS ki pwodui nan kòd SCSS sa a ekivalan, men li pa genyen varyab yo. Olye de sa, valè varyab yo itilize dirèkteman nan CSS la.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}
Yon lòt karakteristik nan SCSS ki demontre nan egzanp sa a se estil enbrike. Nan kòd SCSS la, la h1
estil yo enbrike nan la body
estil, ki pa posib nan CSS estanda. Lè kòd SCSS la konpile, estil enbrike yo elaji nan estil separe nan kòd CSS la.
An jeneral, SCSS bay anpil avantaj sou CSS estanda, men li enpòtan pou w konsidere konpwomi yo epi chwazi bon zouti pou pwojè w la dapre bezwen w ak kontrent w yo.