, vb.
satır içi öğeler
Bir blok öğesinin aksine, bir satır içi öğe yeni bir satıra sarmaz, ancak önceki öğeyle aynı satıra yerleştirilir. Bu tür öğeler genellikle blok öğelerinin içinde bulunur ve genişlikleri yalnızca içerik ve CSS ayarlarına bağlıdır. Bir satır içi eleman ile bir blok eleman arasındaki diğer bir fark, yalnızca içeriği ve diğer satır içi elemanları içerebilmesidir. Blok öğeler, satır içi öğelerde yuvalanamaz.
Satır içi öğelere örnekler: , , , , ![]()
vb.
Not: HTML5'te etiketlerin iç içe yerleştirildiği sıra önemli değildir. Öğeler artık sadece blok ve satır içi olarak değil, içerik kategorilerini temsil eden anlam ve amaca göre gruplandırılıyor.
CSS özellik ekranı: eleman türünü değiştir
CSS'deki son derece kullanışlı görüntüleme özelliğiyle, blok düzeyinde bir öğenin satır içi öğe gibi görünmesini veya tam tersini yapabilirsiniz. Bir blok öğesinin bir satır içi öğe gibi davranması için (yani, yeni bir satıra çevrilmez), bunun için bir kural yazmanız gerekir:
Ekran: satır içi;
Bir satır içi elemanı blok elemanı olarak görüntülemek istiyorsanız (böylece elemandan önce ve sonra bir satır sonu oluşur), aşağıdakini yazın:
Ekran bloğu;
Eylem (görüntüleme:satır içi) ve (görüntüleme:bloklama)
Ayrıca bir "karma" - satır içi öğeyle aynı davranışa sahip bir blok öğesi de yapabilirsiniz. Bu durumda, bu tür blok öğelerinin tüm içeriği her zamanki gibi görüntülenecektir, ancak bloklar satır içi öğeler gibi davranacak, birbiri ardına sıralanacak ve yalnızca gerektiğinde yeni bir satıra kaydırılacaktır. Daralan marjın bu gibi durumlarda hiçbir etkisi yoktur. Bir öğeyi satır içi blok yapmak için şunu yazın:
Ekran: satır içi blok
Eylem (görüntüleme: satır içi blok)
Eğitimde daha fazla: CSS sınır özelliği. Web sayfası öğelerine nasıl kenarlık ekleyeceğinizi ve Basamaklı Stil Sayfalarını kullanarak bunlara hangi ayarları uygulayabileceğinizi öğreneceksiniz.
html ( Köprü Metni Biçimlendirme Dili) öğeleri tarihsel olarak "blok düzeyinde" öğeler veya "satır içi" öğeler olarak kategorize edildi. Satır içi öğeler, içeriğin akışını bozmak yerine, yalnızca öğeyi tanımlayan etiketlerle sınırlanan alanı kaplayan öğelerdir. Bu makalede, HTML satır içi öğelerini ve bunların blok düzeyindeki öğelerden nasıl farklı olduklarını inceleyeceğiz.
Satır içi öğe yeni bir satırda başlamaz ve yalnızca gerektiği kadar genişlikte yer kaplar.
satır içi vs. blok düzeyinde öğeler: bir gösteri
Bu en kolay şekilde basit bir örnekle gösterilir. İlk olarak, kullanacağımız bazı basit CSS'ler:
Vurgula ( background-color:#ee3; )
Çizgide
Bir satır içi öğeyi gösteren aşağıdaki örneğe bakalım:
Aşağıdaki yayılma bir satır içi eleman; arka planı, satır içi öğenin etkisinin hem başlangıcını hem de sonunu gösterecek şekilde renklendirilmiştir.
Aşağıdaki paragraf bir
blok düzeyinde eleman;
arka planı, blok seviyesindeki elemanın etkisinin hem başlangıcını hem de sonunu gösterecek şekilde renklendirildi.
CSS (standart okuma modunda görüntülenmez) de kullanılır:
Gövde ( kenar boşluğu: 0; dolgu: 4 piksel; kenarlık: 1 piksel düz #333; ) .highlight ( background-color:#ee3; )
Daha önce olduğu gibi aynı CSS kullanılarak işlendi, şunu elde ederiz:
Farkı gör? bu
Öğe, metnin düzenini tamamen değiştirerek üç bölüme ayırır: metinden önceki metin.
Sonra
"s metni ve son olarak aşağıdaki metin
Değişen eleman seviyeleri
değiştirebilirsiniz Görsel sunum CSS görüntüleme özelliğini kullanan bir öğenin. Örneğin, "inline" olan display değerini "block" olarak değiştirerek, tarayıcıya satır içi öğeyi satır içi kutu yerine bir blok kutuda veya tam tersi şekilde oluşturmasını söyleyebilirsiniz. Ancak bunu yapmak durumu değiştirmez. kategori ve içerik modeliöğenin. Örneğin, span öğesinin gösterimi "block" olarak değiştirilse bile, yine de içine bir div öğesinin yerleştirilmesine izin vermez.
kavram farklılıkları
Kısaca, satır içi ve blok düzeyinde öğeler arasındaki temel kavramsal farklılıklar şunlardır:
İçerik modeli Genel olarak, satır içi öğeler yalnızca verileri ve diğer satır içi öğeleri içerebilir. Blok öğelerini satır içi öğelerin içine koyamazsınız. Biçimlendirme Varsayılan olarak, satır içi öğeler belge akışında yeni bir satırın başlamasını zorlamaz. Öte yandan, blok öğeleri genellikle bir satır kesilmesine neden olur (ancak her zamanki gibi , bu CSS kullanılarak değiştirilebilir).
"Satır içi" öğelerin listesi
Aşağıdaki öğeler varsayılan olarak satır içidir (blok ve satır içi öğeler artık HTML 5'te tanımlanmasa da,
Bu bölümde:
Öğe sözdizimi
HTML öğesi HTML ile yazılmış bir web sayfasının temel yapısal birimidir. Aşağıdaki resim, öğelerin sözdizimini göstermektedir. Çoğu etiket için, tek etiketler dışında öğe sözdizimi aynı görünecektir.
HTML'deki tüm öğeler aynı biçimi izler:
- Öğe bir başlangıç etiketi ile başlar.
- Öğe bir kapanış etiketi ile biter.
- Bir öğenin içeriği, açılış ve kapanış etiketleri arasındaki her şeydir.
- Bazı öğelerin içeriği yoktur (boş öğeler).
- Çoğu öğe nitelikler içerebilir
Not: Kapanış etiketine "" sembolünü koymayı unutmayınız. /
", tarayıcıya öğenizin sona erdiğini ve ondan sonra yazılacak olanın zaten başka bir öğe olduğunu söyler.
Boş öğeler
HTML'de kapanış etiketi olmayan birkaç öğe vardır, örneğin: ![]()
veya
. Bu tür elemanlar denir boşçünkü herhangi bir içerik içermezler ve bir kapanış etiketi yoktur.
iç içe öğeler
Tüm HTML belgeleri iç içe öğelerden oluşur. Çoğu, diğer öğeleri içerebilir veya diğer öğelerin içine yerleştirilebilir, ancak öğelerin iç içe geçme derinliği sınırlı değildir.
Aşağıdaki örnek, ikisi iç içe geçmiş üç öğeye sahiptir:
ilk paragrafım
Bir elemanı diğerinin içine yerleştirdiğinizde, yuvalanmış elemanın aynı eleman içinde başlayıp bittiğine dikkat etmeniz gerekir. Bu nedenle, aşağıdaki örnek yanlıştır:
Bu çok
ilginç
HTML'de çoğu öğe iki gruba ayrılabilir: blok düzeyi ( engellemek) ve küçük harf ( Çizgide).
Acemi bir geliştiricinin, aralarındaki farkın ne olduğunu hemen bulması ve ayrıca bir öğenin belirli bir gruba ait olduğunu hatırlaması her zaman mümkün değildir. Ancak zamanla, deneyimle, bu tür zorluklara dair bir ipucunuz olmayacak.
satır içi öğeler
Satır içi öğeler etiketleri içerir:
,
,
,
, ![]()
, ,
,
,
....
Genel akıştaki satır içi öğeler sırayla bir satırda birbiri ardına yerleştirilir.
Bir satır içi öğe veya içeriğinin bir kısmı, yalnızca satırın sonunda veya bir şey onu yeni bir satıra gitmeye zorladığı zaman başka bir satıra geçer.
Elbette satır içi elemanlar blok elemanlarının içine yerleştirilebilir.
Blok elemanları
Blok öğeleri etiketleri içerir:
,
,
...
,
,
,
,
,
....
Blok, olduğu gibi, bir paragrafla vurgulanan ayrı bir yapısal birimdir. Genel akıştaki blok elemanlar sıralı olarak düzenlenmiştir biri diğerinin altında. Varsayılan olarak, iki blok öğesi aynı satırda olamaz.
Bir veya daha fazla blok diğerinin içine de yerleştirilebilir ( ebeveyn) blok öğesi.
CSS'de bloklar HTML öğelerinden oluşturulur ve aşağıdaki yapıya sahiptir.
Her blok bir dikdörtgen şeklindedir.
Bir blok öğesinin bir sınırı ve içeriği vardır: içerik adı verilen metin bilgileri, fotoğraflar, şirket logosu vb. olabilir ( ingilizce içerik- içerik).
Bloğun bordürüne border özelliği kullanılarak gerekli tasarım verilebilir: çizgilerin kalınlığını, rengini ve stilini ayarlayın. Kenarlık varsayılan olarak görünmezdir.
İçerik ve kenarlık arasında iç mesafeler vardır - kenar boşlukları (özellik dolgu malzemesi). Kullanılmaları zorunlu değildir. Diğer bir deyişle, padding özelliği kullanılarak açıkça ayarlanmazlarsa, o zaman sınır, bloğun içeriğine çok yakın olacak veya ondan minimum bir mesafede ayrılacaktır. Öte yandan, alanlar geliştirici tarafından belirtilen çok özel boyutlara sahip olabilir.
Bloğun çevresinde - sınırlarının ötesinde, girintiler (mülkiyet) adı verilen boş, boş alanlar vardır. marj). Doldurma, blok sınırından en yakın öğelere veya yoksa, tarayıcı penceresinin kenarlarına olan mesafedir. Girintiler ve kenar boşlukları varsayılan olarak yoktur veya tarayıcı tarafından otomatik olarak belirlenen minimum genişliğe sahiptir.
Ayrıca blok için sabit bir genişlik ayarlayabilirsiniz (özellik Genişlik) ve yükseklik (özellik yükseklik), ancak yalnızca içeriği için. Dolgu, kenarlık ve kenar boşlukları dahil değildir. Varsayılan olarak, bloğun hem yüksekliği hem de genişliği, içeriğin kapladığı alanın boyutuna uyacak şekilde ayarlanır.
Kod parçacığı:
satır içi öğeler aynı hat üzerinde yer almaktadır.
Bir blok elemanı içine alınırlar - bir paragraf! Metin kaydırma otomatik olarak gerçekleşir - satırın sonunda.
Sonraki blok, yeni bir satırda başlayan bir paragraftır.
İki paragraf yer almaktadır.
Bloğun içinde - etiket böl!
Ayrı metin parçaları bir yayılma etiketi içine alınır. Ve onlar tarz!
Sonuç:
satır içi öğeler aynı hat üzerinde yer almaktadır. Bir blok elemanı içine alınırlar - bir paragraf! Metin kaydırma otomatik olarak gerçekleşir - satırın sonunda.
Sonraki blok, yeni bir satırda başlayan bir paragraftır.
İki paragraf yer almaktadır.
Bloğun içinde - div etiketi!
Ayrı metin parçaları bir yayılma etiketi içine alınır. Ve onlar tarz!
