Önceki dersimizde Css de oluşturduğumuz sınıfları her etiket için nasıl kullandığımızı gördük.Bu yazımızda ise Css metin biçimlendirme etiketleriyle metinleri nasıl biçimlendireceğimizi görelim
Metin biçimlendirmedeki kastımız ;metnin hizalanması,renginin değişmesi,altının çizilmesi,yazı tipi vb. özelliklerdir.Şimdi bunların ne olduklarını teker teker görelim ve örnekler üzerinde anlatalım
Bir elementin rengini değiştirmek için kullanacağımız özellik color dır.Bu parametreye ” ” ifadeleri arasında renk değerleri verebiliriz.Vereceğimiz renkleri doğrudan adını girerek , renk kodunu yazarak veya RGB formatında yazarak belirleyebiliriz.Şimdi,önceki derste gördüğümüz gibi sınıf şeklinde bir stil belirleyelim ve bu renk stillerimizi, başlık ve paragraf içinde kullanalım
<html>
<head>
<style type="text/css">
body {color:aqua;}
p.stilim{color:FF0000;}
h4{color:Orange;}
p{color:green;}
</style>
</head>
<body>
<h4>Burası,turuncu renkli bir başlıktır</h4>
<p>Burası,yeşil renkli bir paragraftır</p>
<p class="stilim">Burası,p etiketinin "stilim" sınıfına aittir ve kırmızı renktir</p>
</body>
</html> Yazdığım kodun Çıktısını görerek konuyu daha ayrıntılı anlatalım
Yukarıdaki kodlarımızda biz,önceki derste gördüğüm konulardan olan dahili css ile yazdık. <body> kısmında sayfamızın arka plan rengini, h4 ve p özelliğinde ise sayfamızda yazılacak her h4 ve p elementi için bir stil belirledik. p.stilim kısmında ise , diğer p etiketlerinden ayrı olarak bir stil uygulamak istediğimiz için yazdık.
<p class="stilim"
kod satırı ile paragraf etiketimiz için (stilim) adındaki sınıf üyemizi kullandık.Bunun tanımlaması ise yukarıda p.stilim ile belirlendi
Html derslerinde gördüğümüz gibi yazılarımızı sağa,sola dayalı veya ortalı yapabiliyorduk.Bunu Css kodları ile nasıl yapabileceğimizi görelim;
<html>
<head>
<style type="text/css">
h3.sola { text-align:left; }
h3.orta { text-align:center; }
</style>
</head>
<body>
<h3 class="sola" >
Bu başlık sola dayalıdır</h2>
<h3 class="orta">Bu başlık ortadadır</h3>
</ul>
</body>
</html> Burada h3.sola , h3.orta stilleri tanımladık.Bu şu demektir.Yazacağımız <h3> etiketleri için orta ve sola adlı 2 stil tanımladık. <h3> etiketlerinde class=”sola” tanımlarsak , h3.sola stilimizi kullanacaktır.Bu stilimizde ise yazılarımız sola dayalıdır.Şimdi tarayıcımızda çıktımızı görelim
Bu konumuza da önceki derslerimizde kısaca bahsetmiştir.Şimdi derinlemesine inceleyelim.Metin dekorasyonu derken metnimizin altını, üstünü çizmek gibi stillerden bahsediyoruz.Burada yapacağımız örnekleri de Dahili Css mantığı ile yapalım (Önceki Css derslerimizde bahsetmiştik)
Kullanabileceğimiz dekorasyonlardan bahsedelim ve örneklerimize geçelim;
text-decoration:overline; => Yazımıza üst çizgi koyar
text-decoration:line-through; => Yazımızın üstünü çizer
text-decoration:underline; => Yazımızın altını çizer
text-decoration:none; => Default olarak herhangi bir çizgi koymaz.
Bu verdiğimiz özellikler ile ilgili örnek kodumuzu verelim;
<html>
<head>
<style type="text/css">
h2 { text-decoration:none; }
h3 { text-decoration:overline; }
h4 { text-decoration:line-through; }
h5 { text-decoration:underline; }
</style>
</head>
<body>
<h2>Mehmet</h2>
<h3>Mehmet</h3>
<h4>Mehmet</h4>
<h5>Mehmet</h5>
</body>
</html> Burada h2,h3,h4,h5 etiketleri için 4 er tane metin dekorasyonu tanımladık ve bunları <body> kısmındaki etiketlerimiz üzerinde kullandık
Çıktımız ise ;
Kodlara ve çıktımıza bakarak neyin ne olduğunu daha iyi anlayabiliriz
Font stili sayesinde , yazılarımızı italik (eğik) yapabilir veya yazı fontunu değiştirebiliriz
font-family => ile fontumuzun yazı tipi belirlenir
font-style => ile fontumuzun stili belirlenir
font-size => ile fontumuzun boyutu belirlenir (px-piksel cinsinden)
<html>
<head>
<style type="text/css">
p.duz {font-style:normal;}
p.egik {font-style:italic;}
p.times{font-family:"Arial";}
</style>
</head>
<body>
<p class="duz">Burası normal yazıdır</p>
<p class="egik">Burası egik yazıdır</p>
<p class="times">Burası Arial Yazı tipiyle yazıldı</p>
</body>
</html> P elementimiz için 3 adet özellik belirledik.İlki için p.normal kullandık.Bu demektir ki classını egik belirlediğimiz her p etiketi için bu stiller kullanılacaktır
Merhaba. Firebase Events'e istatistik attığınızda not set şeklinde bir değer görüyorsanız olası çözümünü göstereceğim. (daha&helliip;) Daha Fazla Oku
Merhaba. Android cihazlar için hazırladığım Namaz Vakitleri uygulaması ile 200'e yakın ülkede tüm namaz-ezan vakitlerini… Daha Fazla Oku
Selamlar. İnsanlar için faydalı olması amacıyla geliştirdiğim Kaza Namazı ve Oruç Takip Uygulamasını sizlere tanıtmak… Daha Fazla Oku
Volley, Android uygulamalarımızda kullandığımız AsyncTask'ın alternatifi olarak ortaya çıkarılan, Google I/O 2013 sunumunda duyurulan bir… Daha Fazla Oku
Merhaba. Bu yazımda Android platformunda kullanıma sunulan, bazı kod bloklarını basitleştiren ve okunabilirliği arttıran ButterKnife… Daha Fazla Oku
Merhaba. Bu yazımda artık baş belası olmuş TikTok reklamlarını, Android uygulamalarımızdaki Admob reklamlarından nasıl kaldıracağımızı… Daha Fazla Oku
Yorumları Göster
iyi ki css diye aradım he