CSS kullanarak çift çerçeve. Marj, dolgu ve sınır noktalı eleman sınırını kullanarak CSS'deki girintiler ve çerçeveler

Merhaba, Sevgili Blog Okuyucular Sitesi! Bugün basamaklı stil sayfalarını veya CSS'yi incelemeye devam edeceğiz. Geçmiş makalelerde, sitenin blok düzeni olarak kabul ettik. Sonuç olarak, oldukça profesyonel web sayfaları almaya başladık, ama bir şey yok. Ve onlardan çoğunlukla girintileri ve çerçeveleri yeterli değil. Bugün, HTML öğeleri için girintileri ve çerçeveleri ayarlamanıza izin veren marj, dolgu ve kenarlık kuralları tarzının göz önünde bulundurulduk.

CSS Girinti Parametreleri

Basamaklı stil sayfalarının yardımıyla, iki tipte girintileri belirleme fırsatı vardır.

1. İç girintili - Bu, unsurun hayali sınırından içeriğine olan mesafedir. Mesafe parametre kullanılarak ayarlanır dolgu malzemesi. Böyle bir girdi, elemanın kendisine aittir ve içindedir.

2. Harici girinti - Web sayfasının mevcut elemanının sınırı ile bitişik elemanların sınırları veya ana öğe arasındaki mesafe. Mesafenin boyutu mülk tarafından düzenlenir. marj.. Böyle bir girinti elemanın dışında.

Netlik resim için:

Örneğin, metne doldurulmuş hücreyi düşünün. Daha sonra iç girinti, hücrenin hayali sınırının ve içinde bulunan metni arasındaki mesafedir. Ve harici girinti, komşu hücrelerin sınırları arasındaki mesafedir. İç girintilerle başlayalım.

Dolgu ile CSS'de iç girintiler (üst, alt, sol, sağ)

Dolgu-sol stil özellikleri, dolgu tabanları, dolgu-sağ ve dolgu tabanları, sırasıyla, üstte, üstte, üstte, Web sayfası öğesinin sağına ve altına belirtmenize olanak sağlar:

Emeklilik miktarı, piksellerde (PX), yüzde (%) veya CSS için izin verilen diğer ünitelerde belirtilebilir. Faiz belirtirken, değer elemanın genişliğinden değerlendirilir. Miras değeri, ebeveynden devralındığını gösterir.

Örneğin, geçerli paragraf için, sol girinti 20 piksel, piksellerin üst girintisini tanımlayan stil kuralını uyguladım, 35 pikselin ve 10 pikselin altından elde edilen 35 piksele kadar. Kayıt kuralları şöyle görünecektir:

p.test (
Dolgu solu: 20px;
Dolgu-top: 5px;
Dolgu-sağ: 35px;
Dolgu-alt: 10px
}

Dolgu ABD Kuralı Web sayfasının tüm taraflarından girintileri belirlemenizi sağlar:

dolgu malzemesi:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Ulusal kuralın, bunları kendi aralarında ayırarak bir, iki, üç veya dört değer kullanmasına izin verilir. Bu durumda, etki değer sayısına bağlıdır:

bir değer belirlerseniz, sayfa öğesinin her tarafından depozito miktarını ayarlar;
İki değer belirlerseniz, birincisi, girintinin yukarıdaki ve alttanın büyüklüğünü görevlendirir ve ikincisi sol ve sağ;
Üç değer belirlerseniz, birincisi, geri çekilme değerini yukarıdan, ikinci sola ve sağa ve üçüncünün altından belirler;
dört değer belirtilirse, önce girinti değerini yukarıdan yükleyecektir, ikincisi doğru ise, üçüncüsü alt ve dördüncü olandır.

Böylece, yukarıdaki CSS kuralı mümkün olduğunca azaltılabilir ve aşağıdaki gibi yazılabilir:

p.Test (dolgu: 5px 35px 10px 20px)

CSS'de marj özelliği veya harici girdiler

Marj-sol, kenar boşluğu, kenar boşluğu-sağ ve marj-alt stil özellikleri, sırasıyla, solda, sağa ve aşağıya doğru olan dış girintilerin değerlerini belirlemenizi sağlar:

Yukarıda belirtildiği gibi, dış girinti, akım elemanının sınırından bitişik elemanın sınırına olan veya, ana kabın iç sınırına bitişik bir eleman yoksa, bitişik elemanın sınırına olan mesafedir.

Emeklilik miktarı piksel (PX), yüzde (%) veya CSS için izin verilen diğer ünitelerde gösterilebilir:

p (
Marj-sol: 20px;
}
h1 (
Marj-sağ:% 15;
}

Otomatik değer, girintilerin boyutunun tarayıcı tarafından otomatik olarak hesaplanacağı anlamına gelir. Faiz kaydının kullanımı durumunda, girintiler bağlı olarak hesaplanır. ebeveyn Konteyner Genişlikleri. Ayrıca, bu sadece marj-sol ve kenar boşluğu sağında değil, aynı zamanda marj-üst ve kenar boşluğu için de geçerlidir, yüzdeler, kapların yüksekliği değil, genişliğe bağlı olarak hesaplanacaktır.

Dış girintilerin değerleri olarak, uygulanmasına izin verilir. negatif değerler:

p (
Marj-sol: -20px;
}

Pozitif girintilerle, bitişik elemanlar uzaklaşırsa, daha sonra negatif bir değere sahipse, bitişik blok, bu negatif girinti belirlediğimiz elemanı besler.

Harici girdiler, stil niteliğini kullanarak da belirleyebiliriz. marj.. Web sayfası elemanının her tarafından eşzamanlı bir girintinin miktarını belirtir:

marj:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Bu özellik, bir, iki, üç veya dört girintinin bir görevi durumunda, kural dolgusu ile aynı yasalara uyuyor.

Sınır özelliklerini kullanarak çerçeve parametreleri

Çerçeveleri ayarlarken, üç tür parametre vardır:

sınır genişliği - çerçeve kalınlığı;
sınır rengi - çerçeve rengi;
kenarlık tarzı - çerçevenin çizileceği çizgi türü.

Çerçeve kalınlığı parametresiyle başlayalım:

sınır Genişliği: [Değer | İnce | Orta | Kalın] (1,4) | kalıtım.

Çerçeve kalınlığı Piksel olarak veya CSS birimlerinde bulunan diğerlerinde ayarlayabilirsiniz. Değişkenler ince, orta ve kalın çerçevenin kalınlığını sırasıyla 2, 4 ve 6 piksel olarak ayarlayın:

sınır genişliği: Orta;

Dolgu ve marj özelliklerine gelince, sınır genişliğinin parametresinin bir, iki, üç veya dört değeri kullanılmasına izin verilir, böylece çerçevenin kalınlığını her taraf için hemen veya her biri ayrı olarak belirler:

sınır genişliği: 5px 3px 5px 3px

Geçerli paragraf için, ilk 1px'in kalınlığını, sağa 2px, daha düşük 3px ve kuralı kullanarak sol 4px yapın (sınır genişliği: 1px 2px 3px 4px;)

Sınır-sol genişlikli stil özniteliklerini, kenarlık-üst genişliğinin, kenarlık sağ genişlikli ve kenarlık alt genişliğinin ve kenarlık-alt genişliğinin kullanılması, sırasıyla, sol, üst, sağ ve alt kalınlığı ayarlayabilirsiniz. Çerçevenin yanları:

Yönetebileceğiniz aşağıdaki parametre sınır rengi Çerçeve rengi:

sınır rengi: [Renkli | Şeffaf] (1,4) | kalıtım.

Özellik, çerçevenin rengini, öğenin her tarafı için bir kerede veya yalnızca belirtilenler için ayarlamanızı sağlar. Bir değer olarak, RENKLER İÇİN HTML'de kabul edilen görevlerinin yöntemlerini kullanabilirsiniz: onaltılık kod, anahtar kelimeler, vb.:

p (Sınır genişliği: 2px; sınır rengi: kırmızı)

Şeffaf değer, çerçevenin şeffaf rengini ayarlar ve devralma ebeveyn değerini devralır. Varsayılan olarak, çerçevenin rengi belirtilmezse, bu öğenin içindeki yazı tipi için kullanılan kişi kullanılacaktır.

Sınır-sol renkli stil öznitelikleri, kenarlık üst renk, kenarlık-sağ renk ve kenarlık-alt renk kullanarak, çerçevenin sol, sağ ve altını sırasıyla renk ayarlayabilirsiniz:

Ve son parametre kenarlık tarzı setleri Çerçeve tipi:

sınır tarzı: (1,4) | kalıtım.

Çerçeve tipi, öğenin her tarafı için hemen veya yalnızca belirtilenler için belirtilebilir. Değer olarak birden fazla anahtar kelimeyi kullanabilirsiniz. Görünüm, kullanılan tarayıcıya ve çerçevenin kalınlığına bağlı olacaktır. Değer vermek yok Varsayılan olarak kullanılır ve çerçeveyi görüntülemez ve kalınlığı sıfıra ayarlanır. Gizli değeri aynı etkiye sahiptir. Kalınlığa bağlı olarak diğer değerler için elde edilen çerçeve aşağıdaki tabloda gösterilir:

Sınır-sol tarzı stilin, sınır-üst düzey, kenarlık-sağ tarzı ve kenarlık tabanlı stil ve sınır tabanlı stilin nitelikleri, sırasıyla, sol, üst çekilecek çizgiler stilini ayarlayın. Çerçevenin sağ ve alt tarafı:

Dış ve iç girintilerin parametrelerine gelince, çerçeve için bir çerçeve var. evrensel Sınır Özelliği. Ürünün etrafındaki sınırın kalınlığını, stilini ve rengini eşzamanlı olarak ayarlamanızı sağlar:

sınır: | kalıtım.

Değerler, boşluklarla ayrılan herhangi bir sıraya girebilir:

tD (sınır: 1px katı sarı)

Sınırı yalnızca öğenin belirli taraflarına ayarlamak için, Sınır üst, kenarlık alt, kenarlık sol, kenarlık-sağ, sırasıyla, sol alt, sol için parametreleri belirtmenize olanak tanıyan özellikleri vardır. ve çerçevenin sağ tarafı.

Sadece özetlemek için kalır:

görev için İç girintiler Mülkiyeti kullanıyoruz dolgu malzemesi;
ayarlar için dış girintiler Bir kural var marj.;
Çerçeve parametreleri özniteliği kullanarak ayarla sınır..

Tüm bu CSS özelliklerinin web sayfası öğesinin boyutunu arttırdığını unutmayın. Bu nedenle, çerçevenin kalınlığını veya girintilerin boyutunu, web sayfasının tasarımını oluşturan blok kaplarındaki boyutunu değiştirirsek, buna göre, bu kapların boyutunu değiştirmeliyiz, aksi takdirde değişebilir ve tasarım bozulacaklar .

Hepsi bu, yeni toplantılara!

Vlad Merzehevich

CSS'yi kullanarak, elemana bir çerçeve birkaç şekilde ekleyebilirsiniz. Temel olarak, tabii ki, sınır özelliği en çok yönlü, anahat olarak da uygulanır ve, ne kadar şaşırtıcı bir şekilde, ana görevi, ana görevi bir gölge oluşturmak içindir. Sonra, bu yöntemleri ve kendi aralarındaki farklılıklarını göz önünde bulundurun.

Anahat emlak

Bir çerçeve oluşturmak için en basit özellik. Kenarlık olarak aynı parametrelere sahiptir, ancak bazı ayrıntılarla ondan önemli ölçüde farklılık gösterir:

anahat elemanın etrafında görüntülenir (içindeki sınır);
anahat elemanın boyutunu etkilemez (sınırın genişliğine ve yüksekliğine eklenir);
anahat, yalnızca elemanın etrafına tamamen monte edilebilir, ancak ayrı taraflarda değil (kenarlık herhangi bir tarafta veya hepsi bir kerede herhangi bir şekilde kullanılabilir);
açık çizelge, sınır yarıçapı özelliği tarafından belirtilen yuvarlamanın yarıçapını uygular (kenarlıklı olarak).

Soru ortaya çıkıyor - anahatların hangi durumlarda, rolü, listelenen farklılıklara rağmen, sınırla tamamen alındığında? Durumlar çok değil, ama tanışıyorlar:

karmaşık renkli çerçeveler oluşturma;
fare imlecini vurduğunuzda bir elemana bir çerçeve ekleme;
odağı alırken bazı öğeler için tarayıcı tarafından eklenen çerçeveyi gizleme;
anahat için, anahat-ofset özelliğini kullanarak, öğenin kenarından çerçeveye olan mesafeyi oluşturabilir.

Çok renkli çerçeveler

Anahatın herhangi bir şekilde sınırın yerini almadığı anlaşılmalıdır ve Örnek 1'de gösterildiği gibi, bununla birlikte olabilir.

Örnek 1. Bir çerçeve oluşturma

sınır ve anahat

Bu örnekte, beyaz sınır arka planından ayrılan elemanın etrafına siyah bir çerçeve eklenir (Şek. 1).

İncir. 1. elemanın etrafındaki çerçeve

Kullanırken Çerçeve: Hover

Kenarlıktan bir kare eklenirken, sınır ve psödo-sınıfı birleştirirken, elemanın genişliğinde bir artış arttı: Hover. "Kazanmak" için iki yol var. En basit şey, bildiğimiz gibi, unsurun boyutunu etkilemeyen ana hattaki sınırı değiştirmektir (Örnek 2).

Örnek 2. Hovering yaparken çerçeve

anahat

anahat, eğer sadece köşeleri yuvarlamaya çalışmazsa, her zaman uygun değildir. Burada ikinci yöntem uygundur - Görünmez bir çerçeve veya arka plan rengiyle çakışan bir çerçeve ekleyin ve ardından parametrelerini değiştirirken (Örnek 3) parametrelerini değiştirin. Sonra elemanın ofseti olmayacak, çünkü çerçeve başlangıçta zaten orada. Ancak, elemanın genişliğinin genişlik, soldaki kenarlık ve sağdaki kenarlık değerlerinden tüketildiğini her zaman unutmayın. Benzer şekilde, bir yükseklikte.

Örnek 3. Hovering sırasında Çerçeve

sınır.

Alan alanlarının etrafındaki çerçeve

Bazı tarayıcılarda (Chrome, Safari, En son Opera sürümleri), netleme elde ederken form alanları etrafında küçük bir renk çerçevesi (Şek. 2) görüntülenir. Çıkarmak için, Örnek 4'te gösterildiği gibi hiçbir Yok'un Outline özelliğine değerini eklemek yeterlidir.

İncir. 2. Alanların etrafındaki çerçeve

Örnek 4. Çerçeveyi çıkarın

giriş

Kutu-gölge yoluyla çerçeveler

Box-Shadow özelliği, elemanın etrafına bir gölge eklemek için tasarlanmış olsa da, bununla bir çerçeve oluşturabilirsiniz ve böylece kenarlık veya anahat yoluyla yapılamaz. Sonuç, gölgelerin sayısının sınırsız olabileceği gerçeğinden dolayı, parametreler virgül aracılığıyla listelenmiştir.

Çerçeveyi almak için, ilk üç parametre sıfıra ayarlanmalıdır, gölgenin konumundan ve bulanıklığından sorumludur. Bu durumda dördüncü parametre sınırın kalınlığından sorumludur ve Beşinci çerçevenin rengini ayarlar. İkinci çerçeve için, dördüncü parametre, iki karenin kalınlığının toplamına eşittir.

Örnek 4'te, iki çerçevenin ve sağdaki bir sınırın eklenmesi, bir kutu-gölge özelliği kullanılarak gösterilir.

Örnek 4. Kutu-gölge kullanarak

kutu gölge

Bu örneğin sonucu Şekil 2'de gösterilmiştir. 3.

İncir. 3. Kutu-Shadow özelliği tarafından oluşturulan çerçeveler

Vlad Merzehevich

Tablonun hacminin etkisi, çerçeve veya hücrelerdeki eşzamanlı ışık ve koyu renklerin kullanımı nedeniyle, yanılsama tablonun web sayfasının arka planı üzerinde çıkıntılı olduğu ortaya çıkıyor. Örneğin, varsayılan tablonun etrafındaki çerçeve toplu olarak görüntülenir. Bu tür bir çerçeve, web tasarımcılarıyla yeterince popüler olmamasına rağmen, bu, böyle bir çerçevenin hiç uygulanmaması gerektiği anlamına gelmez. Stilleri kullanarak, tablo, "düz" arkadaşının arka planına karşı başarılı bir şekilde vurgulanabilen hacimsel olarak en çeşitli görünümler verilebilir.

Üç boyutlu çerçeve kalınlığı sınır etiketi niteliği tarafından düzenlenir

Bu durumda, sadece masanın etrafındaki dış kenarlık değişir. Tablonun içindeki çizgilerin kalınlığı değişmeden kalır (Şekil 1).

Belirtilen tabloyu oluşturmak için, stillerdeki tüm olası parametreleri özetleyeceğiz ve çerçeveyi sınır özniteliğine (Örnek 1) ekleyeceğiz.

Örnek 1. Sınır özniteliğini kullanarak

Tablo

	2004	2005	2006
Rubin	43	51	79
Emeramda	28	34	48
Safir	29	57	36

Bu örnekte, tablonun etrafındaki çerçeve iki pikselin bir kalınlığına sahiptir ve türü farklı tarayıcılarda biraz farklı olabilir.

Stiller ayrıca, Sınır özelliğinin evrensel tarzını kullanarak tablonun üç boyutluluğunun oluşturulmasına izin verir. Değerler, tablonun son görünümünü oldukça etkileyen çizginin ve kalınlığının stilini gösterir. Sekmesinde. 1 bazı değerleri ve nihai sonucu gösterir.

Örnek 2'de bir stil, oluk değeri ve 5 piksel kalınlığında bir çerçeve eklemek için kullanılır. Elde edilen tablonun görünümü, Şekil 2'de gösterilmiştir. 2.

Sınır özelliğinin stili, her hücreye bir çerçeve eklemek için tablonun ve TD ve TH seçicilerine bir çerçeve oluşturmak için tablo seçicisine uygulanır. Aynı zamanda, farklı hücrelerle temas eden yerlerde çift çizgiye sahip olmamak için, daraltma değerine sahip sınır çöküşü özelliği kullanılır (Örnek 2).

Örnek 2. Stilli bir çerçeve oluşturma

Tablo

	2004	2005	2006
Rubin	43	51	79
Emeramda	28	34	48
Safir	29	57	36

Bu örnekte, hücrelerin ve tablonun bir bütün olarak derinlemesine gri bir çerçeve oluşturulur.

Çizgilerindeki koyu ve parlak çizgilerin doğru alternasyonu nedeniyle tablonun üç boyutunun etkisini oluşturabiliriz (Şek. 3).

Bu şekilde, masanın sıralarının bile açık bir arka plan, aşağıdan beyaz yatay bir çizgi ve koyu gri - yukarıdan gelen beyaz bir arka plan olduğunu göstermiştir. Bununla birlikte, tersi yorumlamak ve tam tersi ve bu tuhaf çizgilerin üst ve karanlıkta beyaz bir çizgi olduğunu söyleyebilir ve söyler.

Şekil 2'de gösterilen oluşturmak için 3 Tablo İsteğe bağlı bir sınıfı tanıtıyoruz ve hatta masanın sıralarına ekleyeceğiz. Aynı zamanda, TR seçici için, Sınır özelliğini doğrudan ayarlamak imkansızdır, bu durumda çizgi basitçe görüntülenecektir. Bu nedenle, bağlamsal seçicileri kullanıyoruz ve .Even TD tasarımını ekleriz, bu, elemanın içinde bulunan tüm hücrelerin bile sınıfla olan tüm hücrelerin, aşağıdan ve üstten gelen hatları belirtiriz. Arkaplan özelliğini kullanarak arka plan rengi, Örnek 3'te gösterilen TR seçiciye kullanılmasına izin verilir.

Örnek 3. Tablo satırlarını seçme

Tablo

	2004	2005	2006
Rubin	43	51	79
Emeramda	28	34	48
Safir	29	57	36

Tablonun alt satırı bile, tarzda ışık renginde verilirse, tablonun alt kısmında ışık şeridini fark edebilirsiniz. Varlığı ile, alt çizgi olmadan yeni bir stilist sınıfı kabul edebilir veya yapabilirsiniz ve bu satıra uygulayın.

CSS ayrıca katı, noktalı veya nokta oluşturmamızı sağlar Çerçevelemek Web Sayfası öğesinin hayali sınırına göre.

Sınır-sol genişlikli stil nitelikleri, kenarlık üst genişliğinde, kenarlık sağ genişlik ve kenarlık-alt genişlik ve kenarlık-alt genişlik, çerçevenin sol, üst, sağ ve alt taraflarını, sol, üst, sağ ve alt taraflarını tanımlar. :

sınır-sol genişlik | Sınır üst genişliği | Sınır sağ genişliği |

sınır-alt genişlik: İnce | Orta | Kalın |<толщина>| Devralma.

Çerçeve kalınlığının mutlak veya göreceli bir sayısal değerini veya önceden tanımlanmış değerlerden biri belirleyebiliriz: ince (ince), orta (orta) veya kalın (yağ). İkinci durumda, gerçek kalınlık çerçevelemek Web tarayıcısına bağlıdır. Varsayılan kalınlık değeri ayrıca Web tarayıcısına da bağlıdır, bu nedenle açıkça kurmak her zaman daha iyidir.

Liste 11.2'de, bir piksele eşit, tablonun hücrelerindeki çerçevenin kalınlığını belirttik.

Ancak tüm birinci seviye başlıklarını oluşturan stil Çerçevelemek 5 piksel kalınlığının alt tarafı:

H1 (Sınır alt genişliği: 5px)

Aslında, tüm birinci seviye başlıklarının altı çizili olacaktır.

Sınır genişliği stili özniteliği, çerçevenin her tarafı için bir kerede kalınlık değerlerini belirlemenizi sağlar:

sınır genişliği:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Bir değer belirtilirse, çerçevenin her tarafının kalınlığını görevlendirir.

İki değer belirtilirse, ilk görev, üst ve alt ve ikincisinin kalınlığıdır ve ikinci - çerçevenin sol ve sağ tarafıdır.

Üç değer belirtilirse, ilk görev üst, ikinci - sol ve sağ ve üçüncü - çerçevenin alt kısmıdır.

Dört değer belirtilirse, ilk görev üstün kalınlığıdır, ikincisi doğru, üçüncü - alt ve dördüncü sol taraflardır çerçevelemek.

Misal:

TD, TH (Sınır Genişliği: İnce)

Sınır-sol renkli stil özellikleri, kenarlık üst renk, kenarlık-sağ renk ve kenarlık-alt rengi, sırasıyla, çerçevenin sol, üst, sağ ve alt kısmı ayarlanır:

Şeffaf değer, ebeveyn elemanının arka planının "parlaması" için bir "şeffaf" rengi belirtir.

DİKKAT!

Çerçeve rengi her zaman açıkça belirtilmelidir - aksi takdirde çizilmeyebilir.

Misal:

H1 (Sınır alt genişliği: 5px
sınır-alt renk: kırmızı)

Sınır rengi stili özniteliği, çerçevenin her tarafı için rengi hemen belirlemenizi sağlar:

sınır rengi:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Sınır genişliğinin benzer niteliği ile aynı davranır:

TD, TH (sınır genişliği: ince;
sınır rengi: siyah)

Sınır sol tarzı stil öznitelikleri, sınır-üst stil, kenarlık sağ tarzı ve kenarlık tabanlı stil, sırasıyla, sol, üst, sağ ve alt tarafın çizilmeyeceği çizgiler stilini ayarlayın. çerçevelemek:

sınır-Sol Tarza | Sınır üst düzey | Sınır sağ tarzı |

ridge | inset | başlangıç \u200b\u200b| devralma

Aşağıdaki değerler burada mevcuttur:

Hiçbiri ve gizli - çerçeve eksik (normal davranış);

Noktalı - noktalı çizgi;

Kesikli - çizgi çizgisi;

Katı - katı çizgi;

