Proprietà di classificazione di CSS

Dovete specificare esplicitamente le proprietà dell'esposizione di un elemento o il browser non saprà visualizzarlo per formattare i documenti di XML.

bianco-spazio

Per specificare come lo spazio bianco nel codice di un elemento dovrebbe essere trattato, l'attributo dello bianco-spazio è usato.

Prende uno di tre valori possibili:

1.normal - ignorare tutti gli spazi supplementari e tutti i ritorni a margine
spazi supplementari di Al della conserva 2.pre- e tutti i ritorni a margine
3.nowrap - non rompere l'elemento attraverso le linee

Codice di CSS di bianco-spazio “normale„

<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à

Per specificare se un elemento è visibile o nascosto, questa proprietà è usata.

Ciò significa se un elemento rivela nel documento o non, voi può specificare. Ciò significa che potete generare gli elementi nascosti che diventano visibili quando determinati eventi accadono.

Il codice di CSS con visibilità si è regolato “al nascosto a„.

CSS Code with visibility set to "hidden".

<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>

Visibile è il difetto. Questa proprietà è più comunemente usata con il cliente-lato che scripting per il HTML dinamico.

esposizione

Per specificare come le esposizioni dell'elemento, la proprietà dell'esposizione è usata. Definisce, in un senso, che genere di elemento è. Realmente non vi pensate che sappiate questo funziona ancora, soltanto quello che.

Prende uno di seguenti valori:

nessun - non visualizzare

blocco

in linea

lista-articolo

run-in - funzionamenti dell'articolo nel seguente soddisfare, come un'intestazione in-linea

compatto

indicatore

tabella

in linea-tabella

tabella-fila-gruppo

tabella-intestazione-gruppo

tabella-footer-gruppo

tabella-fila

tabella-colonna-gruppo

colonna della tabella

tabella-cellula

tabella-titolo

Per le pagine dinamiche del HTML, l'unico posto attualmente vedrete questa proprietà usata in un XHMTL per documentare come menu sprofondare (o copertura superiore), in cui la proprietà lanci-flopped fra nessun e (solitamente) il blocco.

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

Qui è una tabella 2x2. Senza l'uso delle modifiche della tabella, è fatta. Alcune divisioni è usata, modificato con l'esposizione: proprietà. Se il vostro browser non sostiene usando l'esposizione allora non potete vedere una griglia 2x2 delle caselle di tabella, allora: proprietà questo senso con XHTML. Si noti che questa non è una pratica suggerita, ma marche per un buon esempio.

<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>

Il seguente esempio che genera un menu orizzontale

Codice di 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 tabella follwing descrive le proprietà di classificazione:

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