Sitenin en önemli unsurlarından bazılarını vurgulamak için, bunun için sağlanan her türlü CSS stilini ve özelliğini kullanmaktan zarar gelmez. Tabii ki, metinle çok fazla uğraşamaz ve örneğin kalın veya italik olarak vurgulayamaz, arka planı değiştirebilir veya metnin çevresini çerçeveleyemezsiniz. Ancak her zaman sunulan yöntemlerden biri uygun değildir. Diyelim ki anlamsal yükünün özellikleri nedeniyle ayrılması gereken bir metniniz var. HTML ve CSS özelliklerinin devreye girdiği yer burasıdır.
Hedefimize ulaşmak için, dönmemiz gerekiyor. style.css dosyası, içine ilgili özelliği yazarak sınır. Bu, metnin üstünde, altında veya belirli bir tarafında bir satır görünmesine neden olur. Sırayla, satırı görüntülemekten sorumlu birkaç özellik vardır, yani:
- sınır üstü- metnin üzerinde bulunan yatay bir çizgi;
- sınır-sağ- metnin sağında bulunan dikey bir çizgi;
- sınır-alt- metnin altında bulunan yatay bir çizgi;
- sınır-sol soldaki dikey çizgidir.
CSS özelliklerini kullanarak, HTML kodunu düzenleyerek gerekli tüm değerleri ayarlayabilirsiniz. Bunu yapmak için sitenin idari bölümüne gidin. Yayınlanan materyallerden birini seçin, geçiş yapın Metin düzeltici HTML kodu düzenleme moduna geçin ve CSS özelliklerini ekleyin. Aşağıda bir örnek görülebilir.
Komutların kısa açıklaması
- Genişlik– çizgi uzunluğu;
- sağlam- düz çizgi;
- noktalı- noktalı çizgi.
Stilleri daha derinden anlamak için bunu okumanızı tavsiye ederim.
Site kodunda değişiklik yapma sürecinde çizginin türünü, kalınlığını ve rengini belirleyen özelliklerin bir boşlukla listelendiğini anlamanız gerekir.
Hemen hemen her çizgiyi oluşturabileceğiniz geniş bir olasılık yelpazesi.
Gerekli tüm değişiklikleri doğrudan HTML kodunda yapma kolaylığı. Bu, deneyimsiz site oluşturucuların işini büyük ölçüde basitleştirir.
Dikkatinizi çekmek istediğim ilk şey, html'nin tüm inceliklerine ve ilkelerine rağmen bu etiketin bir kapanış etiketi olmamasıdır. Html kodunun herhangi bir yerinde, etiketler arasında kullanılabilir.
ve- Genişlik- hattın uzunluğundan sorumludur. Hem yüzde hem de piksel olarak belirtilebilir.
- boyut- Hat kalınlığı. Piksel cinsinden belirtilir.
- renk– çizginin rengini tanımlar.
- hizalamak– hat hizalamadan sorumlu nitelik. Buna karşılık, ekip ona başvurur.
Görüntüler, basit fiziksel durumlarda doğrudan dönüşüm (18) uygulanarak elde edilebilecek birkaç ilginç özelliğe sahiptir. Mevcut amacımız için, (18) formülünün tam genelliğine ihtiyacımız yok; göstermek istediğimiz etki, bir eğim açısı dışında kamera konumunu karakterize eden tüm parametreler sıfıra eşit olduğunda bile gösterilebilir. Buna göre (18) ifadesini alıp daha basit hale getireceğiz:
Dikey bir çizginin görüntüsünün özelliklerini araştırıyoruz. Bir nesnenin dikey çizgisi, nesnenin noktası tarafından çizilir
çizginin zemin düzlemini kestiği noktanın koordinatları nerede ve z, değeri tüm gerçek sayılar arasında alınan serbest bir parametredir. v'yi formül (27)'de değiştirir ve serbest parametre z'yi iki denklemden çıkarırsak, görüntü düzleminde düz bir çizgi denklemini elde ederiz.
Bu basit denklemin bir analizi, bir dizi ilginç gözlem sağlar. En önemlisi, Z ekseni ile kesişme noktası dikey çizginin konumundan bağımsızdır; sadece çizginin gerçekten dikey olup olmadığına bağlıdır. Böylece, belirli bir kamera geometrisi için, tüm dikey çizgilerin görüntüleri, görüntüdeki koordinatları eşit olan dikey shofe'nin bir noktasından geçer.
Pirinç. 10.4. Kaybolan noktalar.
Pirinç. Şekil 10.4, bu etkiyi, aşağı doğru çok eğimli bir kamera ile alınan tek bir küboid görüntüsünde göstermektedir.Okuyucu, Denklem (28)'in sezgiyle uyumlu olan diğer özelliklerini kontrol edebilir. Örneğin, sıfırdan 90°'ye yükseltilirse, dikey ufuk noktası görüntü düzleminin merkezine hareket eder ve çizginin eğimi daha düz hale gelir. Benzer şekilde, herhangi bir kamera açısı için, öznenin dikey çizgileri görüş alanının çevresine doğru hareket ettikçe (örn.
) ile karşılaştırıldığında büyük olur. Bu nedenle, dikey kaybolma noktası sadece kamera parametrelerinden belirlenebilir ve dikey çizgilerin görüntülerine basit bir gerekli koşul empoze eder.
10.5.4. YATAY ÇİZGİLER VE UÇUŞ NOKTALARI
Perspektif dönüşümlerinin kullanımına son bir örnek olarak, yatay bir çizgi görüntüsünün bazı özelliklerini inceleyelim. Basit olması için, global koordinat sisteminin taban düzleminde uzanan bir nesne çizgisinin görüntüsünü ele alacağız. Böyle bir çizgi üzerinde yatan nesnenin herhangi bir noktası nerede ve b - sırasıyla, çizginin eğimi ve bu çizgi tarafından Y koordinat ekseninde kesilen segmentin uzunluğu. Bulunan bir nesnenin görüntüsünü yakalamak istediğimizden yerde, kameranın zeminden yukarı kaldırılması ve aşağıyı göstermesi daha iyidir. Buna uygun olarak, kameranın geometrik parametrelerini formda alacağız ve değerin pozitif ve - negatif olmasına izin vereceğiz. Bu parametreler için doğrudan dönüşüm (18) aşağıdaki gibi basitleştirilmiştir:
Formülleri (29) değiştirdikten ve serbest parametre x'i iki denklemden çıkardıktan sonra, görüntü düzleminde düz bir çizginin denklemini elde ederiz.
Bu grafik çizgisinin eğiminin veya koordinat eksenleriyle kesiştiği noktaların özellikle basit özellikleri yoktur; bununla birlikte, bu görüntü çizgisinin bu görüntünün ufuk çizgisiyle kesişimini düşünün. Herhangi bir görüntünün ufuk çizgisi, görüntü düzleminin zemine paralel olan merceğin merkezinden geçen bir düzlemle kesişimi olarak tanımlanır. Şekil 2'nin yandan görünümünde gösterildiği gibi. 10.5, ufuk çizgisinin denklemi (görüntü koordinatlarında) forma sahiptir Açıkça, görüntü çizgisinin (30) ufuk çizgisiyle kesişme noktasının X koordinatı, ifadenin (30) - değeriyle eşitlenmesiyle belirlenir. Ortaya çıkan denklemi çözme
Ufukla kesişme noktasının koordinatına göre, şunu buluruz:
Bu sonuç, (29) ifadesinin birinci denklemde yerine konması ve x sonsuza giderken limite geçilmesiyle de elde edilebilir. Bu nedenle, ufukla kesişme noktasına, haklı olarak, belirli bir çizginin görüntüsünün ufku ile yatay ufuk noktası veya ufuk noktası denir; bu, nesnenin noktası düz bir çizgi boyunca sonsuza doğru hareket ederken görüntünün noktasının yöneldiği sınırdır.
Pirinç. 10.5. Ufuk çizgisinin hesaplanmasına.
İfade ile ilgili bir takım ilginç açıklamalar yapabiliriz (31). İlk olarak, kaybolma noktasının, nesnenin çizgisini içeren düzlemin üzerindeki kameranın yüksekliğine bağlı olmadığına dikkat edin. İkinci olarak, ufuk noktası, nesne çizgisi denklemindeki transfer parametresi b'ye bağlı değildir. Bu nedenle, zemin düzlemine paralel olan herhangi iki doğrunun, ancak ve ancak birbirine paralel olduklarında aynı kaybolma noktasına sahip olduğu önemli bir sonuca varabiliriz. Son olarak, zemine paralel bir düzlemde uzanan iki dik nesne çizgimiz olduğunu varsayalım. Eğimleri ve ufukla olan ufuk noktalarının koordinatları olsun; ve bu çizgiler ortogonal olduğundan, . Bu nedenle, doğrudan formül (31)'den elde ederiz
İki kaybolma noktası bazen eşlenik kaybolma noktaları olarak adlandırılır.Ürünleri negatif olduğundan, Şekil 2'de gösterildiği gibi her zaman görüntünün merkez çizgisinin zıt taraflarında bulunurlar. 10.4. Eşlenik ufuk noktaları, belirli bir nesne kısıtlamasının (yani diklik) nasıl basit bir görüntü kısıtlamasına dönüştürülebileceğinin bir örneğidir.
Metnin bir paragrafının yanına dikey bir çizgi ekleyin.
Okuyucunun dikkatini metne farklı şekillerde çekebilirsiniz. Örneğin, metni kalın yapın, rengini değiştirin, bir arka plan kullanın, bir çerçeve çizin. Peki ya sadece metni vurgulamak değil, aynı zamanda bir metin bloğunu diğerinden ayırmak, onları farklı anlamsal parçalara bölmek gerekirse? Çizgi ve dolgu kullanımının paha biçilmez olduğu yer burasıdır.
Bir web sayfasındaki metin bloğu, basılı muadilinden çok farklıdır. Ana fark, monitör çözünürlüğüne, ayarlara bağlı olarak metnin değişken genişliği ve yüksekliğidir. işletim sistemi, tarayıcı ve diğer benzer şeyler. Bu özellikler, web sayfalarının düzenine belirli bir karmaşıklık verir, ancak aynı zamanda bir site oluşturma sürecini büyük ölçüde basitleştiren belirli tekniklerin ortaya çıkmasına neden olur. Boyutundan bağımsız olarak, metnin etrafında özel bir çizgi oluşturmak için stillerin nasıl kullanılabileceğine bakalım.
Çizgiler oluşturmak için, bloğun çevresine bir sınır ayarlayan - border CSS özelliğini kullanın. Özel durumlarda, bir elemanın sadece bir tarafında bir çizgi oluşturmak için border-bottom , border-top , border-left ve border-right özellikleri kullanılır, çizgiyi sırasıyla alt, üst, sol ve sağ olarak ayarlarlar. .
Bu özelliklerin değerleri bir boşlukla ayrılmış olarak listelenir ve hemen çizgi tipini, kalınlığını ve rengini ayarlar. Çizgi stili, Şekil 2'de gösterildiği gibi sekiz değerden birini alabilir. 1 ve kalınlık kural olarak piksel cinsinden belirtilir.
Pirinç. 1. Hat türleri
Örnek 1, metnin yanında dikey bir çizginin oluşturulmasını gösterir.
Örnek 1: Metnin solundaki dikey çizgi
HTML5 CSS 2.1 IE Cr Op Sa Fx
Gestalt psikolojisine ve psikanalize yakın konumlardan, toplumun enformel mikro yapısını yansıtan küçük bir gruptaki süreçleri inceleyen J. Moreno, dürtüselliğin öznel ve nesnel olanı karıştırdığı için stres verdiğini, içsel dürtülerini topluma aktardığını gösterdi. şeylerin gerçek bağlantıları.
Paragrafın orijinal stilini değiştirmeden bırakmak için, paragrafın yanına dikey bir çizgi ayarlayan yeni bir sınıf çizgisi tanıtıldı. Bu sınıf ayrıca, margin-left özelliğini kullanarak pencerenin sol kenarından metne 20 piksellik ofseti ve padding-left aracılığıyla satırdan metne girintiyi ayarlar, bu olmadan metin çok sıkı çizgi. Sonuç, Şek. 2.
Merhaba, eğitim sitemin sadık aboneleri ve blog misafirleri. Html'deki dikey bir çizginin bazı bilgileri ayırdığı web kaynak sayfalarında hiç fark ettiniz mi? Dolayısıyla bu, okuyucunun dikkatini doğru içeriğe çekmenin çok basit ama etkili bir yoludur.
Bu nedenle, bu yayını dikey çizgiler ayarlamak için araçlar ve etiketler çalışmasına adamak ve ayrıca bu tekniği başka nerede kullanabileceğinizi söylemek istiyorum. Ve şimdi başlayalım!
Geliştiriciler ve web tasarımcıları, kullanışlı ve sezgisel bir kullanıcı arayüzüne sahip olacak benzersiz bir site oluşturmaya çalışıyor. Bütün bunlar, çeşitli araçlar ve yaklaşımlar ve css stil sayfaları kullanılarak elde edilir.
Çoğu zaman, sayfaların metin içeriğine aksanlar yerleştirilir. Bunun için kullanılır:
Son noktaya bakalım.
Çerçeve- Bu, belirli nesneleri yığından ayırmak, web içeriğini vurgulamak ve basitçe süslemek için yaygın bir mekanizmadır. Özellik kullanılarak oluşturulurlar sınır.
Css dilinin bu öğesi çok esnektir ve seçilen nesnenin hem her tarafında hem de yalnızca bir tarafında bir çerçeve ayarlayabilir. Önemli özellikleri tabloya girdim.
Yukarıdaki özelliklerin tümü, çizgi kalınlığını, rengini ve sunum stilini kontrol edebilir.
Sınırların sadece düz çizgiler olarak görünmeyebileceğini belirtmek isterim. Ayrıca görünebilirler:
Bazen şöyle sorularla karşılaşıyorum: "Sınır bir resim olarak gösterilebilir mi ve nasıl yapılır?". Cevap, yapabilirsin. Ve bu çok basit bir şekilde yapılır.
Bunu yapmak için css yaratıcıları bir öğe sağladı sınır-görüntü, görüntünün yolunu belirtmeniz ve sınırın her bir tarafının kalınlığını tanımlamanız gerekir.
Bence teoriyi pratiğe dökmenin zamanı geldi. Göreviniz bir metin tuvali yazmak ve önemli noktaları veya alıntıları dikey çizgilerle ayırmaktır. Örnek kod aşağıda gösterilmiştir:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Bu metin parçası çok önemlidir.
|
İlk paragrafta sol çift mor çizgi ile metnin kilit noktasını vurguluyoruz.
İkinci paragrafta, metnin kilit noktasını, soldaki dikey bir çizgi ile resim şeklinde vurguluyoruz.
Kendiniz de görebileceğiniz gibi, malzeme çok hafiftir, ancak çok çeşitli görevleri çözmek için yararlı olabilir. Bu konuda sana veda ediyorum. Abone olmayı ve arkadaşlarını arkadaş canlısı ekibimize davet etmeyi unutmayın. Güle güle!
Saygılarımla, Roman Chueshov
Tüm okuyuculara selamlar. Zaman zaman, ustalar HTML kullanarak veya HTML kullanarak yatay veya dikey bir çizginin nasıl oluşturulacağı sorunuyla karşı karşıya kalırlar. CSS kullanarak. Bugün size anlatacağım şey bu.
Çizgi yapmanın birkaç yolu vardır. Böyle bir yol CSS kullanmaktır. Daha doğrusu, Border yardımıyla. Bir örneğe bakalım.
Ve işte sonuç.
CSS ile yatay ve dikey çizgi.
CSS'deki çizgiler, Border operatörü kullanılarak çizilebilir. Yalnızca sabit bir kenar genişliğine sahip bir dikdörtgen istiyorsanız, bu operatörü kullanabilir ve ona bir değer verebilirsiniz. Örneğin kenarlık:5px katı #000000; kutu kenarlıklarının siyah olarak 5 piksel genişliğinde olduğu anlamına gelir.
Ancak, tüm sınırları değil, yalnızca bazılarını belirlemeniz gerekiyorsa, o zaman tam olarak hangi sınırların gerekli olduğunu ve her birinin hangi değere sahip olacağını belirtmeniz gerekir. Bunlar operatörlerdir:
HTML'nin kendisinde de satırlar oluşturabilirsiniz. Bunu yapmak için hr etiketini kullanabilirsiniz.
Bu durumda, bir piksel yüksekliğinde ve tam genişlikte yatay bir çizgi çizilecektir.
Ancak bu etiket, bazı değerleri ayarlayabilirsiniz.
hr etiketini kullanarak dikey bir çizgi de ayarlayabilirsiniz. Ancak bu durumda tekrar stillere başvurmanız gerekecek.
Bu durumda, yüz piksel yüksekliğinde, bir piksel kalınlığında ve beş piksel girintili dikey bir çizgi çizilecektir.
Artık dikey ve yatay bir çizgiyi nasıl ayarlayabileceğinizi biliyorsunuz. Çizgiler hem HTML kullanan normal sitelerde hem de WordPress gibi CMS kullanan bir sitede ayarlanabilir, ancak bu durumda HTML moduna geçmeniz gerekecektir.
Peki, başka sorunuz varsa, yorumlarda onlara sorun.
