CSS özellikleri metin süsleme, dikey hizalama, metin hizalama, metni Html'de süslemek için metin girintisi. HTML'de öğeleri hizalama

  • 28.05.2019

Görüntüler için standartlar, aynı satırdaki metin ve diğer görüntülere göre varsayılan bir hizalama tanımlamaz - bu bileşenlerin nasıl görüneceğini tahmin etmek her zaman mümkün değildir.1 HTML belgelerinde, görüntüler genellikle yalnızca bir tane "satır içi"dir. metin satırı. Basılı medyada alışıldığı gibi, metin onları "sarar", böylece görüntüye yalnızca bir satır değil, birkaç satır bitişik olabilir.

Neyse ki, belge oluşturucular, etiketin align niteliğini kullanarak görüntülerin çevreleyen metne göre hizalamasını bir şekilde kontrol edebilir. ... HTML ve XHTML standartları, hizalama özelliği için beş değer tanımlar: sol, sağ, üst, orta, alt. Sol ve sağ değerler, metnin görüntünün etrafına sarılarak karşılık gelen kenara kaydırılmasına neden olur. Kalan üçü, görüntüyü çevreleyen metne göre dikey olarak hizalar.

Opera, Firefox, Netscape ve Internet Explorer dahil tüm popüler tarayıcılar, hizalama = alt özniteliğinin varsayılan dikey hizalama olduğu konusunda hemfikirdir ve görüntüleri bir metin satırında en üstteki karakterin üzerine eşit olarak yerleştirir, bkz. Şekil 4-2. 15.11.

Aynı zamanda, tarayıcılar, metne göre hizalama = orta öznitelik ile görüntülerin nasıl konumlandırılacağı konusunda anlaşamazlar. İncirde. Şekil 5.11, Netscape ve Opera'nın görüntüyü metnin orta satırına göre konumlandırdığını gösterir. Internet Explorer tarayıcıları hakkında

Pirinç. 5.11. Gömülü görüntülerin standart hizalaması

Pirinç. 5.12. Internet Explorer ve Firefox, görüntünün orta satırını metnin orta satırıyla değil, en uzun öğenin orta satırıyla hizalar

ve Firefox'ta, görüntüyü, metin olması gerekmeyen en uzun öğenin orta çizgisine konumlandırırlar (Şekil 5.12).

Ek olarak, tarayıcılar farklı derecelerde dikey görüntü hizalamanın beş ek özelliğini destekler: texttop, center, absmiddle, baseline ve absbottom (ne anlama geldiklerini tahmin etmediyseniz elinizi kaldırın):

align = texttop ifadesi, tarayıcıya görüntünün üst kenarını geçerli satırdaki en uzun metin öğesinin üst kenarıyla hizalamasını söyler. Aksi takdirde, top etkindir ve geçerli satırdaki en uzun öğenin, metin bileşeninin veya görüntünün üst kısmıyla görüntünün üstünü hizalar. Satır, metnin üzerinde çıkıntı yapan başka bir resim içermiyorsa, texttop ve top aynı etkiye sahiptir. Opera texttop'u desteklemez, ancak diğer popüler tarayıcılar onu kesinlikle bu açıklamaya göre yorumlar.

İlk olarak Internet Explorer ve Netscape ile tanıtılan merkez değeri, Internet Explorer, Netscape ve Firefox tarayıcılarında orta değeriyle aynı şekilde yorumlanır. Ama unutmayalım ki her biri ortanın anlamını kendine göre anlıyor. Opera, hizalama = merkez ifadesini yok sayar.

Etiketin align niteliğini verirseniz değer absmiddle, tarayıcı görüntünün mutlak ortasını geçerli satırın mutlak ortasına karşı ayarlayacaktır. Resmin ortasını geçerli metin satırının satır taban çizgisiyle hizalayan orta ve orta değerler için durum böyle değildir. Netscape ve Opera, absmiddle ile orta arasında ayrım yapmazken, Firefox ve Internet Explorer, görüntüleri merkez çizgilerine seçici olarak hizalamak için bu değerleri kullanır. Başka bir deyişle, Firefox ve Internet Explorer absmiddle'ı Netscape'in ortayı ele aldığı şekilde ele alır.

