HTML Stil Oluşturma
Bu derste HTML‘de yazı rengi değiştirmeyi, arkaplan rengi değiştirmeyi, yazıyı hizalamaya, yazı tipini değiştirmeyi öğreneceğiz. Bunu yapmak için sytle=”nitelik:istenilenözellik;” niteliği kullanılır. Her etiketle kullanılabilir. Şimdi style içine yazabileceğimiz bazı nitelikleri inceleyelim:
Background-color: Arkaplan rengini değiştirmek için kullanılır. RGB renk kodları, hex kodları ya da direk renk ismi yazılarak verilebilir.
<html> <head></head> <body> <p style="background-color:pink;">ARKA PLAN RENGİ PEMBE OLMALI</p> </body> </html>
EKRAN ÇIKTISI:
Color: Yazı rengini değiştirmek için kullanılır. RGB renk kodları, hex kodları ya da direk renk ismi yazılarak verilebilir.
<html> <head></head> <body> <p style="color:#00008B;">YAZI RENGİ LACİVERT OLMALI</p> <!-- HEX KODUDUR --> </body> </html>
EKRAN ÇIKTISI:
Font-family: Yazı tipini değiştirmek için kullanılır. Arial, verdana, courier vb. yazabilirsiniz.
<html> <head></head> <body> <p style="font-family:arial;">YAZI TİPİ ARİAL OLMALI</p> <p style="font-family:verdana;">YAZI TİPİ VERDANA OLMALI</p> </body> </html>
EKRAN ÇIKTISI:
Font-size: Yazı boyutunu kullanmak için kullanılır. Piksel değeri ya da yüzde olarak verilebilir.
<html> <head></head> <body> <p style="font-size:%300;">YAZI BOYUTU YÜZDE CİNSİNDEN</p> <p style="font-size:20px;">YAZI BOYUTU PİKSEL CİNSİNDEN </p> </body> </html>
EKRAN ÇIKTISI:
NOT: Font-family ile font-size’yi birlikte kullanacak iseniz style=”font:20px arial;” şeklinde kullanabilirsiniz.
Text-align: Yazının hizalamasını değiştirmek için kullanılır. Niteliğine yazılabilecek özellikleri inceleyelim:
- left: Yazıyı sola hizalamak için kullanılır.
- right: Yazıyı sağa hizalamak için kullanılır.
- center: Yazıyı ortalamak için kullanılır.
- justify: Yazıyı her iki yana hizalamak için kullanılır.
<html> <head></head> <body> <p style="text-align:left;">YAZI SOLA HİZALI OLMALI</p> <p style="text-align:center;">YAZI ORTALANMIŞ OLMALI</p> </body> </html>
EKRAN ÇIKTISI:
Konuyu pekiştirmek amacıyla hepsinin bir arada bulunduğu bir stil oluşturalım. Birden fazla niteliğin nasıl kullanıldığını da görmüş oluruz.
<html> <head></head> <body> <p style="background-color:blue;color:white;font:25px verdana;text-align:center;">DENEME YAZISI</p> </body> </html>
EKRAN ÇIKTISI:
