Html kodları girintisi. HTML paragraf biçimlendirme

04/11/16 10.5K

Stillerle bir HTML paragrafını biçimlendirme

HTML belgeleri söz konusu olduğunda, etiketler içeriğin nasıl sunulması gerektiğini belirtmekten çok içeriği işaretlemek için çalışır. Stillerle sunum üzerinde daha fazla kontrol sağlanır. Bu yazıda, HTML'de paragraf biçimlendirme ile ilgili stillere bakacağım.

Etiket

HTML'de, paragrafları ayarlamanıza izin verir ve hizalama özelliği bunları sola, sağa, ortaya veya genişliğe hizalar. Bunlara ek olarak global style özniteliğini kullanacağız.

Bir paragrafı hizala

align niteliğini kullanarak bir paragrafı aşağıdaki değerlerle hizalayabilirsiniz:

metin hizalama: sol | sağ | orta | yasla | ilk | devral;

Aşağıdaki kodu .html dosyanıza kopyalayın.

Bu paragraf ortalanmış

Bu paragraf sağa hizalanmış

Bu paragraf tarayıcı penceresinde iki yana yaslı olarak görüntülenir. Aralıklı bir paragraf, fazladan boşluklar eklenerek sağa hizalanır ve sola yaslanır. Genişliğe hizalı paragrafın kenarlarının, sola hizalı ve sağa hizalı paragrafların kenarlarıyla eşleştiğini görebilirsiniz. Sola hizalanmış bir paragrafta, sol kenar eşittir ve sağa hizalanmış bir paragrafta sağdır. Bu paragrafın her iki kenarının da düz olduğunu görebiliyor musunuz? Bu, metin hizalama: yaslama stili sayesinde elde edilir.

Bir tarayıcı penceresinde paragrafın HTML kodu şöyle görünür.

Satır aralığı

Bir paragrafın satır aralığını stil = satır yüksekliği ile kontrol edebilirsiniz. Aşağıdaki değerlerle style niteliğini kullanın:

satır yüksekliği: normal | sayı | uzunluk | ilk | devralma;

Aşağıda, farklı satır aralığına sahip paragrafları çıkaran örnek bir HTML kodu verilmiştir:

Bu paragraf, stil özelliği için iki değer kullanır. İlk satır yüksekliği: 1.5, paragraf için bir buçuk satır aralığını belirtir ve ikinci değer olan metin hizalama: iki yana yasla, paragraf metninin iki yana yaslanması gerektiğini belirtir.

Bu paragraf çift aralıklıdır ve iki yana yaslıdır. line-height: 2, çift aralığı tanımlar. style niteliğinin iki değere sahip olması gerekmez. Ancak iki değer belirtmeniz gerekiyorsa, bunları noktalı virgülle ayırarak yapabilirsiniz.

Stil özelliği için satır yüksekliği değerini kullanmanın birkaç farklı yolu şunlardır:

: Satır aralığını 13 piksele ayarlar;

: Geçerli yazı tipi boyutuna göre HTML paragraf aralığını %200'e ayarlar;

: Satır yüksekliğini 14 piksele ayarlar.

Girinti

Anlamayı kolaylaştırmak için "girinti" terimini kullandım. Ancak HTML'de, nesnenin etrafında boşluk oluşturmak için boşlukları kullanırız. Bir paragrafı sola veya sağa girintilemek için stil niteliğini bir dolgu değeriyle kullanabilirsiniz.

Aşağıda, sola ve sağa girintili paragraflara bir örnek verilmiştir:

Bu paragraf girintili değil, gerekçelidir. Bu paragraf için P öğesinin style niteliğine bir göz atın.

Bu paragraf için, padding-left: 30px stilini kullanarak sol dolguyu 30px olarak ayarladım. Ayrıca bu paragraf, metin hizalama: iki yana yaslama stili kullanılarak genişlikte hizalanır. Bildiğiniz gibi Style özelliği için noktalı virgülle ayrılmış birden çok değer kullanabiliriz.

Ve bu paragraf sağa 30 piksel girintili, ancak sola girintili değil. Ayrıca genişlikte haklı. style niteliğinin 'padding-right' değeri, sağdaki dolguyu belirtir. Efekti görmüyorsanız, iki yana yaslanmış HTML paragrafının beklendiği gibi görüntülenmesi için tarayıcı penceresinin genişliğini azaltın.

Paragraflar arası girinti (paragraftan önce girinti ve paragraftan sonra girinti)

HTML veya CSS'de buna ihtiyacımız yok. Öğenin dolgu stilini belirtebiliriz

Dolgu üst ve alt dolgu, üst veya alt girinti görevi gören paragraftan önce ve sonra beyaz boşluk sağlar. Aşağıdaki örnek etikete bir göz atın

HTML'nin ilk paragrafını, ikinci paragraftan önce 10 piksel ve ikinci paragraftan sonra 50 piksel olacak şekilde ayarladım:

Bu paragraftan önce veya sonra girintili değildir. Bu normal, gerekçeli bir paragraftır. Bildiğiniz gibi, etiketin içindeki style = ”text-align: justify” kodunu kullanarak bir paragrafı genişliğine yaslayabiliriz.

Bu paragraf geniş bırakılmıştır. Ayrıca paragraftan önce 10 piksel ve sonra 50 piksel dolguludur. Etiketin içinde 3 stil belirledim.