Pirinç. 5.13. Görüntüleri alingn = absbottom özniteliğiyle hizalarken, tarayıcılar alt öğeleri dikkate alır

alt ve taban çizgisi (varsayılan)

Alt ve taban değerleri, hizalama özniteliğini hiç dahil etmemişsiniz gibi aynı etkiye sahiptir. Tarayıcı, görüntünün altını metnin satır taban çizgisiyle hizalar. Bu, harflerin taban çizgisinin altına düşen kısımlarını da içeren absbottom değerinin etkisiyle karıştırılmamalıdır.1 (Eğer hala elinizi kaldırmışsanız, düşürebilirsiniz.)

align = absbottom ifadesi, tarayıcıya görüntünün alt kısmını geçerli satırdaki metnin gerçek alt kısmıyla hizalamasını söyler. Gerçek Alt, satırda hiçbiri olmasa bile, tüm alt öğeler (örneğin, "y"nin alt kısmı) dahil olmak üzere metnin en alt noktasıdır. Taban çizgisi, "y" sembolündeki "v"nin alt kenarı boyunca uzanır. Standardın taşıyıcısı Opera, absbottom değerini yok sayar ve diğer popüler tarayıcılar bunu açıklandığı gibi ele alır (Şekil 5.13).

Küçük resimleri, madde işaretlerini ve diğer özel görüntüleri yakındaki metinle hizalamak için üst ve ortayı kullanın. Diğer durumlarda, hizalama = alt (varsayılan) daha iyi bir görünüm ve his sağlar. Bir satırda bir veya daha fazla görüntüyü hizalarken, belgenize en iyi görünümü verecek nitelik değerini seçin.

Selam Arkadaşlar! Bugün hakkında konuşacağız paragraf etiketi ve hizalama özelliği hakkında... Genel olarak, bir sayfadaki tüm içerik paragraflara bölünmelidir. Paragraf içeriği etiketler arasına yazılır

Metin…

... Arka arkaya 2 paragraf gösterdiğimizde, aralarında onları birbirinden iten görünmez bir alan oluşur. Etiket bir blok etikettir, bu nedenle sayfanın tüm genişliğini kaplar.

Örneğin, bu kodla bir sayfa alalım:

Paragraflar içeren sayfa.

İlk paragraf: Lorem Ipsum, basım ve dizgi endüstrisinin basit bir sahte metnidir. Lorem Ipsum, bilinmeyen bir matbaacının bir tip numune kitabı yapmak için bir yazı galerisini alıp karıştırdığı 1500'lerden beri endüstrinin standart sahte metni olmuştur.

İkinci paragraf: Bir okuyucunun, sayfa düzenine bakarken sayfanın okunabilir içeriği tarafından dikkatinin dağılacağı uzun süredir bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, "İçerik burada, içerik burada" kullanılmasının aksine, az çok normal bir harf dağılımına sahip olması ve okunabilir İngilizce gibi görünmesini sağlamasıdır.

Bakalım bu durum bir tarayıcıda nasıl görünüyor:


Muhtemelen sayfa kodunda bir etiket olduğunu fark etmişsinizdir. kuvvetli, bu etiket metni kalın yapar.

Etiket özellikleri

Her etiket için, bazı durumlarda nitelikler belirtmeniz bile gerekebilir. Nitelik aracılığıyla, tarayıcıya bu veya bu öğenin sayfada tam olarak nasıl görüntüleneceğini söyleriz.

Nitelik, açılış etiketinin parantezinde belirtilir ve aşağıdaki sözdizimine sahiptir: nitelik_adı = "değer"

hizalama özelliği

Örneğin, bir sayfada bir paragrafımız var ve içeriğini hizalamak istiyoruz. Bunu yapmak için açılış etiketinin içine niteliği yazıyoruz. hizalamak, içeriği paragraf içinde hizalamaktan sorumludur ve ona bir değer verir.

Paragraf içeriği.

Bu özelliğin 4 değeri vardır:

1 kaldı- İçeriği sola hizalar. Bu varsayılandır. Yani paragrafın özniteliğini belirtmezsek hizalamak, ardından paragrafın içindeki içerik varsayılan olarak sola hizalanır. Bu, önceki örnekte görülebilir.

