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 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

CSS özelliklerini kullanarak 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, metin düzenleyiciyi HTML kodu düzenleme moduna geçirin 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 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. Html kodunun herhangi bir yerinde, etiketler arasında kullanılabilir. 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.

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 okuyuculara okurken 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

---

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

---

yatay çizgilerin rengini, kalınlığını ve genişliğini değiştirmenin mümkün olduğu özel nitelikler vardı. 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, favori stil özniteliğimizi tekrar 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 birimler 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.

---

---

---

---

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.

---

---

---

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ış. Arka plan rengi olmayan tüm sayfa öğeleri gibi saydamdırlar! 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 görünümü bozan çizgi etrafındaki kenarlığı kaldırmak için stil niteliğini yeniden uygulayacağız. Ve şöyle yazılır:

---

Ödev.

1. Makale, bölüm ve alt bölüm başlıkları oluşturun. Hepsini ortalayın.
2. Başlıklar için tüm sayfayı Arial ve Courier olarak ayarlayın.
3. Tüm sayfadaki 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.
4. İ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.
5. Alıntı yaptığınız üç kelimeyi kalın harflerle vurgulayın.
6. Makalenin başlığının altına, sayfanın tüm genişliği boyunca üç piksellik kırmızı bir yatay çizgi çizin.
7. Ş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.
8. Gereksiz çerçeveleri satırlardan çıkarın.

Yazardan: Seni selamlıyorum. Bir web sayfasında birkaç bloğu bir satırda sunma ihtiyacı, yerleşim tasarımcıları için çok sık ortaya çıkan bir görevdir. Hemen hemen her şablonun yerleşimi sırasında meydana gelir, bu nedenle her durumda hepimizin blokların davranışını değiştirmenin temel yöntemlerini bilmemiz ve uygulamamız gerekir.

En yaygın hilelere bakmadan önce, biraz teoriyi hatırlamak istiyorum. Web sayfası öğeleri blok ve satır içi olarak ayrılmıştır. Ve aralarındaki fark çok basittir - küçük harfler bir satıra yerleştirilebilir, ancak blok olanlar olamaz. Tabii ki, farklılıklar burada bitmiyor, ancak temel fark bu. Zaten, blokların üst ve alt kenar boşlukları olabilir (küçük harfler yoktur) ve bunlara daha fazla özellik uygulanabilir.

Css'de blokları arka arkaya sıralamanın ana yolları

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

Blokları satır içi öğelere dönüştürün. Aynı zamanda, blok özellikleri kaybolur, bu nedenle bu seçenek neredeyse hiç kullanılmaz.

İstenen öğeleri satır içi blok yapın. Bu, elemanın özelliklerini koruduğu ancak aynı zamanda diğer blokların yan yana konumlandırılmasına izin verdiği özel bir tiptir.

Float özelliğini kullanarak öğeleri kaydırın.

Bu seçenekler üzerinde duralım. Flexbox, tablo gösterimi ve diğer noktalar dikkate alınmayacaktır. 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 özellikleri, html belgesine bağlanması gereken ayrı bir dosyaya (style.css) yazılmalıdır. Bu dosyada alt başlıklarımızın kolayca görülebilmesi için minimal bir stil yazacağım.

h3 (arka plan: #EEDDCD;)

h3 ( arka plan: #EEDDCD;

İşte sayfadalar:

Orada bloklar gibi davranırlar. Her biri kendi satırında bulunur, aralarında girintiler vardır. İsterseniz, istediğiniz dahili girintileri de ayarlayabilir ve genel olarak istediğinizi yapabilirsiniz.

Çizgilere dönüştürün ve hemen dolgu ekleyin. Bunu yapmak için h3 seçiciye aşağıdaki özellikleri ekleyin:

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

Bu teknikle ilgili 2 ana sorun vardır. Birincisi minimum dolgudur. Bu girintiyi oluşturan koddaki bloklar arasında bir boşluk olması nedeniyle oluşur. Bu sorunun bir çözüme ihtiyacı varsa, 2 ana seçenek vardır:

Html'de, gerekli blokların kodunu boşluksuz bir satırda düzenleyin

-4 pikselin sağına negatif bir kenar boşluğu ayarlayın. Yani bir boşluk ne kadar yer kaplıyor.

İkinci sorun, farklı yüksekliklerdeki elemanlarda görüntü sorunlarının ortaya çıkabilmesidir. Genel olarak, kayan bloklar en iyi seçenektir. display: satır içi blok yerine şunu yazıyoruz:

Bir çerçeve kullanarak sıralı bloklar

Hemen söylemeliyim ki, herhangi bir normal css çerçevesi kullanacaksanız (örneğin, Bootstrap), o zaman orada hala çok daha kolay. Öğelerin düzenlenmesinden sorumlu tüm css kodları zaten yazılmıştır ve yalnızca doğru sınıfları ayarlamanız gerekecektir. Tek yapmanız gereken ızgara sistemini öğrenmek ve çok fazla zorluk çekmeden duyarlı çok sütunlu şablonlar oluşturabilirsiniz. En azından sıfırdan css yazmaktan çok daha kolay olacaktır.

Sıfırdan kod yazmanın bir başka zorluğu, tam da duyarlı tasarıma ihtiyaç duyduğunuzda ortaya çıkar. Tabii ki, medya sorgularına sahip olarak bunu kendiniz uygulayabilirsiniz, ancak karmaşık bir şablonunuz varsa çok daha zor olacaktır.

Örneğin büyük ekranlarda 4, orta ekranlarda 3 ve cep telefonlarında 2 sütun olması gerektiğinde Bootstrap gibi çerçeveler veya daha doğrusu ızgarası ile böyle bir şeyi uygulamak sadece birkaç dakika sürer. .

Konuyu Bootstrap çerçevesine sorunsuz bir şekilde aktarırken, bir kez daha not edeceğim, karmaşık bir duyarlı şablon oluşturma göreviyle karşı karşıya kalırsanız, ızgarayı kullanmamak sadece bir günahtır. Bunu yapmak için çerçevenin tam sürümünü bağlamak bile gerekli değildir - onu özelleştirebilir ve orada yalnızca gerçekten ihtiyacınız olanı durdurabilirsiniz.

Çerçeve ile nasıl çalışacağınızı öğrenebilirsiniz. Teoriyi de açıklıyor ama en önemlisi pratik var. 3 duyarlı şablon oluşturacak ve sipariş vermek veya kendiniz için web siteleri oluşturmanıza olanak sağlayacak harika bir deneyim yaşayacaksınız. Ve çerçevenin faydalarına ve özelliklerine ücretsiz olarak göz atmak istiyorsanız, Bootstrap ve basit düzen hakkındaki makale dizimize göz atmanızı öneririm. Genel olarak yerleşim ve site yapımında başarılar dilerim.

Bir HTML sayfası oluştururken, düzen önemli bir rol oynar. Özellikle çeşitli sembollerden ve dekoratif tasarımdan bahsettiğimizde: bu küçük şeyler sayfanızın "dilini" daha erişilebilir ve net 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 bununla nasıl çalışılacağını ve html'de nasıl yatay bir çizgi oluşturulacağını daha ayrıntılı olarak öğreneceğiz.

Yatay çizgi nedir ve ne işe yarar?

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ını teşvik eder.
3. Vurgulama veya altını çizme... Sayfa misafirlerinin dikkatini gerekli ve en önemli bilgilere çeker.

Bir dizi işlevi uygulamanın en uygun yolu olarak kabul edilen yatay çizgidir. Oluşturması çok basit, ancak dışarıdan çok karlı görünüyor. Html kodundaki basit değişikliklerle şunları düzenleyebilirsiniz:

• uzunluk;
• Genişlik;
• renk özellikleri;
• bir veya diğer kenara hizalayın.

Yatay çizginin blok öğelerini ifade ettiğini unutmayın. Bu, sayfada yeni bir satır kapladığı ve onu takip eden metnin aşağıya gideceği anlamına gelir.

HTML'de yatay bir çizgi nasıl oluşturulur

Üçgen parantez içinde basit bir etiket - hr kullanarak bir çizgi ayarlayabilirsiniz. "Yatay Kural"ın kısaltmasıdır ve klasik harici parametreleri ayarlar. Bir bitiş etiketine ihtiyaç duymaması ve kendi başına var olabilmesi bakımından diğerlerinden farklıdır. Etiketteki ek değerleri kullanarak bir öğenin dış özelliklerini değiştirebilirsiniz:

1. Uzunluk... Çizginin uzunluğunun tüm sayfaya yayılmasını istemiyorsanız, istediğiniz boyutu piksel veya yüzde olarak ayarlayabilirsiniz. Bu, etiketteki ek bir "width" kelimesinin ve tırnak içindeki "=" işaretinden sonra belirtilen sayısal uzunluk göstergesinin yardımıyla yapılır.

Şuna benziyor. Örneğin, 100 piksel uzunluğa ihtiyacımız varsa, şöyle bir etiket belirleriz: hr genişlik = "100"

1. hizalama... Sol veya sağ kenarlarda ve ayrıca merkezde hizalama mümkündür. Bu özellik, tam sayfa bir satır hizalanamayacağından, genişlik parametresini önceden belirlediyseniz geçerlidir. Hizalama için, "align" etiketinde ek bir nitelik belirleyin ve buna bir yön ekleyin: merkez - merkez için, sol için - sol için ve sağ için - sağa hizalama için.

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

Nitelik uzunluk ölçüsü genişliğine bağlı olsa bile, hizalama ölçüsü olan "hizalama"nın 1. konuma yerleştirildiğini unutmayın.

1. Genişlik... İsteğe bağlı olarak, kalın veya ince bir alt çizgi oluşturarak genişliği 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 etikette size niteliğini ve piksel cinsinden istenen genişliğe eşit sayısal bir değer kullanırız. Numara, size özelliğinden ve "=" sembolünden sonra tırnak içinde belirtilir.

Bu nedenle, 15 piksel genişliğinde bir satır oluşturmamız gerekirse, şu etiketi oluşturmamız gerekir: hr size = "15".

1. Renk... Ayrıca bağımsız bir gösterge olarak ayarlanır. Bunu değiştirmek için color niteliğini renk adıyla birlikte kod şeklinde veya İngilizce olarak kullanın. Renk, "=" sembolünden sonra tırnak içinde belirtilir.

Böylece, standart bir beyaz çizgi için etiket iki şekilde yazılabilir: hr color = "#FFFFFF" veya hr color = "white"

Siyah, # 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 elementlerle birlikte kullanılabilir. Bunu kullanan standart bir satır için bir etiket şöyle görünecektir: hr noshade

Videoyu kullanarak yatay bir çizgi oluşturun

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

Yatay çizginin gerekli boyutlarını belirledikten sonra, site sayfalarını bilgiler yapılandırılmış ve görsel olarak yetkin bir şekilde çerçevelenecek şekilde tasarlayabilirsiniz. Bu, ziyaretçilerin sunulan bilgileri daha kolay algılamasına ve sitenizi diğerlerinden öne çıkarmasına yardımcı olur.

Tüm okuyuculara selamlar. Zaman zaman sihirbazlar, HTML veya CSS kullanarak yatay veya dikey bir çizginin nasıl oluşturulacağı sorunuyla karşı karşıya kalırlar. Bugün size söyleyeceğim şey bu.

CSS'deki çizgiler

Çizgi çizmenin birkaç yolu vardır. Böyle bir yol CSS kullanmaktır. Daha doğrusu, Border yardımıyla. Bir örnek alalım.

Ve sonuç bu olacak.

CSS kullanarak yatay ve dikey çizgi.

CSS'deki çizgiler, Border deyimi 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 ayarlayabilirsiniz. Örneğin kenarlık: 5px katı # 000000; blok sınırları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, tam olarak hangi sınırların gerekli olduğunu ve her birinin hangi değere sahip olacağını yazmanız gerekir. Bunlar operatörlerdir:

• border-top - üst sınırın değerini ayarlar
• border-bottom - alt sınırın değerini ayarlar
• border-left - Sol sınırın değerini ayarlar
• border-right - Sağ sınırın değerini ayarlar.

HTML'de dikey ve yatay çizgi

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.

• Genişlik- çizgi genişliğinin değerini ayarlar.
• Renk- çizginin rengini ayarlar.
• hizala- hizalamayı sola, ortaya, sağa ayarlar
• Boy- çizgi genişliğinin değerini piksel olarak ayarlar.

hr etiketi ile dikey bir çizgi de belirleyebilirsiniz. Ancak bu durumda tekrar stillere başvurmanız gerekecek.

Bu durumda, dikey bir çizgi yüz piksel yüksekliğinde, bir piksel kalınlığında ve beş piksel girintili olarak çizilecektir.

Çözüm.

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

Peki, başka sorunuz varsa, yorumlarda onlara sorun.