Halimclskn
cssders5
Ders 5: Metin
Biçimlendirme ve metne bir stil katıyor herhangi bir web tasarımcısı için önemli bir konudur. Bu derste CSS metne düzeni eklemek için size verir inanılmaz fırsatları tanıtılacak. Aşağıdaki özellikleri tarif edilecektir:
Metin girinti [text-indent]
Özelliği text-indent bir paragrafın ilk satırına girinti uygulayarak metin paragrafları şık bir dokunuş ekleyebilirsiniz. Bir Aşağıdaki örnekte 30px işaretlenmiş tüm metin paragrafları uygulanır <p> :
p { text-indent: 30px; }
Metin hizalama [text-align]
CSS özelliği text-align niteliği karşılık gelen HTML eski sürümlerinde kullanılan yasla. Metin olarak hizalanmış edilebilir sol için,sağ veya ortalanmış . Buna ek olarak, değeri meşrulaştırmak sağ ve sol kenar hem düz olup böylece her bir hat uzatmak olacaktır. Örneğin gazete ve dergiler için bu düzeni biliyorum.
Tablo başlıkları metni aşağıdaki örnekte <th> tablo veri iken sağa hizalanmış <td> ortalanır. Buna ek olarak, normal metin paragraflar haklı:
th { text-align: right; } td { text-align: center; } p { text-align: haklı; }
Metin dekorasyon [text-decoration]
Özelliği text-decoration farklı "süsleri" veya metin için "efekt" eklemek mümkün kılar. Örneğin, aşağıdaki örnekte metin üzerinden veya üstü bir çizgi, vs var, metnin altını çizebilirsiniz, <h1> başlıkları altı çizilir, <h2> metin ve üstünde bir çizgi ile başlıkları vardır <h3> olan başlıkları vardır Metin olsa bir çizgi.
h1 { text-decoration: underline ; } h2 { text-decoration: overline ; } h3 { text-decoration: line-through ; }
Mektubu alan [letter-spacing]
Metin karakterleri arasındaki boşluk özelliği kullanılarak belirtilebilir letter-spacing . Özelliğinin değeri sadece istenilen genişlikte olduğunu. İsterseniz Örneğin, bir boşluk 3px bir metin paragrafta harfler arasında <p> ve 6px manşetlere harfler arasındaki <h1> aşağıdaki kodu kullanılabilir.
h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
Metin dönüşümü [text-transform]
Text-transform özelliği bir metnin harf kontrol eder. Siz seçebilirsiniz yararlanmak , kullanmak büyük harfe veya küçük harfe bakılmaksızın Özgün metin nasıl HTML kodunu arar.
Bir örnek "MANŞET" veya "Başlık" olarak kullanıcıya sunulabilmektedir kelimesi "başlık" olabilir. Text-transform için dört olası değerler vardır:
- yararlanmak
- Her kelimenin ilk harfini büyük. Örneğin: "John Doe" "John Doe" olacak.
- büyük harfe
- Tüm harfleri büyük harfe dönüştürür. Örneğin: "John Doe" "John Doe" olacak.
- küçük harf
- Tüm harfleri küçük harfe dönüştürür. Örneğin: "John Doe" "john doe" olacaktır.
- hiçbiri
- Hayır dönüşümler - bu HTML kodunu göründüğü gibi metin sunulmuştur.
Bir örnek olarak, adı listesi kullanacaktır. Isimleri tüm ile işaretlenmiştir <li> (liste öğesi). Kullanıcı biz büyük harfle isim ve başlıkları büyük harflerle sunulacak istediğiniz diyelim.
Bu örnek için HTML kodu bir göz atın ve size metin aslında küçük olduğunu göreceksiniz deneyin.
h1 { text-transform: büyük; } li { text-transform: capitalize; }
Özet
Son üç dersimizde zaten birkaç CSS özelliklerini öğrendim, ancak CSS için çok daha fazlası var. In sonraki derste biz bağlantılardan da bakacağız.