2. Sağ- İçeriği sağa hizalar.

Metin…

Tarayıcıda şu şekilde görünüyor:


3. Merkez- İçeriği sayfanın ortasına hizalar.

Metin…


4. Gerekçe- İçeriği sayfanın genişliğine göre hizalar.

Metin…


Ders özeti:
Ne olduğunu bugün öğrendik paragraf html'de. Paragraflar html'de çok sık kullanılır. Ayrıca bir etiket özniteliğinin ne olduğunu öğrendim. Ve hizalama özelliğini öğrendim hizala. Hangisi aşağıdaki değerlerden birini alabilir: sol (varsayılan),sağ,merkez,savunmak.

Merhaba blog sitesinin sevgili okuyucuları. Bu makalede, CSS stilinin temellerini keşfetmeye devam edeceğiz ve html metnini biçimlendirmek için dikey hizalama, metin hizalama, metin girintisi ve diğer bazı özelliklere göz atacağız.

Metni CSS ile hizalama

Blok öğelerde metnin görüntülenmesini kontrol eden stil nitelikleriyle başlayalım. Aslında align niteliğinin (p paragrafları gibi html öğelerinin içeriğini hizalamak için kullanılan) yerine geçen text-align özelliğiyle başlayalım.

Stil özelliği Metin hizalama sorar yatay metin hizalama ve yalnızca dört olası değeri vardır:

metin hizalama: sol | sağ | orta | iki yana yasla

Bu kural için mevcut değerler sırasıyla hizalamayı belirler: sol - sola, sağa - sağa, merkez - ortaya ve yaslama - sayfanın genişliğine (mesafeyi artırarak aynı anda sola ve sağa) kelimeler arasında). Örneğin, bu makaledeki metin, metin hizalama: yaslama kuralı kullanılarak sayfanın genişliğine hizalanır (hem sol hem de sağda eşit kenarlıklar olduğunu fark ederseniz).

Varsayılan olarak, yatay hizalama sola hizalıdır, bu nedenle üst öğelerde farklı bir hizalama belirtilmediği sürece özel olarak text-align: left belirtmek gerekli değildir.

Özelliği kullanma örnekleri:

p (metin hizalama: iki yana yasla)
h1 (metin hizalama: orta)

Sonraki CSS özelliği metin kimliği sorar kırmızı çizgi için girinti, örneğin paragraf etiketindeki metin için p. Bu kural, metin hizalama gibi, yalnızca blok öğeler için geçerlidir. Sözdizimi:

metin girintisi:<отступ>

Mutlak ve bağıl girinti değerlerine burada izin verilir. Mutlak değerler (px - piksel, em, ex vb.) hem artı işaretiyle hem de eksi işaretiyle belirtilebilir. Göreceli değer genellikle yüzde (%) olarak verilir. Göreceli değer, metin için ayrılan alanın genişliğinden hesaplanır. Bu nedenle, css kuralı metin girintisi: %50, kırmızı çizgiyi bu satırın uzunluğunun yarısına eşitleyecektir. Varsayılan olarak, "kırmızı çizgi" girintisi sıfırdır. Örnek:

p (metin kimliği: 10px;)

Ardından, dikey hizalamaya bakalım - özellik dikey hizalama... Bu özellik zaten tüm html öğeleri için geçerlidir ve hemen hemen tümü için satır içi öğelerin metinle taban çizgilerine göre hizalanması anlamına gelir. Tüm içeriğin dikey olarak hizalanacağı td ve th tablo etiketleri hariç. Sözdizimi:

dikey hizalama: taban çizgisi | alt | süper | üst | metin-üst | orta | alt | metin-alt |<величина>

Her değeri daha ayrıntılı olarak ele alalım:

  • baseline - bir metin parçasının ana öğenin satır taban çizgisiyle hizalanması. Bu varsayılandır;
  • alt - bir metin parçası, ana öğe için bir alt simge veya alt simge olarak görüntülenir;
  • super - bir metin parçası, üst öğe için bir üst simge veya üst simge olarak görüntülenir;
  • top - bir metin parçasını ana öğenin üst kenarına hizalar;
  • text-top - parçayı üst öğenin metninin üst kenarına hizalar;
  • orta - metin parçasının merkezinin ana öğenin merkezine hizalanması;
  • alt - metin parçasının ana öğenin alt kenarına hizalanması;
  • text-bottom - parçanın ana öğenin metninin alt kenarına hizalanması;

Aşağıdaki şekil, Internet Explorer 11'deki dikey hizalama özelliğinin farklı değerleri için test parçalarının davranışını göstermektedir:

Yukarıdaki değerlere ek olarak sayısal değerler de belirtebilirsiniz. Bu nedenle, dikey hizalama: 0 CSS kuralı, dikey hizalama: taban çizgisi notasyonu ile aynı anlama gelir. Ve dikey hizalama: 10px kuralı, metni taban çizgisinden 10 piksel yukarı kaydırır. Metni aşağı taşımak için değer eksi ile belirtilmelidir.

Ofset, em ve ex gibi göreli birimlerde veya yüzde olarak da belirtilebilir.

Tablo hücrelerinin içeriğini dikey hizalamada dikey olarak hizalamak için aşağıdaki değerleri kullanın:

  • üst - içeriği hücrenin üst kenarına hizalamak için;
  • alt - içeriği hücrenin alt kenarına hizalamak için;
  • orta - hücrenin ortasına hizalamak için (varsayılan olarak kullanılır).

İstenilen sonuca ulaşmak için genellikle dikey hizalama stili özelliği için farklı değerlerle denemeler yapmanız gerekir. Çok sayıda olası değer, farklı durumlarda çok farklı sonuçlar verir.

Satır sonlarını kontrol etmek için boşluk ve sözcük kaydırma seçenekleri

Sırada, boşluk karakterlerini html sayfasında görüntülemekten sorumlu olan boşluk parametresi var.

Bildiğimiz gibi, tarayıcı varsayılan olarak tüm ardışık boşluk karakterlerini (boşluklar, satır sonları ve sekmeler) tek bir boşlukta birleştirir. İstisna etiket

, içine yerleştirilen metin tüm boşluklarla olduğu gibi görüntülenir.

beyaz boşluk özelliği aşağıdaki sözdizimine sahiptir:

boşluk: normal | ön | nowrap | ön sarma | satır öncesi

Normal değerin varsayılan olarak kullanıldığı ve her şeyi yukarıda açıklandığı gibi bıraktığı açıktır, ardışık tüm boşluklar bir araya getirilir ve satır sonları otomatik olarak ayarlanır.

Bir değer kullanma

Etiketi kullanırken tam bir benzetme olacak 
Tarayıcı, sayfayı geliştirici tarafından eklendiği şekilde fazladan boşluklar ve kısa çizgilerle oluşturur.  Metin satırı çok uzunsa, yatay kaydırma çubuğu eklenecektir.

Nowrap değeri tarayıcının satırları kaydırmasını engeller ve metin tek bir satırda görüntülenir. Tek şey, bir etiket eklemek
metnin yeni bir satıra sarılmasına izin verir.

Ön sarma değeri, tüm boşluk ve satır kesme dizilerini korur, ancak satır belirtilen alana sığmazsa, tarayıcı metni otomatik olarak yeni bir satıra kaydırır.

Peki, satır öncesi değeri boşlukları bir boşluğa dönüştürür, satır beslemeleri kaydedilir ve tarayıcı yatay kaydırmayı önlemek için çok uzun satırları kesebilir.

Kullanım örneği:

p (boşluk: ön;)

Sonraki düşünün sözcük kaydırma parametresi, belirtilen alana sığmayan uzun sözcükleri kaydırıp sarmayacağınızı size söyleyecektir. Bu özellik sıklıkla kullanılmaz, ancak bazen onsuz yapamazsınız:

sözcük kaydırma: normal | sözcük kesme

Normal değer, tarayıcıya metni yalnızca boşluklarda kesmesini söyler ve bu normal tarayıcı davranışıdır. Ve kelime sonu değeri, tarayıcının kelimelerin içine satır sonları eklemesine izin verir. Örnek:

p (kelime sarma: kelime kesme;)

