Text in CSS

Kategori: CSS , 28 Ekim 2019 , JanFranco


Bu yazımda CSS'te text yani yazı ile ilgili özelliklerden bahsedeceğim. İlk olarak typeface'den bahsedeyim. Fontların grupları vardır, her bir font farklı olsa da bir karakteri vardır ve karakterleri şu şekilde sınıflandırabiliriz: serif, sans-serif, monospace, cursive, fantasy. Aşağıdaki resimde sırasıyla serif, sans-serif ve monospace karakter tipini görüyoruz: css-texts

Serif karakter tipinde her bir harfin ekstra detayları olur. Sans-serif karakter tipinde harflerin ekstra detayları yoktur, temiz bir tasarıma sahiptir. Monospace karakter tipinde her bir harf aynı kalınlıktadır, genellikle kodlamada kullanılır, okunabilirlik daha kolaydır. Cursive karakter tipinde yazı el yazısına benzemektedir. Fantasy karakter tipi genel olarak başlıklarda vs. kullanılır çünkü dikkat çeker ve okunması zordur. Tüm yazıda kullanılması mümkün değildir.

Font-family özelliği ile yazıların fontunu belirleyebiliriz:


body {
	font-family: Georgia, Times, serif;
}
h1, h2 {
	font-family: Arial, Verdana, sans-serif;
}
.credits {
	font-family: "Courier New", Courier, monospace;
}
font-family özelliği değer olarak birden fazla font alabilir. İlk font eğer kullanıcının bilgisayarında bulunmuyorsa, listedeki diğer fontlar denenir. Genellikle son elemente typeface yazılır. Eğer font'un ismi iki kelime veya daha fazla ise tırnak içerisinde yazılır.

font-size özelliği ile yazıların boyutlarını belirleyebiliriz. Bu özelliğin değerini pixel ile veya oranla belirleyebiliriz. Tarayıcılardaki default font büyüklüğü 16 pixeldir. Örneğin bir font'un büyüklük oranı %75 alınırsa 16*75/100 işleminin sonucu olan 12 pixel elde edilecektir. %200 olarak belirlenirse 16*2 işleminden 32 pixel elde edilecektir. Pixel veya oran yerine em değerini de kullanabiliriz. Harfler arasını boşluk değeridir:


body {
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
}
h1 {
	font-size: 200%;
}
h2 {
	font-size: 1.3em;
}
@fontface anahtar kelimesi ile bir font'u kullanıcının bilgisayarında bulunmasa bile gösterebiliriz:


@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('fonts/chunkfive.eot');
}
h1, h2 {
	font-family: ChunkFiveRegular, Georgia, serif;
}
Burada src özelliği ile font'un adresi belirtilmiş, font-family özelliği ile font'un adı belirlenmiş. Başka bir selector'da bu değer ile font'u kullanabiliriz.

font-weigth özelliği ile yazının kalınlığını, font-style özelliği ile yazının italikliğini değiştirebiliriz:


.credits {
	font-weight: bold;
}

.credits {
	font-style: italic;
}
font-weight özelliği normal ve bold değerlerini alabilir. font-style özelliği normal, italic ve oblique değerlerini alabilir.

text-transform özelliği ile yazıları büyük harfe, küçük harfe çevirebiliriz. Veya her kelimenin ilk harfini büyük yapabiliriz:


h1 {
	text-transform: uppercase;
}
h2 {
	text-transform: lowercase;
}
.credits {
	text-transform: capitalize;
}
text-decoration özelliği ile yazının üstüne, altına veya üstüne çizgi çekebiliriz. None değeri herhangi bir decoration bulunuyorsa siler, underline üste çizgi, overline alta çizgi çeker. line-through değeri de yazının üstüne çizgi çeker:


.credits {
	text-decoration: underline;
}
a {
	text-decoration: none;
}
line-height özelliği ile satır arası boşlukları değiştirebiliriz. Kelimeler arası boşluk için word-spacing, harfler arası boşluk kontrolü için letter-spacing özelliklerini kullanabiliriz:


p {
	line-height: 1.4em;
}

