Propriétés de classification de CSS

Vous devez indiquer les propriétés d'affichage d'un élément explicitement ou le navigateur ne saura pas le montrer pour composer des documents de XML.

le blanc-espace

Pour indiquer comment l'espace blanc dans le code d'un élément devrait être traité, l'attribut du blanc-espace est employé.

Il prend une de trois valeurs possibles :

1.normal - ignorer tous les espaces supplémentaires et tous les retours chariot
les espaces supplémentaires d'Al de la conserve 2.pre- et tous retours chariot
3.nowrap - ne pas casser l'élément à travers des lignes

Code de CSS du blanc-espace « normal »

<p style="white-space: normal;">
Duis autem vel eum iriure dolor
in hendrerit in vulputate velit
esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis.
</p>

visibilité

Pour indiquer si un élément est évident ou caché, cette propriété est employée.

Ceci signifie si un élément apparaît dans le document ou pas, vous peut indiquer. Ceci signifie que vous pouvez créer les éléments cachés qui deviennent évidents quand certains événements se produisent.

Le code de CSS avec la visibilité a placé à « caché ».

<p style="visibility: hidden;">
Duis autem vel eum iriure dolor
in hendrerit in vulputate velit
esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis.
</p>

Évident est le défaut. Cette propriété est la plus utilisée généralement avec le client-côté scripting pour le HTML dynamique.

affichage

Pour indiquer comment des affichages d'un élément, la propriété d'affichage est employés. Elle définit, dans un sens, quel genre d'élément c'est. On ne s'attend pas à ce que vraiment vous sachiez ceci fonctionne encore, simplement cela qu'il.

Il prend une des valeurs suivantes :

aucun - ne pas montrer

bloc

en ligne

liste-article

rodage - courses d'article dans le contenu suivant, comme un titre intégré

contrat

marqueur

table

en ligne-table

table-rangée-groupe

table-en-tête-groupe

table-titre de bas de page-groupe

table-rangée

table-colonne-groupe

colonne de table

table-cellule

table-légende

Pour les pages dynamiques de HTML, le seul endroit vous verrez actuellement cette propriété employée dans un XHMTL pour documenter en tant que menus s'effondrer (ou bloc supérieur), où la propriété renverser-est effondue entre aucun et (habituellement) le bloc.

<h3 style="display: run-in;">Example:</h3> <h4 style="float: left;">Example:</h4>

Voici une table 2x2. Sans utilisation des étiquettes de table, elle est faite. Quelques divisions est employées, modifié avec l'affichage : propriété. Si votre navigateur ne soutient pas en utilisant l'affichage puis vous ne pouvez pas voir une grille 2x2 des cellules de table, puis : propriété cette manière avec XHTML. Noter que ce n'est pas une pratique recommandée, mais des marques pour un bon exemple.

<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Here is a 2x2 table.
</div>
<div style="display: table-cell;">
It is made without the use of table tags. ...
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">
If you don't see a 2x2 grid of table cells, ...
</div>
<div style="display: table-cell;">
Note that this is not a recommended practice, ...
</div>

L'exemple suivant créant un menu horizontal

Code de CSS

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the the a element float to the left and ul element .
In inline elements ,the li elements will be displayed(no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
To make it more fancy,we add some colors and borders .
</p>

</body>
</html>

La table follwing décrivent les propriétés de classification :

Property	Description	values
clear	Sets the sides of an element where other floating elements are not allowed	left right both none
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
float	Sets where an image or a text will appear in another element	left right none
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed
visibility	Sets if an element should be visible or invisible	visible hidden collapse