Hizmetlerimiz hakkında bilgi almak için tıklayın.
CSS (Cascading Style Sheets) bir web sayfasının tasarımını belirleyen ve HTML (Hyper Text Markup Language) etiketlerinde yazılmış olan içeriklerin nasıl görüneceğini tanımlayan bir stylesheet dildir. CSS, web sayfalarının profesyonel görünmesi ve tasarımının özelleştirilmesi için kullanılan birçok araca sahiptir. CSS kullanarak yazıların renkleri, hizalamaları, fontları vb. düzenlenebilir. İşte bazı popüler CSS yazı formatları ve özellikleri.
color Özelliği
Bu özellik, metnin rengini belirler. Color özelliğinin alabileceği değerler:
- Hexadecimal değerler (#000000 ile #ffffff arası)
- Mobile RGB değerleri (rgb(255, 255, 255))
- İsim değerler (red, blue, green vb.)
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<p>Bu sıradan bir paragraf. Bu metnin mavi olduğuna dikkat edin.
Bir sayfa için varsayılan metin rengi, gövde seçicide tanımlanır.</p>
<p>Bir diğer paragraf.</p>
</body>
</html>
Görünüm:
Bu bir başlıktır.
Bu sıradan bir paragraf. Bu metnin mavi olduğuna dikkat edin. Bir sayfa için varsayılan metin rengi, gövde seçicide tanımlanır.
Bir diğer paragraf.
Yazı rengi ve Arkaplan Rengi
Bu örnekte, hem background-color özelliğini hem de color özelliğini tanımlıyoruz:
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Bu bir başlık.</h1>
<p>Bu bir gri arkaplana ve mavi renk bir metine sahip yazı.</p>
<div>Bu bir div.</div>
</body>
</html>
Görünüm:
Bu bir başlık.
Bu bir gri arkaplana ve mavi renk bir metine sahip yazı.
text-align
Bu özellik, belirtilen div ya da elementin içindeki yazının hizalanmasını belirler.
Text-align özelliğinin alabileceği değerler:
- Left (sola hizalanır.)
- Right (sağa hizalanır.)
- Center (ortaya hizalanır.)
- Justify (kelimeler eşit aralıklarla dağılır.)
Aşağıdaki örnek ortaya hizalanmış ve sola ve sağa hizalanmış metni gösterir (metin yönü soldan sağa ise sola hizalama varsayılandır ve metin yönü sağdan sola ise sağa hizalama varsayılandır):
Örnek:
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
<h1>Başlık 1 (center)</h1>
<h2>Başlık 2 (left)</h2>
<h3>Başlık 3 (right)</h3>
<p>Yukarıdaki üç başlık ortaya, sola ve sağa hizalanmıştır.</p>
Görünüm:
Başlık 1 (center)
Başlık 2 (left)
Başlık 3 (right)
text-align özelliği "justify" olarak ayarlandığında, her satır uzatılır, böylece her satır eşit genişliğe sahip olur ve sol ve sağ kenar boşlukları düz olur (dergi ve gazetelerdeki gibi):
Örnek:
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
<div>
Bu bir css örneğinde text-align:justify kullanılan bir örnekleme kodlamasıdır.
</div>
Görünüm:
text-align-last
text-align-last özelliği, bir metnin son satırının nasıl hizalanacağını belirtir.
Örnek:
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
</style>
<h2>text-align-last: right:</h2>
<p class="a">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri,
yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler
bulunmaktadır, dersler ücretsizdir.</p>
<h2>text-align-last: center:</h2>
<p class="b">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri,
yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler
bulunmaktadır, dersler ücretsizdir.</p>
Görünüm:
text-align-last: right:
enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
dersler ücretsizdir.
text-align-last: center:
enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
dersler ücretsizdir.
direction
direction ve unicode-bidi özellikleri, bir öğenin metin yönünü değiştirmek için kullanılabilir:
<style>
p.dr1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
<p>Bu normal varsayılan metin yönüdür.</p>
<p class="dr1">Bu, sağdan sola metin yönüdür.</p>
Görünüm:
Bu normal varsayılan metin yönüdür.
Bu, sağdan sola metin yönüdür.
text-decoration
Bu özellik, metinde çizgi, altı çizili, üstü çizili gibi dekorasyon özellikleri eklemek için kullanılır. text-decoration özelliğinin alabileceği değerler:
- None (dekorasyon özelliği yok)
- Underline (altı çizili)
- Overline (üstü çizili)
- Line-through (orta çizili)
- Underline overline (metnin altı ve üstü çizili)
Örnek:
<style>
p.txt1{
text-decoration:none;
}
p.txt2{
text-decoration:underline;
}
p.txt3{
text-decoration:overline;
}
p.txt4{
text-decoration:line-through;
}
p.txt5{
text-decoration:underline overline;
}
</style>
<h1>text-decoration:none örneği</h1>
<p class="txt1">Bu bir örnektir.</p>
<h1>text-decoration:underline örneği</h1>
<p class="txt2">Bu bir örnektir.<
<h1>text-decoration:overline örneği</h1>
<p class="txt3">Bu bir örnektir.</p>
<h1>text-decoration:line-through örneği</h1>
<p class="txt4">Bu bir örnektir.</p>
<h1>text-decoration:underline overline örneği</h1>
<p class="txt5">Bu bir örnektir.</p>
Görünüm:
text-decoration:none örneği
Bu bir örnektir.
text-decoration:underline örneği
Bu bir örnektir.
text-decoration:overline örneği
Bu bir örnektir.
text-decoration:line-through örneği
Bu bir örnektir.
text-decoration:underline overline örneği
Bu bir örnektir.
text-decoration-line
text-decoration-line özelliği, metne bir dekorasyon satırı eklemek için kullanılır.
İpucu:Metnin hem üzerinde hem de altında çizgileri görüntülemek için üst çizgi ve altı çizgi gibi birden fazla değeri birleştirebilirsiniz.
İpucu:Bağlantı olmayan metinlerin altının çizilmesi genellikle okuyucunun kafasını karıştırdığından önerilmez.
Örnek:
<style>
p.txt6{
text-decoration-line:none;
}
p.txt7{
text-decoration-line:underline;
}
p.txt8{
text-decoration-line:overline;
}
p.txt9{
text-decoration-line:line-through;
}
p.txt10{
text-decoration-line:underline overline;
}
</style>
<h1>text-decoration:none örneği</h1>
<p class="txt6">Bu bir örnektir.</p>
<h1>text-decoration:underline örneği</h1>
<p class="txt7">Bu bir örnektir.</p>
<h1>text-decoration:overline örneği</h1>
<p class="txt8">Bu bir örnektir.</p>
<h1>text-decoration:line-through örneği</h1>
<p class="txt9">Bu bir örnektir.</p>
<h1>text-decoration:underline overline örneği</h1>
<p class="txt10">Bu bir örnektir.</p>
Görünüm:
text-decoration:none örneği
Bu bir örnektir.
text-decoration:underline örneği
Bu bir örnektir.
text-decoration:overline örneği
Bu bir örnektir.
text-decoration:line-through örneği
Bu bir örnektir.
text-decoration:underline overline örneği
Bu bir örnektir.
text-decoration-color
text-decoration-color özelliği, dekorasyon çizgisinin rengini ayarlamak için kullanılır.
Örnek:
<style>
p.txt11{
text-decoration-line:none;
text-decoration-color:red;
}
p.txt12{
text-decoration-line:underline;
text-decoration-color:blue;
}
p.txt13{
text-decoration-line:overline;
text-decoration-color:green;
}
p.txt14{
text-decoration-line:line-through;
text-decoration-color:purple;
}
p.txt15{
text-decoration-line:underline overline;
text-decoration-color:brown;
}
</style>
<p class="txt11">Bu bir örnektir.</p>
<p class="txt12">Bu bir örnektir.</p>
<p class="txt13">Bu bir örnektir.</p>
<p class="txt14">Bu bir örnektir.</p>
<p class="txt15">Bu bir örnektir.</p>
Görünüm:
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
text-decoration-style
text-decoration-style özelliği, dekorasyon çizgisinin stilini ayarlamak için kullanılır.
Örnek:
<style>
p.txt16{
text-decoration-line:none;
text-decoration-style: solid; //Bu varsayılandır.\\
}
p.txt17{
text-decoration-line:underline;
text-decoration-style: double;
}
p.txt18{
text-decoration-line:overline;
text-decoration-style: dotted;
}
p.txt19{
text-decoration-line:line-through;
text-decoration-style: dashed;
}
p.txt20{
text-decoration-line:underline overline;
text-decoration-style: wavy;
}
p.txt21{
text-decoration-line:underline overline;
text-decoration-style: wavy;
text-decoration-color:red;
}
</style>
<p class="txt16">Bu bir örnektir.</p>
<p class="txt17">Bu bir örnektir.</p>
<p class="txt18">Bu bir örnektir.</p>
<p class="txt19">Bu bir örnektir.</p>
<p class="txt20">Bu bir örnektir.</p>
<p class="txt21">Bu bir örnektir.</p>
Görünüm:
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
text-decoration-thickness
text-decoration-thickness özelliği, dekorasyon çizgisinin kalınlığını ayarlamak için kullanılır.
Örnek:
<style>
p.txt22{
text-decoration-line:underline;
text-decoration-thickness: auto; //Bu varsayılandır.\\
}
p.txt23{
text-decoration-line:underline;
text-decoration-thickness: 5px;
}
p.txt24{
text-decoration-line:underline;
text-decoration-thickness: 25%;
}
p.txt25{
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
</style>
<p class="txt22">Bu bir örnektir.</p>
<p class="txt23">Bu bir örnektir.</p>
<p class="txt24">Bu bir örnektir.</p>
<p class="txt25">Bu bir örnektir.</p>
Görünüm:
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Özellikleri bir arada kullanalım;
Örnek:
<style>
p.txt26{
text-decoration: underline;
}
p.txt27{
text-decoration: underline red;
}
p.txt28{
text-decoration: underline red double;
}
p.txt29{
text-decoration: underline red double 5px;
}
</style>
<p class="txt26">Bu bir örnektir.</p>
<p class="txt27">Bu bir örnektir.</p>
<p class="txt28">Bu bir örnektir.</p>
<p class="txt29">Bu bir örnektir.</p>
Görünüm:
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
text-transform
text-transform özelliği, bir metini tamamen büyük, küçük veya baş harfi büyük şekilde ayarlar.
text-transformözelliğinin alabileceği değerler:
- none:hiçbir büyük/küçük harf ayarlaması yapılmaz.
- lowercase:metnin tümü küçük harfle yazılır.
- uppercase:metnin tümü büyük harfle yazılır.
- capitalize:kelimenin ilk harfi büyük, diğer harfler küçük yazılır.
Örnek:
<style>
p.txt30{
text-transform: none; // Varsayılanı kullanır.
}
p.txt31{
text-transform: uppercase; // Metin Tamamen Büyük Harfle Yazılır.
}
p.txt32{
text-transform: lowercase; // Metin Tamamen Küçük Harfle Yazılır.
}
p.txt33{
text-transform: capitalize; // Metnin Baş Harfleri Hariç Tamamı Küçüktür.
}
</style>
<p class="txt30">Bu bir örnektir.</p>
<p class="txt31">Bu bir örnektir.</p>
<p class="txt32">Bu bir örnektir.</p>
<p class="txt33">Bu bir örnektir.</p>
Görünüm:
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Bu bir örnektir.
Yazı Boşlukları
text-indent
text-indent özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır:
Örnek:
<style>
p.txt34{
text-indent: 50px;
}
</style>
<p class="txt34">enesalp.com.tr bir web tasarım,
seo hizmetleri, reklam hizmetleri,sosyal medya hizmetleri, yazılım ve
programlama hizmetleri hakkında hizmet veren bir websitesidir.
Ayrıca blog bölümünde ise dersler bulunmaktadır, dersler ücretsizdir.</p>
Görünüm:
enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri,sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır, dersler ücretsizdir.
letter-spacing
letter-spacing özelliği, bir metindeki karakterler arasındaki boşluğu belirtmek için kullanılır.
Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını gösterir:
Örnek:
<style>
p.txt35{
letter-spacing: 5px;
}
p.txt36{
letter-spacing: -2px;
}
</style>
<p class="txt35">Bu bir örnektir</p>
<p class="txt36">Bu bir örnektir</p>
Görünüm:
Bu bir örnektir
Bu bir örnektir
line-height
line-height özelliği, satırlar arasındaki boşluğu belirtmek için kullanılır:
Örnek:
<style>
p.txt37{
line-height: 0.7;
}
p.txt38{
line-height: 1.8;
}
</style>
<p class="txt37">Bu paragraf, metinler arasında küçük boşluğu verir. <br>
Bu paragraf, metinler arasında küçük boşluğu verir. </p>
<p class="txt38">Bu paragraf, metinler arasında büyük boşluğu verir. <br>
Bu paragraf, metinler arasında büyük boşluğu verir.</p>
Görünüm:
Bu paragraf, metinler arasında küçük boşluğu verir.
Bu paragraf, metinler arasında küçük boşluğu verir.
Bu paragraf, metinler arasında büyük boşluğu verir.
Bu paragraf, metinler arasında büyük boşluğu verir.
text-shadow
text-shadow özelliği, metnin gölgesini oluşturmak için kullanılır. Text-shadow özelliğinin alabileceği değerler:
- X offset: gölgenin yatay uzaklığı
- Y offset: gölgenin dikey uzaklığı
- Blur: gölgenin bulanıklığı
- Shadow color: gölgenin rengi
Örnek:
<style>
p.txt39{
text-shadow: 2px 2px 2px #000000;
}
p.txt40{
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
<p class="txt39">Bu bir örnektir</p>
<p class="txt40">Bu bir örnektir</p>
Görünüm:
Bu bir örnektir
Bu bir örnektir
Bu bölümde neler öğrendik?
color:Metnin rengini belirtir.background-color: Metnin arkaplan rengini belirtir.text-align: Metnin hizalanmasını sağlar.text-align-last: Bir metnin son satırının nasıl hizalanacağını belirtirdirection: Metin yönünü/yazma yönünü belirtirunicode-bidi: Aynı belgede birden çok dili desteklemek için metnin geçersiz kılınıp kılınmayacağını ayarlamak veya döndürmek için direction özelliğiyle birlikte kullanılırtext-decoration: metinde çizgi, altı çizili, üstü çizili gibi dekorasyon özellikleri eklemek için kullanılır.text-decoration-line:text-decoration-line özelliği, metne bir dekorasyon satırı eklemek için kullanılır.text-decoration-color: metnin çizgilerinin renklerini belirler.text-decoration-style: dekorasyon çizgisinin stilini ayarlamak için kullanılır.text-decoration-thickness: dekorasyon çizgisinin kalınlığını ayarlamak için kullanılır.text-transform: özelliği, bir metindeki büyük ve küçük harfleri belirtmek için kullanılır.text-indent: özelliği, bir metnin girintisinin boşluğunu belirtmek için kullanılır.letter-spacing: özelliği, metnin karakterleri arasındaki boşluğu belirtmek için kullanılır.line-height: özelliği, metnin satırlar arasındaki boşluğunu belirtmek için kullanılır.text-shadow: özelliği, metnin gölgesini oluşturmak için kullanılır.
