internet
programlar
Bir bilgisayar
modemler
akıllı telefon
ağlar
Çeşitli

css çizgileri arasındaki mesafe. HTML Dersleri: CSS Satır Aralığı

Oldukça sık, yeni başlayan yerleşim tasarımcıları, Basamaklı Stil Sayfalarında (CSS) ustalaşmakta sorun yaşarlar. CSS'de satır aralığı ile çalışan bir istisna yoktur. Satır aralığı, satırlar arasındaki dikey mesafedir. Normal bir Microsoft Word belgesinde olduğu gibi, bu parametre bir html dosyasının metninde de değiştirilebilir.

Boşluğu değiştirirken satır yüksekliğini kullanma

Boşlukla ilgili sorunu çözmenin ilk ve en doğru yolu, satır yüksekliği özelliğinin değerini ayarlamaktır. Bu özelliğin varsayılan değeri normaldir (satır yüksekliği: normal;). Satır aralığı, İnternet tarayıcısının kendisi tarafından otomatik olarak hesaplanır ve özellikle yazı tipinin türüne ve boyutuna bağlıdır. Satır yüksekliği stili özelliğinde ayarlanacak herhangi bir pozitif sayısal değer, tarayıcı tarafından mevcut yazı tipi boyutunun çarpılması gereken bir sayı olarak yorumlanacaktır.

CSS'de satır aralığı farklı uzunluk birimlerinde belirtilebilir: nokta (pt), inç (inç), piksel (px) ve yüzdeler (%). Yüzde, geçerli yazı tipine göredir ve varsayılan olarak %100'dür. line-height özelliğinin, inherit özelliğinin değerini üst öğesinden ödünç aldığını unutmayın.

CSS'de satır aralığının nasıl artırılacağına dair bazı örnekler:

Satır aralığı ile çalışma süreci oldukça basittir. Temel CSS bilgisine ve ana html sayfasına dosya ekleme becerisine sahip olmalısınız. Stiller ayrıca doğrudan html sayfasında da ayarlanabilir:

Bu cümlede bir buçuk boşluk bırakmak için aşağıdaki kodu CSS dosyasına eklemeniz gerekiyor:

satır yüksekliği: 1.5;

Çift boşluk bırakmak için aşağıdaki kodu yazabilirsiniz:

satır yüksekliği: %200

Her iki durumda da tarayıcı mevcut yazı tipinin 2 ile çarpılması gerektiğini anlayacaktır. Bu değer satır aralığı olacaktır.

Şimdi satır aralığının nasıl azaltılacağına (CSS) bir örnek verelim:

Negatif bir satır yüksekliği değerinin basitçe algılanmadığını hatırlamak önemlidir, bu nedenle minimum değeri 0 olabilir. Yarım boşluk elde etmek için aşağıdaki kodu yazmanız gerekir:

satır yüksekliği: 0,5;

satır yüksekliği: %50

satır yüksekliği: 0,5pt

3 seçeneğin tümü doğrudur ve tüm W3C standartlarına uygundur, bu nedenle herhangi bir tarayıcı sürümünde çalışırlar.

Boşluğu değiştirirken dolgu kullanma

Bununla birlikte, satır yüksekliği özelliğini değiştirmenin yanı sıra, CSS'de satır aralığını değiştirmenin başka bir yolu vardır, bu da dolgu özelliğinin değerleriyle "oynamaktır". Padding style özelliği, herhangi bir html nesnesindeki dahili dolgudan sorumludur. Varsayılan olarak bu özellik 0'dır. Farklı değerler seçerek satır aralığını değiştirebilirsiniz, örneğin:

Satır aralığı ile çalışmak çok kolaydır. CSS'nin temellerini bilmek ve dosyayı ana html sayfasına bağlayabilmek yeterlidir. Ayrıca html uzantısıyla doğrudan sayfada da ayarlanabilir.

Satır aralığını artırmak için özelliğin değerini artırın:

Böylece paragrafımızdaki satırlar arasındaki mesafe ilkine göre 10 piksel artacaktır. Aynı başarı ile satır aralığını yazarak da azaltabilirsiniz, örneğin:

Negatif satır aralığı

Dikkat ederseniz, dizelerin üst üste gelmemesi için negatif değerler girilmesine de izin verilmez. CSS'de satır aralığı negatif olamaz. Kodlama açısından ve W3C standartlarına göre satır aralığı değerlerine asla negatif değerler yazamazsınız.

Listelerde satır aralığını değiştirme

Bazen listelerde satır aralığını değiştirme görevi vardır.

    ve
      . Önceki yöntemler istenen sonucu vermeyecektir, ancak listedeki boşluğu değiştirebilecek bir özellik vardır - bu özellik - kenar boşluğu. Bu stil özelliği, pozitif veya negatif olabilir. Listedeki satır aralığındaki değişikliği bir örnekle gösterelim:

    1. Paragraf 1

    2. 2. nokta

    3. 3. nokta

      4. Girintiyi artırmak için CSS dosyasına aşağıdaki satırları yazmanız gerekir:

      üst kenar boşluğu: 10 piksel;

      Böylece her bir liste öğesinden uzaklığın 10 piksel arttığını belirtmiş olduk. Ayrıca, bu durumda, negatif bir değer de mümkündür. Böylece şunları ayarlayabiliriz: - margin-top: -15px.

      Mülk satır yüksekliği metin satırları arasındaki boşluğu ayarlar (satır aralığı). Özellik, göründüğü gibi, metin satırları arasındaki boşluğu ayarlamaz. metin satırı yüksekliği. Bu, gerçek satır aralığının şu şekilde hesaplanacağı anlamına gelir: satır yüksekliği - yazı Boyutu= metin satırları arasındaki boşluk. Ya da tam tersi satır yüksekliği = yazı Boyutu+ metin satırları arasındaki boşluk.

      Mülk satır yüksekliği bazen metni yüksekliğe ortalamak için standart olmayan bir şekilde kullanılır.

      Sözdizimi

      Seçici ( satır yüksekliği: CSS birimleri | yüzdeler | çarpan | normal | devralma; )

      değerler

      Varsayılan olarak, tarayıcı satır aralığını otomatik olarak seçer ( normal).

      Örnekler

      Örnek

      satır yüksekliği - yazı Boyutu= 35 piksel - 13 piksel = 21 piksel:

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 35 piksel; )

      Kod yürütmenin sonucu:

      Örnek

      Boşluğu azaltın 21 piksel - 13 piksel = 7 piksel:

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 21 piksel; )

      Kod yürütmenin sonucu:

      Lorem ipsum dolor sit amet, conectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Örnek

      Bu örnekte, metin satırları arasındaki mesafe satır yüksekliği - yazı Boyutu = 13 piksel - 13 piksel = 0 piksel- satırlar pratik olarak birbirine yapışacaktır (üst satırdaki harflerin kuyrukları, alttaki harflerin kuyruklarına değecektir):

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 13 piksel; )

      Kod yürütmenin sonucu:

      Lorem ipsum dolor sit amet, conectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Örnek

      Bu örnekte, değer satır yüksekliği- yazı tipi boyutunun 1.5 çarpanı. Sonuç olarak satır yüksekliği eşdeğer olacak yazı Boyutu * 1.5 = 13 piksel * 1.5 = 20 piksel. Ve çizgiler arasındaki gerçek boşluk satır yüksekliği - yazı Boyutu = 20 piksel - 13 piksel = 7 piksel:

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 1.5; )

      Kod yürütmenin sonucu:

      Lorem ipsum dolor sit amet, conectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Örnek

      Çarpanı artıralım:

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 2.5; )

      Kod yürütmenin sonucu:

      Lorem ipsum dolor sit amet, conectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Örnek

      yapılırsa satır yüksekliği az yazı Boyutu, o zaman çizgiler genellikle birbiriyle örtüşür:

      P ( yazı tipi boyutu: 13 piksel; satır yüksekliği: 9 piksel; )

      Kod yürütmenin sonucu.

      Blok öğeleri için, bir metin satırının minimum yüksekliğini belirtir. Gömülü satır içi öğeler için (gibi ) line-height özelliğinin hiçbir etkisi yoktur. Diğer satır içi öğeler için satır yüksekliği, bloğun satır yüksekliğini hesaplamak için kullanılan yüksekliği belirtir.

      kısa bilgi

      gösterim

      TanımÖrnek
      <тип> Değerin türünü belirtir.<размер>
      A&BDeğerler belirtilen sırada çıktı alınmalıdır.<размер> && <цвет>
      bir | BÖnerilen değerlerden (A veya B) yalnızca birinin seçilmesi gerektiğini belirtir.normal | küçük şapkalar
      Bir || BHer değer tek başına veya herhangi bir sırayla diğerleriyle birlikte kullanılabilir.genişlik || saymak
      Grup değerleri.[ kırp || geçmek]
      * Sıfır veya daha fazla kez tekrarlayın.[,<время>]*
      + Bir veya daha fazla kez tekrarlayın.<число>+
      ? Belirtilen tür, sözcük veya grup isteğe bağlıdır.ek?
      (A, B)En az A'yı tekrarlayın, ancak B'den fazla değil.<радиус>{1,4}
      # Virgülle ayırarak bir veya daha fazla kez tekrarlayın.<время>#
      ×

      değerler

      Sıfırdan büyük herhangi bir sayı, geçerli metnin yazı tipi boyutunun çarpanı olarak alınır. Örneğin, 1,5 değeri bir buçuk satır aralığını ayarlar. CSS'de kabul edilen herhangi bir uzunluk birimi de değerler olarak kabul edilir - piksel (px), inç (inç), puan (pt) vb. Yüzde gösterimi kullanılmasına izin verilir, bu durumda yazı tipi yüksekliği 100 olarak alınır. %.

      Normal Satır aralığı otomatik olarak hesaplanır.

      Kum havuzu

      Winnie the Pooh, özellikle sabah saat on birde, biraz serinletici içeceklerden her zaman hoşlanmazdı, çünkü o sırada kahvaltı çoktan bitmişti ve akşam yemeği başlamayı düşünmemişti bile. Ve tabii ki Tavşan'ın bardak ve tabakları çıkardığını görünce çok sevindi.

      div (satır yüksekliği: 0,5 ; )

      Örnek

      satır yüksekliği

      Normal varsayım: cebir veya bir fonksiyonun maksimum ve minimum değerleri?

      Epsilon komşuluğu, bariz durum dışında, sonsuz bir bölge üzerinde karmaşık bir integrali destekler.



      Bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.

      Pirinç. 1. Satır yüksekliği özelliğinin uygulanması

      Nesne Modeli

      Bir obje.style.lineYükseklik

      Not

      Sürüm 7.0'dan önceki Internet Explorer, görüntüler ve form öğeleri için satır yüksekliklerini yanlış hesaplar.

      Şartname

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

      • Tavsiye (Tavsiye) - spesifikasyon W3C tarafından onaylanmış ve standart olarak tavsiye edilmiştir.
      • Aday Önerisi ( Olası öneri) - standarttan sorumlu grup, hedeflerine ulaştığından memnundur, ancak standardı uygulamak için geliştirme topluluğunun desteği gereklidir.
      • Önerilen Öneri ( Önerilen öneri) - Bu aşamada belge nihai onay için W3C Danışma Kurulu'na sunulur.
      • Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra daha olgun bir taslak.
      • Editörün taslağı ( içerik 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.
      ×

      Harfler ve kelimeler arasındaki boşlukları işleme

      1. Sözcük aralıkları arasındaki boşluk

      Sözcükler arasındaki boşluğu ayarlar. Pozitif ve negatif değerler kullanabilirsiniz. Anlam olumsuz ise kelimeler üst üste gelebilir.

      Kelime aralığının değeri, iki yana yaslanmış metin durumunda text-align özelliğinin değerinden etkilenir. Miras.

      Sözdizimi

      P (kelime aralığı: normal;) p (kelime aralığı: 2px;)
      Pirinç. 1. Kelimeler arasındaki boşluk

      2. Harf aralığı

      Özellik, harfler (izleme miktarı) ve semboller arasındaki mesafeyi ayarlar. Pozitif ve negatif değerler alabilir. Başlıkların, tanımların vb. ifade edilebilirliğini ve okunabilirliğini artırmak için kullanılması tavsiye edilir. Kalıtsaldır.

      Sözdizimi

      P (harf aralığı: normal;) p (harf aralığı: 2 piksel;)
      Pirinç. 2. Harf aralığı özelliğini kullanarak harfler arasındaki boşluğu değiştirin

      3. Beyaz boşluk işleme

      Özellik, bir öğe içindeki sözcükler ve satır sonları arasındaki boşlukları işler. Miras alınmadı.

      Beyaz boşluk
      Değerler:
      normal Varsayılan değer. Sözcükler arasına yalnızca bir boşluk eklenir, ek boşluklar atılır. Metin yalnızca gerektiğinde kaydırılır.
      şimdi rap Uygulandığı durumlar dışında satır sonlarını devre dışı bırakır
      .
      ön Metindeki boşluklar göz ardı edilmez, tarayıcı fazladan boşluklar ve satır sonları görüntüler.
      ön sarma Gerektiğinde satır sonları yaparak metindeki boşlukları korur.
      ön hat Ne zaman hariç fazladan boşlukları kaldırır
      .
      ilk Bir özelliğin değerini varsayılan değerine ayarlar.
      miras Özellik değerini üst öğeden devralır.

      Sözdizimi

      P (beyaz boşluk: normal;) p (beyaz boşluk: şimdirap;) p (beyaz boşluk: ön;) p (beyaz boşluk: ön sarma;) p (beyaz boşluk: ön çizgi;)

      4. Sekmeleri sekme boyutunda özelleştirin

      TAB tuşuyla elde edilen girinti miktarını değiştirmek için tab-size özelliğini kullanın. Üç pre-line , normal veya nowrap beyaz boşluk özellik değerinden biri ayarlandığında özellik değerleri yoksayılır.

      Yalnızca öğeler için çalışır