• Metin hizalama özelliği hangi değerleri alabilir? CSS ile metin süsleme. Son satır hizalaması: text-align-last özelliği

    css internet gezgini Krom Opera safari Firefox Android iOS
    2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
    3 2.0+ 11.6+ 3.1+ 3.6+ 2.1+ 2.0+

    kısa bilgi

    CSS sürümleri

    Değerler

    center Metni ortaya hizalar. Metin, tarayıcı penceresine veya metin bloğunun bulunduğu kapsayıcıya yatay olarak yerleştirilir. Metin satırları, web sayfasının ortasından geçen görünmez bir eksene dizilmiş gibi görünür. Benzer bir hizalama yöntemi başlıklarda ve altyazı gibi çeşitli başlıklarda aktif olarak kullanılır, metnin 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ı okumak zahmetli olduğu için ortaya hizalama nadiren kullanılır. Yasla Yasla, yani aynı anda sola ve sağa yaslanmış. Bu eylemi gerçekleştirmek için, bu durumda tarayıcı kelimeler arasına boşluklar ekler. sol Metni sola hizalar. Bu durumda, metin satırları sola hizalanır ve sağ kenar bir "merdiven" içinde bulunur. Bu hizalama yöntemi, kullanıcının kolayca yeni bir satır aramasına ve büyük metinleri rahatça okumasına olanak tanıdığı için web sitelerinde en popüler yöntemdir. sağ Metni sağa hizalar. Bu hizalama yöntemi, önceki tipe karşı bir antagonist görevi görür. Yani, metin satırları sağa hizalanırken sol "düzensiz" kalır. Sol kenarın hizalı olmaması, yani yeni satırların okunması nedeniyle, bu tür metinlerin sola hizalı olmasına göre okunması daha zordur. Bu nedenle, sağa hizalama genellikle üç satırı aşmayan kısa başlıklar için kullanılır. Metnin sağdan sola okunması gereken ve benzer bir hizalama yönteminin işe yarayabileceği belirli siteleri dikkate almıyoruz. auto Öğenin konumunu değiştirmez. inherit Ebeveynin değerini devralır. start Metin soldan sağa gidiyorsa sol ve metin sağdan sola gidiyorsa sağ ile aynıdır. end Metin soldan sağa gidiyorsa sağla aynı, metin sağdan sola giderken sola gidiyor.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    Metin hizalama

    Sola hizalama
    Merkez hizalama

    Bu örneğin sonucu Şekil l'de gösterilmiştir. 1.

    Pirinç. 1. Safari Tarayıcısında Metin Hizalama

    Sürüm 7.0'a kadar olan Internet Explorer, bu örneği diğer tarayıcılardan biraz farklı yorumlayarak yalnızca metni değil blokları da hizalar (Şekil 2).

    Pirinç. 2. Internet Explorer 7'de Metin Hizalama

    Nesne Modeli

    Document.getElementById("elementID ").style.textAlign

    Tarayıcılar

    Sürüm 7.0'a kadar ve dahil olmak üzere IE, yalnızca bir blok öğesinin içeriğini değil, öğenin kendisini de hizalar.

    CSS text-align özelliği, resimler ve diğer öğelerin yanı sıra metnin yatay hizalamasını denetler. Özelliğin 4 olası hizalama seçeneği vardır.

    CSS Sözdizimi metin hizalama

    ...Metin hizalama : merkez | haklı çıkarmak | sol | sağ | miras; ...
    • merkez - alanın merkezine hizalama (örneğin, alanın genişliği 500 pikseldir, dolayısıyla 250 piksellik çizgi boyunca hizalama olacaktır)
    • yasla - metni alanın tam genişliğine sığacak şekilde uzatın
    • sol - sol hizalama
    • sağ - sağ hizalama
    • miras - üst öğenin (ebeveyn) değerini kabul et

    Çoğu zaman bu özellikler bloklarda kullanılır.

    ve paragraflar

    Not:
    Dikey hizalamayı kontrol eden Vertical-align özelliği de vardır.

    html'de metin nasıl hizalanır

    Örnek 1.

    Metni sola hizalayın. Varsayılan olarak etkin.

    Выравнивание текста по левому краю

    Выравнивание текста по левому краю

    Пример №2. Выравнивание текста и картинки по центру

    Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

    Выравнивание текста по центру

    На странице преобразуется в следующее

    Выравнивание текста по левому краю

    Пример №3. Выравнивание текста по правому краю

    Выравнивание текста по правому краю.

    Выравнивание текста по правому краю

    На странице преобразуется в следующее

    Выравнивание текста по правому краю

    Пример №4. Выравнивание текста по ширине всей области

    Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

    На странице преобразуется в следующее

    Выравнивание текста по ширине всей области

    Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

    Примечание

    Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

    Выравнивание по центру

    Выравнивание текста по ширине всей области

    ... ...

    Разница в тегах

    и

    В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

    Задаёт выравнивание последней строки блока текста.

    Краткая информация

    Обозначения

    Описание Пример
    <тип> Указывает тип значения. <размер>
    A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,<время>]*
    + Повторять один или больше раз. <число>+
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
    # Повторять один или больше раз через запятую. <время>#
    ×

    Значения

    auto Совпадает с выравниванием, заданным свойством text-align , за исключением значения justify . Для него выравнивание будет как start . start Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево). end Строка выравнивается по конечному краю блока, он определяется направлением текста. left Строка выравнивается по левому краю. right Строка выравнивается по правому краю. center Строка выравнивается по центру. justify Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

    Влияние разных значений на положение текста показано в табл. 1.

    Табл. 1. Влияние значений text-align-last
    Значение Выравнивание Вид текста
    left По левому краю
    right По правому краю
    center По центру
    justify По ширине

    Песочница

    Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

    div { text-align-last: start ; }

    Пример

    text-align-last

    Dağları aşarken vadiye yaslan; yükseklerde kalın, güneşli tarafın olduğu yere bakın. Yüksek bir yerde bir düşmanla savaşırken, doğrudan yukarı gitmeyin. Dağlardaki birliklerin düzeni böyledir.

    Nesne Modeli

    Bir obje.style.textAlignLast

    Not

    Internet Explorer ve Edge, başlangıç ​​ve bitiş değerlerini desteklemez.

    49 sürümünden önceki Firefox, -moz-text-align-last özelliğini destekler.

    Şartname

    Her spesifikasyon birkaç onay aşamasından geçer.

    • Tavsiye (Öneri) - spesifikasyon W3C tarafından onaylanmıştır ve standart olarak tavsiye edilmektedir.
    • Aday Önerisi ( olası öneri) - standarttan sorumlu grup, hedeflerini karşıladığından memnun, ancak standardı uygulamak için geliştirme topluluğunun desteği gerekiyor.
    • Önerilen Tavsiye ( önerilen öneri) - Bu aşamada belge nihai onay için W3C Danışma Kuruluna sunulur.
    • Çalışma Taslağı - Topluluk incelemesi için tartışma ve değişikliklerden sonra daha olgun bir taslak.
    • Editörün taslağı ( Editör taslağı), proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonudur.
    • taslak ( Şartname taslağı) standardın ilk taslak versiyonudur.
    ×

    Tipik olarak, siteyi oluşturan kişi, yazım kurallarına ve kendi tercihlerine göre hangi harflerin büyük ve hangilerinin küçük olacağına karar verir. Ancak, karakterlerin büyük/küçük harf durumunu değiştirme işlemi, özellik kullanılarak otomatikleştirilebilir. metin dönüşümü. Bu özellik dört değer alabilir:

    • yok - metin değiştirilmeden yazılır;
    • büyük harfle yazmak- her kelime büyük harfle başlayacak;
    • küçük harf - tüm karakterler küçük harf olur (küçük harf);
    • büyük harf- tüm karakterler büyük harf olur (büyük harf).

    Örneğin, aşağıdaki kural H1 başlığının büyük harflerle yazılması gerektiğini belirtir:

    H1 (metin dönüşümü: büyük harf;)

    Kısaltmalar, öğe adları, başlıklar ve diğerleri için otomatik karakter durumu değişikliği ayarlamak uygundur. metin öğeleri, büyük veya küçük karakterlerle yazmak istediğiniz yere.

    Metin süsleme: metin süsleme özelliği

    Mülk metin dekorasyonu metin ek tasarımını ayarlamanıza olanak tanır. Bu özelliğin değerleri sabittir hiçbiri, altı çizili, üstü çizili, satır arası Ve göz kırpmak, normal metni görüntülemenize, metnin üstüne, altına veya içinden bir çizgi çizmenize veya metnin yanıp sönmesine izin verir. Bu özelliğin farklı değerlerinin kullanılmasına bir örnek Şekil 11.4'te gösterilmiştir.


    Pirinç. 11.4.

    Mülkiyetin en yaygın uygulaması metin dekorasyonu varsayılan bağlantı altını değiştirmektir. Örneğin, aşağıdaki kural bağlantıların altının çizilmesi gerektiğini belirtir:

    A:link (metin süslemesi: altı çizili;)

    Kelime aralığı: kelime aralığı özelliği

    Metindeki kelimeler arasındaki boşluğu ayarlamak için kelime aralığı özelliğini kullanın. Bu özelliğin değerleri, varsayılan olan ve mevcut yazı tipi için standart aralığı ayarlayan normal anahtar kelime kullanılarak ayarlanabilir. Aralığı ayarlamak için, standart olana ek olarak, mevcut herhangi bir CSS biriminde bir değer belirtebilirsiniz ve değer negatif olabilir.

    Bu nedenle, aşağıdaki kural H1 başlığındaki kelimeler arasındaki boşluğu 1em artırır:

    H1 (kelime aralığı: 1em;)

    Metin hizalama: text-align özelliği

    Hizalama, bir metin bloğunun sol veya sağ kenarını görünmez bir dikey çizgi boyunca yerleştirmek anlamına gelir. text-align özelliği, metni hizalamak için kullanılır. Bu özellik için geçerli değerler, sırasıyla sola, sağa, merkeze ve hizalamayı iki yana yaslayan left, right, center ve justify değerleridir.

    Aşağıdaki kural, bir DIV öğesinin içerdiği tüm öğelerin merkez hizalamasını ayarlar:

    DIV (metin hizalama: merkez;)

    Öncü: satır yüksekliği özelliği

    Satır aralığı, yakın aralıklı satırların taban çizgileri arasındaki mesafedir. Normal şartlar altında satır aralığı, yazı tipinin türüne ve boyutuna bağlıdır ve tarayıcı tarafından otomatik olarak belirlenir. Ancak bu değer, line-height özelliği kullanılarak değiştirilebilir. Normal'in varsayılan değeri, tarayıcının satır aralığını otomatik olarak hesaplamasına neden olur. Sıfırdan büyük herhangi bir sayı, geçerli metnin yazı tipi boyutunun çarpanı olarak alınır. Bu özellik için CSS'de kabul edilen herhangi bir uzunluk birimini değer olarak kullanmak da mümkündür. Yüzde gösterimi kullanılmasına da izin verilir, bu durumda yazı tipi yüksekliği %100 olarak alınır. Negatif satır aralığına izin verilmez.

    Harf aralığı: harf aralığı özelliği

    Tarayıcı, yazı tipi boyutuna ve türüne göre karakter aralığını otomatik olarak seçer. Bazı durumlarda harfler arasındaki boşlukları düzeltmek gerekir. Letter-spacing özelliği, harf aralığını kontrol etmek için kullanılır. Bu özellik için değer olarak herhangi bir CSS uzunluk birimi kullanılabilir, ancak yazı tipi boyutuna (em ve ex) dayalı göreli birimlerin kullanılması önerilir. Satır aralığının aksine, letter-spacing özelliği negatif bir değere izin verir, ancak bu durumda metnin okunabilirliğinin korunduğundan emin olmanız gerekir.

    Aşağıdaki kural, H1 başlığındaki karakterler arasındaki boşluğu 0,5em artırır.

    text-align-last özelliği ( HTML hizalama ile karıştırılmamalıdır) bir bloğun son satırının veya zorunlu kesmeden önceki satırın nasıl hizalanacağını belirler. Bu önemlidir, çünkü bir paragrafın son satırı genellikle tüm alanı dolduracak kadar metin içermez.

    Bu yazıda, kabul edilen değerler ve tarayıcı desteği dahil olmak üzere text-align-last özelliğinin tüm yönlerini ele alacağız.

    Kullanım ve kabul edilen değerler

    text-align-last özelliğini uygulamak basittir. İşte metnin son satırını sağa hizalamak için bir kod parçacığı:

    Giriş grafiği ( text-align: justify; // IE ve Edge için gereklidir text-align-last: right; )

    Özellik yedi değer alabilir. Align:left , right ve center standart HTML metin değerlerine muhtemelen aşinasınızdır. Son satırdaki metni kabın sağına, soluna ve ortasına hizalarlar.

    Aşağıdaki örnek, bu üç değer arasındaki farkları göstermektedir:

    Örneği görüntüle

    Dördüncü değer olan justify , son satırı, metnin kabın tüm genişliği boyunca eşit aralıklarla yerleştirilmesi için hizalar. Bu, kelimeler arasına uygun sayıda boşluk eklenerek elde edilir. Metin miktarına bağlı olarak bu özellik, kelimeler arasında çok büyük boşluklar bırakmadan son satırdaki boşluğu tamamen doldurmak için kullanılabilir.

    İkinci paragraftaki metin de aralıklıdır ancak son satır tek kelime içerdiğinden sola konumlanmıştır.

    Örneği görüntüle

    Metnin son satırının sola hizalanması soldan sağa okunan diller için uygundur ( LTR), ancak bu, RTL dilleri için yanlış olur. Bu gibi durumlarda sol veya sağ değerlerin kullanılması sorunlara neden olabilir.

    Neyse ki, başlangıç ​​değerini metni yazmanın ve okumanın başladığı kenara hizalamak için kullanabilirsiniz. Bu, text-align-last özelliğini start olarak ayarlayarak, metni LTR dilleri için sola, RTL dilleri için sağa hizalayacağınız anlamına gelir.

    Bitiş değerini, metni yazmanın ve okumanın başladığı yerin karşı kenarına hizalamak için de kullanabilirsiniz. Bu, LTR dilleri için sağa, RTL dilleri için sola eşleşecektir.

    Örneği görüntüle

    Bu özellik için varsayılan değer auto'dur. Kullanıldığında, justify olarak ayarlanmadıkça, son satırdaki metin HTML text align özelliğinin değerine göre hizalanır. Aksi takdirde, metin, yalnızca text-justify özelliği Distribute olarak ayarlanmışsa, kabın genişliğine yaslanır. Aksi takdirde metin, yazmanın ve okumanın başladığı kenara hizalanır.

    Önemli notlar

    text-align-last'ın çalışması için, text-align özelliğinin justify olarak ayarlanması gerekir. Ancak bu kural yalnızca IE ve Edge'de uygulanmaktadır. Firefox ve Chrome'da özellik, text-align öğesini justify olarak ayarlamadan çalışır. Aşağıdaki örnekte, metin Edge ve IE'de sağa hizalanmalıdır. Diğer tarayıcılarda, paragrafların son satırları text-align-last özelliğinin değerine göre hizalanır ve geri kalan satırlar sağa hizalanır.

    Demoyu görüntüle

    text-align öğesini HTML'yi hizalamak için ayarlamazsak, sonuç o kadar çekici görünmez. Bu nedenle, büyük olasılıkla metin genişliği dağılımını ayarlayacaksınız.

    Özellik, paragrafta etiketi kullanılarak belirtilmiş zorunlu bir satır sonu olsa bile çalışır.
    ya da böyle bir şey. Bu özelliğin, yalnızca en dıştakini değil, belirtilen öğe içindeki tüm son metin satırlarını etkileyeceğini unutmayın. Örneğin, bir makale veya div öğesinin içindeki metin üç paragraf içeriyorsa, her paragraftaki son satır, üst öğenin tamamında ayarlanan text-align-last özelliğinin değerine göre hizalanır.

    Yalnızca içeriğin en son satırını hizalamak istiyorsanız, :last-child veya :last-of-type seçicilerini kullanabilirsiniz. Örnek olarak aşağıdaki demodaki kodu alın:

    makale ( text-align: justify; ) makale p:last-of-type ( text-align-last: right; )

    Yazımızın son paragrafının son satırını sağa hizalar. Satırların geri kalanı, HTML metin hizalama özelliğinin değerine göre hizalanır.

    Demoyu görüntüle

    Hizalamayı değiştirmek için diğer seçicileri de kullanabilirsiniz: :even ve :odd.

    Bazen bir paragrafta yalnızca bir satır olabilir. Bu durumda, hem text-align özelliği hem de text-align-last özelliği için değerler belirlediyseniz, ikinci özellik öncelikli olacaktır.

    Aşağıdaki kod parçacığını göz önünde bulundurun:

    p ( text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )

    İkinci paragrafta yalnızca bir satır varsa, text-align-last öncelikli olacağından metin sola hizalanır. Aşağıdaki demo, bu CSS'yi ve diğer birkaç HTML hizalama örneğini çalışırken gösterir.

    Demoyu görüntüle

    Tarayıcı Desteği

    Bu özellik için destek, " kullanılarak etkinleştirilebilir. Deneysel web platformu özelliklerini etkinleştirin” sırasıyla 35 ve 22 sürümlerinden itibaren Google Chrome ve Opera'da. Chrome 47+ ve Opera 34+'de tamamen desteklenir.

    Bu özelliği Firefox'ta kullanmak için -moz- önekini eklemelisiniz. Başlangıç ​​ve bitiş değerleri IE tarafından desteklenmemektedir. Aynı zamanda Edge bu özelliği tam olarak desteklemektedir. text-align-last'ı tam olarak desteklemeyen tek popüler tarayıcı Safari'dir.

    Devamını oku: