diff options
Diffstat (limited to 'documentation/themes/themes-css.asciidoc')
| -rw-r--r-- | documentation/themes/themes-css.asciidoc | 53 |
1 files changed, 21 insertions, 32 deletions
diff --git a/documentation/themes/themes-css.asciidoc b/documentation/themes/themes-css.asciidoc index 45229303dc..d7ba87c700 100644 --- a/documentation/themes/themes-css.asciidoc +++ b/documentation/themes/themes-css.asciidoc @@ -9,7 +9,6 @@ layout: page ((("CSS", "introduction", id="term.themes.css", range="startofrange"))) - Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with @@ -58,8 +57,8 @@ even though they use somewhat different elements to draw the user interface. The HTML elements that will be styled later by matching CSS rules are emphasized above. -The [literal]#++<link>++# element in the HTML header defines the used CSS -stylesheet. The definition is automatically generated by Vaadin in the HTML page +The [elementname]#link# element in the HTML header defines the CSS stylesheet. +The definition is automatically generated by Vaadin in the HTML page that loads the UI of the application. A stylesheet can also be embedded in the HTML document itself, as is done when optimizing their loading in Vaadin TouchKit, for example. @@ -77,25 +76,23 @@ value, separated with a colon. A property statement ends with a semicolon. Let us look at an example that matches certain elements in the simple HTML document given in the previous section: - [source, css] ---- -p, td { +p, td { color: blue; } -td { +td { background: yellow; font-weight: bold; } ---- The [literal]#++p++# and [literal]#++td++# are element type selectors that match -with [literal]#++<p>++# and [literal]#++<td>++# elements in HTML, respectively. +with [elementname]#p# and [elementname]#td# elements in HTML, respectively. The first rule matches with both elements, while the second matches only with -[literal]#++<td>++# elements. Let us assume that you have saved the above style -sheet with the name [filename]#mystylesheet.css# and consider the following HTML -file located in the same folder. +[elementname]#td# elements. +Let us assume that you have saved the above style sheet with the name [filename]#mystylesheet.css# and consider the following HTML file located in the same folder. [[figure.themes.basic.1]] .Simple Styling by Element Type @@ -108,7 +105,6 @@ CSS has __inheritance__ where contained elements inherit the properties of their parent elements. For example, let us change the above example and define it instead as follows: - [source, css] ---- table { @@ -117,27 +113,25 @@ table { } ---- -All elements contained in the [literal]#++<table>++# element would have the same -properties. For example, the text in the contained [literal]#++<td>++# elements -would be in blue color. +All elements contained in the [elementname]#table# element would have the same properties. +For example, the text in the contained [elementname]#td# elements would be in blue color. [[themes.css.basics.element-types]] === HTML Element Types HTML has a number of element types, each of which accepts a specific set of -properties. The [literal]#++<div>++# elements are generic elements that can be +properties. The [elementname]#div# elements are generic elements that can be used to create almost any layout and formatting that can be created with a -specific HTML element type. Vaadin uses [literal]#++<div>++# elements +specific HTML element type. Vaadin uses [elementname]#div# elements extensively to draw the UI, especially in layout components. -((("Google Web Toolkit", -"themeing"))) +((("Google Web Toolkit", "themeing"))) Matching elements by their type as shown above is, however, rarely if ever used in style sheets for Vaadin applications. We used it above, because it is the normal way in regular HTML documents that use the various HTML elements for formatting text, but it is not applicable in Vaadin UIs that consist mostly of -[literal]#++<div>++# elements. Instead, you need to match by element class, as +[elementname]#div# elements. Instead, you need to match by element class, as described next. @@ -169,6 +163,7 @@ follows: </body> </html> ---- + The class attributes of HTML elements can be matched in CSS rules with a selector notation where the class name is written after a period following the element name. This gives us full control of matching elements by their type and @@ -217,11 +212,9 @@ image::img/themes-css-match-class-3.png[] To ensure future compatibility, we recommend that you use only matching based on the classes and __do not__ match for specific HTML element types in CSS rules, because Vaadin may change the exact HTML implementation how components are drawn -in the future. For example, Vaadin earlier used [literal]#++<div>++# element to -draw [classname]#Button# components, but later it was changed to use the -special-purpose [literal]#++<button>++# element in HTML. Because of using the -[literal]#++v-button++# style class in the CSS rules for the button, styling it -has changed only very little. +in the future. +For example, Vaadin earlier used [elementname]#div# element to draw [classname]#Button# components, but later it was changed to use the special-purpose [elementname]#button# element in HTML. +Because of using the [literal]#++v-button++# style class in the CSS rules for the button, styling it has changed only very little. [[themes.css.matching-by-descendants]] @@ -243,10 +236,8 @@ consider the following HTML fragment: </table> </body> ---- -Matching by the class name [literal]#++.mytext++# alone would match both the -[literal]#++<p>++# and [literal]#++<td>++# elements. If we want to match only -the table cell, we could use the following selector: - +Matching by the class name [literal]#++.mytext++# alone would match both the [elementname]#p# and [elementname]#td# elements. +If we want to match only the table cell, we could use the following selector: [source, css] ---- @@ -375,7 +366,7 @@ public class HelloWorld extends UI { // Label has v-label style content.addComponent(new Label("Hello World!")); - + // Button has v-button style content.addComponent(new Button("Push Me!", new Button.ClickListener() { @@ -444,7 +435,7 @@ elements. The theme is actually a Sass theme. .v-ui { background: white; } - + /* All labels have white text on black background */ .v-label { background: black; @@ -502,5 +493,3 @@ Compatibility issues are detailed in various CSS handbooks. (((range="endofrange", startref="term.themes.css"))) - - |