Çift - çift çizgi;

Oluk - "satın alındı" üç boyutlu çizgi;

Ridge - "dışbükey" üç boyutlu çizgi;

İç - üç boyutlu "şişkin";

Başlangıç \u200b\u200büç boyutlu bir "derinleşen".

Misal:

H1 (Sınır alt genişliği: 5px
sınır alt rengi: kırmızı
sınır-alt stil: çift)

Sınır stili stil özniteliği, çerçevenin her tarafı için derhal stili belirlemenizi sağlar:

sınır tarzı:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Benzer sınır genişliği ve sınır renkli stil öznitelikleri ile aynı şekilde davranır.

Misal:

TD, TH (sınır genişliği: ince;
sınır rengi: siyah;
sınır tarzı: Noktalı)

Sınır sol, sınır üst, kenarlık-sağ ve sınır tabanlı stil özellikleri, sırasıyla, sol, üst, sağ ve alt taraf için tüm parametreleri belirlemenizi sağlar. çerçevelemek:

sold-sol | Sınır üstü | Sınır-sağ | Sınır-Alt:

<толщина> <стиль> <цвет> | kalıtım.

Çoğu durumda, bu stil özellikleri tercih edilir:

H1 (sınır altlığı: 5px çift kırmızı)

Global Sınır Stili Özelliği, çerçevenin her tarafı için tüm parametreleri bir kerede ayarlamanızı sağlar:

sınır:<толщина> <стиль> <цвет> | kalıtım.
TD, TH (Sınır: İnce Noktalı Siyah)

DİKKAT!

Çerçeveler ayrıca web sayfası öğesinin boyutunu da arttırır. Bu nedenle, oluşturursak çerçevelemek Web sayfasının tasarımını oluşturan blok kaplarında, buna göre, bu kapların boyutunu değiştirmeliyiz, aksi takdirde kaydırılacaklar ve tasarım rahatsız edilecektir.

Web sitemiz için görüntüleyin

Web sayfalarımızın tasarımını oluşturan konteynerler arasında ve bu konteynerlerin ve içeriğinin sınırları arasında girintileri yapacağız.

Web tarayıcısı penceresinin kenarları ile web sayfasının içeriği arasındaki dış girinti sıfırdır. Web tarayıcısı penceresindeki boşluğun en çok kullandığına izin verin.

Bir notta

Varsayılan olarak, her Web tarayıcısı, penceresinin kenarları ile Web sayfasının içeriği arasında girintilerini oluşturur.

Sol ve sağdaki bir web sitesi başlığı (Cheader) ile bir kapta iç girintiler - 20 piksel. Başlığın metnini Web tarayıcı penceresinin kenarlarından itmemiz gerekecek, aksi takdirde başlık çirkin görünecektir.

Navigasyon bandına sahip kaplar (Cnavbar) ve ana içeriğe (CaPain) - 10 piksel ile dış girintiler.

Her taraftan ana içeriğe (CaPain) ile kaptan iç girintiler - 5 piksel.

Konteynerden, ana içeriğe (CaPain) yukarıdaki - 10 pikselden iç girintilidir. Böylece onu Cnavbar ve Cmain kaplarından ayırıyoruz.

Telif hakkı bilgisi (ccopyright) sol ve sağa - 20 piksel ile bir kapta iç girintiler. Telif hakkı bilgilerinin metni ayrıca Web tarayıcısı penceresinin kenarlarından da taşınmalıdır.

Yapılan değerler, deneylerin bir sonucu olarak yazar tarafından elde edilir. Başkalarına sorabilirsiniz.

Şimdi dört konteyner çerçevesini tüm böler.

Konteyner Cheader alacak Çerçevelemek bir alt tarafı ile.

Cmain Container, sol tarafı olan bir çerçevedir.

CCOPYRIGHT konteyner - bir üst tarafı olan çerçeve.

Çerçeveler İnce ve noktaya geleceğiz. Renk olarak, onlar için ayarlayın # B1BEC6 (açık mavi).

Liste 11.3, bizim tarafımızdan seçilen girintilerin ve çerçevelerin ayarlarını uygulayan ana.CSS stillerinin CSS kodunun düzeltilmiş bir parçası olduğunu göstermektedir.

Hadi merak edelim.

Web tarayıcısı penceresinin sınırları ile Web sayfasının içeriği arasındaki girintiyi kaldırmak için, Marj Stili özniteliğini kullandık. Etiketi yeniden tanımlama tarzını koyduk. Ve 0 piksel değeri verdiler:

Gövde (Renk: # 3B4043;
arka plan rengi: # F8F8F8;
yazı tipi ailesi: Verdana, Arial, Sans-Serif;
marj: 0px)

Adlandırılmış Cheader Style'de, aynı adın kabına bağlı olarak, iç girintileri sol ve sağa, 20 piksele eşittir ve Çerçevelemek Sadece alt ile. Bu çerçeve bu konteyneri temelden ayırır:

#CHEADER (genişlik: 1010px;
dolgu: 0 20px;
sınır Tipi: İnce Noktalı # B1BEC6)

Ek olarak, bu kabın genişliği olarak mutlak bir değer belirledik. Geri Çağırma: Bağıl bir genişliğe sahip bir konteyner ekranı görüntülendiğinde, Web tarayıcısı önce genişliğinin mutlak değerini hesaplar ve sonra girintilerin miktarını ekler. Sonuç olarak, konteyner Web tarayıcısı penceresinden daha geniş olacak ve kaydırma şeritleri, hiçbir şekilde ihtiyacımız olmayan pencerede görünecektir. Bu nedenle, kabın genişliği için, mutlak bir değer belirlemek daha iyidir, böylece konteynerin Web tarayıcısı penceresine genişlikte uyması garanti edilir.

Adı CNAVBAR Style'de, 10 pikselliğin sağına harici bir girintiyi belirttik - CNAVBAR konteynerini CAMAIN konteynerinden görsel olarak ayırıyoruz:

#Cnavbar (genişlik: 250px;
yükseklik: 570px;
Şamandıra: Sol;
marj-sağ: 10px)

Adlandırılmış Cmain tarzında, iç girintileri ve çerçeveyi bir sol tarafta sorduk - Cmain kabını CNAVBar konteynerinden ayıracak:

#Cmain (genişlik: 760px;
yükseklik: 570px;
Şamandıra: Sol;
taşma: Otomatik;
dolgu: 5px;
sınır Sol: İnce Noktalı # B1BEC6)

Adlandırılmış CCOPYRIGHT tarzında, girintileri 20 pikselin sola ve sağına ve yukarıdaki - 10 piksel olarak ayarladık. Ek olarak, bir üst tarafa sahip bir çerçeve oluşturur, bu da CCopyright kabını denetimli "komşulardan" ayıracak:

#CCOPYRIGHT (genişlik: 1010px;
İkisini de temizle;

dolgu: 10px 20px 0px 20px;
sınır Üstü: İnce Noktalı # B1BEC6)

Bu kadar. Main.CSS Stilleri tablosunu kaydedin ve Web Gezgini'ndeki index.htm web sayfasını açın. Yazar burada bir resimde vermeyecek, çünkü oluşturduğumuz ince çerçeve neredeyse görünmez. Ancak bilgisayar ekranında çok etkileyici görünüyorlar.

Navigasyon grubuna bakalım. Anlamsız köprüler CNAVBAR konteynerinin tepesinde sıkıldı, sadece onlara bakmak üzücü! .. onları sola doğru hareket ettirelim, biraz "yayıldı", bir girinti yaratıyor ve aynı zamanda her birinin her birini sonlandırıyoruz. içinde çerçevelemek.

Hatırladığımız gibi, navigasyon çubuğumuz bir listedir ve bireysel köprüler bu listenin noktalarıdır.

İşte gerekli değişiklikler:

Köprü grubunu sallayan bir liste, 30 piksel ile sola doğru hareket eder. Bu yüzden soldaki işaretçilerin çıkarılmasından sonra oluşan boş alanı ortadan kaldırıyoruz, bu da çirkin görünüyor.

Listenin noktalarından dış girintiler yukarıdan ve alttan - 10 piksel. Böylece köprüleri birbirinden ayıracağız.

Liste noktası çerçevesi - ince, katı, renk # B1BEC6.

Liste noktalarının iç girintileri: Yukarıdan ve alttan - 5 piksel, sol ve sağ - 10 piksel. Bu yüzden eşyaların metnini ayıracağız Çerçeveler.

Yalnızca Main.CSS stillerinin CSS kodunu (11.4) düzeltmek için buna göre kalır.

Onları daha ayrıntılı olarak düşünün.

Navigasyon bandını oluşturan liste etiketine bağlı olarak, Navar stili, -30 pikseline eşit bir girintiye ekledik. Bu sayede, liste sola kayar, boş alanı doldurur:

#Navbar (font ailesi: Arial, Sans-serif;
yazı tipi boyutu: 14pt;

metin dönüşümü: büyük harf;
liste tarzı tür: Yok;
marj-sol: -30px)

Yeni oluşturulan kombinasyon stili, bir navigasyon grubunun listesinin bir listesini oluşturacaktır. Çerçevelemek ve uygun girintileri ayarlayın:

#Navbar li (dolgu: 5px 10px;
marj: 10px 0px;
sınır: ince katı # B1BEC6)

Sabit stil sayfasını kaydedin ve tuşuna basarak index.htm Web tarayıcısını güncelleyin . Çok daha iyi hale geldi, değil mi (Şek. 11.1)?

Emlak CSS. – « sınır."Eleman etrafındaki çevresindeki kalınlığı, rengi ve çizginin türünü ayarlamanızı sağlar. Bu özelliğin parametreleri, bir satırda, boşluktan ve herhangi bir sırayla ayrılabilir.

- Hat kalınlığı bir piksel
- düz çizgi
- Beyaz renk
- siyah renk
- Gri renk

Katı eleman sınırı

Grev elemanı

Elemanın noktalı sınırı

Çift Hat Elemanı Sınırı

Bireysel sınır alanlarının mülkiyeti

Hacimde kavisli oluklu çerçeve

CONVEX Oluklu Çerçeve Hacimde

Volumetrik depresif çerçeve

Volumetrik dışbükey kesir

Dersler / CSS /

Ders 7. CSS elemanı çerçevesi

Hemen hemen her site, elemanın etrafında bir çerçeve oluşturan bir mülk kullanır. Düğmeler için ya da metin içeren bloklar için gereklidir. CSS'deki bir öğeden bir çerçeve oluşturmak için iki özellik vardır: Sınır ve Anahat. Onları düşünün.

sınır.

Bu mülkün çerçeveyi elemanın etrafındaki ayarlamaları gerekir, Web belgesindeki sınırını belirtir, eleman bulunduğu zaman çerçeve genişliği dikkate alınır. 3 değeri var - renk, kalınlık ve çerçeve tipidir.

Sınır özelliğinin sözdizimi aşağıdaki gibidir:

sınır: genişlik tipi renk;
Mülkiyet değerlerini belirten başka bir emir seçebilirsiniz, ancak en önemlisi boşluktan.

Çerçevenin kalınlığı (genişliği) piksel (PX) veya yüzde (%) içinde belirtilmelidir.
Renk, RGB formatında (kırmızı yeşil mavi) veya HTML Hex kodunda ayarlanabilir.

Aşağıda temsil edilir Çizgiler Türleri İsimleri ile:

Çerçeveleri öğeden nasıl ayarlanır? Aşağıdaki gibi yapıyoruz:

#block (
Sınır: 3px katı # 0085ss; / * Kurulu satır 3 piksel piksel kalın * /
}

Bir veya iki veya üç yüklemek istiyorsanız belirli bir taraftan çerçevelerBöyle bir şekilde belirtirim:

sınır üst. - Yukarıdan gelen çerçeve;
kenarlık alt. - Aşağıdan çerçeve;
sınır kaldı. - Soldaki çerçeve;
sınırsız - Sağdaki çerçeve;

Blok (
Sınır sağ: 3px katı # 0085cc;
Sınır Tipi: 2px Kesik # 0085CC;
}

Eğer istersen Çerçeveleri Kaldır CSS'deki eleman, sonra sınır özelliğinde emmek - Yok

