Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar
hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi
özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki
esnekliğidir.
Stil Şablonlarının Komut Yapısı
Bir stil dokümanı <style type="text/css">…..</style> ifadeleri arasına yazılır. Stil
kısmı HTML dokümanının <head>…</head> aralığında tanımlanır. Stil tanımlaya
başlarken istenirse “<!--” ve “-->” işaretleri kullanılır. Bu işaretler, CSS tanımayan
tarayıcılarların bu kısmı geçmesini sağlar.
<html>
<head>
<style type=”text/css”>
<!--
……….
-->
</style>
</head>
Stil Şablonlarının Çeşitleri, Seçiciler
Stil Şablonlarının Çeşitleri
Stil şablonları üç çeşittir. Bunlar, Yerel CSS, Genel CSS, Harici CSS’ dir.
Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümüne yazılır.
Sadece bir kereliğine, yazıldıkları yerde etkili olur.
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS
Kullanımı</h2>
</body>
</html>
Genel stil şablonları: HTML belgesinin head bölümüne yazılır ve belgen
tümünü etkiler.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</style>
</head>
<body>
<h2>Web Tasarımı </h2>
</body>
</html>
Harici stil şablonları.
Uygularken, stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız.
Fakat bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya
yazarız ve css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> … </head> etiketleri arasına
<link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde ekleriz.
Yanda verilen kodları not defterine yazıp stil.css
olarak kaydediniz.
h1 {font-size:13pt; color:green}
h2 {font-size:20pt; color:blue}
h3 {font-size:15pt; color:red}
Daha sonra HTML dosyasını hazırlıyoruz.
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Stil Şablonları</h2>
<h2>Stil Şablonları</h2>
<h3>Stil Şablonları</h2>
</body>
</html>
Seçiciler (Selectors)
Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi etiketlerin mevcut özelliklerini aynı
bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style
özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id
seçicisi ve sınıf seçicisi.
Id Selectors(Id Seçicileri)
<html>
<head>
<title>Id seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-
equiv=Content-Type>
<style type="text/css">
<!--
#idSecici
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
-->
</style>
</head>
<body>
<u id=idSecici>ID Seçiciler</u>
</body>
</html>
Class Selectors (Sınıf Seçicileri):
<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
h2.yesil {color:green}
h2.gri {color:gray}
-->
</style>
</head>
<body>
<h2 class=yesil>YEŞİL sınıf seçicisi ile </h2>
<br>
<h2 class=gri>GRİ sınıf seçicisi ile </h2>
</body>
</html>
;))
YanıtlaSilssç heryerde #Y.B
YanıtlaSilİyi Sayılır Pehh .d
YanıtlaSilharici stil şablonları başlığının altından ücüncü satırda head yazarken H e a d > şeklinde yazılmış < h e a d > olması gerekirken bunu belirtmek istedim teşekkürler özet : "<" karakteri yazılmayı unutulmuş
YanıtlaSilbaşarılı kısa ve öz olmuş
YanıtlaSilhttps://strony-www.net/
YanıtlaSil