Html'de renkli bir çizgi nasıl yapılır. HTML'de yatay bir çizginin farklı varyasyonları nasıl oluşturulur?

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 vurgulayamazsınız, değiştirin arkaplan veya metnin etrafında bir çerçeve oluşturun. Ancak sunulan yöntemlerden biri her zaman 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

Hedefimize ulaşmak için dönmemiz gereken style.css dosyası, içine ilgili özelliği yazarak 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, yani:

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

- sağ sınır – dikey çizgi, metnin sağında bulunur;

- sınır-alt– metnin altında bulunan yatay bir çizgi;

- sol kenar soldaki dikey çizgidir.

Html'de bir satır nasıl yapılır

kullanma css özellikleri HTML kodunu düzenleyerek gerekli tüm değerleri ayarlayabilirsiniz. Bunu yapmak için sitenin yönetim 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. Bir örnek aşağıda görülebilir.

Komutların kısa açıklaması

- Genişlik– hat 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.

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

Neredeyse 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 için görevi büyük ölçüde basitleştirir.

Bir HTML etiketi ile düz bir yatay çizgi nasıl yapılır

---

İlk olarak dikkatinizi çekmek istediğim şey, bu etiketin html'nin tüm inceliklerine ve ilkelerine rağmen bir kapanış etiketi içermediğidir. Her yerde kullanılabilir HTML Kodu, etiketler arasında Ve.

Etiket Nitelikleri

---

- 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– çizgi hizalamasından sorumlu öznitelik. Buna karşılık ekip ona başvurur.

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 metin, okuyucunun dikkatini normal metinden daha fazla çeker.

bir etiket ile

varsayılan hat

Örnek 1. Yatay çizgi

HTML5 CSS 2.1 IE Cr Op Sa Fx

Metin dizesi

Sonuç bu örnekŞek. 1.

Pirinç. 1. Renkli yatay çizgi

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. Örneğin, birkaç kez Shift ve kısa çizgi tuşuna bastım ve bu şekilde yatay bir çizgi ortaya çıktı.

Peki ya bu noktalı bir çizgiyle sonuçlanırsa, ancak sizin sağlam bir çizgiye ihtiyacınız varsa?
- Büyük ihtimalle klavyedeki Shift tuşu arızalıdır. İşte yardımcı olmanın başka yolları.

Word'de bir satır oluşturmanın belki de en bilinen yolu, klavyede birkaç tuş kullanmaktır.

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

Aşağıda, İngilizce düzenine sahip, ancak Rusça düzeni olmayan bir klavye çizimi 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: kesikli veya düz, ince veya kalın, uzun veya kısa.

1) “-” (çizgi) tuşuna birkaç kez basarak kelime editörü alırız noktalı çizgi herhangi bir uzunluk.

Yapmak ince sayfanın tüm genişliği için uzun satır:

• Klavyede "çizgi" tuşunu buluyoruz ("sıfır" tuşunun sağında, Şekil 1'deki yeşil çerçeve içinde).
• Word'deki yeni (!) Satırdan, bu tuşa birkaç kez basın: -
• Ardından "Enter" () tuşuna basın. Basılı 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, bir tire DEĞİL, alt çizgi _________ yazdırılır. Bu şekilde sürekli bir çizgi oluşturabilirsiniz. keyfi uzunluk belgenin herhangi bir yerinde.

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

Şimdi yazdırıyoruz kalın sayfanın tüm genişliği boyunca yatay çizgi:

• Yine aynı kısa çizgi tuşunu ve ayrıca Shift tuşu(istediğiniz gibi sola veya sağa). Shift'e basın, basılı tutun ve bırakmayın.
• Ve şimdi, yeni (!) bir 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 bir yatay düz çizgi göreceksiniz.

Klavye kullanarak Word'de yatay ince, kalın, noktalı ve çift çizgi

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

Tablo kullanarak Word'de II Satırı

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

İmleci satırın olması gereken yere getiriyoruz. İÇİNDE üst menü Kelime tıklaması:

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

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

Sonuç, bir büyük hücrenin (1x1) tablosudur:

Kenarlıkları kaldırmak için üç tarafta 1x1 masada kalır. Bunun için

• "Giriş" sekmesine gidin (Şekil 4'te 1),
• "Yazı Tipi"nin yanında "Paragraf" ve kenarlıklar buluyoruz (Şekil 4'te 2),
• "Sınır yok" seçeneğine tıklayarak tüm sınırları kaldırın (Şekil 4'te 3),
• "Üst sınır" veya "Alt sınır"ı seçin (Şek. 4'te 4).

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

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

Bu arada, Şek. 3 daha kolay bir yol olduğunu gösterir. İmleci Word'de satırın başına getirebilir ve "Yatay Çizgi"ye tıklayabilirsiniz (Şekil 4'te 5):

Çizim Yoluyla Word'de III Çizgisi

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

Çizgiyi tamamen yatay yapmak için Shift tuşunu basılı tutun ve aynı anda çizgiyi çizin.

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

Ekran klavyesini kullanarak Word'de IV Line

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

Pirinç. 6. Ekran klavyesi

Normal klavyeli ilk versiyondaki gibi yatay bir çizgi oluşturacağız. Açık ekran klavyesiüç düğmeye ihtiyacınız olacak: tire, shift ve enter.

1 Tire ve Enter

Word'deki yeni bir satırdan, kısa çizgiye birkaç kez tıklayın (Şekil 6'da 1) 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 Tire'ye (Şekil 6'da 1) tıklayın. Alt çizgi alın. Bu yüzden 2 kez daha tekrarlayın ve ardından Enter tuşuna basın. Sonuç olarak, kalın bir yatay çizgi göreceğiz.

oluştururken HTML sayfaları tasarım önemli bir rol oynar. Özellikle çeşitli sembollerden ve dekoratif tasarımdan bahsederken: bu küçük şeyler, sayfanızın "dilini" daha erişilebilir ve net hale getirmeye yardımcı olur, ayrıca algısını önemli ölçüde değiştirir ve dış görünüş genel olarak. Biri temel unsurlar dekorasyon için yatay bir çizgidir ve daha sonra onunla nasıl çalışılacağını ve html'de nasıl yatay bir çizgi çizileceğini daha ayrıntılı olarak öğreneceğiz.

Yatay çizgi nedir ve neden gereklidir?

Html'deki yatay çizgi, bir dizi işlevi yerine getiren bir sayfa tasarım öğesidir:

1. Dekoratif. Sayfaya çekicilik katmaya yardımcı olur.
2. bölme. Farklı anlamlara sahip bilgilerin etkili bir şekilde ayrılmasına katkıda bulunur.
3. Vurgulama veya vurgulama. Sayfa ziyaretçilerinin dikkatini gerekli ve en önemli bilgilere çekecektir.

En çok kabul edilen yatay çizgidir. erişilebilir yol bir dizi işlevi uygulamak için. Oluşturması çok basit ve dışarıdan çok karlı görünüyor. Html kodundaki basit değişikliklerle şunları kontrol edebilirsiniz:

• uzunluk;
• Genişlik;
• renk özellikleri;
• bir veya diğer kenarda hizalama.

Yatay çizginin blok elemanlarını ifade ettiğini belirtmekte fayda var. Bu onun aldığı anlamına gelir Yeni hat sayfada ve onu takip eden metin aşağıya inecektir.

HTML'de yatay bir çizgi oluşturma

Üçgen parantez içinde basit bir etiket - hr kullanarak bir satır ayarlayabilirsiniz. "Yatay Kural"ın kısaltmasıdır ve klasiği ayarlar. harici parametreler. Bir kapanış etiketine ihtiyaç duymaması ve bağımsız olarak var olabilmesi nedeniyle diğerlerinden farklıdır. Değiştirmek dış özellikler eleman, etiketteki ek değerler kullanılarak yapılabilir:

1. Uzunluk. Satır uzunluğunun tüm sayfayı kaplamasını istemiyorsanız, istediğiniz boyutu piksel veya yüzde olarak ayarlayabilirsiniz. Bu, etiketteki ek bir kelime olan "genişlik" ve tırnak işaretleri içindeki "=" işaretinden sonra belirtilen uzunluğun sayısal bir göstergesi yardımıyla yapılır.

Bu gibi görünüyor. Örneğin, 100 piksellik bir uzunluğa ihtiyacımız varsa, şu etiketi ayarlarız: hr width="100"

1. hizalama. Hizalama sol veya sağ kenarlarda ve ayrıca merkezde mümkündür. Bu özellik sayfa çapında bir satır hizalanamayacağından, yalnızca genişlik parametresini zaten ayarladıysanız çalışır. Hizalama için, "align" etiketinde ek bir özellik belirledik ve ona bir yön ekledik: merkez - merkez için, sol - sol için ve sağ - sağ hizalama için.

Bu durumda bitmiş etiket şöyle görünecektir. Örneğin, 150 piksel uzunluğundaki yatay bir çizgi için merkez hizalamasını ayarlamamız gerekirse, bitmiş etiket şu şekilde görünecektir: hr align="center" width="150".

Nitelik genişlik metriğine bağlı olsa bile, hizalama metriği olan "align"in 1 olarak ayarlandığını unutmayın.

1. Genişlik. İsteğe bağlı olarak, kalın veya ince bir alt çizgi oluşturarak bir genişlik de belirleyebilirsiniz. Bu kriter hiçbir şeye bağlı değildir ve uzunluk veya hizalama belirtilmeden bağımsız olarak kullanılabilir. Bunun için etiket üzerinde size niteliğini ve piksel cinsinden istenen genişliğe eşit bir sayısal değer kullanıyoruz. Numara, size özelliğinden ve "=" sembolünden sonra tırnak içinde belirtilir.

Bu nedenle, 15 piksel genişliğinde bir çizgi oluşturmak istiyorsak, aşağıdaki etiketi oluşturmamız gerekir: hr size="15".

1. Renk. Aynı zamanda bağımsız bir gösterge olarak ayarlanır. Değiştirmek için, renk niteliğini rengin adıyla birlikte bir kod biçiminde veya üzerinde kullanın. ingilizce dili. Renk, "=" sembolünden sonra tırnak içinde belirtilir.

Yani standart satır için etiket Beyaz renk iki şekilde yazılabilir: hr color="#FFFFFF" veya hr color="white"

Siyah renk #000000 kodu kullanılarak oluşturulabilir.

1. Bırakmak gölge. Gölge içermeyen bir öğeye ihtiyacınız varsa, etikette noshade niteliği kullanılmalıdır. Tek başına veya diğer unsurlarla kombinasyon halinde kullanılabilir. Onu kullanan standart satırın etiketi şuna benzer: hr noshade

Video ile yatay bir çizgi oluşturun

Daha görsel bir biçimde bilgi almak istiyorsanız, yatay bir çizgiyle çalışma olanaklarını ayrıntılı olarak açıklayan aşağıdaki videoya bakın.

Yatay çizginin gerekli boyutlarını belirledikten sonra, sitenin sayfalarını bilgilerin yapılandırılacağı ve görsel olarak iyi biçimlendirileceği şekilde düzenleyebilirsiniz. Bu, ziyaretçilerin sunulan bilgileri algılamasını ve sitenizi diğerlerinden ayırt etmesini kolaylaştırır.

Temel olarak, yatay çizgiler bir sitenin HTML sayfalarını süslemek için kullanılır ve onlara daha çekici bir görünüm verir. Ancak komşu bölümlerin bilgilerini görsel olarak sınırlayabilirler ve okuyanlara 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.

. Ama kendisi

---

içeriğe sahip olamaz çünkü basitçe bir kapanış etiketi yoktur, yani boştur.

HTML'de yatay çizgiler çizme örneği

---

Paragraf.

Paragraf.

---

Paragraf.

Tarayıcıda sonuç

Paragraf.

Paragraf.

Paragraf.

Gördüğünüz gibi, çizgiler çok ince, belirgin değil ve mevcut tüm genişlikte çizilmiş, bu yüzden şimdi daha çekici görünmelerini sağlamak için onları nasıl değiştireceğimizi öğreneceğiz.

Yatay çizgilerin rengi, kalınlığı ve genişliği nasıl değiştirilir?

HTML'nin eski sürümlerinde, etiket

---

yatay çizgilerin rengini, kalınlığını ve genişliğini değiştirebileceğiniz özel nitelikler vardı. Bunlar sırasıyla renk , boyut ve genişliktir. Ancak daha yeni sürümlerde, Basamaklı Stil Sayfaları (CSS) lehine kullanımdan kaldırıldılar, bu yüzden tahmin ettiniz, favori stil özniteliğimizi tekrar kullanacağız. Genel sözdizimi şöyledir:

---

stil="arka plan:renk" >- çizginin 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"> - ve tüm parametreleri bir kerede belirtebilirsiniz, sadece noktalı virgülü (;) unutmayın.

Bir renk, İngilizce adıyla veya önünde diyez işareti (#) bulunan rengin HEX koduyla belirtilebilir. Eh, bunu zaten dersten biliyorsun metin ve arka plan renklerini değiştirme.

Ancak yeniden boyutlandırma hakkında daha ayrıntılı olarak konuşalım. hatırladığın gibi 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 (%) cinsinden belirtilebilir ve kalınlık genellikle yalnızca piksel cinsinden. Başka ölçü birimleri koyarsanız, bu bir hata olmaz, ancak tarayıcılar bunları görmezden gelir.

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üksek olursa, ç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 üst öğe kabının boyutuna bağlıdır ve bu boyuta göre hesaplanır.

---

. Bu durumda ebeveynin boyutları %100 olarak alınır. Örneğin, etiketi yerleştirirsek

---

stil="genişlik:%50"> elemanın içinde

, o zaman tarayıcı penceresini veya çözünürlüğü 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.

---

---

---

---

Tarayıcıda sonuç

Yatay Çizgilerin Konumunu Değiştirme

Yatay bir çizginin genişliğini değiştirdiğinizde, tarayıcıların her zaman çizgiyi ortaladığını açıkça görebilirsiniz. Konumunu değiştirmek istiyorsanız, sadece içini kullanın.

---

hizalama özelliği aşağıdaki değerlerle:

• merkez- çizgi ortalanır (varsayılan değer).
• sol- sol kenara bastırıldı.
• Sağ- sağ kenara bastırıldı.

Yatay çizgileri hizalamaya bir örnek.

---

---

---

Tarayıcıda sonuç

Çizginin etrafındaki kenarlık nasıl kaldırılır?

Bu öğreticinin ilk örneğine bakın. Sizce bu çizgiler ne renk? Ve işte yanlış olanı. Belirtilmiş bir arka plan rengine sahip olmayan tüm sayfa öğeleri gibi şeffaftırlar! İnanmıyor musun? Ardından çizgilerin rengini değiştirdiğimiz örneğe bakın. İlk başta rengi ayarlamadık, 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, 3B efekti oluşturan sınır çizgilerinin çevresini çizer. Dolayısıyla, yatay çizgilerin kalınlığını artırmadığımızda, çizginin kendisinin kalınlığı 0 piksel olduğu için tarayıcılar bize yalnızca bu çerçeveleri gösterir.

Genellikle sadece görünümü bozan çizgi etrafındaki kenarlığı kaldırmak için, style özelliğini tekrar uygulayacağız. Ve şöyle yazılır:

---

Ev ödevi.

1. Makale, bölüm ve alt bölüm başlıkları oluşturun. Hepsini merkeze yerleştirin.
2. Tüm sayfayı Arial'e ve başlıkları Courier'e ayarlayın.
3. Tüm sayfa için yazı tipi boyutunun, tarayıcının varsayılan boyutunun %85'i olmasına izin verin. Başlıklar ise sayfadaki yazı boyutunun sırasıyla %145, %125 ve %110'una sahiptir.
4. Birinci başlığın altına bir paragraf, ikinci başlığın altına uzun bir alıntı ve üçüncü başlığın altına bir şiir yazın. Ve şiirin sayfada ortalanmasına izin verin.
5. Vurgulamak kalın harflerle bir alıntıda üç kelime.
6. Makale başlığının altına, sayfanın tüm genişliği boyunca üç piksel kalınlığında kırmızı yatay bir çizgi çizin.
7. Şiirin üstüne ve altına bir piksel kalınlığında siyah çizgiler çizin. Üst satırın genişliği yaklaşık olarak ayetin genişliğine ve alt satırın genişliğinin yarısı kadar olsun.
8. Gereksiz çerçeveleri satırlardan çıkarın.