Boş (
Sınır: Yok; / * Boş sınıftaki öğe bir çerçeve olmayacak * /
}

anahat

Anahat, öğenin harici bir çerçevesini takmak için kurulması gereken bir özelliktir.

var sınırdan iki fark:
İlk olarak, taslakta belirtilen satır, bloğun kendisinin yerini, genişliği ve yüksekliğini etkilemeyecektir.
İkincisi, çerçeveyi belirli bir taraftan yükleme yeteneği yoktur.
Sözdizimi sınırla aynıdır.

anahat: 2px noktalı # 0085cc; / * Çerçeve 2 piksel noktalı çizgi * /
Anahat için, sınır için olduğu gibi, hiçbiri konuşarak çerçeveleri kaldırabilirsiniz:

Dikkatiniz için teşekkürler!

önceki makale
Ders 6.

Öğenin sınırları.

CSS'deki girintiler ve alanlar. Marj ve dolgu nedir? Sonraki makale
Ders 8. Metnin rengini ve CSS'de öğenin arka planı nasıl ayarlanır?

Makale hakkında yorumlar (vk.com)

sınır.

Destek tarayıcıları

12.0+

4.0+

1.0+

3.5+

1.0+

Açıklama

CSS özelliği, blok sınırının genişliğini, stilini ve rengi eşzamanlı olarak ayarlamanızı sağlar. Bloğun sınırı, bloğu her taraftan çevreleyen her zamanki çizgi / çerçevedir. Bir çerçeve eklendiğinde, bloğun genel boyutunu etkileyeceği akılda tutulmalıdır.

Değerler bir boşlukla ayrılır ve herhangi bir sırada izleyebilir, tarayıcının kendisinin istenen parametreye karşılık geldiğini belirler. Her üç değerin de mutlaka olmadığı, genişlik ve / veya renk ihmal edilebilir, bu durumda, cevapsız değer yerine, varsayılan özellik için ayarlanan değer kullanılacaktır, yani. Genişlik belirtilmezse, varsayılan özellik kullanılacaktır. Sözdiziminin altında bulunan tabloda, özelliklerin hangi değerleri kullanılabilir.

NOT: Çerçeveleri yalnızca öğenin belirli taraflarına ayarlamak için aşağıdaki özellikleri kullanın: Border-Top, Sınır alt, kenarlık-sol, kenarlık-sağ.

İpucu: Kural olarak, çerçeveyi kullanırken, iç girintileri eklemeniz gerekir.

CSS özelliği: sınır

Blok çerçevesi ile içeriği arasında boş boşluk eklerler: metin, resim veya çocuk etiketleri. Tipik olarak, kenarlık, öğenin içeriğine yakın görüntülenir, yalnızca çerçeveyi resmin etrafına ayarlamanız gerekirse kullanışlıdır.

Sözdizimi

sınır: Sınır genişliği sınır tarzı sınır rengi | devralma;

Mülk değerleri

Misal

İşte bazı metinler içerir.

Tarayıcı penceresindeki bu örneğin sonucu:

Kutularda renk, stil ve kenarlık boyutu nasıl ayarlanır?

İşaretleme dillerinde sınır ( sınır.), Yalnızca masa, resimler ve çerçeveler var, bazı durumlarda sınırın rengini ve hepsini ayarlamak mümkündür.

Öznitelik sınırı

Cascade tarzı sayfalar bize daha fazla fırsat kazandırır, ancak her şey hakkında.

CSS'de, çerçevenin genişliğini (sınır) yardımı ile kontrol edebiliriz. sınır genişliği.Ve eğer daha doğrususa, her bir tarafın kalınlığını ayrı ayrı kontrol edebiliriz:
sınır üst genişliği - üst kaldırımın kalınlığı
sınır sağ genişliği - sağ sınırın kalınlığı
sınır alt genişliği - alt sınırın kalınlığı
sınır-sol genişlik - Sol sınırın kalınlığı
Ancak kısaltılmış bir form olabilir:
P (sınır genişliği: sağ üst alt sol;) (Sağ üst solda kalan).
Sınırın genişliği ayarlanabilir:
sayılar DIV (sınır genişliği: 5px), sıfırdan sonsuzluğa, yani. Pozitif.
İnce. - İnce Sınır, DIV (Sınır Genişliği: İnce)
orta. - Orta Bordu, DIV (Sınır Genişliği: Orta)
kalın. - Yağ Borduur, DIV (Sınır Genişliği: Kalın)
Sayılarla açık, ancak bu değerlerle hepsi tarayıcıya bağlıdır, ancak yine de İnce.<= medium <= thick .

Böylece, sınırın rengini yardım ile kontrol edebiliriz. sınır rengi Veya, eğer her tarafta daha doğru renk varsa:
sınır üst rengi üst kaldırımın rengi;
sınır sağ renk Sağ sınırın rengi;
sınır-alt renk alt sınırın rengi;
sınır sol renk Sol tarafta bordür rengi.
Renk değeri için ayarlandı renk. 16 renkten biri: aqua, siyah, mavi, fuşya, gri, yeşil, kireç, bordo, donanma, zeytin, mor, kırmızı, gümüş, teal, beyaz veya sarıAyrıca, renkler ayarlanabilir: renk: # 000000, renk: # AF0 , renk: RGB (255,0,0) veya renk: RGB (% 100, 0, 0% 0).
Hangi renk şemasını seçtiğinize bağlı olarak, tarayıcılar hala içine çevrilecektir. renk: RGB (255,0,0). Örneğin renk: Kireç. = renk: # 00ff00 = renk: # 0F0 = renk: RGB (% 0,% 100,% 0)ve tarayıcı hala renk: RGB (0.255.0). Bu değeri hesaplayacaktır.

