HTML Metninin Altına Noktalı Alt Çizgi Ekleme

97

Metnin altındaki satırın standart altı çizili değil noktalı olması için html metninin altını nasıl çizersiniz? Tercihen bunu ayrı bir CSS dosyası kullanmadan yapmak istiyorum. Html'de acemiyim.

html underline

— parap
kaynak

13

Neden CSS kullanmıyorsunuz? Belki sayfayı tek bir resim olarak oluşturup mspaint ile satırı ekleyin?

— epascarello

CSS olmadan yapılabileceğini sanmıyorum

— Cfreak

CSS kullanmak zorundasınız, ancak arka plan resimleri kullanılarak yapılabilir, kenarlık altı en iyi yaklaşım

— kingdomcreation

4

Ahbaplar. Sanırım "ayrı bir CSS dosyası kullanmadan" dedi, "CSS'siz" değil. Yeni başlayanlara tapın.

— Stefan Reich

138

CSS olmadan imkansızdır. Aslında <u>etiket, text-decoration:underlinetarayıcının yerleşik CSS'si ile metne basitçe eklenir .

Yapabilecekleriniz şunlardır:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

— Alfred Xing
kaynak

Senin içinde <head>eleman, bir ekleme <style>etiketi (cevabımı kaydetmiştiniz)

— Alfred Xing

2

dottedyerine deneyebilirsinizdashed

— Brian Burns

Güzel çözüm ve mümkün. Bana js kodlama yapmayın;)

— Ahmet Can Güven

Çok satırlı metin desteği ile yanıt burada stackoverflow.com/a/4365458/1078641

— electroid

43

Aşağıdaki CSS kodlarını kullanın ...

text-decoration:underline;
text-decoration-style: dotted;

— Shakeel Ahmed
kaynak

4

Kabul edilen cevap bu olmalıdır. Kutu modelinden sonra noktalı kullanarak metnin borderdışına yerleştirilecek paddingve bu nedenle metinden uzaklaşacaktır.

— Ryan Walker

3

Kısa bir sözdizimi vardır: text-decoration: underline #000 dotted;burada ilk öznitelik çizgi, ikincisi renk ve üçüncüsü stildir.

— Sos Sargsyan

İyileştirme için teşekkürler Sos

— Shakeel Ahmed

15

CSS olmadan, temelde bir resim etiketi kullanmak zorunda kalırsınız. Temel olarak metnin bir görüntüsünü oluşturun ve alt çizgiyi ekleyin. Bu, temel olarak sayfanızın bir ekran okuyucu için faydasız olduğu anlamına gelir.

CSS ile çok basit.

HTML:

<u class="dotted">I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Çalışan Örnek

Örnek sayfa

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>

— Epascarello
kaynak

11

HTML5 öğesi noktalı alt çizgi verebilir, böylece alttaki metinde normal altı çizgi yerine noktalı çizgi olur. Ve title niteliği, imleci öğenin üzerine getirdiklerinde kullanıcı için bir araç ipucu oluşturur:

NOT: Noktalı kenarlık / alt çizgi varsayılan olarak Firefox ve Opera'da gösterilir, ancak IE8, Safari ve Chrome'un bir CSS satırına ihtiyacı vardır:

<abbr title="Hyper Text Markup Language">HTML</abbr>

— Fatima Waheed
kaynak

Bu doğru cevap. Kısa ve CSS içermez. Teşekkürler.

— Saeed Ahadian

HTML5 ile bu gerçekten kabul edilen cevap olmalıdır.

— perry

4

İçerikte 1'den fazla satır varsa, alt kenarlık eklemek yardımcı olmaz. Bu durumda kullanmanız gerekecek,

text-decoration: underline;
text-decoration-style: dotted;

Metin ve satır arasında daha fazla nefes almak istiyorsanız, şunu kullanın:

text-underline-position: under;

— Darshana Gunawardana
kaynak

3

Cevabı @epascarello tarafından yeniden biçimlendirildi :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Snippet'i genişlet

— anatoly techtonik
kaynak

0

dottedSeçeneği ile kenarlık altını kullanabilirsiniz .

border-bottom: 1px dotted #807f80;

— Neel
kaynak

0

Bu yöntemi deneyebilirsiniz:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

text-underline-position: under;Siz olmadan yine de noktalı alt çizginin olacağını, ancak bu özelliğin ona daha fazla nefes alma alanı sağlayacağını lütfen unutmayın .

Bu, ayrı bir CSS dosyası veya etiketi kullanmak yerine, satır içi stil kullanarak her şeyi bir HTML dosyasına gömmek istediğinizi varsayar.

— Mona Jalal
kaynak

-2

CSS olmadan imkansız değil. Örneğin bir liste öğesi olarak:

<li style="border-bottom: 1px dashed"><!--content --></li>

— Davington III
kaynak

6

CSS olmadan imkansızdır. styleNitelik basitçe bir elemana doğrudan CSS özelliklerini uygulamak bir yoludur. Stil niteliğiyle ilgili MDN belgelerine bakın .

— mirichan

CSS'yi bu şekilde eklemek, html stili hakkında etkili bir şekilde düşünmenin bir yoludur. Elbette böyle bir şeyin olmadığını iddia edebilirsiniz, ancak tarif etmesi kolay bir yöntem için bu olası bir çözümdür.

— Davington III

Yine de CSS olsa da, verilen gerçek tercih ayrı bir dosyaya sahip olmamaktı. Bu kısıtlamayla sorunu çözmenin en iyi yolu <style>. Satır içi stiller oldukça idareli kullanılmalıdır.

— mirichan

O yazıyı oluşturduğumda bunun nedeni satır içi stilleri kullanmak zorunda olmamdı. Başkalarına bu olasılığı düşünmemiş olmaları durumunda, bu gerçekten savaş ve barış için uygun bir konu değil ... Muhtemelen ihtiyaç duyduklarını buldular ve önerilerimiz onlar ve olabilecek diğerleri için oradadır. onlara ihtiyacım var, işten gönderi paylaştığımda, bir öneri "bu şekilde yapmalısın" değil, öneriyle ilgili zaten açık olan bir şeye işaret eden birini dikkate almıyorum, bu yüzden evet soğuk bir hap al kardeşim :)

— Davington III

1

Niyetimi karıştırıyorsun. Sorulan soru ile ilgili teknik bir gözlem yapıyordum. Seni çağırmak gibi bir niyetim yoktu ve bu şekilde karşımıza çıktığı için özür dilerim.

— mirichan