Der Aufbau einer Website von Grund auf neu Teil II. Das Hinzufügen Stil (CSS).
Was wir tun werden
In diesem Kapitel werden wir:
- Erstellen Sie ein CSS-Stylesheet für die Website
- Fügen Sie einen Link zu dem Stylesheet auf unseren Seiten
Erstellen Sie ein CSS-Stylesheet
Im demoweb Ordner erstellen Sie eine neue Datei mit dem Namen site.css.
Setzen Sie den folgenden Code in der CSS-Datei:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}Die CSS-Datei definiert über die Stile angewendet werden:
- Der HTML-body-Element <body>
- Das HTML-Element mit id = "main"
- Die HTML-Überschriften-Element <h1>
Bearbeiten Sie die Homepage
Im demoweb Ordner, bearbeiten Sie die Datei index.html.
Ändern Sie den Inhalt der Datei auf die folgenden:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Versuch es selber "Die Startseite oben, ist eine Kopie von der Homepage aus dem vorigen Kapitel.
Wir haben einen Link zu einem Stylesheet hinzugefügt, und ein <div id = "main"> Element ein "Abschnitt" in den Inhalt zu definieren.
Die Änderungen sind rot markiert.
Bearbeiten Sie die Seite Info
Zur Vervollständigung Ihrer Arbeit, tun die gleichen Änderungen in about.html.
1. Fügen Sie einen Link zu dem Stylesheet.
2. Fügen Sie ein <div id = "main"> Element.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Versuch es selber "Weiterlesen
Lesen Sie mehr über CSS in unserem CSS Tutorial .