Tinklalapio vizualųjį stilių ir išdėstymą diktuoja CSS arba kaskadinio stiliaus lapai. Tai yra dokumentai, kurie formuoja tinklalapio HTML žymėjimą, teikia žiniatinklio naršykles su instrukcijomis, kaip rodyti puslapius, kurie atsiranda dėl šio žymėjimo. CSS tvarko puslapio išdėstymą, taip pat spalvą, fono vaizdus, spausdinimą ir dar daugiau.
Jei pažvelgsite į CSS failą, pamatysite, kad kaip ir bet kokia žymėjimo ar kodavimo kalba, šie failai turi tam tikrą sintaksę. Kiekvienas stiliaus lapas susideda iš kelių CSS taisyklių. Šios taisyklės, visiškai paimtos, yra tai, kokie stiliai yra svetainėje.
CSS taisyklės dalis
CSS taisyklė susideda iš dviejų atskirų dalių - atrankos ir deklaracijos. Parinkiklis nustato, kas yra stiliaus puslapyje ir deklaracija yra kaip ji turėtų būti stiliaus. Pavyzdžiui:
p {
spalva: # 000;
}
Tai CSS taisyklė. Pasirinkimo dalis yra "p", kuri yra elementų parinkiklis "paragrafams". Todėl visoje svetainės dalyje pasirinkite parinktis ir pateikite jiems šį stilių (nebent yra pastraipų, kurių konkretesnius stilius taiko kitur jūsų CSS dokumente).
Taisyklės dalis, kurioje rašoma "color: # 000;" yra tai, kas vadinama deklaracija. Ši deklaracija yra sudaryta iš dviejų dalių - nuosavybės ir vertės.
Turtas yra šios deklaracijos "spalvotas" gabalas. Tai diktuoja, kuris selektoriaus aspektas bus keičiamas vizualiai.
Vertė yra tai, kas bus pakeista pasirinkta CSS nuosavybė. Mūsų pavyzdyje mes naudojame šešioliktainę reikšmę # 000, kuri yra CSS santrumpa "juoda".
Taigi, naudodamiesi šia CSS taisyklėmis, mūsų puslapyje būtų parodytos juodos spalvos šrifto spalvos.
CSS nuosavybės pagrindai
Kai rašote CSS savybes, negalite jų padaryti, kaip jums atrodo tinkama. Dėl atvejų "spalva" yra tikroji CSS nuosavybė, todėl galite ją naudoti. Tai yra tai, kas lemia elemento teksto spalvą. Jei bandėte naudoti "teksto spalvą" arba "šrifto spalvą" kaip CSS savybes, tai nepavyko, nes jie nėra tikrosios CSS kalbos dalys.
Kitas pavyzdys yra nuosavybė "fono paveikslėlis". Ši savybė nustato vaizdą, kuris gali būti naudojamas fone, pavyzdžiui:
.logo {
fono paveikslėlis: url (/images/company-logo.png);
}
Jei bandėte naudoti "fono paveikslėlį" arba "fono grafiką" kaip nuosavybę, jie nepavyks, nes dar kartą jie nėra tikrosios CSS savybės.
Kai kurios CSS ypatybės
Yra keletas CSS savybių, kurias galite naudoti svetainės stiliui. Kai kurie pavyzdžiai:
- Pasienis (įskaitant sienų stilius, sienų spalva ir pasienio plotis)
- Įklijavimas (įskaitant užpildą, užpildą į dešinę, užpildą-dugną ir užpildymą - į kairę)
- Maržos (įskaitant maržos viršutinę dalį, maržos dešinę, maržos apačią ir maržą kairėje)
- Šrifto šeima
- Šrifto dydis
- Fono spalva
- Plotis
- Aukštis
Šios CSS ypatybės yra puikus, kurios gali būti naudojamos kaip pavyzdžiai, nes jie visi yra labai paprasti ir, net jei jūs nežinote CSS, galbūt jūs galite atspėti, ką jie daro priklausomai nuo jų pavadinimų.
Yra ir kitos CSS savybės, su kuriomis susidursite, kurios gali būti ne tokios akivaizdžios, kaip jos veikia pagal jų vardus:
- Plūdė
- Aiškus
- Perpildymas
- Teksto konvertavimas
- Z indeksas
Kai gausite daugiau dėmesio į interneto dizainą, susidursite (ir naudosite) visas šias savybes ir dar daugiau!
Savybės Reikia Vertybių
Kiekvieną kartą, kai naudojate nuosavybę, turite suteikti jai vertę - ir tam tikros savybės gali priimti tik tam tikras vertes.
Mūsų pirmame spalvų nuosavybės pavyzdyje turime naudoti spalvų vertę. Tai gali būti šešioliktainioji vertė , RGBA vertė ar net spalvų raktiniai žodžiai . Bet kuri iš šių verčių veiktų, tačiau jei naudosite šį žodį "niūrus", tai nieko nedarytų, nes, kaip apibūdinantis, nes tas žodis gali būti, jis nėra pripažintas CSS reikšmė.
Mūsų antrasis "fono paveikslėlio" pavyzdys reikalauja, kad vaizdo takelis būtų naudojamas norint gauti faktinį vaizdą iš jūsų svetainės failų. Tai reikalinga vertė / sintaksė.
Visos CSS savybės turi vertes, kurias tikisi. Pavyzdžiui:
- Pasienio spalva tikisi spalvos vertės
- Sienų dydis tikisi dydžio vertės, pvz., Taškų ar procentų
- Pasienio stilius tikisi, kad vienas iš rezervuotų stilių, naudojamų šiam turtui, yra "tvirtas"
Jei peržiūrėsite CSS savybių sąrašą, sužinosite, kad kiekviena iš jų turi tam tikrų verčių, kurias jie naudos norėdami kurti jiems skirtas stilius.
Redagavo Jeremy Girard