Web sitesindeki birçok metin öğesinin merkez tarafından görüntülenmesi gerekir. Başlıkların çoğu. Şimdi CSS merkezli metinle nasıl kurcalanacağını görelim.
Yetkili metin hizalama
Güç metin hizalama vermek uğruna ve bir anlam olabilir:
- Sol - öğenin sol kenarıyla metin hizalaması
- Sağ - sağ kenardan, ancak doğrudan ise, metin değişmeden bırakılır
- Merkez - merkezde. İhtiyacımız olan bunlar. Her gün ek parametreler gerekli değil - tarayıcının kendisi, metni farklı ekran çözünürlüklerinde merkeze yerleştirir
- Yasla - genişlikte değişiklik, eğer cilt satırında kelimeler tüm genişliği kaplayacak şekilde gerilirse
Örneğin, başlıktan daha fazla metnimiz var:
başlık
Başlığı (h1) ortaya hizalamak için şöyle yazmanız gerekir:
H1(
Metin hizalama: orta
}
Güç virivnyuє sadece harika bir metin değil, aynı zamanda küçük öğeler. Örneğin, zihnin arkasındaki görüntü, kuralın da yenisiyle uyumlu olduğu küçük bir unsurdur.
Metin hizalama, bir kayan nokta gibi davranmaz. Metin hizalama, metin içeren bir blok öğesine asılırsa, blok davranışını kaybetmez. Bloğun kendisine değil, metnin kendisine yeni gelene basılacaktır. Lütfen, örneğin sağa veya sola bir kayan nokta olarak değiştiğini unutmayın, tüm öğe görünecektir.
Daha önce söylediğim gibi, bu seviyede, eski hizalama özelliği olmadan yan taraftaki herhangi bir HTML etiketi yerine yatay olarak hizalamanın nasıl mümkün olduğunu biliyorsunuz. Zaten anladığınız gibi, stilleri (CSS) veya daha çok favori stil özelliğimizi yeniden ayarlayacağız.
Ayrıca HTML öğesini yerinde işlemek için style özelliğine aşağıdaki değerlerden birini atamak gerekir:
- metin hizalama:merkez- Öğenin ortasındaki Virіvnyuvannya cilt çizgisi, örneğin paragraf.
- metin hizalama:sola- Dış görünüm satırı, öğenin sol tarafına bastırılır (kilitleme değeri).
- metin hizalama:sağa- Sıraya kadar deri sıkma Sağ Taraf.
- metin hizalama:yasla- Elemanın sol ve sağ taraflarındaki görünümü görüntüleme. Açıklamama izin ver. Öğedeki ses, örneğin bir paragraf, metnin bir tarafı eşittir ve diğer tarafı “yırtıktır”, böylece eski satırlar üç kat farklı olmalıdır. text-align:justify değerini kazanırsak, deri sıra eşit genişlikte boyutlandırılır. Aynı zamanda, tarayıcı ek kelimeler eklemelidir ve kalan kelime ilk kez sağ taraflara üst üste basıldığında, blok her iki tarafta da eşit olacaktır.
Popo virіvnyuvannya vmіstu tagіv
Merkez başlığı.
Merkez paragraf.
Tarayıcıda sonuç
Merkez başlığı.
Paragrafın metni sağ elle basılır.
Merkez paragraf.
Vzagali, yalnızca etiketleri ve orta tabloları engellemek için yatay olarak dağılır (bunlardan daha sonra bahsedeceğiz). Diğer taraftan böyle bir şey denemek isterseniz, uyanana kadar (inline) yogayı bırakamayacaksınız. Niye ya? Ve yakın zamanda size yerleşik öğenin genişliğinin yerinde olduğunu söylediğimizi hatırlıyor musunuz? Dışarı çıkmak çok açık, bu yüzden görülecek hiçbir yer yok ve tarayıcı sadece "gizeminizi" görmezden geliyor. :)
Ödev.
- Makalenin başlığını, iki її dağılımını ve ilk dağıtıma bir katkıyı oluşturun. Makalenin başlığı, sayfanın ortasında öne çıksın.
- Arial yazı tipini tüm taraflar ve tüm başlıklar için ayarlayın - Times ve italik olarak yazılmasına izin verin.
- Makalenin başlık metnini #FF6600 ile renklendirin, #6600FF ekleyin ve gönderiyi yazı ile doldurun.
- Dış görünüm başlığının altına her seferinde bir paragraf yazın ve dış görünüm başlığının metninin tarayıcıda gözden geçirilmesi saatte en az üç satır sürmelidir.
- Başka bir paragrafı ortaya, üçüncü - sağ elini ve dördüncü - her iki tarafa hizalayın.
HTML ile devam edelim. Bu seviyede, sayfaların HTML başlıklarını, başlıklar gibi, nasıl doğru olmaları gerektiğini ve pis kokunun sıkışıp kalamayacağını görebiliriz. Ayrıca paragrafları sıralayacağız, böylece tarafınızı metin, ale, smut, zrobiti tse ile doğru şekilde doldurabilirsiniz.
Yakshcho Vi ilk makaleyi okumadı, buradan öğrenebilirsiniz:
- Ders 1. HTML nedir?
Teori ve pratik — HTML sayfasının paragraf başlıkları
Bugün paragraflar ve başlıklar hakkında konuşacağız. En basitinden başlayalım - paragraflardan ve kokuşmuş vikoristovuyutsya'dan.
Yandaki paragraflar
Mevcut bir paragraf etiketine sahip olacak bir kod örneği koyacağım.
İlk dersten temel yapıyı zaten hatırlıyorsunuz. Orada temel bilgileri aldılar ve HTML'nin nasıl olduğunu merak ettiler. Buna saygımızı etiketler arasında bilinenlerin ortasına yerleştiriyoruz. .
Yan tarafa herhangi bir metin yazarsanız, bu sadece bir paragraf veya resimlerin altında küçük bir açıklayıcı satırdır, bu metni etiketin ortasına yerleştirmeniz gerekir.
İlerleyen derslerde bu paragrafları tasarlama süreci üzerinde çalışacaksınız. Aynı zamanda etiketi olmayan bir tarafa etiket koyamayanları anlamaktan da sorumlusunuz. Bunun için, zastosuvat bude zastosuvat'ın tek başına, hala sama dіlyanki metnidir.
Birkaç paragraf yazmaya çalışın. Etiketten ondalık paragrafları alın ve ondalık paragrafları hiçbir şey olmadan bırakın. І Fiyatı anında kazanacaksınız. Etiketin ortasına bir paragraf yazarsanız, bir sonraki adım hemen görünecektir. Şimdi HTML yan başlıklarına geçelim.
Yandaki HTML başlıkları
HTML belgelerinin semantiği vardır. HTML5 teknolojisinden ve yeni etiketlerden bahsetmiyorum. Burada, HTML'nin temellerine kolayca hakim olabilmeniz için yalnızca temel bilgileri sıralamamız gerekiyor. Semantik, bu etiketin yardımı için oluşturmak için başlıklar, paragraflar, tablolar vb. gerektirmeyenler anlamına gelir. Bunu kullanabilirsiniz, ancak HTML teknolojisi farklıdır ve özel etiketlerin aktarılmasının farklı durumları için. Ve HTML koduyla kolayca çalışabilmeniz için temel etiketlerde uzmanlaşmanız gerekir.
Bu büyük bir giriş değil, daha önce yazdım, paragraflar için zaten size verilmiş olan etiketi alıntılamanız gerekiyor. Ve başlıkların ekseni, İngilizce "H" harfinden kaynaklanan etiketlerdir.
Eksen, başlıkların tam listesidir, böylece alıntı yapabilirsiniz:
Deyakі z tsikh, vikoristovuyutsya'yı daha sık tegіv. Bu etiketler h1, h2 veya h3 gibi mi? CSS hakkında zaten bilginiz varsa, h3 yan başlığının HTML başlığının, h1 veya h2'ye benzer şekilde biçimlendirilebileceği açıktır. Ama anlamı, yakі kıyameti mayut, SEO optimizasyonu için kullanılıyorsa, esasen vіdrіznyayutsya. Kural olarak, sonraki etiketlerin ortasındaki rakamlar, diğer HTML başlığının öneminin bir ölçüsü olarak mantıklıdır. Bu nedenle, bu unsurları ve aynılarını dikkatlice yorumlamak gerekir. dürtme sistemleri istatistiklerini hatırla.
Biz CSS'ye ulaşana kadar tarayıcı kilitleri gibi başlık stillerine bağlı kalacaksınız. Aynı şekilde, bu etiketleri tek tek ekleyin ve ortasına herhangi bir metin yazın, bir adım öne geçin:
Arama motoru robotları için de yandaki başlıkların seçilmesi önemlidir. Bunlar, kitabımızda okuyabileceğiniz kurallardır. Web sitesi tanıtımı için PDF kitap.
Ondan sonra herkesin öğrendiği gibi hemen koda girip her şeyi kendi ellerimizle yazmaya çalışıyoruz. Dil programlamaya alışmanın en iyi yolu kendisidir. Ale, HTML teknolojisi her türlü programlama için çok kolaydır, bu yüzden burada skinler alabilirsiniz. Bu sıralamada etiketleri daha iyi hatırlarsınız.
Video dersi - HTML kenar çubuğu başlığı? (uygulama)
Bu etiketlerle robot uygulamasına ilişkin ilk video:
Ödev
G/B:örnek olarak 5-7 paragraf ve 2-3 farklı başlıktan oluşan küçük bir metin yazınız.
Paragraflar ve HTML kenar çubuğu başlıklarıyla daha fazla pratik yapın!
www.sitehere.ru
HTML'de bir tablo nasıl oluşturulur
Bir sobі ryadki ve stovpi'den intikam almak için bir masa olsun. Bakın, kendi elinizde, o görüntünün metninin intikamını alabilirsiniz.
Etiketi tablonun yanına eklemek için
Satırlar ve sütunlar yardım etiketleri ister
Tablo satırları (
Pratikte bir tablo oluşturalım, chotirioh stovptsiv tek satırda nasıl bir araya getirilir. Masanın koçanını tanımamız gerekiyor (
| ), satırın sonu ( |
Sonuç:
şimdi etiketleyelim
Sonuç:
Tablonun genişliğini 400 olarak ayarladım ve bir bachit gibi, birinci ve üçüncü ortalar kalın ve ortalanmış. Інші - sol kenarda. Yeninin içinde kaybolmamak için her zaman kodu biçimlendirmek için yeterli zaman ayırmanızı öneririm. Küçük bir masada büyük bir rol oynamayabilirsiniz, ama büyük bir masada...
Sanırım genişlik hakkında biraz daha konuşalım. Tablonun genişliği genişlik özelliği, yükseklik - yükseklik tarafından belirlenir. Sadece tablonun genişliğini ve yüksekliğini değil, aynı zamanda ortadakileri de benzer şekilde değiştirebilirsiniz (tabloya yerleştirilmekten hepsi suçludur, aksi takdirde tarayıcı ne görmek istediğinizi anlamaz).
Qi değerleri (genişlik ve yükseklik) piksel, cms cinsinden belirtilir. Böyle bırakabilirsiniz, hiçbir şey yazmayın, tarayıcı neden "px" yazmak istediğinizi düşünecek ve piksel sayısını tanıyacaktır.
Peki, tablo satırlarından birini veya daha fazlasını hizalamak istiyorsanız, sol, orta, sağ değerlerle hizalama özelliğini seçin. Yatay hizalama değil, aynı zamanda dikeydir ve aşağıdaki değerleri alabilen kendi marjinal niteliğine sahip olabilir - valign: taban çizgisi (tam olarak taban çizgisi boyunca dikey hizalama), alt (alt kenar boyunca), orta (orta değerler ortada dikey olarak hizalanacaktır), üstte (üst kenar boyunca). Zamovchuvannyam tarayıcıları için orta merkez (orta) virіvnyuyut.
Tablonun çerçevesini (kordonunu) artırın ve rengi değiştirin
Tek tek hatırladınız, size masanın çerçevesi ve genişliği ile nasıl çalışabileceğinizi daha önce göstermiştim. Bu arada, tablo varsayılanı her zaman tarayıcıda çerçevesiz olarak görüntülenir, ancak manuel olarak gösterilmez. Eksen:
Bir dakika, öyle değil. Ancak bu, yazının koçanındaki izmaritlerde kullandığım HTML border niteliğine zaten aşina olanlar için bir sorun değil.
Sadece 1 özellik ekledik ve şimdiden daha iyi hale geldik:
Aynı şey Excel için de geçerli! Göster, orta çizgilerin (sitka) altında ne olmazdı? Peki zah. Ve eksen ne olacak, sınır kurmak gibi, hangisi daha iyi 10.
Bir bachet gibi, sadece tabloların o çerçevesi arasındaki dış bordüre ekleniyor, dış çerçevenin genişliğini değiştiriyor ve tabloların ortası arasında çok fazla.
Çerçevenin rengini, aynı zamanda bir özniteliğe sahip olsa bile değiştirelim - bordercolor. İyi olan "d3d3d3" değerini koyalım. Sonuç:
masada nasıl yürünür
Tablolarda, ortadakilerin yanı sıra "okunabilirliği" geliştirmek de gereklidir. Girdi oluşturmak için "cellspacing" özelliğine ihtiyacımız var. Daha önce olduğu gibi 4x4 masamız üzerinde çalışıyorum, onun niteliğine göre zastosovuchi. Kodu sizin için güncelliyorum (yazıyı rahatsız etmemek için birden fazla satır ekleyeceğim):
Sonuç:
Ortadakilerin çağrısı Tse buli geldi. Ale є ortadaki orta adımları ayarlamak için benzer bir nitelik - hücre dolgusu, aynı zamanda onu da 10'a eşit olarak büyüteceğim ve ortada її arasında arttığı için şarkı söyleyeceksiniz (sayıyı arttırdı) ortalar daha az, bu yüzden tablolar büyümedi). kod:
Sonuç:
Şimdi "hücre aralığını" kaldıralım ve sadece "hücre boşluğunu" dışarıda bırakalım. Sonuç:
Sıraladığım eksen, tablolardaki adımların nasıl oluşturulacağı ve onları besleyeceğim. Mucizevi! Nasıl gıdıklanırsınız bir satır gibi aktarma işi, burada bununla ilgili yazıyor.
Tablonun merkezlerini yetkin bir şekilde nasıl birleştirirsiniz?
Ortaları birleştirmek için tablolar ayrıca özel niteliklere sahiptir. Bkz. "colspan" ve "rowspan". Birincisi (colspan), sütunlar boyunca ortaları (yatay olarak), diğeri (sıra aralığı) - satırlar halinde veya dikey olarak birleştirir. sofralarımızla bütünleşelim.
Bu saygılı! Ortadakileri birleştirirken, nitelik parametrelerinde belirttiğiniz gibi, sayılarını bu sayılarla (eksi bir) değiştirmeniz gerekir. HTML'de bir tablo oluşturursanız, girişi görmeden orta kısımları birleştirirseniz, site їhatime olur. Birleşik iki - birini görüyoruz. Kombine üç - iki tane görebiliriz. Ve şu ana kadar.
Orta sütunlara kızdığında, bir ortayı görmek gerekir! І stіlki razіv çalışmak, skіlki seredkіv vy ob'ednuєte. Size bazı örnekler göstereceğim.
Orta sütunlara kızdığında, bir ortayı görmek gerekir! І stіlki razіv çalışmak, skіlki seredkіv vy ob'ednuєte.
Size bazı örnekler göstereceğim. Eksen bizim akış tablomuzdur:
Ortaları "1 ve 2", "5 ve 9", "4, 8, 12", "6 ve 7" sayılarıyla birleştirelim. Ne kadar havalı göründüğüne hayret edin, kendim almadım!
Birleştirme ilkesi budur.
Orta sayı 1 ve 2'nin yatay bir kombinasyonu ile, birincide başka bir yer (birleştiriliriz) yerine ilkinde “colspan =” 2 ″ yazmanız ve diğer ortayı görmeniz gerekir (aksi takdirde, ekleyin) yogo HTML, size göstereceğim gibi.)
4, 8, 12 numaralı ortaları dikey olarak birleştirirken, ilk merkeze (4 numara) "rowspan = 2 "" yazmalı ve diğerlerinin yerine öne koyup ortaya yerleştirmelisiniz. .
Eksen bir tür viishov, bir kodum var. Orta kısımları doğru olması için ekledim (anlamanız için), ancak görebilirsiniz.
Ben spodіvayu zrozumіlo açıklayan ve nav_v garniy popo.
Bir tablo için başlık nasıl oluşturulur
Bir tablo başlığı ayarlamak için - etiket etiketleri