Bu, varsayılan olarak girinti ve hizalama içermeyen normal bir paragraftır.

Hatırlanacak şeyler

• Bir HTML paragrafı, hizalama niteliği veya metin hizalama stili kullanılarak hizalanabilir;
• HTML, ekran boyutuna, tarayıcı penceresi boyutuna bağlı olarak farklı şekilde görüntülenecektir;
• HTML'ye fazladan boşluk veya boş satır eklemek çıktıyı etkilemez. Tarayıcı tüm fazladan boşlukları kaldırır;
• Etiketler neyin görüntüleneceğini tanımlar ve stiller nasıl görüntüleneceğini tanımlar;
• Stiller üç farklı şekilde belirtilebilir - satır içi (etiketlerin içinde), dahili ( bir öğe kullanarak aynı HTML dosyasının içinde
  

  Prens Andrey ormanın içinden geçerken bu meşeye birkaç kez baktı. Meşenin altında çiçekler ve çimenler vardı ama o hâlâ onların ortasında duruyordu, kasvetli, hareketsiz, çirkin ve inatçı.
  

  Sonuç:

  Prens Andrey ormanın içinden geçerken bu meşeye birkaç kez baktı. Meşenin altında çiçekler ve çimenler vardı ama o hâlâ onların ortasında duruyordu, kasvetli, hareketsiz, çirkin ve inatçı.

  Artık kolayca yapabilirsiniz html sayfalarınızda kırmızı bir çizgi yapın... Bir sonrakine kadar!

  Herhangi bir kitabı, gazeteyi, dergiyi ve hatta herhangi bir normal metni okurken, birçok paragrafla karşılaştınız ve her birinin ilk satırı küçük bir girinti içeriyor. Bu yazıda size en iyi seçeneği göstereceğim. CSS ile paragraf girintilerini ayarlama.

  Tabii ki, herhangi bir sayıda boşluk kullanılarak eklenebilir, böylece gerekli girinti seçilir, ancak, elbette, bu yöntemin, hafifçe söylemek gerekirse, elverişsiz olduğunu anlıyorsunuz. Ve bu sorunun çözümü çok basit.

  bunu zaten bilmelisin HTML etiketi kullanılarak bir paragraf oluşturulur<P>. Bu nedenle, her paragraf kendi etiketinde olmalıdır.<P>. Ve için her paragrafın ilk satırını girintileme böyle bağlaman yeterli CSS kodu:

  P (
  metin girintisi: 10 piksel;
  }

  Bu örnekte, girinti 10 piksel... Siteniz için en iyisini bulmak için bu değerle oynayabilirsiniz.

  Bu kadar basit bir şekilde yapabilirsiniz herhangi bir paragrafın ilk satırlarını girinti sitedeki metinde.

  Hala herhangi bir sorunuz varsa veya bu makaleye yorum yapmak istiyorsanız, yorumunuzu sayfanın altına bırakabilirsiniz.

  Yorumlar (9):

  31.05.2013 13:10:03

  Merhaba Michael, aşağıdaki css koduyla sorunu çözmeme yardım et: .bam (border: 1px düz siyah; border-radius: 8px; margin-bottom: %4; metin hizalama: sol; genişlik: %84;) .bam .author (arka plan rengi: Beyaz; kenarlık-alt: 1 piksel düz siyah; kenar-sağ-yarıçap: 8 piksel; kenar-üst-sol-yarıçap: 8 piksel; yazı tipi ağırlığı: kalın; dolgu: 4 piksel;) .bam .text (arka plan rengi: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-sol-radius: 8px; padding: 4px;) ".bam .text" içindeki metnin başka bir metinle sarılması gerekir. bir satıra sığmıyorsa satır. Ancak bir nedenden dolayı aktarılmaz, ancak bloktan sürünerek çıkar. Lütfen bu sorunu çözmeye yardım edin.

  Cevaplamak

  06.06.2013 22:42:20

  Merhaba Mikhail, yanlışlıkla aşağıdaki durumdan nasıl bir çıkış yolu bulacağınızı bilmiyorsunuz: bir blok var ve içinde başka bir blok var ve bu blokta metnin içine yazıldığı (metnin uzunluğu değil önceden bilinir). Peki, ana bloğun yüksekliğini, içindeki bloğun yüksekliğine (metinle birlikte) nasıl bağlı hale getirirsiniz? Ve sonra bir nedenden dolayı ana bloğun yüksekliğinin iç bloğun yüksekliğinden daha az olduğunu anladım.

  Cevaplamak

  yönetici 06.06.2013 23:32:40

  Tüm dış üniteler iç ünitelerin ölçülerine göre esnetilir. Bunun yapılması gerekmez, zaten varsayılan olarak olmalıdır.

  Cevaplamak

  07.06.2013 11:11:09

  ve bir göz atın: http://progbase.ru/about.php

  Cevaplamak

  yönetici 07.06.2013 21:54:37

  Kullanılmalı

  - bu bloğu farklı yerlere koyun ve nelerin değiştiğini görün. Her şey yoluna girer girmez, orada bırakın.

  Cevaplamak

  13.09.2013 21:39:34

  Merhaba! Lütfen fareyle üzerine gelindiğinde bu ipucunun penceresinde girintiler ve diğer metin stilleri yapmama yardım edin.Biraz bir şey yolunda gitmiyor ve hepsi bu.Şimdiden teşekkürler. çabuk ve metnin devamı