Metin gölgesi parametreleri - metin gölgesi özelliği

CSS3 standardındaki çeşitli süslemelerin hayranları için metin için bir gölge ayarlamak mümkün oldu. text-shadow özelliğinin doğru kullanımı, bir web sayfasını fark edilir şekilde canlandırmanıza olanak tanır. Sözdizimi:

metin gölgesi: yok |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]

Yok değeri metnin gölgelenmesini iptal eder ve varsayılan olarak ayarlanır.

gölge rengi herhangi bir kullanılabilir CSS biçiminde ayarlanır ve isteğe bağlı bir parametredir. Varsayılan olarak, gölge rengi metin rengiyle aynıdır.

Gölgenin yatay kayması CSS tarafından desteklenen herhangi bir ölçü biriminde belirtilebilir. Pozitif bir değer, gölgeyi metnin sağına, negatif bir değer ise sola konumlandırır. Sıfır değeri, gölgeyi doğrudan metnin altına konumlandırır ve yalnızca gölge bulanıksa anlamlı olur.

Gölgenin dikey kayması ayrıca CSS tarafından desteklenen herhangi bir ölçü biriminde ayarlanabilir. Pozitif bir değer gölgeyi metnin altına taşır; negatif bir değer onu üstüne taşır. Sıfır değeri, gölgeyi doğrudan metnin altına yerleştirir.

Herhangi bir ölçü biriminde ve gölge bulanıklığı yarıçapı... Değer ne kadar yüksek olursa, gölge o kadar geniş olur ve o kadar düzleşir. Bu parametre ayarlanmazsa bulanıklık değerinin sıfır olduğu varsayılır. Kenar yumuşatma algoritması farklı tarayıcılar için genellikle farklı olduğundan, tarayıcıya bağlı olarak gölgenin görünümü biraz farklılık gösterebilir.

Bir örnek düşünelim:

P (
metin gölgesi: kırmızı 1 piksel 1 piksel 2 piksel;
yazı tipi boyutu: 2em;
}

Ve bu, Internet Explorer 11'de uygulanan bu stil kuralıyla p paragrafının metni şöyle görünür:

Bu makaleyi sonuçlandıracaktır. CSS özellikleri hakkında daha fazla bilgi edinmek için blog güncellemelerine abone olmayı ve "" bölümündeki makaleleri okumayı unutmayın. Bir sonrakine kadar!

Şimdiye kadar, sen ve ben öğeleri yalnızca sola hizaladık. Daha doğrusu, bunu hiç yapmadık ve tarayıcının kendisi varsayılan olarak öğeleri sola hizalar. Tabii ki, her şeyi sola hizalamak çok sıkıcı olurdu. Bu nedenle, ortalamanın ve sağa hizalamanın farklı yolları vardır.

Öğelerin hizalanması, ne zaman olduğunu bilmeniz gereken bir şeydir. Yapılacak ilk şey, en basit sayfayı yazmaktır.

Bir zamanlar bir etiket vardı

Daha modern yöntemlerin mevcudiyeti nedeniyle şimdi kullanmanızı tavsiye etmiyorum, ancak bahsetmeden geçemeyeceğim. Kullanımı çok, çok kolay. Ortaya hizalamanız gereken her şeyi bu etiketin içine koyarsınız. Örneğin, burada 1. seviye başlığı merkeze hizalıyoruz.



Yine ortaya hizalanmış bir resim ekleyebilirsiniz, ayrıca etiketi kullanarak bir sonraki satıra geçelim
:


Düzey 1 başlığı, ortalanmış




bu bir etiketti

etiketlerden beklentilerinizin aksine, zaten kullanımdan kaldırıldı ve sadece yok. Diyelim ki varsayılan olarak sola hizalanmış, etiketi kullanılarak ortalanmış
, peki ya sağ?

Bu sorunu çözmek için geliştiriciler, öğeleri hizalamanın evrensel bir yolunu buldular. HTML... Bunun yolu, etiketi kullanılarak oluşturulan sözde kapları kullanmaktır.

