Geek Answers Handbook

Failed to get multiple values ​​for text design

Something strange - I'm trying to get a simpel HTML file to show both underline and overline (but this also happens by the "line-through" value) for the text (writing this to a separate CSS file), but in any browser, which I check, it does not work (I installed Chrome, Firefox, Opera, IE and Safari - all of them are probably the latest versions, so nothing like Chrome version 6 ...).

When I delete other values ​​and specify only one - it works, but when I add another - all the effects of the text style disappear.

Does anyone know of a problem with this style?

early.

ps I put these values ​​on one line, for example.

h1, h2 { text-decoration: underline, overline, line-through; }
+7
source share
3 answers

You need to separate them with a space:

 h1, h2 { text-decoration: underline overline line-through; } 
 <h1> FUNNY </h1>
+10
source

Consistent with nadavage: I also played around and found out: Commas in CSS are designed if the font or value is not supported. Therefore, if I write:

  font-family: 'Lorem Ipsum', cursive;

If “Lorem Ipsum” is not a registered font name in the OS or imported, it will display the “cursive” font supported on most browsers. In your case, to do everything at once, you put space, but some properties that take several parameters, for example

  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);

only one value will be expected for each parameter. Most browsers can decrypt which values ​​for which parameter and what to use.

Hope this helps!

0
source

I have never seen a specification for text design that takes multiple values. See here http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration (learn something new!)

You can implement it differently by following these steps.

HTML

 <p>Some text here and then <span class="underover">underline and overline</span> and some more text here.</p>

CSS

 .underover { border-width: 1px 0; border-style: solid; border-color: blue blue red red; }

See this code for an example: http://codepen.io/keithwyland/pen/Eagbz

-2
source

More articles:


All Articles