Web Tasarım Dersleri Metin Girintileme

Web Tasarım Dersleri Metin Girintileme, Web Tasarım Dersleri, Metin Girintileme, Text-Indentation, Satırlar Arası Yükseklik, Line-Height, Sözcükler Arası Mesafe, Word-Spacing, Harfler Arası Mesafe, Letter-Spacing, Harf Boyutları, Text Transformation, Web tasarım dersleri harf düzenleme, Web Tasarım dersleri yazı düzenleme, web tasarım dersleri metin düzenleme, web tasarım dersleri metin düzenleme kodları, web tasarım dersleri yazı kodları, web tasarım ile ilgili bilgiler, web tasarım dersi bul, web tasarım dersleri, web site tasarım kodları ile ilgili makalemize hoş geldiniz.

İlk konumuz Metin Girintileme (Text-İndentation)

Metnin ilk satırını içerden başlatmak amacıyla kullanılır.

<head>

<style type=”text/css”>

p{text-indent:40px};

</style>

</head>

<body>

<p> Metnin ilk satırını içerden başlatmak için kullanılır. Bizim örneğimizde ilk satır soldan 40px içerden başlamaktadır. </p>

</body>

Web Tasarım Dersleri Metin Girintileme

Web Tasarım Dersleri Metin Girintileme

Satırlar Arası Yükseklik (Line-Height)

Satırlar Arası Yükseklik (Line-Height)

Metnin satırları arasındaki mesafei belirlemek için kullanılır. Normal piksel (px) veya yüzdelik(%) değer alabilir.

<head>

<style type=”text/css”>

p.dar {line-height: 80%};

p.normal {line-height:normal};

p.genis {line-height:200%};

</style>

</head>

<body>

<p class=”dar”>

Bu bizim ilk duruma örnek vermek için yaptığımız paragraftır. Gördüğünüz gibi satır araları normalden daha dardır.

</p>

<p class=”normal”>

Bu bizim ikinci duruma örnek vermek için yaptığımız paragraftır. Gördüğünüz gibi satır araları normaldir.

</p>

<p class=”genis”>

Bu bizim üçüncü oturuma örnek vermek için yaptığımız paragraftır. Gördüğümüz gibi satır araları normalden daha geniştir.

</p>

</body>

Sözcükler Arası Mesafe (Word-Spacing)

Sözcükler Arası Mesafe (Word-Spacing)

Metindeki sözcüklerin birbirleri arasındaki mesafeyi ayarlamak istediğimizde kullanırız.

<head>

<style type=”text/css”>

p{word-spacing:30px;}

</style>

</head>

<body>

<p> Kelimelerin arasını baya bir açtık ki bu özelliğin işlevi daha iyi anlaşılsın

</p>

</body>

Harfler Arası Mesafe (Letter-Spacing)

Harfler Arası Mesafe (Letter-Spacing)

Evet  bu kadar da olmaz demeyin lütfen 🙂 CSS’in bize çok detaylı biçimlendirme imkanları sunduğunu söylemiştim. Ayrıca hiç ummadığınız bir anda bu özellik de işinize kesinlikle yarayacaktır.

<html>

<head>

<style type=”text/css”>

p{letter-spacing: 10px;}

</style>

</head>

<body>

<p>

Bu harfler arasına kara kedi girmemiş sadece size bu CSS özelliğini göstermek içinn böyle yapıyorlar 🙂

</p>

</body>

</html>

Harf Boyutları (Text Transformation)

Harf Boyutları (Text Transformation)

Metindeki büyük ve küçük harfleri birbirlerine çevirmek için kullanılır.

uppercase: Küçük harfleri büyük harflere çevirir.

lowercase: Büyük harfleri küçük harflere çevirir.

capitalize: Sadece kelimelerin baş harflerini büyütür.

<html>

<head>

<style type=”text/css”>

p.buyuk { text-starsform:uppercase};

p.kucuk{text-transform:lowercase};

p.basharf {text-transform:capitalize};

</style>

</head>

<body>

<p class=”buyuk”> küçük yaz o büyütsün </p>

<p class=”kucuk”> Büyük yaz o küçültsün </p>

<p class=”basharf”> biz küçük yazdık o sadece kelimelerin baş harflerini büyüttü. </p>

</body>

</html>

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

 

Web Tasarım Dersleri Metin Girintileme
Bu yazıya oy ver

About the Author:

 
%d blogcu bunu beğendi:
EV SSL