Temel olarak, sitenin HTML sayfalarını süslemek için yatay çizgiler kullanılır ve onlara daha çekici bir görünüm verilir. Ancak aynı zamanda komşu bölümlerin bilgilerini görsel olarak sınırlayabilirler ve okuyucular üzerinde çalışırken kolaylık sağlarlar. Genel olarak, ihtiyacınız olan yere yatay çizgiler çizin, hepsi bu.
Yatay çizgi nasıl çizilir?
HTML'de yatay çizgiler çizmek için özel bir etiket vardır.
... Üstelik, o blok etiketi yani kendisinden önce ve sonra satır sonları oluşturur, böylece satır her zaman ayrı bir satırda elde edilir. Buna göre, yalnızca blok öğeleri içerebilen etiketlerin içinde belirtilebilir, örneğin veya
... Ama kendim
içeriğe sahip olamaz, çünkü yalnızca bir bitiş etiketi yoktur, yani boştur.HTML'de yatay çizgiler çizmeye bir örnek
Yatay çizgiler çizin
Paragraf.
Paragraf.
Paragraf.
Tarayıcıda sonuç
Paragraf.
Paragraf.
Paragraf.
Gördüğünüz gibi, çizgiler çok ince, sıradan değil ve mevcut tüm genişlikte çizilmiş, bu yüzden şimdi onları daha çekici görünmeleri için nasıl değiştireceğimizi öğreneceğiz.
Yatay çizgilerin rengini, kalınlığını ve genişliğini nasıl değiştiririm?
HTML'nin eski sürümlerinde, etiket
Vardı özel nitelikler, yardımıyla yatay çizgilerin rengini, kalınlığını ve genişliğini değiştirmek mümkün oldu. Bunlar sırasıyla renk, boyut ve genişliktir. Ancak daha yeni sürümlerde, Basamaklı Stil Sayfaları (CSS) lehine çıkarıldılar, bu yüzden tahmin ettiniz, yine favori stil özniteliğimizi kullanacağız. Genel sözdizimi şöyledir:
stil = "arka plan: renk">- çizgi rengi (veya daha doğrusu arka planı).
stil = "yükseklik: boyut">- Hat kalınlığı.
stil = "genişlik: boyut">- hat genişliği.
stil = "arka plan: renk; yükseklik: boyut; genişlik: boyut"> - ancak tüm parametreleri bir kerede belirtebilirsiniz, noktalı virgülü (;) unutmayın.Bir renk, İngilizce adıyla veya bir kare (#) ile başlayan rengin HEX koduyla belirtilebilir. Bunu dersten itibaren zaten biliyorsun. metnin ve arka planın rengini değiştirme.
Ancak yeniden boyutlandırma hakkında daha ayrıntılı konuşacağız. dan hatırlıyor musun yazı tiplerini değiştirme eğitimi, CSS'de yaklaşık on birim vardır, ancak hat genişliği yalnızca piksel (px) ve yüzde (%) olarak belirtilebilir ve kalınlık genellikle yalnızca piksel cinsindendir. Başka ölçü birimleri sağlarsanız, bu bir hata olmayacaktır, ancak tarayıcılar bunları görmezden gelecektir.
Boyutları piksel cinsinden belirtirseniz, çizginin kalınlığı ve genişliği sitenizin görüntülendiği monitörün çözünürlüğüne bağlı olacaktır (ekran çözünürlüğü ne kadar yüksekse, çizgi o kadar ince ve dardır).
Dediğim gibi sadece çizgi genişliği yüzde olarak belirtilebilir. Yüzde boyutları her zaman içinde etiketin bulunduğu ana kapsayıcı öğesinin boyutuna bağlıdır ve bu boyuta göre hesaplanır
... Bu durumda ebeveynin boyutu %100 olarak alınır. Örneğin, etiketi yerleştirirsek
stil = "genişlik: %50"> iç eleman, tarayıcı penceresini veya monitör çözünürlüğünü nasıl yeniden boyutlandırdığımız önemli değil - çizgi genişliği her zaman bloğun genişliğinin yarısı olacaktır.Yatay çizgilerin rengini, kalınlığını ve genişliğini değiştirmeye bir örnek.
Yatay çizgilerin rengini, kalınlığını ve genişliğini değiştirin.
Tarayıcıda sonuç
Yatay çizgilerin konumunu değiştirme
Yatay bir çizginin genişliğini değiştirdiğinizde, tarayıcıların onu her zaman merkeze yerleştirdiği açıkça görülür. Konumunu değiştirmek istiyorsanız, sadece içeride kullanın.
align niteliğini aşağıdaki değerlerle eşleştirin:
- merkez- çizgi ortalanır (varsayılan değer).
- sol- sol kenara bastırılır.
- sağ- sağ kenara bastırılmış.
Yatay çizgileri hizalamaya bir örnek.
Yatay çizgilerin konumunu değiştirin.
Tarayıcıda sonuç
Çizginin etrafındaki kenarlığı nasıl kaldırırım?
Bu öğreticinin ilk örneğine bir göz atın. Sizce bu çizgiler ne renk? Ve burada yanlış. Belirtilmemiş tüm sayfa öğeleri gibi şeffaftırlar. arka plan rengi! Bana inanmıyor musun? Ardından, çizgilerin rengini değiştirdiğimiz bir örneğe bakın. İlki için rengi belirlemedik, sadece boyutunu büyüttük ve bu çizgi şeffaf değil mi? Böylece!
Şimdi açıklayacağım. Varsayılan olarak, tarayıcılar çizgilerin etrafına üç boyutlu bir etki yaratan kenarlıklar çizer. Yani yatay çizgilerin kalınlığını artırmadığımızda, çizginin kendisinin kalınlığı 0px olduğu için tarayıcılar bize sadece bu kareleri gösteriyor.
Genellikle sadece bozulan çizginin etrafındaki sınırı kaldırmak için dış görünüş, stil niteliğini yeniden uygulayacağız. Ve şöyle yazılır:
Ödev.
- Makale, bölüm ve alt bölüm başlıkları oluşturun. Hepsini ortalayın.
- Başlıklar için tüm sayfayı Arial ve Courier olarak ayarlayın.
- Tüm sayfanın yazı tipi boyutunun varsayılan tarayıcı boyutunun %85'i olmasına izin verin. Başlıklar, sayfadaki yazı tipi boyutunun sırasıyla %145, %125 ve %110'una sahiptir.
- İlk başlığın altına bir paragraf, ikincinin altına uzun bir alıntı ve üçüncünün altına bir şiir yazın. Ve şiirin sayfada ortalanmasına izin verin.
- Alıntı yaptığınız üç kelimeyi kalın harflerle vurgulayın.
- Makalenin başlığının altına, sayfanın tüm genişliği boyunca üç piksellik kırmızı bir yatay çizgi çizin.
- Şiirin üstüne ve altına bir piksel siyah çizgiler çizin. Üst satırın genişliği yaklaşık olarak ayetin genişliğine eşit ve alt satırın yarısı kadar olsun.
- Gereksiz çerçeveleri satırlardan çıkarın.
Sitenin bazı özellikle önemli unsurları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şmanıza ve örneğin kalın veya italik olarak vurgulamanıza, arka planı değiştirmenize veya metnin çevresini çerçevelemenize gerek yok. 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.
CSS kullanarak metinde bir satır nasıl yapılır
Planımızı uygulamak için, style.css dosyası içine karşılık gelen özelliği yazarak sınır... Bu, metnin üstünde, altında veya belirli bir tarafında bir satır oluşturacaktır. Sırayla, satırı görüntülemekten sorumlu olan birkaç özellik vardır, yani:
- sınır üstü- metnin üzerinde yatay bir çizgi;
- sınır-sağ- metnin sağında bulunan dikey bir çizgi;
- sınır-alt- metnin altında yatay bir çizgi;
- sınır-sol- soldaki dikey çizgi.
html'de bir satır nasıl yapılır
kullanma CSS özellikleri HTML kodunu düzenleyerek gerekli tüm değerleri yazabilirsiniz. Bunu yapmak için sitenin idari bölümüne gitmeniz gerekir. Yayınlanan materyallerden birini seçin, geçiş yapın Metin düzeltici HTML kodu düzenleme moduna girin ve CSS özelliklerini ekleyin. Aşağıda bir örnek görülebilir.
Noktalı veya düz bir çizgiyi nasıl yapabilirim?
Bu özellikleri belirterek, sunulan materyalin, paragrafın veya başlığın önemini vurgulayabilecek misiniz?
Komutların kısa açıklaması
- Genişlik- çizgi uzunluğu;
- sağlam- düz çizgi;
- noktalı- noktalı çizgi.
Stilleri daha yakından tanımak için bunu okumanızı tavsiye ederim.
Site kodunda değişiklik yapma sürecinde çizgi tipini, kalınlığını ve rengini belirleyen özelliklerin bir boşlukla ayrılmış olarak listelendiğini anlamak gerekir.
Bu yöntemin birkaç avantajı vardır:
Hemen hemen her çizgiyi oluşturabileceğiniz çok çeşitli olanaklar.
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.
HTML etiketini kullanarak düz bir yatay çizgi nasıl yapılır
Dikkatinizi çekmek istediğim ilk şey, html'nin tüm inceliklerine ve ilkelerine rağmen bu etiketin bir kapanış etiketi olmamasıdır. Her yerde kullanılabilir HTML Kodu, etiketler arasında
ve.Etiket özellikleri
- Genişlik- hattın uzunluğundan sorumludur. Hem yüzde hem de piksel olarak belirtilebilir.
- boy- Hat kalınlığı. Piksel cinsinden belirtilir.
- renk- çizginin rengini tanımlar.
- hizalamak- hat hizalamadan sorumlu nitelik. Buna karşılık, ekip buna atıfta bulunur.
Görev
Sayfada yatay bir çizgi yapın.
Çözüm
Yatay çizgiler, bir metin bloğunu diğerinden ayırmak için iyidir. Üstte ve altta yatay çizgiler bulunan küçük metinler, okuyucuya normal metinden daha fazla dikkat çeker.
etiketi kullanma
görünümü kullanılan özelliklere ve tarayıcıya bağlı olan yatay bir çizgi çizebilirsiniz. Etiket, blok öğelerine atıfta bulunur, bu nedenle satır her zaman ile başlar Yeni hat, ve ondan sonra tüm öğeler bir sonraki satırda görüntülenir. Etiketin birçok özelliği sayesinde
bu etiket aracılığıyla oluşturulan satırın işlenmesi kolaydır. Stillerin gücüyle birleştiğinde, belgenize bir satır eklemek çocuk oyuncağı olur.Varsayılan satır
gri renkte ve ses efektiyle görüntülenir. Bu tür bir çizgi her zaman sitenin tasarımına uymaz, bu nedenle geliştiricilerin çizginin rengini ve diğer parametrelerini stiller yoluyla değiştirme arzusu anlaşılabilir. Ancak, tarayıcılar bu konuda belirsizdir, bu nedenle aynı anda birkaç stil özelliğini kullanmanız gerekecektir. Özellikle eski sürümler internet tarayıcısı Explorer, çizgi rengi için color özelliğini kullanır ve diğer tarayıcılar background-color özelliğini kullanır. Ancak hepsi bu kadar değil, bu durumda sıfır dışında bir çizgi kalınlığı (yükseklik özelliği) belirttiğinizden ve border özelliğini yok olarak ayarlayarak çizginin etrafındaki kenarlığı kaldırdığınızdan emin olun. Saat seçici için tüm özellikleri bir araya getirerek popüler tarayıcılar için evrensel bir çözüm elde ederiz (örnek 1).Örnek 1. Yatay çizgi
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yatay çizgi rengi
Metin dizesi
Sonuç bu örnekŞek. 1.
Pirinç. 1. Renkli yatay çizgi
Herkese merhaba! Bugün sana nasıl yapılacağını anlatacağım html kullanarak yatay bir çizgi yapın.
Aslında, örneğin metnin bir bölümünü diğerinden ayırmanız gerektiğinde, yatay bir çizgi oluşturma ihtiyacı oldukça sık ortaya çıkar.
css ile yatay ve dikey çizgiler
Bu ile yapılabilir css kullanarak... Bunu yapmak için, div etiketini kullanarak metnin gerekli alanını bir bloğa ekliyorum ve ardından style.css dosyasında veya doğrudan html kodunda, border kullanarak üst veya alt kenarlık için bu bloğa ait özellikleri yazıyoruz. -üst ve sınır-alt. İşte bir örnek:
Dikey HTML satırı css kullanarak yatay çizgi.Bu durumda, stili doğrudan html kodundan css kullanarak belirledim ve üst kenarlığı düz bir çizgi ve alt kenarlığı kesikli bir çizgi yaptım.
Sayfada şöyle görünecek:
css kullanarak yatay çizgi.
Bu yöntemin avantajları vardır:
- Hat için hemen hemen her görünümü ayarlamanıza izin veren geniş bir ayar yelpazesi;
- Hem yatay hem de dikey çizgiler oluşturabilirsiniz. Dikey çizgiler yapmak için, border-top'u border-sol ve border-bottom'u border-right olarak değiştirmeniz gerekir.
Dezavantajları, kodun göreceli hantallığını içerir.
Ancak, ortaya çıktığı gibi, html kullanarak metne yatay bir çizgi de ekleyebilirsiniz. Aynı zamanda css'e girmeye bile gerek yok. Bunu yapmak için etiketi kullanın
.html etiketini kullanarak yatay çizgi
Bu etiketin ilk özelliği, eşleşen bir bitiş etiketinin olmamasıdır. Etiketler arasındaki html kodunun herhangi bir yerinde kullanılabilir.
ve.Bu etiket aşağıdaki özelliklere sahiptir:
- Genişlik- yatay çizgimizin uzunluğunu piksel veya yüzde olarak belirler;
- Renk- çizginin rengini tanımlar;
- hizala- çizginin sağa - sağa, sola - sola, merkez - merkeze hizalanmasını ayarlar;
- Boy- piksel cinsinden çizgi genişliği.
Buraya html örneği- kod.
Yatay çizgiler eşleştirilmemiş (kapanış etiketi gerekmez) etiketinden oluşur
ve oldukça benzersiz tasarım öğeleri olabilir. Metni yatay HTML çizgilerinin eklenmesiyle tasarlamak, sayfaya belirli bir metin sunumu mantığı verecek ve ayrıca okuyucunun sırayla incelenmesi gereken bilgi bloklarını vurgulamasını kolaylaştıracaktır. Etiket
farklı renk, kalınlık ve uzunluklarda yatay çizgiler oluşturabilir. Ve aşağıdaki örneklerde gösterildiği gibi bunu yapmak oldukça basittir.Bu arada, blok stili özelliklerini de kullanabilirsiniz.
ve
çizgiler oluşturmak
belirli bir yerde. Doğru, bu seçenek her zaman uygun olmayabilir, örneğin renklendirme bazen her zaman kendini haklı çıkarmaz, ancak birçok seçenekte sorunları bu şekilde çözmek mümkündür. Örneğin, oluşturulan bir çizginin içinde etiket
metni eklemeyin. Ve blokların içinde bu mümkündür ve sürekli olarak uygulanmaktadır. Bu nedenle, tasarım gereksinimlerine bağlı olarak seçeneğinizi seçmeniz gerekir.HTML'de dikey çizgiler.
A dikey çizgiler hemen hemen aynı bloklarda oluşturulur
ve
.
Tek bir rahatsızlık - tüm tarayıcılarda etiket yok
aynı şekilde çalışır, ancak burada denemeniz gerekir
ve sayfada ince ayar yapın veya güncellenmiş tarayıcıları kullanın.Yatay çizgilerin oluşumu:
Etiket
sayfaya yatay bir çizgi ekler ve aşağıdaki özelliklere sahiptir:Etiket sözdizimi
:HTML'deki yatay çizgi örnekleri:
HTML'deki dikey çizgi örnekleri:
Soldaki dikey kırmızı çizgiye bir örnek.
Sağdaki dikey kırmızı çizgiye bir örnek.
İşte üstte yatay bir kırmızı çizgi örneği.
Aşağıda yatay bir kırmızı çizgi örneği verilmiştir.
İşte yatay ve dikey çizgilere bir örnek.
HTML'deki dikey ve yatay çizgi örneklerinin sözdizimi şöyledir:
stil niteliğine dikkat edin
sınır- sol (-sağ): 4 piksel katı # FF0000;:Bir etiketle oluşturulmuş bir daire
Soldaki dikey kırmızı çizgiye bir örnek.
Sağdaki dikey kırmızı çizgiye bir örnek.
Aşağıda yatay bir kırmızı çizgi örneği verilmiştir.
İşte yatay ve dikey çizgilere bir örnek.
Ve bu örnekleri analiz edersek, o zaman oldukça basit bir sonuca varabiliriz ki, dikey çizgiler en iyi yardımla oluşturulabilir ve ara çizgi varyantları ile yapılabilir. etiket
Ama hepsi hayal gücüne ve isteklere bağlı. Öyleyse seç ve şekillendir.