Sıfırdan bir web sitesi oluşturma. Bölüm II: tarzı ekleme (CSS) .
Ne yapacağız
biz olacak bu bölümde:
- site için bir CSS stil sayfası oluşturun
- Bizim sayfalarında stil sayfasına bağlantı ekleme
Bir CSS stil sayfası oluşturma
Demoweb klasöründe, site.css adlı yeni bir dosya oluşturun.
CSS dosyası içine aşağıdaki kodu koyun:
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;
}CSS dosyası üzerinde kullanılacak stiller tanımlar:
- HTML gövde elemanı <body>
- kimliğine sahip HTML öğesi = "main"
- HTML başlığı elemanı <h1>
Ana Sayfa düzenle
Demoweb klasöründe, dosya index.html düzenleyin.
Aşağıdaki Dosyanın içeriğini değiştirin:
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>
Kendin dene " Yukarıdaki ana sayfası, bir önceki bölümde gelen ana sayfanın bir kopyasıdır.
Bir stil sayfasına bir bağlantı ekledik ve eleman a <= "main" div id> Bir tanımlamak için "section" içeriğindeki.
değişiklikler kırmızı işaretlenmiştir.
Hakkında Sayfa düzenle
İşinizi tamamlamak için, about.html aynı değişiklikleri yapmak.
1. stil sayfasına bir bağlantı ekleyin.
2. Bir <div id = "main"> öğesini ekleyin.
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>
Kendin dene " Daha fazla oku
Bizim CSS hakkında daha fazlasını okuyun CSS Öğreticisi .