... Yani, belirli bir kapsayıcıya yerleştirilmesi gereken her şey etiketin içine yerleştirilir.
... Ve zaten bu etiketin bir özelliği var " hizalamak", değeri bu kabın konumunu belirler. Üç değer vardır:" sol", "merkez", "sağ". Varsayılan olarak, buna değer" sol"Ancak, bence şaşırmadınız.

şimdi aynısını yazalım HTML Kodu ancak kapların kullanımı ile ek olarak, merkeze değil sağa hizalayalım.





Gördüğünüz gibi, her şey çalışıyor. Öznitelik değerlerini de değiştirmenizi tavsiye ederim" hizalamak"diğer tür konteyner hizalamalarına bakmak için.

Öğeleri hizalamanın başka bir yolu HTML- bunlar tablolar, ancak bu konu ayrı bir tartışmayı hak ediyor, bu yüzden aşağıdaki makalelerden birinde bunun hakkında konuşacağız.

O zamana kadar sayfanız şöyle görünmelidir:






Düzey 1 başlığı, ortalanmış






Düzey 1 başlık sağa hizalanmış








Saygılarımla, Mihail Rusakov.

not hakkında daha fazla bilgi edinmek istiyorsanız HTML, ardından ücretsiz kursumu şu adreste bir web sitesi oluşturma örneğiyle izleyin: HTML:

Açıklama

Bir metin bloğunu kenara hizalar.

Bu nitelik yerine stiller kullanılmalıdır

Sözdizimi

Değerler

left Metni sola hizalar. Bu durumda, metin satırları sola hizalanır ve sağ kenar "merdiven" olur. Bu hizalama yöntemi, sitelerde en popüler olanıdır, çünkü kullanıcının bir bakışta yeni bir satırı kolayca bulmasını ve büyük metni rahatça okumasını sağlar. center Metni ortaya hizalar. Metin, tarayıcı penceresinde veya metin kutusunun bulunduğu kapta yatay olarak ortalanır. Metin satırları, web sayfasının ortasından aşağıya doğru uzanan görünmez bir eksende birbirine dizilir. Benzer bir hizalama yöntemi başlıklarda ve şekil başlıkları gibi çeşitli başlıklarda aktif olarak kullanılır, metin tasarımına resmi ve sağlam bir görünüm kazandırır. Diğer tüm durumlarda, bu tür metinlerin büyük bir kısmını okumanın uygun olmaması nedeniyle, merkeze hizalama nadiren kullanılır. sağ Metni sağa hizalar. Bu hizalama yöntemi, önceki türe karşı bir antagonist görevi görür. Yani, metin satırları sağa hizalanırken sol "yırtık" kalır. Sol kenarın hizalanmaması, yani ondan yeni satırların okunması nedeniyle, bu tür metinlerin okunması sola hizalanmasından daha zordur. Bu nedenle, sağa yaslama genellikle üç satırı geçmeyen kısa başlıklar için kullanılır. Metnin sağdan sola okunması gereken belirli siteleri düşünmüyoruz, benzer bir hizalama yöntemi olabilir ve kullanışlı olabilir. Ama ülkemizde bu tür siteleri nerede gördünüz? Gerekçelendirme, aynı anda hem sol hem de sağ gerekçelendirme anlamına gelir. Bu eylemi gerçekleştirmek için tarayıcı bu durumda kelimeler arasına boşluk ekler.

Varsayılan değer

Örnek. Metin hizalama

P etiketi, hizalama özelliği

İyi günler. vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis vero eros ve accumsan ve iusto odio dignissim qui blandit geçerli luptatum zzril delenit au gue facil dois dois içinde hendrerit içinde duis autem dolor Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.



Tarayıcılar: Masaüstü Mobil ?

Internet ExplorerKromOperaSafariFirefox
1 1 1 1 1
AndroidFirefox MobilOpera MobilSafari mobil
1 1 6 1

tarayıcılar

Tarayıcı tablosunda aşağıdaki kurallar kullanılır.

  • - öğe tarayıcı tarafından tamamen desteklenir;
  • - öğe tarayıcı tarafından algılanmaz ve yok sayılır;
  • - çalışma sırasında çeşitli hatalar görünebilir veya eleman rezervasyonlarla desteklenir.

Sayı, öğenin desteklendiği tarayıcı sürümünü belirtir.