Hvordan du oppretter sidestiler for HTML5 og CSS3 nettstedsmalen - dummies

Med et HTML-rammeverk på plass, kan du begynne å jobbe på CSS for å lage sidestiler på nettstedet ditt. Den beste måten å inkorporere CSS3 på er å følge disse trinnene:

1. Begynn med sidemalerdiagrammet.

   Det burde ha all den informasjonen du trenger.

2. Test ditt CSS i en nettleser.

   Begynn med en enkel CSS-implementering som sikrer at du har de riktige navnene til alle sidene. Deretter modifiserer hvert element i henhold til designdokumentet ditt, testing mens du går.

3. Implementer CSS fra diagrammet ditt.

   Du bør være implementere designet du allerede har laget, ikke utforme siden. (Det skjedde allerede i diagrammeringsprosessen.)

4. Lagre designet.

   For flersidige prosjekter er ekstern CSS i en egen fil definitivt veien å gå. Når du jobber, lagre CSS på vanlig måte, slik at nettleseren vil kunne lese den.

5. Test og tweak.

   Tingene er aldri helt hva de virker med CSS fordi nettleserne ikke overholder normer. Du må teste og justere på andre nettlesere. Hvis brukere med eldre teknologier er et problem, må du kanskje bruke et sekundært stilark for eldre versjoner av IE. Du vil kanskje også lage en mobilversjon.

6. Gjenta for andre maler.

   Gjenta denne prosessen for hver av de andre malene du identifiserte i sidediagrammet.

Resultatet av denne prosessen skal være en rekke CSS-filer som du enkelt kan gjenbruke på hele nettstedet ditt.

Her er CSS-koden for primærsiden:

body {background-color: # 000000;} h1 {text-align: center; font-familie: sans-serif; farge: hvit; tekstskygge: 0 0 10px svart;} #all {bakgrunnsfarge: hvit; grense: 1 px solid svart; bredde: 800px; margin-topp: 2em; margin-left: auto; margin-høyre: auto; min-høyde: 600px;} #heading {bakgrunnsfarge: # A11204; bakgrunnsbilde: url ("cbBackground. png"); farge: #FFFFFF; høyde: 100px; skriftstørrelse: 2em; padding-left: 1em; grensebunn: 3px solid svart; margin-topp: -1. 5em;} #menu {bakgrunnsbilde: url ("cbBackground. Png"); bakgrunnsfarge: # A11204; farge: #FFFFFF; flyte: venstre; bredde: 100px; min-høyde: 500px;} #menu li {listestil-type: none; margin-left: -2em; margin-høyre:. 5em; text-align: center;} #menu en {color: #FFFFFF; skjerm: blokk; grense: # A11204 3px utgang; tekst-dekorasjon: ingen;} #meny a: svever {grense: # A11204 3px innskudd;}. innhold {border: 3px double # A11204; margin: 1em; margin-venstre: 110px; padding-left: 1em; polstring-bunn: 1em; polstring-høyre: 1em; border-radius: 5px; bokseskygge: 5px 5px 5px grå;}.innhold h2 {bakgrunnsfarge: # A11204; bakgrunnsbilde: url ("cbBackground. png"); farge: #FFFFFF; Text-align: right;} #footer {color: #FFFFFF; bakgrunnsfarge: # 000000; grense: 1px solid # A11204; flyte: venstre; klare: begge; bredde: 100%; text-align: center;}