Sitenin özellikle önemli bazı unsurlarını vurgulamak için, bunun için sağlanan her türlü CSS stilini ve özelliğini kullanmaktan zarar gelmez. Elbette metin hakkında çok fazla endişelenmenize ve onu örneğin kalın veya italik olarak vurgulamanıza, arka planı değiştirmenize veya metnin etrafında bir çerçeve oluşturmanıza gerek yok. Ancak sunulan yöntemlerden biri her zaman uygun değildir. Diyelim ki anlamsal yükünün özellikleri nedeniyle bölünmesi gereken bir metniniz var. HTML ve CSS özelliklerinin kurtarmaya geldiği yer burasıdır.

CSS kullanarak metinde satır nasıl yapılır

Planlarımızı uygulamak için iletişime geçmemiz gerekecek style.css dosyası, buna karşılık gelen özelliği yazdıktan sonra sınır. Bu, metnin üstünde, altında veya belirli bir tarafında bir çizginin görünmesine neden olur. Buna karşılık, satırın görüntülenmesinden sorumlu birkaç özellik vardır:

- sınır üstü– metnin üzerinde bulunan yatay bir çizgi;

- sınır sağ– metnin sağında bulunan dikey bir çizgi;

- kenarlık altı– metnin altında bulunan yatay bir çizgi;

- kenarlık-sol– solda bulunan dikey çizgi.

Html'de bir çizgi nasıl yapılır

Kullanma CSS özellikleri HTML kodunu düzenleyerek gerekli tüm değerleri girebilirsiniz. Bunu yapmak için sitenin idari kısmına gitmeniz gerekir. 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– hat uzunluğu;

- sağlam- düz çizgi;

- noktalı- noktalı çizgi.

Stilleri daha derinlemesine anlamak için bunu okumanızı tavsiye ederim.

Site kodunda değişiklik yapılması sürecinde çizginin türünü, kalınlığını ve rengini belirleyen özelliklerin boşlukla ayrılmış olarak listelendiğini anlamak gerekir.

Bu yöntemin birkaç avantajı vardır:

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.

HTML etiketi 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ış etiketinin olmamasıdır. Her yerde kullanılabilir HTML Kodu, etiketler arasında Ve

.

Etiket özellikleri

---

- Genişlik– Hattın uzunluğundan sorumludur. Yüzde veya piksel cinsinden belirtilebilir.

- boyut- Hat kalınlığı. Piksel cinsinden belirtilir.

- renk– çizginin rengini tanımlar.

- hizalamak– çizgi hizalamasından sorumlu bir özellik. Buna karşılık ekip de onunla ilişki kuruyor.

Herkese selam! Bugün size html kullanarak yatay çizginin nasıl yapıldığını anlatacağım.

Aslında yatay bir çizgi yapma ihtiyacı oldukça sık ortaya çıkar, örneğin metnin bir bölümünü diğerinden ayırmanız gerektiğinde.

CSS kullanarak yatay ve dikey çizgiler

Bu css kullanılarak yapılabilir. Bunu yapmak için, metnin gerekli bölümünü bir div etiketi kullanarak bir bloğa yerleştiriyorum ve ardından style.css dosyasına veya doğrudan html koduna, border-top ve kullanarak bu bloğun üst veya alt kenarlık için özelliklerini yazıyoruz. kenarlık alt. İşte bir örnek:

Bu durumda, stili doğrudan html kodundan css kullanarak ayarladım ve üst kenarlığı düz, alt kenarlığı noktalı yaptım.

Sayfada şöyle görünecek:

CSS kullanarak yatay çizgi.

Bu yöntemin avantajları vardır:

• Hemen hemen her tür çizgiyi ayarlamanıza olanak tanıyan çok çeşitli ayarlar;
• Hem yatay hem de dikey çizgiler oluşturabilirsiniz. Dikey çizgiler oluşturmak için kenarlık üstünü kenarlık soluna ve kenarlık altını kenarlık sağına değiştirmeniz gerekir.

Dezavantajları arasında kodun göreceli hantallığı yer alır.

Ancak ortaya çıktığı gibi, html kullanarak metne yatay bir çizgi ekleyebilirsiniz. Aynı zamanda css'e girmenize bile gerek yok. Etiket bunun için kullanılır

Html etiketini kullanarak yatay çizgi

---

Bu etiketin ilk özelliği eşleştirilmiş bir kapanış etiketinin bulunmamasıdır. HTML kodunun etiketler arasında 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 hizalamasını sağ kenara – sağa, sol kenara – sola, merkeze – merkeze ayarlar;
• Boyut– piksel cinsinden çizgi kalınlığı.

Burada örnek HTML– kod.

Görünüşe göre neden dört yönteme ihtiyaç duyulabilir? Sonuçta hemen hemen her insan alışık olduğu bir yöntemi kullanır. Mesela Shift ve tire tuşuna birkaç kez bastım ve yatay bir çizgi elde ettim.

Peki ya bu noktalı bir çizgiyle sonuçlanırsa, ancak düz bir çizgiye ihtiyacınız varsa?
- Büyük olasılıkla klavyedeki Shift tuşu arızalıdır. Burada kurtarmaya başka yöntemler gelecektir.

3.
4.
5.

Belki de Word'de çizgi oluşturmanın en yaygın yolu klavyedeki birkaç tuşu kullanmaktır.

I Klavyeyi kullanarak ince, kalın, çift, noktalı çizgi

Aşağıda İngilizce düzeni olan, ancak Rusça düzeni olmayan bir klavyenin resmi bulunmaktadır, ancak bu önemli değil çünkü yalnızca üç tuşla ilgileniyoruz: Shift, tire ve Enter.

Pirinç. 1. Klavyedeki üç tuş: Word'de sürekli bir yatay çizgi için Shift, tire ve Enter

Bu üç tuşla Word'de sürekli bir yatay çizgi çizebilirsiniz: noktalı veya düz, ince veya kalın, uzun veya kısa.

1) “-” (tire) tuşuna birkaç kez bastığınızda Kelime düzenleyici 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çeve içinde “sıfır” tuşunun sağında).
• Word'deki yeni (!) satırdan bu tuşa birkaç kez basın: -
• Ve sonra “Enter” () tuşuna basın. Yazdırılan birkaç çizgi aniden sayfanın tüm genişliği boyunca sürekli, yatay ince bir çizgiye dönüşecektir.

2) Shift ve “-” (tire) tuşlarına aynı anda bastığınızda, tire DEĞİL, alt çizgi _________ yazdırılır. Bu şekilde belgenin herhangi bir yerinde isteğe bağlı uzunlukta sürekli bir çizgi oluşturabilirsiniz.

Pirinç. 2. Word'de ince ve kalın yatay çizgi

Şimdi yazdıralım yağ sayfanın tüm genişliği boyunca yatay çizgi:

