01 vun 10
Erstelle de CSS Style Sheet
Selwecht hunn mir eng getrennte Textdatei fir den HTML erstallt, Dir wäert eng Textdatei fir den CSS erstellen. Wann Dir Visuellen fir dëse Prozess brauchs, fanne mir d'éischt Tutorial. Hei sinn d'Schrëtt fir Äert CSS Stilblatt zu Notizblock ze erstellen:
- Wielt Datei> Neiegkeeten am Notepad fir eng eidel Fënster ze kréien
- Späicheren als Fichier als CSS andeems Dir op Datei drécke ... Als ...
- Navigéiere fir den Ordner my_website op Ärer Festplack
- Ändert den "Save As Type:" op "All Dateien"
- Numm Äre Fichier "styles.css" (verloossen d'Zitaten) a klickt Save
02 vun 10
Linke CSS Style Sheet op Är HTML
Wann Dir e Stylstyl fir Är Websäit kritt, musst Dir Iech op d'Websäit selwer verbannen. Dir wëllt de Link Link benotzen. Plazéiert de folgend Linktags iergendwann an der
Variablen vun Ärem Päerd.htm Dokument:03 vun 10
Fixéiert d 'Säitegoen
Wann Dir XHTML fir verschidden Browsere schreiwt, eng Saach, déi Dir léiert, ass datt se all verschidde Margen a Regele maachen fir se ze weisen. Déi bescht Method fir sécher ze sinn, datt Är Site déi selwecht ass an de meeschten Browseren ze gesinn ass net datt d'Sachen esou wéi Raiber op d'Browser-Auswiel opmaachen.
Ech léiwer e bäi meng Säiten an der ieweschter lénkser Ecke ze starten, ouni extra Fëllement oder Margin ronderëm de Text. Och wann ech d'Inhalter kennenzeléieren, setze mir d'Margen op Null, sou datt ech mat dem selweschten eegene Schiepe beginn. Fir dat ze maachen, fëllt d'folgend Saachen op Är styles.css-Dokument:
html, Kierper {
Rand: 0px;
Padding: 0px;
Grenz: 0px;
lénks: 0px;
Uewen: 0px;
}}
04 vun 10
Äert Schrëft änneren
D'Schrëft ass oft déi éischt Saach datt Dir op enger Websäit geännert wëllt. D'Standardschrëft op enger Websäit kann ugedoen, an ass eigentlech den Web-Browser selwer, also wann Dir d'Schrëft definéiert, kënnt Dir wierklech net wëssen wat Är Säit ausgesäit.
Normalerweis wärt Dir d'Schrëft op Paragrafen änneren, oder heiansdo am ganzen Dokument selwer. Fir dës Säit definéieren dës Schrëft am Header a Paragraf Niveau. Füügt der folgender Stéck zu your styles.css Dokument:
p, li {
Schrëft: 1em Arial, Helvetica, sans-serif;
}}
h1 {
Schrëft: 2em Arial, Helvetica, sans-serif;
}}
h2 {
Schrëft: 1.5em Arial, Helvetica, sans-serif;
}}
h3 {
Schrëft: 1.25em Arial, Helvetica, sans-serif;
}}
Ech hunn ugefaang mat 1em wéi meng Basisgréisst fir Absätzen a Lëscht Elementer, an dann benotzt dat fir d'Gréisst fir meng Schlësselen ze setzen. Ech erwaarden net datt eng Header deeper ass wéi h4, awer wann Dir Iech plangt wëllt Dir et och maache wëllt.
05 vun 10
Dir Är Links méi interessant
Déi Standardfaarwen fir Links sinn blo an purpurrot fir eng onvisibel an iwwerpréifter Linken. Ob dëst Standard ass, kann et net d'Faarfschema vun Äre Säiten passen, also lass eis et änneren. Mat äusseren Stiler.css Datei fügen déi folgend:
a: Link {
Schrëftfamill: Arial, Helvetica, sans-serif;
Faarf: # FF9900;
Text-Dekor: Ënnerstëtzung;
}}
a: besicht {
Faarf: # FFCC66;
}}
e: hover {
Hannergrond: #FFFFCC;
Schrëftgréisst: fett;
}}
Ech hunn dräi Linke Stile opgestallt, de a: Link als Default, a: besicht fir wann et besicht ginn ass, ech änneren d'Faarf a gëtt: e schwëtzen. Mat e: hover hunn ech den Link eng Hannergrond kritt a fett falen, fir ze betounen datt et e Link gëtt geklickt.
06 vun 10
Styling d'Navigation Section
Well mir d'Navigatioun (id = "nav") ofzeleen hunn, huele mir eis éischt. Mir brauchen ze weisen wéi wäit et breet ass an eng méi grouss Marge op der rietser Säit erofsetzen, fir datt den Haapttext net géint et opstinn. Ech hunn och eng Grenz ëmdréien.
Setzt folgend CSS op Är styles.css Dokument:
#nav {
Breet: 225px;
Ausléisen riets: 15px;
Grenz: mëttelméisseg # 000000;
}}
#nav li {
Lëscht Lëscht: keng;
}}
.footer {
Schrëftgréisst: .75em;
kloer: béid
Breet: 100%;
text-align: center;
}}
D'Lëscht vum Stilmodus befëllt d'Lëscht am Navigatiounsfeld, fir keng Bullen oder Zuelen ze hunn, an de .footer stousst d'Urheberrechter Sektioun méi kleng an am Zentrum vun der Rubrik.
07 vun 10
D'Positioun vun der Haaptspechung
Duerch Är Haaptpartnerschaft mat der absoluter Positionéierungsplaz kënnt Dir sécherlech bleiwen datt se genau wou Dir wëllt op där Websäit bleiwen. Ech hunn mäi 800px breet fir méi grouss Monitore opzehuelen, awer wann Dir e méi klengen Iwwerwachungsmodus hutt, da kéint Dir et méi schmuerer maachen.
Gitt d'folgend Saachen an Ärem styles.css Dokument:
#main {
Breet: 800px;
Uewen: 0px;
Positioun: absolut
lénks: 250px;
}}
08 vun 10
Styling Är Paragraphen
Well ech de Schrëftart hei ënnen schon gespaart hunn, wollt ech all eenzel Paragraf e puer extra "Kick" ginn fir et besser ze halen. Ech hunn dat gemaach, andeems Dir eng Grenz op der Uewerfläch leeft, déi den Paragrapse méi wéi nëmmen d'Bild eleng huet.
Gitt d'folgend Saachen an Ärem styles.css Dokument:
.topline {
Grenzgrenz: décke massiv FFCC00;
}}
Ech hu beschloss, et als Klass ze maachen, "Topline" genannt, an net nëmmen all Paragrafen op dës Manéier ze definéieren. Dëst kann, wann ech décidéiert hunn, e Paragrapus ouni eng gieler Zeil ze hunn, kann ech einfach aus der Klass = "TopLinn" am Paragraf mam Zuch agoen an et wäert net déi Top Grenz hunn.
09 vun 10
Styling the Images
Biller weisen normalerweis eng Grenz ëmzegoen, dëst ass net ëmmer sichtbar, ausser de Bild ass e Link, awer ech hunn eng Klass am CSS-Stylesheet ze hunn déi automatesch d'Grenz ofgeschalt huet. Fir dës Stilblock, hunn ech d'Klasse "noborder" gegrënnt, an déi meescht Biller vun dësem Dokument sinn Deel vun dëser Klass.
Deen anere speziellen Deel vun dësen Biller sinn hire Stand op der Säit. Ech wollt se als Deel vum Paragraf hunn an ouni Tabellen fir se ze richten. Déi einfachste Manéier ze maachen ass d'Float CSS Eegeschafung ze benotzen.
Gitt d'folgend Saachen an Ärem styles.css Dokument:
#main img {
fléien: lénks;
margin-right: 5px;
Margin-Bottom: 15px;
}}
.noborder {
Grenz: 0px keng;
}}
Wéi Dir gesitt, sinn och Margeeigenschaften déi op d'Biller gesat ginn, fir sécher ze stellen, datt se net géint den Schwemm ënnerbrach ginn, wat niewt se an den Absätzen ass.
10 vun 10
Kuckt Iech un Är komplet Säit
Wann Dir Är CSS gespäichert hutt, kënnt Dir d'Péit.htm Säit an Ärem Webbrowser opzelueden. Är Säit sollt kucken wéi déi an dësem Bild, mat Biller déi ausgeriicht sinn an déi Navigatioun ass richteg op der linker Säit vun der Säit plazéiert.
Gitt dës selwëcht Schrëtt fir all Ären internen Säiten fir dës Säit. Dir wëllt eng Säit fir all Säit an Ärer Navigatioun.