Kenarlığın kalınlığı ve rengi kontrol edilebilirse ve html sonra stil ( sınır tarzı.) Sadece CSS !!!
Stil ayrı ayrı her biri tarafından kontrol edilebilir:
sınır üst tarzı Üst sınır tarzı;
sınır sağ tarzı Sağ kenarlık tarzı;
sınır taban tarzı alt sınırın tarzı;
sınır sol tarzı Sol taraftaki Bordera tarzı.
Şimdi stiliyet değerlerini göz önünde bulundurun:
1)sınır tarzı: Yok - Bu, Sınır genişliğine benzer varsayılan değerdir: 0.
2)sınır tarzı: Gizli - Aynı, daha sonra bakacağımız tablolar (tablo) hariç.
3)sınır tarzı: Noktalı - Noktalardan Bordeur.
4)sınır tarzı: kesikli - Kesik çizgisinden sınır.
5)sınır tarzı: katı - sağlam bir çizgiden sınır, yani. HTML'de olduğu gibi.
6)sınır tarzı: çift - Bir çift katı çizginden kenarlık, burada en az 3 piksellik bir kalınlığa (sınır genişliği) gerekir.
7)sınır tarzı: oluk - Sınır tuvalde oyulmuş gibi görünüyor.
8)sınır tarzı: sırt - Sınır, Cana üzerinden çıkıntılı gibi görünüyor.
9)sınır tarzı: iç - Bütün kutu tuvalde doğranmış gibi görünüyor.
10)sınır tarzı: Başlangıç - öncekinin tam tersi.
Bazı tarayıcılar değerleri görmezden gelebilir: noktalı, kesik, çift, oluk, sırt, iç ve başlangıç \u200b\u200bve bunları katı olarak görüntüler, yani Sıradan bir sınır.

Tabii ki bu öyle, ancak yukarıdaki tüm örnekler sadece operasyon ilkesidir ve bir mekanizma değildir.
Mülk kuralları sınır. ima eder (sınır: boyut rengi boyutu;), bu kural, her üç değerin varlığında ve yalnızca böyle bir sırayla gerçekleştirilir, örneğin H1 (sınır: 5px çift kırmızı;)Ancak, bu değerler İşaretleme dillerinde, örneğin bir tablo için verilirse istisnalar olabilir. Tablo (sınır: 2px). Sadece bir değer ayarlanır.

Tüm sınırı olmadığını yönetmek için ve her kısım ayrı ayrı kurallar var:
(Sınır üstü: Boyut renk boyutu;) Üst sınır yönetimi;
(Sınır sağ: Boyut renk boyutu;) Sağdaki sınır kontrolü;
(Sınır alt: boyut tarzı renk;) Alt sınır yönetimi;
(Sold-sol: Boyut renk boyutu;) Soldaki tahta kontrolü.
Bu kurallar ayrı ve hep birlikte kullanılabilir.

Bir istisna bu kuraldır:
H1 (
Sınır: 4px katı yeşil;
}
Mesele şu ki, CSS'de son kuralın en yüksek önceliğe sahip olduğu, bu davada, sınır özelliği sınırını içeriyor ve bu nedenle sınır sol kuralı göz ardı edilecek, şöyle:
H1 (
Sınır: 4px katı yeşil;
Sold-sol: 2px çift kırmızı;
}
Baştan beri, tüm kenarlığın kurallarını ve ardından Delometrik sitelerden daha sonra ayarlarız.

Tablolara ve diğer istisnalara ulaştığınızda bazı özellikler dışında, öğeler için sınırlardaki her şeye sahibim.

CSS: Sınır. Öğenin sınırları.

CSS3 Sınırları

CSS3'ü kullanarak, yuvarlak kenarlıklar oluşturabilir, konteynerlere gölge ekleyebilir ve resmi bir sınır olarak kullanabilirsiniz - Photoshop gibi tasarımcı programı kullanılmadan.

Bu derste aşağıdaki sınır özelliklerini öğreneceksiniz:

sınır yarıçapı.
kutu gölge
sınır görüntü.

Destek tarayıcıları

Emlak	Destek tarayıcıları
sınır yarıçapı.
kutu gölge
sınır görüntü.

Internet Explorer 9, bazı yeni sınır özelliklerini destekler.

Firefox, sınır görüntüsü için önek gerektirir.

Chrome ve Safari, sınır-görüntü için -Webkit konsollarını gerektirir.

Opera, sınır görüntüsü için önek gerektirir.

Safari ayrıca -webkit - kutu-gölge için önek gerektirir.

Opera, yeni sınır özelliklerini destekler.

CSS3 yuvarlatılmış köşeleri

CSS2'ye yuvarlanmış köşeleri eklemek kurnazdı. Her köşe için farklı görüntüler kullanmak zorunda kaldık.

CSS3'te, yuvarlatılmış köşelerin oluşturulması basittir.

CSS3'te, sınır yarıçapı özelliği yuvarlatılmış köşeler oluşturmak için kullanılır:

Bu birim köşeleri yuvarlattı!

CSS3 Gölge Kabı

CSS3'te, Box-Shadow özelliği, kaplara bir gölge eklemek için kullanılır:

CSS3 sınır görüntüsü

CSS3 tarafından, kenarlık-resim özelliği bir sınır oluşturmak için resmi kullanabilirsiniz:

Sınır görüntü özelliği, sınır görüntüsünü belirlemenizi sağlar!

Sınırı oluşturmak için kullanılan orijinal görüntü:

Yeni sınır özellikleri

Öznitelik sınırı

Öznitelik sınırı, Taga

, Tablonun etrafındaki çerçevenin kalınlığını belirtmek için kullanılır.

HTML sınırları.

Ödülsüz kenarlık kullanmanız yeterlidir, daha sonra çerçeve kalınlığı bir piksele eşit olacaktır. Varsayılan olarak, çerçeve üç boyutlu efektlerle birlikte görüntülenir, ancak arka plan özniteliğini ek olarak uygularsanız, çerçeve "düz" hale gelecektir.

Ek olarak, Sınır özniteliği sıfır olmayan bir değeri varsa, tarayıcılar hücrelerin etrafındaki ince sınırlar göstermektedir. Bu sınırların ekranı, kural niteliği kullanılarak kontrol edilebilir.

Değerler

Öznitelik değeri, piksellerde olumsuz olmayan herhangi bir sayıda belirleyici boyutta olabilir.

Varsayılan değer: 0.

Sözdizimi

Zorunlu nitelik: Hayır.

HTML Örnek: Sınır özniteliğini uygulayın

Örnek sonucu

Sonuç. Sınır özniteliğini uygulayın.