Kaskadinių stiliaus lapų apžvalga su pavyzdžių stiliaus lapais
Kai kuriate svetainę nuo nulio, tai yra protinga pradėti nuo pagrindinių apibrėžtų stilių. Tai kaip pradedant nuo švarios drobės ir šviežių šepetėlių. Viena iš pirmųjų problemų, su kuria susiduria interneto dizaineriai, - tai visos interneto naršyklės . Numatytasis šrifto dydis skiriasi nuo platformos iki platformos, numatytoji šriftų šeima yra kitokia, kai kurios naršyklės apibrėžia maržas ir užpildą ant kūno žymos, o kiti - ne, ir tt Pasirūpinkite šiais nenuoseklumais nustatydami numatytuosius savo tinklalapių stilius.
CSS ir simbolių rinkinys
Visų pirma, pirma, nustatykite CSS dokumentų kodų rinkinį į utf-8 . Nors yra tikėtina, kad dauguma jūsų sukurtų puslapių yra parašyti anglų kalba, kai kurie iš jų gali būti lokalizuoti, pritaikyti skirtingam kalbiniam ir kultūriniam kontekstui. Kai jie yra, utf-8 supaprastina procesą. Išorinio stiliaus lapo simbolių rinkinio nustatymas neturės pirmenybės prieš HTTP antraštę , tačiau visais kitais atvejais jis bus.
Nustatyti simbolių rinkinį lengva. Pirmoje CSS dokumento eilutėje rašykite:
@charset "utf-8";Tokiu būdu, jei naudojate tarptautinius simbolius turinio nuosavybėje arba kaip klasės ir ID pavadinimus, stilių lenta vis tiek veiks tinkamai.
Puslapio kūno stilingas
Kitas dalykas, pagal kurį reikalaujama numatytojo stiliaus lentelių, yra stiliai, kad būtų galima nulupti maržas, užpildas ir sienos. Tai užtikrina, kad visos naršyklės pateiktų turinį toje pačioje vietoje, o tarp naršyklės ir turinio nėra jokių paslėptų tarpų. Daugeliui tinklalapių tai yra arti teksto krašto, tačiau svarbu tai pradėti, kad fono paveikslėliai ir išdėstymo skaidiniai būtų išdėstyti teisingai.
html, body {margin: 0px; padding: 0px; sienos: 0px; }Nustatykite numatytąją pirmojo ar šrifto spalvą juodai, o numatytoji fono spalva - balta. Nors tai labiausiai tikėtina pasikeis daugumoje tinklalapių dizaino, o naudojant šias standartines spalvas kūne ir HTML žymeles iš pradžių, puslapis bus lengviau skaityti ir dirbti.
html, body {color: # 000; fonas: #fff; }Numatytasis šriftų stilius
Šrifto dydis ir šriftų šeima yra kažkas, kuris neišvengiamai pasikeis, kai dizainas bus laikomas, bet pradedamas numatytu šrifto dydžiu 1 em ir numatytu šrifto šeima Arial, Geneva arba kai kuriais kitais sans-serif šriftais. Ems naudojimas užtikrina, kad puslapis būtų kuo labiau prieinamas, o ekranas yra neskaidrus.
html, body, p, th, td, li, dd, dt (font: 1em Arial, Helvetica, sans serif; }Gali būti ir kitų vietų, kuriose galite rasti tekstą, tačiau p , th , td , li , dd ir dt yra geras pradinis pagrindinio šrifto nustatymas. Įtraukite HTML ir kūno tik tuo atveju, tačiau daugelis naršyklių ignoruoja šriftų pasirinkimus, jei tik nustatote savo šriftus HTML ar kūno.
Antraštės
HTML antraštės yra svarbios, kad padėtų jūsų svetainės kontūrai ir leistų paieškos sistemoms giliau įsitvirtinti į jūsų svetainę. Be stilių, jie visi yra gana negraži, taigi nustatykite jų numatytuosius stilius ir nustatykite šriftų šeimą ir šrifto dydį kiekvienam.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Nepamirškite Nuorodų
Nuorodų spalvų stilizavimas beveik visada yra kritinė projekto dalis, tačiau jei nenurodysite jų pagal numatytuosius stilius, galite pamiršti bent vieną iš pseudo-klasių. Nustatykite juos su mažais variacijos spalva mėlyna spalva ir pakeiskite jas, kai turite nustatytos svetainės spalvų paletę.
Norėdami nustatyti nuorodas mėlynos spalvos atspalviais, nustatykite:
- nuorodos kaip mėlynos spalvos
- lankomos nuorodos kaip tamsiai mėlynos spalvos
- užveskite nuorodas kaip šviesiai mėlynas
- aktyvios nuorodos kaip dar blyškesnė
kaip parodyta šiame pavyzdyje:
a: link {color: # 00f; } a: visited {color: # 009; } a: užveskite spalvą: # 06f; } a: active {color: # 0cf; } Sukūrę nuorodas su gana nekenksminga spalvų schema, ji užtikrina, kad nepamiršiu kokių nors pamokų, o taip pat juos šiek tiek mažiau garsiai nei numatytoji mėlyna, raudona ir violetinė.Visas stiliaus lapas
Čia yra pilnas stiliaus lapas:
@charset "utf-8"; html, body {margin: 0px; padding: 0px; sienos: 0px; spalva: # 000; fonas: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: užveskite spalvą: # 06f; } a: active {color: # 0cf; }