• Yine aynı "tire" tuşunu ve Shift tuşunu (istediğiniz gibi solda veya sağda) buluyoruz. Shift tuşuna basın, basılı tutun ve bırakmayın.
• Ve şimdi, yeni (!) satırdan kısa çizgiye birkaç kez tıklayın (örneğin, 3-4 kez) (Shift'i bırakmadan): ___. Shift'i bırakın.
• Şimdi Enter tuşuna basın. Kalın yatay düz bir çizgi göreceksiniz.

Bazı sonuçları tablo halinde özetleyelim:

(Büyütmek için tıklayın) Klavyeyi kullanarak Word'deki satırlar

­­­­­­­­­­­­­­­­­­­­­

II Tablo kullanarak Word'de satır

Yalnızca üst veya alt kenarlığın renkli olduğu (görünür olacak) ve tablonun diğer üç tarafının renksiz kenarlıklara sahip olduğu (görünmez olacaklar) bir hücreli (1x1) bir tablo kullanılarak yatay bir çizgi elde edilebilir. .

İmleci satırın olması gereken yere getirin. Word'ün üst menüsünde şunu tıklayın:

• Ekle (Şekil 3'te 1),
• Tablo (Şekil 3'te 2),
• Bir hücre (Şekil 3'te 3).

Pirinç. 3. Word'e 1x1 tablo (bir hücreden) nasıl eklenir

Sonuç tek kişilik bir tablo olacak büyük kafes(1x1):

Geriye kalan tek şey 1x1 tablanın üç tarafındaki kenarlıkları kaldırmaktır. Bunun için

• “Ana Sayfa” sekmesine gidin (Şekil 4'te 1),
• daha sonra “Yazı Tipi” nin yanında “Paragraf” ve kenarlıkları buluyoruz (Şekil 4'te 2),
• “Kenarlık yok” seçeneğine (Şekil 4'te 3) tıklayarak tüm kenarlıkları kaldırın,
• “Üst kenarlık” veya “Alt kenarlık”ı seçin (Şekil 4'te 4).

Pirinç. 4. Word tablosundan kenarlık seçimi nasıl kaldırılır (kenarlıkları görünmez yapma)

Bunu videoda (makalenin sonunda) açıkça gösteriyorum.

Bu arada, Şekil 2'de. 3 daha kolay bir yol olduğu açıktır. İmleci Word'de satırın başına yerleştirebilir ve “Yatay Çizgi” (Şekil 4'te 5) seçeneğini tıklayabilirsiniz:

III Çizim kullanarak Word'de satır

Ekle (Şekil 5'te 1) - Şekiller (Şekil 5'te 2) - bu, Word'de yatay bir çizgi elde etmenin başka bir yoludur.

Çizgiyi tamamen yatay tutmak için Shift tuşunu basılı tutarken aynı anda çizgiyi çizin.

Pirinç. 5. Word'de çizgi nasıl çizilir

IV Ekran klavyesini kullanarak Word'de satır

Ekran klavyesini bulmak için Arama'ya "ekran klavyesi" ifadesini, Windows 7 ve Windows 8 için daha fazla ayrıntı girin.

Windows 10'da, Arama çubuğuna "ekran klavyesi" yazarak da ekran klavyesini bulabilirsiniz.

Pirinç. 6. Ekran klavyesi

İlk seçenekte olduğu gibi yatay bir çizgi oluşturacağız. normal klavye. Ekran klavyesinde üç düğmeye ihtiyacınız olacak: kısa çizgi, Shift ve Enter.

1 Kısa çizgi ve Enter

İLE Yeni hat Word'de kısa çizgiye (Şekil 6'da 1) birkaç kez tıklayın ve Enter tuşuna basın. İnce bir yatay çizgi elde edeceksiniz.

2 Shift, tire ve Enter

Word'deki yeni bir satırdan önce Shift'e (Şekil 6'da 2), ardından Kısa Çizgi'ye (Şekil 6'da 1) tıklayın. Bir alt çizgi alacaksınız. Bunu 2 kez daha tekrarlayacağız ve ardından Enter tuşuna basacağız. Sonuç olarak kalın bir yatay çizgi göreceğiz.

Tüm okuyuculara selamlar. Zanaatkarlar zaman zaman yatay veya dikey çizginin nasıl yapılacağı sorunuyla karşı karşıya kalıyorlar. HTML kullanarak veya ile CSS kullanma. Bugün size bundan bahsedeceğim.

CSS'deki çizgiler

Çizgi oluşturmanın birkaç yolu vardır. Böyle bir yol CSS kullanmaktır. Daha doğrusu Border'ı kullanarak. Bir örneğe bakalım.

Ve bunun sonucunda da olacak olan budur.

CSS kullanarak yatay ve dikey çizgi.

Çizgiler CSS'de Kenarlık operatörü kullanılarak çizilebilir. Yalnızca sabit çerçeve genişliğine sahip bir dikdörtgene ihtiyacınız varsa, bu operatörü kullanabilir ve ona bir değer verebilirsiniz. Örneğin border:5px katı #000000; blok sınırlarının 5 piksel siyah renge eşit genişliğe sahip olduğu anlamına gelecektir.

Bununla birlikte, tüm sınırları değil, yalnızca bazılarını belirlemeniz gerekiyorsa, o zaman hangi sınırların gerekli olduğunu ve her birinin hangi değere sahip olacağını belirtmeniz gerekir. Bunlar operatörler:

• border-top – üst sınırın değerini ayarlar
• border-bottom – alt kenarlığın değerini ayarlar
• border-left – sol kenarlığın değerini ayarlar
• border-right – sağ kenarlığın değerini ayarlar.

HTML'de dikey ve yatay çizgi

HTML'nin kendisinde 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.

Fakat bu etikete bazı değerler de verilebilmektedir.

• Genişlik– çizgi genişliği değerini ayarlar.
• Renk– çizgi rengini ayarlar.
• Hizala– Hizalamayı sola, ortaya ve sağa ayarlar
• Boyut– çizgi kalınlığı değerini piksel cinsinden ayarlar.

hr etiketini kullanarak dikey bir çizgi de belirleyebilirsiniz. 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.

Çözüm.

Artık dikey ve yatay çizgiyi nasıl ayarlayabileceğinizi biliyorsunuz. Çizgiler hem HTML kullanan normal sitelerde ayarlanabilir hem de WordPress gibi CMS kullanan bir sitede ayarlanabilir, ancak bu durumda HTML moduna geçmeniz gerekecektir.

Başka sorularınız varsa, yorumlarda onlara sorun.

Yazardan: Seni selamlıyorum. Bir web sayfasında birkaç bloğu tek satırda sunma ihtiyacı, düzen tasarımcılarının karşılaştığı çok yaygın bir görevdir. Hemen hemen her şablonun yerleşimi sırasında meydana gelir, dolayısıyla her durumda hepimizin blokların davranışını değiştirmenin temel yollarını bilmesi ve uygulaması gerekir.

En yaygın tekniklere bakmadan önce küçük bir teoriyi hatırlamak istiyorum. Web sayfası öğeleri blok ve satır içi öğelere ayrılmıştır. Ve aralarındaki fark çok basit - küçük harfler bir satıra yerleştirilebilir, ancak blok olanlar yerleştirilemez. Elbette farklılıklar bununla bitmiyor ama temel fark bu. Blokların üst ve alt kısımlarında dolgu bulunabilir (küçük harflerde yoktur) ve bunlara daha fazla özellik uygulanabilir.

CSS'de blokları sıralamanın temel yolları

Hiçbir şeyi karmaşıklaştırmayacağız, 3 ana yol var:

Blokları satır içi öğelere dönüştürün. Bu durumda blok özellikleri kaybolur, dolayısıyla bu seçenek neredeyse hiç kullanılmaz.

Gerekli elemanları blok hattı yapın. Bu, elemanın özelliklerini koruduğu, ancak aynı zamanda diğer blokların yakınlarda bulunmasına da izin verdiği özel bir tiptir.

Float özelliğini kullanarak öğelerin yüzmesini sağlayın.

Bu seçeneklere odaklanalım. Flexbox'ı, tablo gösterimini ve diğer hususları dikkate almayacağız. Yani diyelim ki 3 alt başlığımız var.

Başlık 1

Başlık 2

Başlık 3

Doğal olarak, tüm css özelliklerinin, html belgesine bağlanması gereken ayrı bir dosyaya (style.css) yazılması gerekir. Bu dosyada alt başlıklarımızın kolayca görülebilmesi için minimal bir stil yazacağım.

h3( arka plan: #EEDDCD; )

İşte sayfadalar:

Blok gibi davranıyorlar. Her biri kendi satırında yer alır, aralarında girintiler bulunur. Dilerseniz iç dolgusunu da ayarlayıp dilediğinizi yapabilirsiniz.

Bunu çizgilere dönüştürelim ve hemen girintiler ekleyelim. Bunu yapmak için h3 seçicinin aşağıdaki özellikleri eklemesi gerekir:

ekran: satır içi; dolgu: 30 piksel;

Bu tekniği kullanırken ortaya çıkan 2 ana sorun vardır. Birincisi minimum girintidir. Kodda bloklar arasında bu girintiyi oluşturan bir boşluk olması nedeniyle oluşur. Bu sorunun çözülmesi gerekiyorsa 2 ana seçenek vardır:

Html'de gerekli blokların kodunu boşluksuz bir satıra yerleştirin

Sağdaki -4 piksele negatif bir kenar boşluğu ekleyin. Bir alanın kapladığı yer bu kadar.

İkinci problem ise elemanların farklı yüksekliklerde olması durumunda görüntü sorunları ortaya çıkabilmektedir. Her şeyi hesaba katarak, en iyi seçenek- yüzen bloklar. display: inline-block yerine şunu yazıyoruz:

Çerçeveyi kullanarak bir satırdaki bloklar

Hemen şunu söyleyeyim, herhangi bir normal CSS çerçevesi (örneğin Bootstrap) kullanacaksanız, o zaman her şey hala çok daha basittir. Öğelerin düzenlenmesinden sorumlu olan tüm CSS kodları zaten yazılmıştır ve tek yapmanız gereken doğru sınıfları ayarlamaktır. Bunu yapmak için ızgara sistemini öğrenmeniz yeterlidir; çok sütunlu duyarlı şablonları çok fazla zorluk çekmeden yapabileceksiniz. En azından sıfırdan css yazmaktan çok daha kolay olacaktır.

Sıfırdan kod yazmanın bir başka zorluğu da tam ihtiyacınız olduğu anda ortaya çıkıyor uyarlanabilir tasarım. Elbette medya sorgularına sahip olarak bunu kendiniz de uygulayabilirsiniz ancak karmaşık bir şablona sahipseniz bu çok daha zor olacaktır.

Örneğin, sahip olduğunuzda büyük ekranlar ortadakilerde - 3 ve üzerinde 4 sütun olmalıdır cep telefonları— 2. Bootstrap gibi çerçevelerin yardımıyla veya daha doğrusu ızgarasının yardımıyla böyle bir şeyin uygulanması yalnızca birkaç dakika meselesidir.

Konuyu Bootstrap çerçevesine sorunsuz bir şekilde çevirerek, karmaşık bir uyarlanabilir şablon oluşturma göreviyle karşı karşıya kalırsanız, ızgarayı kullanmamanın sadece bir günah olduğunu bir kez daha not edeceğim. Bunu yapmak için bağlanmanıza bile gerek yok. tam versiyonçerçeve - onu özelleştirebilir ve orada yalnızca gerçekten ihtiyacınız olanı durdurabilirsiniz.

kullanarak çerçeveyle nasıl çalışacağınızı öğrenebilirsiniz. Orada teori anlatılıyor ama en önemlisi pratik var. 3'ü oluşturuyorsun uyarlanabilir şablon ve sipariş üzerine veya kendiniz için web siteleri tasarlamanıza olanak sağlayacak harika bir deneyim edinin. Çerçevenin avantajlarını ve yeteneklerini ücretsiz olarak tanımak istiyorsanız, Bootstrap ve düzen hakkındaki makale serimize göz atmanızı öneririm. basit düzen. Genel olarak düzen ve web sitesi oluşturmada başarılar diliyorum.