[dokuwiki] Re: Different css for text elements

  • From: "Zen-Do.Ru" <admin@xxxxxxxxx>
  • To: "dokuwiki@xxxxxxxxxxxxx" <dokuwiki@xxxxxxxxxxxxx>
  • Date: Sun, 7 Jan 2018 23:23:01 +0300

07.01.2018 21:44, Dennis Heuer wrote:

This here works better than expected: <div style="margin: > 2cm;text-decoration: blue dotted underline;"> // p rules all over >
div, giving a black line! <p style="margin: 2cm;text-decoration: > underline;">Text!</p> </div>
Yes, but there is logic behind all that. For the explanation, see

https://www.w3schools.com/cssref/pr_text_text-decoration.asp

: "The text-decoration property is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style".

So if we set only a part of those properties, the rest of them are assumed to be the defaults:

text-decoration-line: none;
text-decoration-style: solid;
text-decoration-color: black;

Setting only "underline", we assign "black solid underline" to "P".
Thus the black solid underline overwrites the underline set for "DIV".
If we try "overline" instead, we see both those lines: dotted blue underline set for "DIV" + black overline set for "P".

Here the config "green" for p is ignored: > > <div style="margin: 2cm;text-decoration: blue dotted underline;">
<p > style="margin: 2cm;text-decoration: green;">Text!</p> </div>
For the text in "P" we actually set "none solid green".
As it's "none" for text-decoration-line, it means no decoration line for "P", so it doesn't replace the existing decoration for "DIV".

<div style="margin: 2cm;text-decoration:blue dotted underline;"> <p > style="margin: 2cm;text-decoration:green wavy underline;">Text!</p> >
</div> > > Well, so it is! Have to live with it!
Indeed. :)
But after some experimenting we can get good results.
Cheers!
--
DokuWiki mailing list - more info at
http://www.dokuwiki.org/mailinglist

Other related posts: