Bir sayfadaki metin bilgileri, bağlantılar, görseller, başlıklar gibi öğelerin şekillendirilmesi için birçok yönteme baktık ancak tüm bunlar henüz yeterli değil. Makalelerimde genellikle tablolar gibi HTML öğelerini kullanıyorum çünkü çoğu durumda bunlar önemli bilgilerin düzenlenmesine ve sunumunun basitleştirilmesine yardımcı olur.
Bu makalede size HTML tablolarını şekillendirmenin inceliklerini tanıtacağım ve bu hedeflere ulaşmak için tasarlanmış yeni CSS özelliklerini öğreneceksiniz.
Köprü metni biçimlendirme dili HTML bize, CSS stillerini tablolarla çalışmak üzere tasarlanmış on benzersiz etikete bağlamak için çok sayıda fırsat sağladı; daha fazla çalışmadan önce bunları tekrarlamanızı öneririm:
Etiket
Tanım
Tablonun içeriğini tanımlar.
Tablonun adını tanımlar.
Tablonun başlık hücresini tanımlar.
Bir tablo satırını tanımlar.
Bir tablo veri hücresini tanımlar.
Tablodaki grup başlığını (tablo başlığı) içermek için kullanılır.
Tablonun "gövdesini" içermek için kullanılır.
Tablonun “altbilgisini” içermek için kullanılır.
Bir etiket içindeki her sütun için belirtilen sütun özelliklerini tanımlar
.
Bir tablodaki bir grup sütunu tanımlar.
Tablo girintileriyle çalışma
Tabloda dolgu kullanma
Tablo girintisi
1
2
3
4
2
3
4
Bu örnekte:
Dış girintilerle yatay ortalama tekniğini kullanarak masayı ortaya yerleştirdik (kenar boşluğu: 0 otomatik).
Tablo adı için (etiket
) alt dolguyu 19 piksele ayarladık. Umarım tek olmayan sayılar sizi rahatsız etmez :)
Örneğimizin sonucu:
Hücreler arasındaki boşluk
Yukarıda tartışılan örnekten sonra, tüm tablo hücreleri arasında hala bir boşluk olduğunu fark etmiş olabilirsiniz. Tablo hücreleri arasındaki boşluğun nasıl kaldırılacağına veya artırılacağına bakalım.
Bitişik hücrelerin sınırları arasındaki mesafeyi ayarlamak için CSS özelliği border-spacing'i kullanmanız gerekir.
Tablolar arasındaki boşluğu değiştirme
kenar aralığı: 30 piksel 10 piksel;
1
2
3
2
3
kenar aralığı: 0;
1
2
3
2
3
kenar aralığı:0,2em;
1
2
3
2
3
Bu örnekte:
şamandıra: sol). Kayan öğeler konusunu kaçırdıysanız, bu derste her zaman bu konuya geri dönebilirsiniz - "".
Ayrıca tabloların sağ kenar boşluğunu 30 piksel olarak ayarladık ve tabloların dikey hizalamasını ayarladık (öğenin üst kısmı, en yüksek öğenin üst kısmıyla aynı hizada olacak). Bu makalede bu özelliğin ayrıntılı bir incelemesine döneceğiz.
) – cesur stil.
Tablo hücreleri için (başlık ve veri hücreleri), #F50 onaltılık renkte 1 piksellik düz bir kenarlık ayarladık ve her tarafa 19 piksel dolgu ayarladık.
Sınıflı ilk tablo için .Birinci sınıflı ikinci tablo için tablo hücreleri arasındaki boşluğu (border-spacing özelliği) 30px 10px olacak şekilde ayarladık .ikinci sınıflı üçüncü tablolar için sıfıra eşit .üçüncü 0,2 em'ye eşittir.
Border-spacing özelliğinde yalnızca bir uzunluk değeri belirtilirse, hem yatay hem de dikey olarak aralıkları gösterdiğini ve iki uzunluk değeri belirtilirse birincisinin yatay mesafeyi ve ikinci dikey değeri belirlediğini lütfen unutmayın. . Bitişik hücrelerin sınırları arasındaki mesafe CSS birimleri (px, cm, em vb.) cinsinden belirtilebilir. Negatif değerlere izin verilmez.
Söyleyebilirsin: - yani border-spacing özelliğini 0 değeriyle kullanarak hücreler arasındaki boşluğu kaldırdık ama hücre sınırlarımız neden şimdi kesişiyor?
Çift kenarlıklar, bir hücrenin alt kenarlığının, altındaki hücrenin üst kenarlığına eklenmesinden kaynaklanır, hücrelerin yanlarında da benzer bir durum oluşur ve tablo gösterimi açısından bu mantıklıdır, ancak Neyse ki tarayıcıya hücre sınırlarının bu kadar gevşek davranışını görmek istemediğimizi söylemenin bir yolu var.
Bunu yapmak için border-collapse CSS özelliğini kullanmanız gerekir. Garip bir şekilde, border-collapse özelliğini daraltma değeriyle birlikte kullanmak, hücreler arasındaki boşluğu, aralarında çift kenarlık oluşmadan kaldırmanın en iyi yoludur.
border-spacing özelliğini 0 değeriyle ve border-collapse özelliğini çöküş değeriyle kullanırken kenarlıkların davranışını karşılaştıralım:
Tablolarımızı yüzer hale getirip sola kaydırdık (float: left), sağdaki dış kenar boşluklarını 30px olarak ayarladık.
Tablo adını ayarlayın (etiket
) – cesur stil.
Tablo hücreleri (başlık ve veri hücreleri) için, #F50 onaltılık rengiyle 5 piksellik düz bir kenarlık ayarladık ve 50 piksellik sabit bir genişlik ve 75 piksellik bir yükseklik belirledik.
Sınıflı ilk tablo için .Birinci tablo hücreleri arasındaki boşluğu sıfıra (border-spacing: 0 ;)) ve ikinci tablo için de sınıfa ayarladık .ikinci border-collapse özelliğini, mümkün olduğunda hücrelerin sınırlarını tek bir hücreye daraltan daraltma olarak ayarlayın.
Örneğimizin sonucu:
Boş hücrelerin davranışı
Bir tablodaki boş hücrelerin kenarlıklarının ve arka planlarının görüntülenip görüntülenmeyeceğini ayarlamak için CSS'yi kullanabilirsiniz. Bu davranış, önceki örneklerde fark etmiş olabileceğiniz gibi varsayılan olarak boş hücreleri görüntüleyen empty-cells özelliği tarafından kontrol edilir.
Bir örnekle devam edelim:
Boş tablo hücrelerini görüntüleme örneği
boş hücreler: göster;
1
2
3
2
☺
3
☺
boş hücreler: gizle;
1
2
3
2
☺
3
☺
Bu örnekten boş hücreler özelliğinin nasıl çalıştığını anlamak çok basittir; eğer hide olarak ayarlanırsa boş hücreler ve içlerindeki arka plan gizlenir, show (varsayılan) olarak ayarlanırsa bunlar görüntülenir.
Tablo başlığı konumu
Tabloları şekillendirmek için başka bir basit özelliğe bakalım - tablo başlığının konumunu (tablonun üstünde veya altında) belirleyen caption-side. Varsayılan olarak, caption-side özelliği top olarak ayarlanmıştır ve bu, başlığı tablonun üstüne yerleştirir. Tablonun altına başlık yerleştirmek için Bottom değeri olan özelliği kullanmanız gerekmektedir.
Bu özelliği kullanmanın bir örneğine bakalım:
Altyazı tarafı özelliğinin kullanımına bir örnek
Tablonun üstündeki başlık
İsim
Fiyat
Balık
350 ruble
Et
250 ruble
Tablonun altına doğru
İsim
Fiyat
Balık
350 ruble
Et
250 ruble
Bu örnekte oluşturduğumuz iki sınıf tablo başlığının konumunu kontrol eden. Birinci sınıf ( .topCaption) tablo başlığını üstüne koyuyor, ilk tabloya uyguladık ve ikinci sınıfa ( .bottomCaption) tablo başlığını altına yerleştirirsek ikinci tabloya uyguladık. Sınıf .topCaption varsayılan başlık tarafı özellik değerine sahiptir ve gösterim amacıyla oluşturulmuştur.
Örneğimizin sonucu:
Yatay ve dikey hizalama
Çoğu durumda tablolarla çalışırken başlık ve veri hücrelerindeki içeriğin hizalamasını ayarlamanız gerekecektir. Text-align özelliği, herhangi bir metin bilgisine benzer şekilde yatay hizalama için kullanılır. Bu özelliğin metin için kullanımını daha önce “” makalesinde tartışmıştık.
Hücrelerdeki içeriğin hizalamasını ayarlamak için text-align özelliğine sahip özel anahtar sözcükler kullanmanız gerekir. Aşağıdaki örnekte bu özellik için anahtar kelimelerin kullanımına bakalım.
Tablodaki yatay hizalama örneği
Anlam
Tanım
sol
Hücre metnini sola hizalar. Bu varsayılan değerdir (metin yönü soldan sağa ise).
Sağ
Hücre metnini sağa hizalar. Bu varsayılan değerdir (metnin yönü sağdan sola ise).
merkez
Hücre metnini merkeze hizalar.
savunmak
Her satır aynı genişlikte olacak şekilde çizgileri uzatır (hücrenin metnini kendi genişliğine uyacak şekilde uzatır).
Bu örnekte oluşturduğumuz dört sınıf Hücrelerdeki farklı yatay hizalamaları belirten ve bunları tablonun satırlarına sırayla uygulayan. Hücredeki değer, text-align özelliğinin değerine karşılık gelir
Örneğimizin sonucu:
Yatay hizalamaya ek olarak, dikey hizalama özelliğini kullanarak tablo hücrelerinde dikey hizalamayı da tanımlayabilirsiniz.
Tablo hücreleriyle çalışırken bu özelliğin yalnızca aşağıdaki değerlerinin * uygulandığını lütfen unutmayın:
*
- Bir tablo hücresine uygulanan Sub, super, text-top, text-bottom, uzunluk ve % değerleri, taban çizgisi değeri kullanılıyormuş gibi davranacaktır.
Bir kullanım örneğine bakalım:
Tablodaki dikey hizalama örneği
Anlam
Tanım
temel çizgi
Hücrenin taban çizgisini üst öğenin taban çizgisiyle hizalar. Bu varsayılan değerdir.
tepe
Hücrenin içeriğini dikey olarak üst kenara hizalar.
orta
Bir hücrenin içeriğini dikey olarak ortaya hizalar.
alt
Bir hücrenin içeriğini alt kenar boyunca dikey olarak hizalar.
Bu örnekte oluşturduğumuz dört sınıf Hücrelerdeki farklı dikey hizalamaları belirten ve bunları tablonun satırlarına sırayla uygulayan. Hücredeki değer, o satıra uygulanan dikey hizalama özelliğinin değerine karşılık gelir.
Tarayıcıya tablo düzeni yerleştirme algoritması
CSS, varsayılan olarak tarayıcının tablo düzenini otomatik olarak düzenlemesi için bir algoritma kullanır. Bu durumda sütun genişliği hücrenin en geniş bölünmeyen içeriğine göre ayarlanır. Bu algoritma bazı durumlarda yavaş olabilir çünkü tarayıcının son düzenini belirlemeden önce tablodaki tüm içeriği okuması gerekir.
Tarayıcının tablo düzeni türünü değiştirmek için otomatik Açık sabit, CSS özelliği table-layout'u sabit değerle kullanmanız gerekir.
Bu durumda yatay yerleştirme yalnızca hücrelerin içeriğine değil, tablonun genişliğine ve sütunların genişliğine bağlıdır. Tarayıcı, ilk satırın alınmasından hemen sonra tabloyu görüntülemeye başlar. Sonuç olarak, sabit bir algoritma, böyle bir tablo için düzeni otomatik seçeneği kullanmaktan daha hızlı oluşturmanıza olanak tanır. Büyük tablolarla çalışırken performansı artırmak için sabit bir algoritma kullanabilirsiniz.
Aşağıdaki örneği kullanarak bu özelliğin kullanımına bakalım:
Table-layout özelliğinin kullanımına bir örnek
tablo düzeni: otomatik;
İsim
2009
2010
2011
2012
2013
2014
2015
2016
Buğday
125
215
2540
33287
695878
1222222
125840000
125
masa düzeni: sabit;
İsim
2009
2010
2011
2012
2013
2014
2015
2016
Buğday
125
215
2540
33287
695878
1222222
125840000
125
Bu örnekte:
Tablo satırlarını ve sütunlarını şekillendirme
“” Makalesinde tablo satırlarını ve sütunlarını şekillendirme yöntemlerine zaten kısmen değinmiştik. Bu makalede, değerleri kullanarak tablolardaki satır stillerini değiştirmenize olanak tanıyan grup sözde sınıfının kullanımına baktık. eşit (dürüst) Ve garip (garip) veya ilkokul tarafından Matematik formülü.
Daha önce ele aldığımız teknikleri gözden geçirelim ve tablolardaki satır ve sütunlara stil vermenin yeni yollarını keşfedelim. Örneklere geçelim.
Sözde sınıf:n'inci çocuğun tablolarla kullanılmasına bir örnek
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
Bu örnekte:
Örneğimizin sonucu:
Tablo satırlarını şekillendirme seçeneklerine bakacağımız bir sonraki örneğe geçelim.
Tablolardaki satırları stillendirme örneği
Hizmet
Fiyat
Toplam
15 000
1
1 000
2
2 000
3
3 000
4
4 000
5
5 000
Bu örnekte:
Tablonun genişliğini ana öğenin genişliğinin %100'üne ayarladık ve başlık ve veri hücreleri için 1 piksel genişliğinde düz bir kenarlık belirledik.
Öğe için ayarla (tablonun “altbilgisi”) arka plan rengi – mercan, eleman için (“tablo başlığı”) arka plan rengini ayarlar gümüş.
Elemanlar için
, elemanın içinde olan
(tablo gövdesi) arka plan rengini fareyle üzerine gelindiğinde değişecek şekilde ayarlayın (sözde sınıf :hover) c beyaz renk başına haki(satırın tamamı vurgulanır).
Aşağıdaki örnek, köşe yuvarlamanın tablo hücrelerine (özellik) uygulanmasına bakar.
Hücre köşelerini yuvarlatma örneği
1
2
3
4
5
Bu örnekte:
Tabloyu dış kenar boşluklarıyla ortaladık, başlık hücrelerinin genişliğini ve yüksekliğini 50 piksel olarak ayarladık ve belirledik. şeffaf kenarlık 5 piksel.
Başlık hücresinin üzerine gelindiğinde (sözde sınıf:hover) bir arka plan aldığını tespit ettik. mavi renkler, turuncu metin rengi, kenarlık turuncu renkler 5 piksel ve yuvarlama yarıçapı %100.
şeffaf kenarlık gezinirken görüntülenecek kenarlık için yer ayırmak için gereklidir, bu yapılmazsa tablo "atlayacaktır".
Örneğimizin sonucu:
Aşağıdaki örnek HTML öğelerinin kullanımını kapsar
Ve
ve stilizasyonları.
Tablo sütunlarının vurgulanmasına örnek
Başvuru No.
Hizmet
fiyat, ovmak.
Toplam
1
Şarkı söyleme
6 000
6 000
2
bulaşık yıkama
2 000
2 000
3
Temizlik
1 000
1 000
4
dırdırcı
1 500
1 500
5
Okuma
3 000
3 000
Bu örnekte:
Örneğimizin sonucu:
Anlaşılması oldukça zor olan ve CSS'de ileri düzeyde bilgi gerektiren son örnek, bu kursta ayrıntılı olarak çalışılması planlanan gelecekteki konulara değiniyor.
Önceki örnekte HTML öğesinin
Yalnızca tek bir CSS özelliği uygulayabilirsiniz - arka plan rengi (arka plan rengi), ancak bu öğenin üzerine geldiğinizde arka plan rengini doğrudan ayarlayamazsınız ( :hover sözde sınıfı). Bu örnekte, yalnızca CSS kullanarak bir tablo sütununun nasıl vurgulanacağına bakacağız.
Fareyle üzerine gelindiğinde tablo sütunlarını ve satırlarını vurgulama örneği
Başvuru No.
Hizmet
fiyat, ovmak.
Toplam
1
Şarkı söyleme
6 000
6 000
2
bulaşık yıkama
2 000
2 000
3
Temizlik
1 000
1 000
4
dırdırcı
1 500
1 500
5
Okuma
3 000
3 000
Bu örnekte:
Tablomuzu ana öğenin %100'ünü kaplayacak, tablo hücreleri ana öğenin %25'ini kaplayacak ve 1 piksellik düz bir yeşil kenarlığa sahip olacak, başlık ve veri hücrelerinin yüksekliğini 45 piksel olacak şekilde ayarladık. Border-collapse özelliğini kullanarak hücreler arasındaki boşluğu şu değerle kaldırdık:
.
Ve böylece, ::after sözde öğesini kullanarak her öğenin arkasına içerik ekliyoruz
Üzerinde gezinme. ::after sözde elemanının content özelliği ile birlikte kullanılması gerekiyor, bu sayede arka plan rengine sahip bir blok elemanı ekliyoruz. Orman yeşili ve sahip mutlak konumlandırma.
Buradaki mutlak konumlandırma, öğeyi atasının belirtilen kenarına göre dengelemek için gereklidir ve ata, varsayılan - static dışında bir konum değerine sahip olmalıdır, aksi takdirde sayma, bunun için tarayıcı penceresinin belirtilen kenarına göre olacaktır. masaya koymamızın nedeni göreceli konumlandırma(akraba).
Oluşturduğumuz bloğumuz için, konumlandırılan elemanın üst kenardan kaydırıldığı yönü belirten top özelliğini ve konumlandırılan elemanın alt kenardan kaydırıldığı yönü belirten Bottom özelliğini ayarladık. Her iki özellik için de 0 değeri belirtildi, böylece blok öğeyi tablonun altından ve üstünden tamamen kaplayacak, bu bloğun genişliği% 25 olarak ayarlandı, bu değer hücrenin genişliğine karşılık geliyor.
Ve bu blok için belirlediğimiz son özellik olan z-index "-1" değerine göre konumlandırılan elemanların sırasını belirler. Z ekseni. Bu özellik, metnin bu bloğun arkasında değil önünde olması için gereklidir; sıfırdan küçük bir değer ayarlamazsanız blok metni kaplar.
Örneğimizin sonucu:
Çalışmanızın bu aşamasında elemanların konumlandırılması sürecini anlamıyorsanız, cesaretiniz kırılmasın; bu anlaşılması zor bir konudur ve biz de bunu dikkate almadık, ancak bunu kesinlikle makalenin bir sonraki makalesinde ele alacağız. ders kitabı “CSS'de öğeleri konumlandırma”.
Konuyla ilgili sorular ve görevler
Bir sonraki konuya geçmeden önce pratik ödevini tamamlayın:
Alıştırma görevini tamamlamakta zorluk yaşıyorsanız, örneği her zaman ayrı bir pencerede açabilir ve hangi CSS kodunun kullanıldığını anlamak için sayfayı inceleyebilirsiniz.
2016-2019 Denis Bolshakov, sitenin çalışmaları ile ilgili görüş ve önerilerinizi [email protected] adresine gönderebilirsiniz.
Vlad Merjeviç
Bir tabloda çok sayıda satır olduğundan, farklı sütunlardaki verileri birbiriyle karşılaştırmak zor olabilir. Bu, çizgiler kullanarak veya arka plan rengi ekleyerek bir tablo satırını diğerinden görsel olarak ayırmayı gerektirir.
Öncelikle yatay çizgiler kullanma seçeneğine bakalım. İncirde. Şekil 1, dikkati tablonun satırlarına odaklamanın olası yollarından birini göstermektedir. Üstteki ve alttaki her satır bir çizgiyle çerçevelenmiştir, bu nedenle ziyaretçinin bakışları bunlar üzerinde kayar ve bir sonraki satıra atlamaz. Bu durumda sütunlarda yer alan veriler de birbirine bağlıdır ancak eş zamanlı olarak sola hizalama ve sütunlar arasındaki boşluk nedeniyle.
Çizgiler arasındaki çizgileri ayarlamak oldukça basittir; bunu yapmak için TD seçiciye border-bottom style özelliğini ekleyin. Masanın etrafında bordür varsa alt bordür iki katı kalınlıkta olacaktır. Bu durumda son satırın alt satırını kaldırabilir veya alt kenarlığı tablodan gizleyebilirsiniz (örnek 1).
Örnek 1: Tablo satırlarını çizgilerle ayırma
Masa
2004
2005
2006
Yakutlar
43
51
79
Zümrüt
28
34
48
Safirler
29
57
36
Bu örnekte, başlık hücreleri arasındaki dikey çizgiler, TH seçici için kullanılan border style özelliği kullanılarak eklenir. Bu, tablo kenarlığı ile arka plan başlık alanı arasında bir piksellik boş alan oluşturur.
Renk kullanımı masanın görünümünü değiştirme olanaklarını genişletir. Örneğin, çift ve tek satırların arka plan rengi, Şekil 2'de gösterildiği gibi farklı olabilir. 2.
Gerekli satırların arka plan rengini değiştirmek için ek bir sınıf tanıtacağız, onu even olarak adlandıracağız ve onu tablonun çift satırlarına, yani etiketine eklemeye başlayacağız.
. TR seçicinin arka plan rengini yalnızca arka plan özelliği aracılığıyla ayarlayabileceğini unutmayın. TR seçici için ayarlanan satırlar görüntülenmez. Bu nedenle TD seçiciye border-bottom özelliğini uygulayarak hücreye daha düşük bir kenarlık çiziyoruz (örnek 2).
Tek satırların arka plan rengi, tüm tablonun rengi değiştirilerek belirlenir. Ancak seçici satırlar için ayrı bir renk ayarlandığından (bunun için class = "even" parametresi eklenmiştir), tablonun arka plan rengiyle "örtüşmektedir". Bu sayede alternatif renkli çizgiler elde edilir.
Örnek 2. Tablo satırlarının renkle vurgulanması
Masa
2004
2005
2006
Yakutlar
43
51
79
Zümrüt
28
34
48
Safirler
29
57
36
Ametistler
23
64
97
Bu örnekte, tablonun altındaki çift çizgi, border-collapse özelliğinin değer daraltmayla birlikte TABLE seçiciye uygulanmasından kaynaklanmaz. Bu seçenek, hücrelerin temas ettiği yerlerde çift çizgilerin görünümünü algılar ve bunları tek çizgilerle değiştirir. Tablonun etrafındaki kenarlığın rengi, satırların altındaki çizgilerin rengiyle eşleşmiyorsa, farklı tarayıcılarda kalan çizgilerin renginde farklılıklar olabileceğini lütfen unutmayın.
Popüler oldu, web tasarımcıları ağırlıklı olarak tablo düzeni yöntemini kullandılar ve çok iyi sonuçlar aldılar.
Html'de tablo oluşturmak için kullanılan etiketler
masa- tabloyu açan ve kapatan gerekli bir etiket altyazı- tablo başlığını belirten isteğe bağlı etiket bu- açılış ve kapanış etiketleri sütun adını içeren isteğe bağlı bir etiket. Genellikle kalın görünür TR- satırı açan ve kapatan gerekli bir etiket td- bir hücrenin art arda açılıp kapandığını gösteren gerekli etiket
Basit bir tablo için örnek kod
HTML tablosu
Tablo ismi
Stobetler 1
Stobetler 2
İlk hücredeki metin
İkinci hücredeki metin
Tarayıcı görüntülenecektir
Html'deki tabloların amacı
Tablolarla ilgili ders çok önemlidir! Tablolar sayesinde yalnızca metni değil aynı zamanda görselleri, bağlantıları ve çok daha fazlasını da düzenleyebilirsiniz. Tabloda belirtebilirsiniz arka plan(veya rengi), girinti, Genişlik, sınır Ve diğer parametreler, bu da ona güzel bir görünüm kazandıracak. Tablo - Anlamaya yönelik ilk adımınız web tasarımı! Daha önce birçok site tamamen tablo halinde düzenlenmişti, yani kullanıcının gördüğü her şey (yan menü, üst menü, içerik) büyük bir tablonun hücrelerinin içeriğiydi. Bu noktada doğrudan sofrayı güzelleştiren niteliklere geçelim...
Html tablolarının özellikleri ve parametreleri: girinti, genişlik, arka plan rengi, kenarlık (çerçeve)
sen masa etiketi aşağıdaki nitelikler vardır:
Genişlik- masa genişliği. piksel veya ekran genişliğinin yüzdesi cinsinden olabilir. bg rengi- tablo hücrelerinin arka plan rengi arka plan- tablonun arka planını bir desenle doldurur sınır- tablodaki çerçeve ve kenarlıklar. Kalınlık piksel cinsinden gösterilir hücre dolgusu- hücre içeriği ile iç kenarlığı arasında piksel cinsinden dolgu Daha önce olduğu gibi, nitelik değerini tırnak içine alıyoruz.
Bir örnek kullanarak bu niteliklerin kullanımına bakalım. Bunu yapmak için bir tablo oluşturalım (ama zaten son derece nadiren kullanılan başlık ve etiketler olmadan) ve parametreyi özniteliğe ayarlayın sınır, genişlik (tablonun, satırın veya hücrenin genişliği) Ve bgcolor (hücre rengi)
HTML tablosu
Stobetler 1
Stobetler 2
Sonuç olarak, tarayıcıda aşağıdaki tablo görüntülenecektir: çerçeve- masanın etrafındaki çerçeveyi gösteren bir özellik. Aşağıdaki değerler vardır:
Geçersiz - çerçeve yok, yukarıda - yalnızca üst çerçeve, aşağıda - yalnızca alt çerçeve, hsides - yalnızca üst ve alt çerçeveler, vsides - yalnızca sol ve sağ çerçeveler, lhs - yalnızca sol çerçeve, rhs - yalnızca sağ çerçeve, kutu - çerçevenin dört parçasının tümü.
tüzük- tablo içindeki hücreler arasındaki sınırları gösteren bir özellik. Aşağıdaki değerler vardır:
Yok - hücreler arasında sınır yoktur, gruplar - yalnızca satır grupları ve sütun grupları arasındaki sınırlar (biraz sonra tartışılacaktır), satırlar - yalnızca satırlar arasındaki sınırlar, cols - yalnızca sütunlar arasındaki sınırlar, hepsi - tüm sınırları görüntüle.
Kod örneğine bakalım
HTML tablosu
Stobetler 1
Stobetler 2
İlk sütunun ilk hücresindeki metin
İkinci sütunun ikinci hücresindeki metin
Sonuç
Şimdi güzel bir masa oluşturmaya çalışalım. Bunu yapmak için kullanmaya başlayalım masa hizalaması. Bunu yapmak için zaten bilinen aşağıdaki parametreler vardır:
hizalamak- masa hizalaması. Sol (sol), sağ (sağ), ortaya (orta) yerleştirilebilir. hücre aralığı- masa hücreleri arasındaki mesafe. Piksel olarak belirtilmiştir (varsayılan 0 piksel) hücre dolgusu- hücre içeriği ile iç kenarlığı arasındaki piksel cinsinden dolgu (varsayılan 0 piksel) Bir örneğe bakalım
HTML tablosu
Stobetler 1
Stobetler 2
İlk sütunun ilk hücresindeki metin
İkinci sütunun ikinci hücresindeki metin
Tarayıcı şuna benzeyen ortalanmış bir tablo görüntüleyecektir:
HTML tablolarındaki tr satırları ve td hücreleri
Tabloların satır satır (tr) oluşturulduğunu bir kez daha hatırlatayım. Satırlar (tr) zaten hücreleri (td) içeriyor. Bir string (tr) için bir parametre belirtirseniz, bu parametre aşağıdakiler için geçerli olacaktır: tüm hücreler(td) bu satırda, belirli bir hücre içinse, o zaman yalnızca onun için. Yukarıdaki örneklerde satırın rengini belirttim, bu parametre tüm hücrelere buna göre dağıtıldı.
Stobetler 1
Stobetler 2
tr ve td etiketleri için aşağıdakiler vardır
hizalamak- hücre içindeki metnin hizalanması. Sol kenar (sol), sağ kenar (sağ), orta (orta) kötülemek- hücre içindeki metnin dikey hizalanması. Yukarı (üst), aşağı (alt), orta (orta) bg rengi- çizginin rengini ayarlar Genişlik- sütun genişliği (aşağıdaki tüm hücreler bu parametreyi kabul edecektir) piksel veya yüzde olarak gösterilir; %100, tüm tablonun genişliğidir yükseklik- hücre yüksekliği (satırdaki tüm hücreler bu parametreyi kabul edecektir)
Hücre içeriklerinin (td) farklı kenarlar boyunca hizalandığı koda bakalım: ilkinde sola, ikincisinde sağa:
HTML tablosu
Stobetler 1
Stobetler 2
İlk sütunun ilk hücresindeki metin
İkinci sütunun ikinci hücresindeki metin
Sonuç
Tabloları kullanarak çok iyi bir sayfa oluşturabilirsiniz. Hücrelere yalnızca metin değil, aynı zamanda resim, bağlantı vb. de ekleyebileceğinizi unutmayın!)
İlginiz için teşekkür ederiz! Umarım materyal faydalı olmuştur!
Yazardan: CSS'de öğeleri belge ağacındaki konumlarına göre bulmak için seçiciler bulunur. Bunlara indeks sözde sınıfları denir çünkü öğenin türü, nitelikleri veya kimliği yerine konumuna bakarlar. Toplamda beş tane var.
:ilk çocuk ve :son çocuk
Adından da tahmin edebileceğiniz gibi :first-child ve :last-child sözde sınıfları bir düğümdeki (eleman) ilk ve son çocuğu seçer. Diğer sözde sınıflarda olduğu gibi, :first-child ve :last-child'in basit seçiciler kullanıldığında yan etkileri minimum düzeydedir.
Aşağıdaki HTML ve CSS'ye bakalım:
:ilk-çocuk ve:son-çocuk
Meyve listesi
Elmalar
Muz
Yaban mersini
Portakal
Çilekler
<
!
DOCTYPE
html
>
<
html
lang
=
"en-US"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>: ilk - çocuk ve : son - çocuk<
/
title
>
<
/
head
>
<
body
>
<
h2
>Meyve listesi<
/
h2
>
<
ul
>
<
li
>Elmalar<
/
li
>
<
li
>Muz<
/
li
>
<
li
>Yaban mersini<
/
li
>
<
li
>Portakal<
/
li
>
<
li
>Çilekler<
/
li
>
<
/
ul
>
<
/
body
>
<
/
html
>
Aşağıdaki ekran görüntüsü sonucu göstermektedir.
h2 başlığı ve ilk li pembe renktedir çünkü:first-child belirli öğelere bağlı değildir. h2 etiketi, body etiketinin ilk çocuğudur ve li, ul öğesinin ilk çocuğudur. Peki geri kalan li elemanları neden yeşil? Çünkü:last-child ayrıca belirli bir öğeye bağlı değildir ve ul, gövde etiketindeki son alt öğedir. Aslında yukarıdaki stillerde *:first-child ve *:last-child yazdık.
:first-child ve :last-child öğelerine basit bir seçici eklemek onları daha spesifik hale getirir. Seçimimizi yalnızca liste öğeleriyle sınırlayalım. :first-child'i li:first-child ile ve :last-child'i li:last-child ile değiştirin. Aşağıdaki ekran görüntüsü sonucu göstermektedir.
:n'inci-çocuk() ve :n'inci-son-çocuk()
Bir belgedeki ilk ve son alt öğeleri seçebilmek kötü bir fikir değildir. Çift veya tek öğeleri seçmeniz gerekirse ne olur? Belki ağaçtaki altıncı öğeyi seçmemiz veya her üç alt öğeye stil uygulamamız gerekebilir. Sözde sınıflar:nth-child() ve:nth-last-child() burada bize yardımcı olacaktır.
:not gibi, :nth-child() ve :nth-last-child() da işlevsel sözde sınıflardır. Bir argüman alıyorlar, o da şu şekilde olmalı:
anahtar kelime tuhaf;
anahtar kelime bile;
2 veya 8 tipinde bir tamsayı değeri;
A'nın adım, B'nin uzaklık ve n'nin pozitif bir tamsayı değişken olduğu An+B formundaki bağımsız değişken.
Son argüman diğerlerinden biraz daha karmaşıktır. Biraz sonra bakacağız.
:nth-child() ve :nth-last-child() arasındaki fark nedir? Başlangıç noktasında farklılık gösterirler: :nth-child() ileri doğru sayar ve :nth-last-child() geriye doğru sayar. CSS dizinleri doğal sayılar kullanır ve 0'dan değil 1'den başlar.
Sözde sınıfları kullanarak:nth-child() ve:nth-last-child() alternatif desenler oluşturmak uygundur. Çizgili masa mükemmel bir kullanım örneğidir. Aşağıdaki CSS, tablodaki çift satırlara açık mavimsi gri bir arka plan verir; sonuç, aşağıdaki ekran görüntüsünde görülebilir:
tr:n'inci-çocuk(çift) ( arka plan: rgba(96, 125, 139, 0.1); )
tr : n'inci - çocuk (çift) (
arka plan: rgba(96, 125, 139, 0.1);
:n'inci-çocuk'tan:n'inci-son-çocuk'a geçerseniz, sayım alttan başladığı için çubuklar ters çevrilir. Aşağıdaki ekran görüntüsüne bakın.
Daha karmaşık argümanlarla daha karmaşık bir şey mi istiyorsunuz? Aşağıda gösterildiği gibi 20 öğeli bir belge oluşturalım.
:nth-child() ve :nth-last-child() kullanarak belirli bir öğeyi seçebilirsiniz. Belirli bir konumdan sonra tüm alt elemanları seçebilirsiniz veya çoklu ofset içeren elemanları seçebilirsiniz. Altıncı elementin arka planını değiştirelim:
Öğe:n'inci-çocuk(6) ( arka plan: #e91e63; )
Bir kez daha A adımdır. Bu, n için 1'den başlayan bir faktördür. Yani, eğer A = 3 ise, o zaman 3n üçüncü, altıncı ve dokuzuncu elemanları vb. seçecektir. Aşağıdaki ekran görüntüsünde tam olarak görülen şey budur.
Burada her şey biraz daha ilginç. :nth-child() ve :nth-last-child() öğelerini kullanarak belirli bir noktadan sonraki tüm öğeleri seçebilirsiniz. İlk yedisi dışındaki tüm öğeleri seçelim:
Öğe:n'inci-çocuk(n+8) ( arka plan: #e91e63; )
Öğe : n'inci - çocuk (n + 8) (
arka plan: #e91e63;
Burada belirtilen bir adım yoktur. Sonuç olarak n+8, sekizinci elemandan başlayarak n'nin tüm elemanlarını seçer. Aşağıdaki ekran görüntüsüne bakın.
Not: negatif ofset
Negatif değerler ve aralıklar da geçerlidir. Şunun gibi bir giriş:n'inci-çocuk(-n+8) seçimi tersine çevirir ve ilk sekiz öğeyi seçer.
Ofset ve adımı kullanarak beşinciden başlayarak her üç öğeyi seçebilirsiniz:
Öğe:n'inci-çocuk(3n+5) ( arka plan: #e91e63; )
Öğe : n'inci - çocuk (3n + 5) (
arka plan: #e91e63;
Sonuç.
tek çocuk
Tek çocuk sözde sınıfı, bir öğeyi yalnızca tek çocuk öğe ise seçer. Aşağıda iki madde işaretli liste bulunmaktadır. İlkinde bir öğe var, ikincisinde üç öğe var:
, çünkü ilk listenin tek çocuğu. İkinci listenin elemanları, üç bitişik eleman olduğundan seçime dahil edilmemiştir. Sonuç aşağıda gösterilmiştir.
:boş
Çocuğu olmayan öğeleri seçmek için :empty sözde sınıfını kullanabilirsiniz. Sözde sınıf:empty kendi adına konuşur (empty İngilizce "boş" kelimesinden gelir). :empty seçimine dahil edilebilmesi için öğenin tamamen boş olması gerekir, hatta boşluklar bile olmamalıdır. Yani numunenin içine giriyor ama girmiyor.
Bazen WYSIWYG editörleri içeriğinize boş p etiketleri ekler. Stillerin bu öğelere uygulanmasını önlemek için :empty ve :not kullanabilirsiniz. Örneğin, p:değil(:boş).
Belirli bir türdeki öğeleri dizinlerine göre seçme
Önceki bölümde açıklanan sözde sınıflar, belge ağacında belirli bir konumu işgal ediyorlarsa öğeleri seçer. Örneğin, p:nth-last-child(2), ana blok içindeki sonuncudan önceki tüm p etiketlerini seçecektir.
Bu bölümde yazılı indeks sözde sınıflarından bahsedeceğiz. Bu sözde sınıflar aynı zamanda öğeleri indeks değerine göre de seçer, ancak seçim belirli bir türle sınırlıdır. Örneğin beşinci p etiketini, hatta h2 etiketini seçmeniz gerekiyor.
Adları türlenmemiş benzerlerinin tam tersi olan bu tür beş sözde sınıf vardır:
türünün sonuncusu()
Bunlarla alt dizin sözde sınıfları arasında ince bir çizgi vardır. p:nth-child(5) girişi yalnızca beşinci p etiketini bulurken, p:nth-of-type(5) girişi tüm p etiketlerini bulur ve beşinci etiketi seçer.
Başka bir belge oluşturalım. Ayrıca 20 öğesi vardır, yalnızca bazıları p etiketleri ve diğerleri div'lerdir. Köşeleri yuvarlatılmış p etiketleri için aşağıdaki ekran görüntüsüne bakın.
Siyah beyaz bir masa sizce de biraz sıkıcı görünmüyor mu? Biz de öyle düşünüyoruz! Bu nedenle bu dersimizde HTML'de bir tablonun renginin nasıl değiştirileceğinden bahsedeceğiz. Her biri kendi özelliğine sahip olan üç renk ekleme seçeneği vardır.
Hücrelerin arka plan rengini belirtme. Bu özellik kullanılarak yapılır arka plan rengi.
Hücrelerdeki metnin rengini belirtme. Bu özellik kullanılarak yapılır renk.
Hücre kenarlıklarının rengini belirtir. Bu özellik kullanılarak yapılır sınır rengi.
Daha önce rengi değiştirmek için çerçeveyi tanımlamanın daha kısa bir biçimi kullanılıyordu. Şöyle görünüyordu:
Kenarlık: 1 piksel düz açık gri
Ve buradaki renkten son kısım sorumluydu - hafifgay.
Renklerin anlamını ayarlamanın çeşitli yolları vardır. CSS. Nitelikler kullanılarak rengin nasıl tanımlandığını size göstereceğiz.
Elbette renkleri de değiştirebilirsiniz masa, Ve td, Ve bu. Çarpım tablomuza daha sağlam bir görünüm kazandırmaya çalışalım.
etiketiyle başlık hücreleri için stiller ekleyelim bu ve sayıların karelerini içeren çapraz hücreler için:
Çarpım tablosu
Çarpım tablosu
*
2
3
2
4
6
3
6
9
Tarayıcıdaki sonuç:
Bir tablodaki kenarlık rengi nasıl değiştirilir?
Yukarıdaki örnekte fark ettiğiniz gibi tabloda kenarlığın rengini değiştirdik. Bunun için border özelliğini kullandık. Parametreleri aşağıda listelenen sıraya göre ayarlar:
çizgi türü, bizim durumumuzda katı (katı)
çizgi kalınlığı, bizim durumumuzda 1 piksel
çizgi rengi, bizim durumumuzda mavi
Bir hücrenin kenarlık rengi ayarının nasıl olduğunu bir kez daha hatırlayalım:
Td ( kenarlık: 1 piksel düz mavi; )
Tablodaki bir satırın rengi nasıl değiştirilir?
Böylece, CSS yeteneklerini kullanarak hücrelerin ve başlık hücrelerinin renklerini nasıl değiştireceğimizi öğrendik. Gibi etiketler için stiller belirtirsek bu veya td, o zaman stillerin diğer etiketlere de uygulanacağını anlamalısınız.
Ancak belirli bir hücrenin, birkaç hücrenin veya tüm satırın rengini değiştirmenizin gerektiği durumlar vardır. Bu durumda ne yapmalı? Burada sınıfları kullanmalı ve stillerini uygulamalısınız. Pratikte şöyle görünür:
RowGreen ( arka plan rengi:yeşil; )
Bu sınıfı kullanarak belirli çizgilerin rengini değiştirmek için aşağıdakileri yapmanız gerekir:
Satırlarda alternatif renkler içeren tablo
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Ve tarayıcıdaki sonuç:
Bir tablodaki metin rengi nasıl değiştirilir?
Tablodaki metin rengini değiştirmek için özelliği kullanın renk. Bunu çeşitli öğelere uygulayabilirsiniz: table, tr, th, td. Buna bağlı olarak seçilen öğenin rengi değişecektir. Örneğin, tablonun tamamı için yazı tipi rengini yeşil olarak ayarlayacağız:
Tablo ( renk: yeşil; ... )
Benzer şekilde, tek tek hücrelerin rengini de değiştirebilirsiniz. Ve bu dersi sonlandırıyoruz, ödevinizi yapmayı unutmayın. Herkese güle güle!
