Css hattı. HTML ve CSS kullanarak nasıl çizgi yapılır. CSS'de çizgiler
Merhaba! Bugün size html kullanarak nasıl yatay bir çizgi yapılacağını anlatacağım.
Aslında, yatay bir çizgi yapma ihtiyacı, örneğin metnin bir bölümünü diğerinden ayırmanız gerektiğinde, oldukça sık ortaya çıkar.
Css ile yatay ve dikey çizgiler
Bu, css kullanılarak yapılabilir. Bunu yapmak için, gerekli metin alanını div etiketini kullanarak bir bloğun içine ve ardından style.css dosyasına veya doğrudan html koduna, border-top ve border-bottom kullanarak üst veya alt sınır için bu bloğun özelliklerini yazıyoruz. İşte bir örnek:
Bu durumda, css ile stili doğrudan html kodundan ayarladım ve üst kenarlığı düz çizgi ve alt kenarı kesikli çizgi yaptım.
Sayfada şöyle görünecek:
Css kullanarak yatay çizgi.
Bu yöntemin avantajları vardır:
- Neredeyse her tür hattı ayarlamanıza olanak tanıyan çok çeşitli ayarlar;
- Hem yatay hem de dikey çizgiler oluşturabilirsiniz. Dikey çizgiler oluşturmak için border-top'u border-left ve border-bottom'ı border-right olarak değiştirmeniz gerekir.
Dezavantajlar, kodun göreceli büyüklüğü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 etiketini kullanın
.
Html etiketi kullanan yatay çizgi
Bu etiketin ilk özelliği, eşleşen bir bitiş etiketine sahip olmamasıdır. Etiketler arasında html kodunun herhangi bir yerinde kullanılabilir
ve.Bu etiket aşağıdaki özniteliklere sahiptir:
- Genişlik - yatay çizgimizin uzunluğunu piksel veya yüzde olarak belirler;
- Renk - çizgi rengini tanımlar;
- Hizala - çizginin hizalamasını sağa - sağa, sola - sola, merkez - merkeze ayarlar;
- Boyut - piksel cinsinden çizgi genişliği.
İşte örnek bir html kodu.
Görünüşe göre, neden dört yönteme ihtiyacınız olabilir? Sonuçta, neredeyse her insan alıştığı bir yöntemi kullanır. Örneğin, Shift tuşuna ve "tire" tuşuna birkaç kez bastım ve bu yatay bir çizginin sonucudur.
Peki ya bu noktalı bir çizgiyle sonuçlanırsa, ancak sağlam bir çizgiye ihtiyacınız varsa?
- Büyük olasılıkla, klavyedeki Shift tuşu hatalı. Diğer yöntemler burada kurtarmaya gelecek.
3.
4.
5.
Word'de bir satır oluşturmanın belki de en yaygın yolu klavyede birkaç tuş kullanmaktır.
Klavye ile ince, kalın, çift, kesikli çizgi
Aşağıda, İngilizce olan, ancak Rusça düzeni olmayan bir klavye çizimi var, ancak önemli değil, çünkü yalnızca üç tuşla ilgileniyoruz: Shift, tire ve Enter.
Şekil: 1. Klavyedeki üç tuş: Word'de kesintisiz bir yatay çizgi için Shift, tire ve Enter
Bu üç tuşla, Word'de kesintisiz bir yatay çizgi çizebilirsiniz: noktalı veya düz, ince veya kalın, uzun veya kısa.
1) Word düzenleyicide "-" (kısa çizgi) tuşuna birkaç kez bastığınızda, herhangi bir uzunlukta noktalı bir çizgi elde ederiz.
Yapmak ince sayfanın tüm genişliği boyunca uzun bir çizgi:
- Klavyede "çizgi" tuşunu buluyoruz (Şekil 1'deki yeşil çerçevede "sıfır" tuşunun sağında).
- Word'de yeni (!) Satır ile bu tuşa birkaç kez basın: -
- Ve sonra "Enter" () tuşuna basın. Birkaç basılı çizgi, sayfanın tüm genişliği boyunca aniden sürekli, yatay, ince bir çizgiye dönüşür.
2) Shift ve "-" (tire) tuşlarına aynı anda basıldığında, kısa çizgi Basılı DEĞİL, ancak alt çizgi _________. Böylece, belgenin herhangi bir yerinde keyfi uzunlukta kesintisiz bir çizgi oluşturabilirsiniz.
Şekil: 2. Word'de ince ve kalın yatay çizgi
Şimdi yazdırıyoruz kalın tüm sayfa genişliğini doldurmak için yatay bir çizgi:
- Yine aynı "kısa çizgi" tuşunun yanı sıra Shift tuşunu (istediğiniz gibi sola veya sağa) buluyoruz. Shift'e basın, basılı tutun ve bırakmayın.
- Ve şimdi yeni (!) Satırla birkaç kez (örneğin 3-4 kez) tireye basın (Shift'i bırakmadan): ___. Shift'i bırakın.
- Şimdi Enter tuşuna basın. Kalın bir yatay düz çizgi göreceksiniz.
Bazı sonuçları bir tablo şeklinde özetleyelim:
(Büyütmek için tıklayın) Klavyeyi kullanarak Word'deki satırlar
Tablo kullanarak Word'de II Satır
Yalnızca üst veya alt kenarlığın renklendirildiği (görünür olacak) ve tablonun diğer üç kenarının renksiz kenarlıklara sahip olduğu (görünmez olacaklar) bir hücreli (1 × 1) bir tablo kullanılarak yatay bir çizgi elde edilebilir.
İmleci, çizginin olması gereken yere yerleştiriyoruz. Word'ün üst menüsünde şunları tıklayın:
- Ekle (Şekil 3'te 1),
- Tablo (Şekil 3'te 2),
- Bir hücre (Şekil 3'te 3).
Şekil: 3. Word'e 1x1 tablo nasıl eklenir (bir hücreden)
Sonuç, büyük bir hücreden (1x1) oluşan bir tablo olacaktır:
Üç taraftan sınırları kaldırmak için 1x1 tablosunda kalır. Bunun için
- "Ana Sayfa" sekmesine gidin (Şekil 4'te 1),
- ardından "Yazı Tipi" nin yanında "Paragraf" ve kenarlıklar buluyoruz (Şekil 4'te 2),
- "Kenarlık yok" seçeneğine tıklayarak tüm sınırları kaldırın (Şekil 4'te 3),
- "Üst kenarlık" veya "Alt sınır" ı seçin (Şekil 4'te 4).
Şekil: 4. Word tablosundaki kenarlık seçimi nasıl kaldırılır (kenarlıkları görünmez yapın)
Bunu videoda açıkça gösteriyorum (makalenin sonunda).
Bu arada, şek. 3 daha kolay bir yol olduğunu gösteriyor. İmleci Word'de satırın başına getirebilir ve "Yatay Çizgi" yi tıklayabilirsiniz (Şekil 4'te 5):
III Çizime Göre Sözcük İçinde Satır
Ekle (Şekil 5'te 1) - Şekiller (Şekil 5'te 2), Word'de yatay bir çizgi elde etmenin başka bir yoludur.
Çizgiyi kesinlikle yatay tutmak için, Shift tuşunu basılı tutun ve aynı anda çizgiyi çizin.
Şekil: 5. Word'de çizgi nasıl çizilir
Ekran klavyesini kullanarak Word'de IV Hattı
Ekran klavyesini bulmak için, Arama'da "ekran klavyesi" ifadesini, Windows 7 ve Windows 8 için daha fazla ayrıntı girin.
Windows 10 için, Arama çubuğuna "ekran klavyesi" yazarak da ekran klavyesini bulabilirsiniz.
Şekil: 6. Ekran klavyesi
Normal bir klavyeyle ilk sürümde olduğu gibi yatay bir çizgi oluşturacağız. Ekran klavyesinin üç düğmeye ihtiyacı vardır: tire, Shift ve Enter.
1 Tire ve Enter
Word'deki yeni bir satırdan, çizgiye birkaç kez tıklayın (Şekil 6'da 1) ve Enter tuşuna basın. Bu ince bir yatay çizgi oluşturacaktır.
2 Shift, Dash ve Enter
Word'deki yeni bir satırdan, önce Shift'e (Şekil 6'da 2), ardından Tire'ye (Şekil 6'da 1) tıklayın. Sonuç bir alt çizgidir. Bu yüzden 2 kez daha tekrarlayacağız ve ardından Enter tuşuna basacağız. Sonuç olarak, kalın bir yatay çizgi göreceğiz.
Bir HTML sayfası oluştururken, düzen önemli bir rol oynar. Özellikle çeşitli semboller ve dekoratif tasarımdan bahsederken: Bu küçük şeyler sayfanızın "dilini" daha erişilebilir ve anlaşılır hale getirmeye yardımcı olur, ayrıca genel olarak algısını ve görünümünü önemli ölçüde değiştirir. Tasarım için en önemli unsurlardan biri yatay bir çizgidir ve ayrıca onunla nasıl çalışılacağını ve html'de yatay bir çizginin nasıl yapılacağını daha ayrıntılı olarak öğreneceğiz.
Yatay çizgi nedir ve ne için
Html'deki yatay çizgi, bir dizi işlevi yerine getiren bir sayfa süsleme öğesidir:
- Dekoratif... Sayfaya çekicilik katmaya yardımcı olur.
- Bölme... Farklı anlamlara sahip bilgilerin etkili bir şekilde ayrılmasını teşvik eder.
- Vurgu veya altını çizme... Sayfa misafirlerinin dikkatini gerekli ve en önemli bilgilere çeker.
Bir dizi işlevi gerçekleştirmenin en ekonomik yolu olarak kabul edilen yatay çizgidir. Oluşturması çok basit, ancak dıştan çok karlı görünüyor. Html kodunda basit değişiklikler yaparak şunları ayarlayabilirsiniz:
- uzunluk;
- genişlik;
- renk özellikleri;
- bir veya diğer kenara hizalama.
Yatay çizginin blok elemanlarına atıfta bulunduğunu unutmayın. Bu, sayfada yeni bir satır işgal ettiği ve onu izleyen metnin aşağıya gideceği anlamına gelir.
HTML'de yatay bir çizgi oluşturun
Üçgen parantez içinde basit bir etiket - hr kullanarak bir çizgi ayarlayabilirsiniz. "Yatay Kural" ın kısaltmasıdır ve klasik harici parametreleri ayarlar. Diğerlerinden farklıdır, çünkü bir bitiş etiketine ihtiyaç duymaz ve kendi başına var olabilir. Etiketteki ek değerleri kullanarak bir öğenin harici özelliklerini değiştirebilirsiniz:
- Uzunluk... Çizgi uzunluğunun tüm sayfayı kaplamasını istemiyorsanız, istediğiniz boyutu piksel veya yüzde olarak ayarlayabilirsiniz. Bu, etiketteki ek "genişlik" sözcüğü ve tırnak içinde "\u003d" işaretinden sonra belirtilen sayısal uzunluk göstergesi kullanılarak yapılır.
Şuna benziyor. Örneğin, 100 piksellik bir uzunluk istiyorsak, şuna benzer bir etiket ayarlardık: hr width \u003d "100"
- Hizalama... Hizalama sol veya sağ kenarlarda ve ayrıca merkezde mümkündür. Bu özellik yalnızca genişlik parametresini önceden belirlediyseniz geçerlidir, çünkü tam sayfa bir satır hizalanamaz. Hizalamak için, "hizala" etiketinde ek bir öznitelik ayarlayın ve buna bir yön ekleyin: merkez - merkez için, sol - sol ve sağ için - sağ hizalama için.
Bitmiş etiket daha sonra böyle görünecektir. Örneğin, 150 piksel uzunluğunda bir yatay çizgi için merkez hizalamasını ayarlamamız gerekirse, bitmiş etiket şu şekilde görünecektir: hr align \u003d "center" width \u003d "150".
Hizalama ölçüsü olan "hizalama" nın, özellik uzunluk ölçü genişliğine bağlı olmasına rağmen, 1. konuma getirildiğini unutmayın.
- Genişlik... İsteğe bağlı olarak, kalın veya ince bir alt çizgi oluşturarak genişliği de belirtebilirsiniz. Bu kriter hiçbir şeye bağlı değildir ve uzunluk veya hizalama belirtilmeden bağımsız olarak kullanılabilir. Bunun için, etiketteki boyut özelliğini ve piksel cinsinden istenen genişliğe eşit bir sayısal değer kullanıyoruz. Sayı, boyut özelliği ve "\u003d" sembolünden sonra tırnak işaretleri içinde belirtilir.
Bu nedenle, 15 piksel genişliğinde bir çizgi oluşturmamız gerekirse, şu etiketi oluşturmamız gerekir: hr size \u003d "15".
- Renk... Aynı zamanda bağımsız bir gösterge olarak ayarlanmıştır. Değiştirmek için, renk özelliğini renk adıyla birlikte kod biçiminde veya İngilizce olarak kullanın. Renk, "\u003d" sembolünden sonra tırnak içinde belirtilir.
Bu nedenle, standart bir beyaz çizgi için etiket iki şekilde yazılabilir: hr color \u003d "#FFFFFF" veya hr color \u003d "white"
Siyah, # 000000 kodu kullanılarak oluşturulabilir.
- Kaldırmak gölge... Gölge içermeyen bir öğeye ihtiyacınız varsa, noshade niteliği etikette kullanılmalıdır. Tek başına veya diğer unsurlarla kombinasyon halinde kullanılabilir. Bunu kullanan standart bir satır için bir etiket şu şekilde görünecektir: hr noshade
Video kullanarak yatay bir çizgi oluşturun
Daha görsel bir formatta bilgi almak istiyorsanız, yatay bir çizgiyle çalışma olasılıklarını ayrıntılı olarak açıklayan sonraki videoya bakın.
Yatay çizginin gerekli boyutlarını belirledikten sonra site sayfalarını, bilgilerin yapılandırılmış ve görsel olarak yetkin bir şekilde çerçeveleneceği şekilde tasarlayabilirsiniz. Bu, ziyaretçilerin sunulan bilgileri daha kolay algılamasına ve sitenizi diğerlerinden ayırmasına yardımcı olur.