İk elemanın rengini değiştirme

hrCSS kullanarak etiketimin rengini değiştirmek istiyorum . Aşağıda denediğim kod işe yaramıyor:

hr {
    color: #123455;
}

Eğer niyetiniz etiket tarafından üretilen çizginin rengini değiştirmekse, border-colorbunun yerine kullanmanız gerektiğini düşünüyorum .color<hr>

Bununla birlikte, yorumlarda, çizginizin boyutunu değiştirirseniz, kenarlığın stillerde belirttiğiniz kadar geniş olacağı ve çizginin varsayılan renkle (bu, süresi). Yani bu durumda da belirtmeniz gerekecek gibi görünüyor background-color(cevabında @Ibu'nun önerdiği gibi).

Varsayılan stil sayfasındaki HTML 5 Boilerplate projesi aşağıdaki kuralı belirtir :

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Yakın zamanda SitePoint tarafından yayınlanan “12 Az Bilinen CSS Gerçekleri” başlıklı makalede , belirttiğiniz takdirde üst öğeye <hr>ayarlanabileceğinden bahsedilmektedir .border-colorcolorhr { border-color: inherit }

• border-colorChrome ve Safari'de çalışır .
• background-color Firefox ve Opera'da çalışıyor.
• colorIE7 + 'da çalışır .

Bunun yararlı olabileceğini düşünüyorum. bu basit bir CSS seçiciydi.

hr { background-color: red; height: 1px; border: 0; }

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Bu şekilde yapılması gerektiğinde yüksekliği değiştirmenizi sağlar. İyi şanslar. Kaynak: İK'yi CSS ile Stilize Etme

Firefox, Opera, Internet Explorer, Chrome ve Safari'de test edildi.

hr {
    border-top: 1px solid red;
}

Keman'a bakın .

Çizgiyi farklı renkte yapmak için sadece renkli kenarlık yeterlidir.

hr {
    border-top: 1px solid #ccc;
}

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

Bu, Yatay Kuralı 1 piksel kalınlığında tutarken rengini de değiştirir

Bunun en etkili yaklaşım olduğuna inanıyorum:

<hr style="border-top: 1px solid #ccc; background: transparent;">

Veya tüm saat öğelerinde yapmayı tercih ederseniz bunu CSS'nize yazın:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

sa
{
renk: # f00;
arka plan rengi: # f00;
yükseklik: 5px;
}

hr
{
  background-color: #123455;
}

arka plan değiştirmeye çalışmanız gereken arka plan

Kenarlıkların rengiyle de çalışabilirsiniz. Bu konuda crossbrowser sorunları olduğunu düşünüyorum emin değilim. farklı tarayıcılarda test etmelisiniz

u css sınıfını kullanırsanız tüm 'hr' etiketleri tarafından alınır, ancak belirli bir 'hr' için u istiyorsanız aşağıdaki kodu kullanın, yani, satır içi css

<hr style="color:#99CC99" />

Chrome'da çalışmıyorsa aşağıdaki kodu deneyin:

<hr color="red" />

Buradaki tüm cevapları okuduktan ve açıklanan karmaşıklığı gördükten sonra, İK ile deney yapmak için küçük bir sapmaya başladım. Ve sonuç, yazdığınız maymunsu CSS'nin çoğunu atabileceğiniz, bu küçük astarı okuyabileceğiniz ve sadece bu iki saf CSS satırını kullanabileceğinizdir:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

Yani TÜM stil için HRS gerekir.

• Çapraz tarayıcı, cihazlar arası, işletim sistemleri arası, çapraz İngilizce kanal, çapraz yaşlarda çalışır.
• Hayır "Bunun işe yarayacağını düşünüyorum ..." , "Safari / IE'yi aklınızda tutmanız gerekiyor ..." vb.
• hiçbir ekstra css - hayır height, width, background-color, color, vb dahil.

Sadece kurşun geçirmez renkli HR'ler. İşte bu kadar basit ^TM .

Bonus: İK'ya biraz yükseklik kazandırmak Hiçin border-widthas değerini ayarlayın H/2.

Bazı tarayıcılar colorözniteliği, bazıları ise background-colorözniteliği kullanır . Güvende olmak:

hr{
    color: #color;
    background-color: #color;
}

IE, Firefox ve Chrome Mayıs 2015'te test yapıyorum ve bu en iyi mevcut sürümlerle çalışıyor. İK'yı merkezler ve% 70 genişliğinde yapar:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

Kenarlık genişliğini 0 olarak ayarlamanız gerekir; Firefox ve Chrome'da iyi çalışır.

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

<hr />
This is a test
<hr />

Çok basit ve benim favorim.

<hr style="background-color: #dd3333" />

Sen gibi bootstrap bg sınıfı ekleyebilirsiniz

<hr class="bg-light" />

Yorum yapmak için bir üne sahip olmadığım için, burada birkaç fikir vereceğim.

css değişken yüksekliği istiyorsanız, tüm kenarlıkları çıkarın ve bir arka plan rengi verin.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

basitçe işe yarayacağını bildiğiniz bir stil istiyorsanız (örnek: çoğu e-posta istemcisi için :: before öğesindeki kenarlığı değiştirmek veya

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

Her iki yönde de, bir genişlik ayarlarsanız, her zaman boyutuna sahip olacaktır.

Bunun için ayarlamaya gerek yok display:block;.

Tamamen güvenli olmak için, her ikisini de karıştırabilirsiniz, çünkü bazı tarayıcılar aşağıdakilerle karıştırılabilir height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

Bu yöntemle en az 2 piksel yüksekliğe sahip olacağından emin olabilirsiniz.

Bu bir çizgi daha, ama güvenlik emniyettir.

Hemen hemen her şeyle uyumlu olmak için kullanmanız gereken yöntem budur.

Unutmayın: Gmail yalnızca satır içi css algılar ve bazı e-posta istemcileri arka planları veya sınırları desteklemeyebilir. Biri başarısız olursa, yine de 1 piksellik bir satırınız olacaktır. Hiç yoktan iyidir.

En kötü durumlarda, eklemeyi deneyebilirsiniz color:blue;.

En kötü durumlarda, bir <font color="blue"></font>etiket kullanmayı deneyebilir ve değerli <hr/>etiketinizi içine koyabilirsiniz . <font></font>Etiket rengini devralır .

Bu yöntemle, sen OLACAK böyle yapmak istiyorum: <hr width="50" align="left"/>.

Misal:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

Kontrol etmeniz için bir link: http://jsfiddle.net/sna2D/

Farklı renkte bir çizgi yapmak için CSS kullanabilirsiniz, örnek şöyle olacaktır:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

bu kod dikey gri çizgi görüntüleyecektir.

HTML, CSS ve Java'da yeniyim ama tüm tarayıcılarda benim için çalışan yolumu denedim. Bazı tarayıcılarda çalışmayan CSS yerine JS kullandım .

Öncelikle id="myHR"İK elementine verdim ve Java Script'te kullandım.
İşte Kod.

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

1. Kod eski IE için çalışır

2. Birçok Renk İçin Denendi

   <hr color="black">
   <hr color="blue">

Yatay kuralları değiştirmek için yazı tipi renklerini kullanmak onları daha esnek ve kullanımı kolay hale getirir.

colorAşağıdaki ihtiyaçlar renk devralma izin hr en eklenecek böylece mülkiyet, varsayılan olarak miras değildir:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

Bunu yapabilirsin:

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

<hr noshade>Etiketi verebilir ve css dosyanıza gidebilir ve şunları ekleyebilirsiniz:

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

Genel bir kural olarak, yatay bir çizginin rengini CSS ile başka bir şey gibi ayarlayamazsınız. Her şeyden önce, Internet Explorer'ın şu şekilde okumak için CSS'nizdeki renge ihtiyacı vardır:

“Renk: # 123455”

Ancak Opera ve Mozilla, şu şekilde okumak için CSS'nizdeki renge ihtiyaç duyar:

“Arka plan rengi: # 123455”

Dolayısıyla, her iki seçeneği de CSS'nize eklemeniz gerekir.

Ardından, yatay çizgiye bazı boyutlar vermeniz gerekir veya varsayılan olarak tarayıcınız tarafından ayarlanan standart yükseklik, genişlik ve renk ayarlanır. İşte mavi yatay çizgiyi elde etmek için CSS'nizin nasıl görünmesi gerektiğine dair örnek bir kod.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

Veya stili yatay bir çizgi eklediğinizde doğrudan HTML sayfanıza ekleyebilirsiniz, örneğin:

<hr style="background:#123455" />

Bu yardımcı olur umarım.

Her şekilde bahis oynadım:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }