CSS classes for typography
Réduire la table des matières
Développer la table des matières

WinJS CSS classes for typography

[This documentation is preliminary and is subject to change.]

Windows Library for JavaScript provides a set of typographic classes that you can use to style your text.

Using Windows Library for JavaScript typography classes

To use a typographic class, set the element's class attribute to the name of the class. This example applies the win-type-small class to a div element.


<div class="win-type-small">Some small text</div>

You can assign multiple classes to an element; just separate class names with a space. The next example applies the win-type-small and the win-type-ellipsis classes to the same element.


<div class="win-type-small win-type-ellipses">Some small text</div>

You can customize these typographic styles by creating your own CSS. Just be sure to include your CSS after you include the Windows Library for JavaScript style sheets, or the Windows Library for JavaScript style sheets will overwrite your customizations. This example adds a border to the win-type-small class.


/* Add a border to the win-type-small style. */
.win-type-small {
    border: 1px solid gray; 
}

Class list

Here's a list of the typographic CSS classes that Windows Library for JavaScript provides.

CSS classDescription

win-type-ellipses

Defines a style that uses ellipses ("...") to indicate when text content has overflowed its layout area.

win-type-interactive

Adds hover and active states to an element so that it mimics a link.

win-type-xx-large

Makes text very large, the largest size available. This style is useful for first-level headings (h1).

win-type-x-large

Makes text extra-large. This style is useful for second-level heading (h2).

win-type-large

Makes text large. This style is useful for third-level headings (h3).

win-type-medium

Makes text medium-sized. This style is useful for fourth-level headings (h4).

win-type-small

Makes text small. This style is useful for body text, fifth-level headings (h5), and legends.

win-type-x-small

Makes text extra-small. This style is useful for captions and sixth-level headings (h6).

 

Related topics

Quickstart: Styling controls

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2017 Microsoft