Construirea unui site web de la zero. Partea a II -a : Adăugarea de stil (CSS) .
Ce vom face
În acest capitol vom:
- Creați o foaie de stil CSS pentru site-ul
- Adăugați un link la foaia de stil în paginile noastre
Crearea unei foi de stil CSS
În dosarul demoweb, a crea un nou fișier numit site.css.
Puneți următorul cod în fișierul CSS:
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;
}Fișierul CSS de mai sus definește stilurile care vor fi utilizate pentru:
- Elementul de corp HTML <body>
- Elementul HTML cu id = „principal“
- Elementul titlu HTML <h1>
Editați pagina de start
În dosarul demoweb, modificați fișierul index.html.
Schimbarea conținutul fișierului la următoarele:
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>
Încearcă - l singur » Pagina de start de mai sus, este o copie a paginii de start din capitolul anterior.
Am adăugat o legătură într-o foaie de stil, și un <div id = „principal“> elementul pentru a defini o "section" în conținut.
Modificările sunt marcate cu roșu.
Editați pagina Despre
Pentru a finaliza munca, face aceleași modificări în about.html.
1. Adăugați un link la foaia de stil.
2. Adăugați un <div id = "principal"> elementul.
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>
Încearcă - l singur » Citeste mai mult
Citiți mai multe despre CSS nostru Tutorial CSS .