Sådan oprettes en CSS webside

August 7

De fleste hjemmesider i dag bruger en kombination af CSS (Cascading Style Sheets) og HTML (Hypertext Markup Language) eller XHTML (Extensible Hypertext Markup Language). Mens HTML / XHTML håndtere strukturen og indholdet af dit websted, CSS bestemmer stil og udseende af elementer på din side.

Instruktioner

Oprettelse af filer og mapper

1 Før du begynder at skrive din stylesheet, vil du ønsker at opsætte det grundlæggende layout til din hjemmeside. For at gøre dette, kopiere og indsætte følgende struktur i en tom notesblok dokument:

<Html>

<Head>
<Title> Basic CSS Tutorial </ title>
</ Head>

<Body>
</ Body>

</ Html>

2 Når du har kopieret og indsat teksten, gemme filen som \ "index.html \" i en ny mappe kaldet \ "CSS Website. \" Når du gemmer, skal du sørge for, at filtypen er \ ". Html \".

3 Åbn et nyt dokument i din tekst editor og øverst, skriver følgende:

/ * Enkel CSS Website

Master Stylesheet
Author: Your Name Here

* /

Denne begyndelsen af ​​dit stylesheet erklærer titlen på typografiark og forfatteren. Selvom det ikke er afgørende, er det en god praksis og bør indgå i toppen af ​​hver CSS-fil.

4 Når du har skrevet teksten, gem denne fil som \ "style.css \" i din mappe mærket \ "CSS Website \". Sørg for at ændre filtypen fra \ ". Html \" til \ ". Css \". Dette er absolut nødvendigt, da din stylesheet ikke vil fungere korrekt uden \ ". Css \" udvidelse.

5 Nu hvor du har dine HTML og CSS-dokumenter, skal du forbinde dem. For at gøre dette, tilføje et par pladser under linjen \ "<title> Grundlæggende CSS Website </ title> \" og skriv følgende:

<Link rel = \ "stylesheet \" type = \ "text / css \" href = \ "style.css \" />

Når du har gjort dette, vil dit stylesheet og markup være knyttet. Du kan nu begynde at opbygge dit websted ved hjælp af CSS.

Skrivning Markup og CSS

6 Det første, vi vil gøre med CSS, er at skabe en grundlæggende sidelayout. I dit \ "index.html \" mellem <body> </ body> tags, skriver følgende:

<Div id = \ "container \"> <! - Beholderen rummer alle siderne indhold ->

<Div id = \ "header \">

</ Div>

<Div id = \ "kolonnen-1 \">

</ Div>

<Div id = \ "kolonne-2 \">

</ Div>

<Div id = \ "footer \">

</ Div>

</ Div> <! - Beholderen DIV ender her ->

Denne kode opretter elementer kaldet \ "divs, \", som er en forkortelse af divisioner. Disse usynlige kasser wrap omkring dit websteds indhold. Med din stylesheet, kan du fortælle disse kasser, hvor der skal vises på siden.

7 Nu, vi vil gøre et par ting frem. I dit stylesheet mærket style.css, skriver følgende under din erklæring:

body {
margin: 0

padding: 0

}

container {

bredde: 960px

margin: auto

}

header {

baggrund: # 000

højde: 250px

}

Vi har tilføjet en masse her, så lad os bryde ned, hvad vi har gjort. Først sætter vi grænserne og polstring af browservinduet til 0. Dette sikrer, at vores hjemmeside er flugter med browserens vindue og ikke tilføjer unødvendige mellemrum.

Dernæst gav vi vores container DIV en bredde og sætte dens margin til auto. Du vil opdage, at beholderen DIV indeholder alle de elementer på en side. Ved at sætte margin til auto, vi fortæller denne boks og dens indhold til at centrere i browservinduet. Bredden, 960px, fortæller boksen hvordan bred til at være. Dette kan ændres, dog huske på, at den gennemsnitlige bruger har en 1024px skærm bredde.

Endelig har vi tilføjet nogle stil til header DIV. Vi har indstillet sin baggrundsfarve til sort (ved hjælp af hex kode # 000), og givet det en højde på 250px.

Når du vist dit \ "index.html \" fil i en browser, skal du nu se en sort boks, der er 250px høj og flugter med toppen af ​​vinduet.

8 Dernæst vil vi afslutte styling resten af ​​indholdet bokse. Skriv følgende i din style.css fil:

kolonne1 {

flyde: venstre

klar: højre

baggrund: # 0099ff

bredde: 480px

højde: 350 pixel

}

kolonne2 {

float: højre

baggrund: # 999

bredde: 480px

højde: 350 pixel

}

footer {

klar: både

baggrund: # 555

højde: 50px

}

Du vil bemærke, at ud over at ændre på baggrund af disse bokse, har vi også tilføjet et par flere elementer: float, klar, og bredde. Flyderen element fortæller boksen hvilken side at gå til. I dette eksempel, vi fortæller kolonne1 boksen til at flyde eller flytte til venstre og den kolonne2 boksen til at flyde eller flytte til højre. Den klare element på den første kolonne, giver mulighed for det andet felt skal vises direkte ved siden af ​​den. Bredden ejendom tilsættes til disse to kolonner er at bestemme, hvordan de udfylde boksen. Som standard (tom) flød kasser vil ikke vise, medmindre givet en bredde.

9 Nu, hvor du kan se dine fire kasser, er det tid at begynde at tilføje og styling vores indhold. I dit \ "Index.html \" fil, skriver følgende:

1.) Mellem <div id = \ "header \"> </ div> tags, skriver: <p> Grundlæggende CSS Tutorial </ p>.

2.) Mellem <div id = \ "kolonne1 \"> </ div> tags, skriver: <p> Dette er en grundlæggende tutorial om brugen af ​​Cascading Style Sheets </ p>..

3.) Mellem <div id = \ "kolonne2 \"> </ div> tags, skriver: <p> Denne tutorial blev skabt af forfatteren og følges af mig </ p>..

4.) Mellem <div id = \ "footer \"> </ div> tags, skriver: <p> 200X mig. Alle rettigheder forbeholdes. </ P>.

Det, vi har gjort, er tilføjet noget tekst til vores hjemmeside, der er klar til styling. Nu skal du gå tilbage til din \ "style.css \" fil, og vi vil style vores tekst.

10 Med din \ "style.css \" fil åben, skriver følgende under de eksisterende egenskaber:

header p {

font-family: Arial, Helvetica, sans-serif

font-size: 30px

text-align: top

farve: #fff

tekst-transform: uppercase

}

kolonne1 p {

font-family: Arial, Helvetica, sans-serif

font-size: 18px

farve: #fff

tekst-transform: kapitalisere

}

kolonne2 p {

font-family: Arial, Helvetica, sans-serif

font-size: 18px

farve: #fff

}

footer p {

font-family: Arial, Helvetica, sans-serif

font-size: 14px

farve: #fff

}

Vi har gjort en masse, så lad os tage et kig på hvad der er blevet tilføjet. Først blev al teksten givet tre lignende egenskaber: font-family, skriftstørrelse og farve. Den font-family ejendom definerer, hvad skrifttype teksten vil blive vist i. Font-størrelse indstiller størrelsen af ​​teksten, og farven sætter farven. En anden egenskab tilføjet til header og kolonne 1 tekst er: tekst-transformere. Dette giver dig mulighed for at styre kapitalisering af din tekst. For headeren, vi sat al tekst som store bogstaver og i kolonne 1, er det første bogstav i hvert ord med stort.


relaterede artikler