h1, h2 {
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.credits {
	font-weight: bold;
	word-spacing: 1em;
}
text-align özelliği ile yazıların sağa veya sola kaydırabiliriz. center değeri ile de yazıları ortalayabiliriz:


h1 {
	text-align: left;
}
p {
	text-align: justify;
}
.credits {
	text-align: right;
}
text-indent özelliği ile yazının ilk satırını belli bir miktarda kaydırabiliriz. Pozitif veya negatif değer atayabiliriz:


h1 {
	background-image: url("images/logo.gif");
	background-repeat: no-repeat;
	text-indent: -9999px;
}
.credits {
	text-indent: 20px;
}
Burada -9999 değeri verilerek yazının tarayıcıda gözükmemesi sağlanmıştır. text-shadow özelliği ile yazılara gölge verebiliriz. İlk değer gölgenin yatay olarak büyüklüğü, ikinci değer dikey olarak büyüklüğüdür. Üçüncü bir değer olarak blur değeri verebiliriz. Son değer ise renk değeridir:


p.one {
	background-color: #eeeeee;
	color: #666666;
	text-shadow: 1px 1px 0px #000000;
}
Bir yazının ilk harfini veya ilk satırını :first-letter, :first-line selectorlar ile seçebiliriz. :link selector ile tıklanmamış linkleri, :visited ile tıklanmış linkleri seçebiliriz. :hover selector ile kullanıcının mouse ile üzerine geldiği cisimleri, :active ile kullanıcının tıkladığı objeleri, :focus ile tarayıcının odaklandığı objeleri seçebiliriz:


p.intro:first-letter {
	font-size: 200%;
}
p.intro:first-line {
	font-weight: bold;
}

a:link {
	color: deeppink;
	text-decoration: none;
}
a:visited {
	color: black;
}
a:hover {
	color: deeppink;
	text-decoration: underline;
}
a:active {
	color: darkcyan;
}
CSS selectorlarını görmüştük. CSS'te attribute selectorlar da mevcuttur:


Existence	p[class]		class attribute'u olan tüm p elementlerini seçtik
Equality	p[class="dog"]		class attribute'unun değeri "dog" olan tüm elementleri seçtik
Space		p[class~="dog"]		class attibute'unun değeri bir liste olan ve bu listedeki değerlerden biri dog olan p elementlerini seçtik
Prefix		p[attr^"d"]		değeri d harfi ile başlayan bir attribute'e sahip p elementlerini seçtik
Substring	p[attr*"do"]		değerinde "do" geçen attribute'a sahip p elementlerini seçtik
Suffix		p[attr$"g"]		değeri g harfi ile biten bir attribute'e sahip p elementlerini seçtik
Bu bilgilerimizle bir örnek yapalım:


<!DOCTYPE html>
<html>
	<head>
		<title>Text</title>
		<style type="text/css">
			body {
				padding: 20px;
			}
			h1, h2, h3, a {
				font-weight: normal;
				color: #0088dd;
				margin: 0px;
			}
			h1 {
				font-family: Georgia, Times, serif;
				font-size: 250%;
				text-shadow: 2px 2px 3px #666666;
				padding-bottom: 10px;
			}
			h2 {
				font-family: "Gill Sans", Arial, sans-serif;
				font-size: 90%;
				text-transform: uppercase;
				letter-spacing: 0.2em;
			}
			h3 {
				font-size: 150%;
			}
			p {
				font-family: Arial, Verdana, sans-serif;
				line-height: 1.4em;
				color: #665544;
			}
			p.intro:first-line {
				font-weight: bold;
			}
			.credits {
				font-style: italic;
				text-align: right;
			}
			a {
				text-decoration: none;
			}
			a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<h1>Briards</h1>
		<h2>A Heart wrapped in fur</h2>
		<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wikiBriard">
		briard</a>, or berger de brie, is a large breed of dog traditionally used as a
		herder and guardian of sheep.</p>
		<h3>Breed History</h3>
		<p>The briard, which is believed to have originated in France, has been bred for
		centuries to herd and to protect sheep. The breed was used by the French Army as
		sentries, messengers and to search for wounded soldiers because of its fine sense
		of hearing. Briards were used in the First World War almost to the point of
		extinction. Currently the population of briards is slowly recovering.
		Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
		<p class="credits">by Ivy Duckett</p>
	</body>
</html>
css-texts


Sonraki Yazı: Boxes
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın