![]() |
![]() |
![]() |
![]() |
![]() |
The following properties can be inherited whether explicitly (inherit keyword) or implicitly (inherited property).
For all properties except line-height where the specified number is inherited (which is the correct behavior), the inherited value is the actual value not the computed value.
Property | Value | Restrictions |
background-color | color|transparent |inherit |
- |
border | width [style color?]? |inherit |
Order is strictly width, style, color |
border-color | side_value{1,4} | - |
border-bottom-color | color|transparent inherit |
- |
border-left-color | " | - |
border-right-color | " | - |
border-top-color | " | - |
border-style | none|dotted|dashed |solid|double|groove |ridge|inset|outset |
No hidden |
border-width | thin|thick|medium |length|inherit |
- |
color | color|inherit | - |
font | [style weight?]? size family |inherit |
Order is strictly style then weight |
font-family | [[name|generic]
,]* [name|generic] |inherit |
Anything other than serif sans-serif, monospace is ignored |
font-size | medium|small|large |x-small|x-large |xx-small|xx-large |smaller|larger |length|percentage |inherit |
- |
font-style | normal|italic|oblique |inherit |
italic and oblique are aliases |
font-weight | normal|bold|inherit | No N00, bolder, lighter |
line-height | normal|number|inherit | No length, percentage |
margin | side_value{1,4} | - |
margin-bottom | length|auto|inherit | No percentage |
margin-left | " | - |
margin-right | " | - |
margin-top | " | - |
padding | side_value{1,4} | - |
padding-bottom | length|inherit | No percentage |
padding-left | " | - |
padding-right | " | - |
padding-top | " | - |
text-align | left|right|center |inherit |
No justify |
text-decoration | none|underline|overline |line-through|inherit |
No blink |
text-indent | length|inherit | No percentage |
vertical-align | baseline|middle|sub |super|text-top|top |text-bottom|bottom |inherit |
No length, percentage |
white-space | normal|pre|nowrap |inherit |
- |
The following properties cannot be inherited whether explicitly (inherit keyword) or implicitly (inherited property).
Property | Value | Restrictions |
border-spacing | length length? | - |
content | string|uri|attr(X) |open-quote|close-quote |no-open-quote |no-close-quote |counter(name) |counter(name, style) |counters(name, separ) |counters(name, separ, style) |disc|circle|square |see extensions |
Open-quote is char. "`", close-quote is char. "'", no-*-quote is ignored See restrictions about counters Counter styles are limited to: decimal, lower-alpha, lower-latin, upper-alpha, upper-latin, lower-roman, upper-roman |
display | none|inline|block |marker|table |inline-table |table-row-group |table-header-group |table-footer-group |table-row |table-column-group |table-column|table-cell |table-caption |inline-block|tree |
No list-item (use markers), run-in, compact |
height | length|auto | No percentage |
marker-offset | length|auto | No percentage |
width | length|auto | No percentage |
Example 1 (XHTML):
ol > li:before { display: marker; content: counter(n, decimal); font-weight: bold; }
In the previous example, the counter name is n (single letter 'n', any letter is OK) which specifies that the counter value is the rank of li within its parent element (an ol).
Example 2 (DocBook):
sect3 > title:before { content: counter(nnn-) " "; }
In the previous example, the counter name is nnn- (3 letters followed by a dash) which specifies that the counter segmented value must be built as follows:
The workaround is to manually ``refresh'' the view of the parent of such element using the Ctrl-L keyboard shortcut.
A dynamic property value is evaluated just before building the view corresponding to the subject of the selector:
XXE M1.3 has no built-in script language interpreter yet but even without, say a JavaScript interpreter, this feature is useful because it allows to use attr() property values outside content properties.
Example, XHTML th and td table-cell formatting heavily relies on this feature:
td, th { display: table-cell; text-align: eval(attr(align)); vertical-align: eval(attr(valign)); row-span: eval(attr(rowspan)); column-span: eval(attr(colspan)); border: 1 inset gray; padding: 2; }
When a script language interpreter will be integrated in XXE (expected in M2), this feature will allow the editor to fully support DocBook and XHTML tables by extracting cell property values from table meta-information tags such as colspec, spanspec, colgroup, column, etc.
Example (DocBook):
These extensions are supported to add generated column and row headers to arbitrary XML data displayed as a table.
For example, with these styles, the select, optgroup and option XHTML elements are displayed as a table with automatically generated column and row headers:
select { display: table; border: 1 solid black; padding: 2; border-spacing: 2; background-color: silver; } select:before { content: row(cell("Category", width, 20ex), cell("Choice #1"), cell("Choice #2"), cell("Choice #3"), font-weight, bold, color, olive, padding-top, 2, padding-right, 2, padding-bottom, 2, padding-left, 2, border-width, 1, border-style, solid); display: table-row-group; } optgroup { display: table-row; } optgroup:before { content: attr(label); } option { display: table-cell; border: 1 solid black; padding: 2; background-color: white; }
XHTML source:
<p><select> <optgroup label="Language"> <option>Java</option> <option>C++</option> <option>Perl</option> </optgroup> <optgroup label="Editor"> <option>Emacs</option> <option>Vi</option> <option>UltraEdit</option> </optgroup> <optgroup label="OS"> <option>Linux</option> <option>Windows</option> <option>Solaris</option> </optgroup> </select></p>
Rendered as:
Name must be one of the following identifiers: disc, circle, square, diamond, invisible (1x1 transparent image), right-target, left-target, filled-square, hollow-diamond, left-half-disc, right-half-disc, up, down, left, right, pop-up, pop-down, pop-left, pop-right, left-link, right-link.
URL or path of an image file. Only GIF, JPEG, PNG files will be displayed by XXE but this must not prevent you from using other formats if your backend processor supports them.
A relative URL or path is relative to the location of the document being edited and not to the current working directory.
Dimension of the image in pixels. A length may optionally be followed by a standard CSS unit such as px, in, cm, mm, pt, pc, em, ex.
A negative length is interpreted as a maximum size. This is useful to display images as thumbnails.
Use attr(name) to get the desired dimension from the value of attribute named name.
The name of the algorithm used to change the image size: smooth means high-quality/slow and default means low-quality/fast.
Example (XHTML):
img { content: image(attr(src), attr(width), attr(height)); }
Example 1, this content will not wrap at word boundaries even if the white-space property specifies to do so:
content: "Very long line of generated/replaced text content \ that will *not* wrap."; white-space: normal;
Example 2, this content will wrap at word boundaries:
content: paragraph("Very long line of generated/replaced text content \ that will wrap because the paragraph construct is used."); white-space: normal;
This construct is also useful to specify complex generated/replaced cell content. See below.
Syntax:
Example:
content: row(cell("Category", width, 20ex), cell("Choice #1"), cell("Choice #2"), cell("Choice #3"), font-weight, bold, color, olive, padding-top, 2, padding-right, 2, padding-bottom, 2, padding-left, 2, border-width, 1, border-style, solid);
prop_name, prop_value pairs may be used to specify the properties of a cell. Specifying such pairs at the row level is equivalent to specifying them for each cell contained in the row. Specifying such pairs at the rows level allows even more factoring.
Note that shorthand properties cannot be used there. Example: padding-top, padding-left, padding-bottom, padding-right must be used rather than the single shorthand property padding.
className is the name of a Java class which
implements the
interface
com.xmlmind.xmledit.styledview.ComponentFactory.
com.xmlmind.xmledit.styledview.AttrCheckBoxFactory is for now the only class that implements this interface. This class can be used to embed a boolean attribute editor in the styled view.
Example (APT):
verbatim:after { content: component("com.xmlmind.xmledit.css.AttrCheckBoxFactory", box, no, yes); display: block; color: olive; font: .83em sans-serif; text-align: center; margin-left: auto; margin-right: auto; }
which is rendered as: