Stil Sayfaları (CSS) 11 - Tipografi
4.3.3. Tipografi
Tipografi, web sayfalarında, kitaplarda, gazetelerde, dergilerde, televizyon programlarında ve
daha birçok alanda metinsel ifadelerin belirli bir formatta sunulması için kullanılan bir kavramdır.
Tasarımlarda metinsel ifadeler için bir format belirlemek kullanıcı, okuyucu veya izleyicileri etkilemek
için oldukça önemlidir. Yazı rengi, yazı tipi, yazı boyutu, yazı vurgusu, yazı stili, yazı gölgesi,
yazı hizası, yazı dekorasyonu, satır yüksekliği, harf aralıkları, büyük veya küçük harfe dönüşüm,
madde işaretleri gibi özellikler ile özel bir yazı formatı (tipografi) oluşturulabilir. CSS kodları
arasında tipografiyi etkileyecek birçok kod bulunmaktadır (Tablo 4.15).
Not
Margin, padding, background, border gibi özellikler de dolaylı da olsa tipografiyi
etkiler.
|
CSS Kodu ve Kullanımı |
Açıklama |
|
color: blue |
Yazının rengini
“mavi” yapar. |
|
font-family: arial
|
Yazı tipini
“arial” yapar. |
|
font-size: 16px |
Yazı boyutunu “16
piksel” yapar. |
|
font-weight: bold |
Yazıyı kalınlaştırır.
|
|
font-style: italic
|
Yazıyı eğik hâle
getirir (None değeri de alabilir.). |
|
text-shadow: 51px
71px 31px yellow |
5 piksel yatay eksende, 7 piksel dikey eksende gölgeyi
konumlandırır. Gölgenin bulanıklığı 3 pikseldir ve gölge sarı renklidir. |
|
text-align: left |
Yazıyı ve diğer
elemanları sola yaslar (Center ve right vb. değerler de alabilir.). |
|
text-decoration:
none |
Yazının çizgisini
kaldırır (Underline değeri de alır). |
|
line-height: 1.5em
|
Satır yüksekliğini
ayarlar (Piksel cinsinden de değer alabilir.). |
|
letter-spacing:
0.25em |
Harfler arasındaki
mesafeyi ayarlar (Piksel cinsinden de değer alabilir.). |
|
text-transform:
uppercase |
Yazıların harflerini tamamını büyütmek, küçültmek
veya sadece baş harflerini büyütmek için kullanılır (Lowercase, capitalize
değerlerinin alabilir.). |
|
list-style-type:square
|
Listeleme elemanlarının
işaretlerini ayarlar (Circle, upper-roman, lower-alpha değerleri de
alabilir.). |
Uygulama
Yayımlanacak makaleyi tipografi kodları kullanarak biçimlendirme işlemlerini Görsel
4.31’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.31: Makale |
1. Adım: Index.html isimli dosya oluşturunuz ve oluşturduğunuz dosyaya Stil.css
dosyasını bağlayınız.
2. Adım: <body> elemanı içine makale başlığı, makale yazarı, makale içeriği ve makale
yazılma tarihi eklemek için aşağıdaki kodları yazınız.
div class="makale">
<h2>Bugün siz de <span> yazılıma başlayarak hayatınızı değiştirin.</span></h2>
<div class="yazar_tarih">Konu Yazarı: Zeynep Sare</div>
<div class="icerik">
<p>Günümüzde yazılım, tüm dünyayı yakından ilgilendiren bir kavramdır.</p>
<p>Hiç düşündünüz mü, "hayatımızdan yazılımı çıkarsaydık ne olurdu?".
Sanırım hareket kabiliyetimiz kısıtlanır, yaşam kalitemiz düşer,
iletişim kurmada problemler yaşar
ve daha birçok konuda sıkıntılı bir hayatımız olurdu.</p>
<div class="yazar_tarih
">Oluşturma: 25 Şubat 2021 Perşembe</div>
</div>
</div>
3. Adım: Stil.css oluşturunuz ve dosya içine aşağıdaki kodları ekleyiniz.
.makale { width: 618px; margin:auto}
h2 { font-size: 2.5em; font-family: Georgia; text-shadow: 1px 1px 1px gainsboro;
letter-spacing: 0.1em; color: rgb(231, 62, 46); }
h2 span { display: block; margin-top: 0.5em; font-family: Verdana;
font-size: 0.6em; font-weight: normal; letter-spacing: 0em; text-shadow: none; }
.yazar_tarih { font-family: Georgia; color: dimgray; font-size: 0.85em;
font-style: italic; letter-spacing: 0.25em; padding-bottom: 0.5em;
border-bottom: 1px solid gainsboro; }
.yazar_tarih span { text-transform: capitalize; font-style: normal; color: #999; }
.icerik p { font-family: Verdana; line-height: 1.5em; color: black }
.icerik p:first-child { font-size: 1.25em; font-family: Georgia;
font-style: italic; letter-spacing: 0.1em; }
.icerik p:first-child:first-line { font-weight: bold; }
Hiç yorum yok