Amb aquest article iniciem un nou tipus de contingut a GNULinux.cat: apunts relacionats amb programació PHP, HTML(5), CSS(3) i Javascript. La qüestió és que totes aquestes eines també són lliures i són un camp que en general no hem tingut en compte.
A l’hora de dissenyar mitjançant CSS2 l’estil d’una taula, ens ha estat impossible fins ara definir un estil «automàtic» que controlara el color de les files d’una taula segons siguen parells o senars. O bé havíem de definir a cada fila l’estil que volíem aplicar o bé havíem de fer servir javascript. Amb CSS3 res d’això ja no és necessari: es poden definir els estils de les files parells i senars de la taula simplement fent servir un codi com el següent:
[sourcecode language=”css”]
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
[/sourcecode]
Amb aquest css i una taula com la següent:
[sourcecode language=”html”]
<table>
<th><strong>Empresa</strong></th>
<th><strong>Enviaments</strong></th>
<tr>
<td>Voluntaris</td>
<td>101823</td>
</tr>
<tr>
<td>Desconegut</td>
<td>73558</td>
</tr>
</tr>
<tr>
<td>Red Hat</td>
<td>70790</td>
</tr>
<tr>
<td>Novell</td>
<td>45349</td>
</tr>
</table>
[/sourcecode]
Obtenim això (tingueu en compte que la taula té altres estils propis, simplement vos heu de fixar en el fet que el color de les files és diferent sense haver aplicat cap estil a dins de la taula):
| Empresa | Enviaments |
|---|---|
| Voluntaris | 101823 |
| Desconegut | 73558 |
| Red Hat | 70790 |
| Novell | 45349 |
Per cert, hem activat l’extensió per al WordPress SyntaxHighlighter Evolved per posar el codi com ho veieu. Si vos interessa, un altre dia mostrarem com instal·lar-la i fer-la servir.
- Vist a davidwalsh
8 comments
Skip to comment form
Estic flipant. Ací havia dos comentaris que han desaparegut…
A mi l’extensió SyntaxHighlighter Evolved em va donar problemes, especialment de no reconèixer determinades marques… i finalment vaig canviar-la per la WP-Syntax, més simple i que sempre m’ha funcionat bé.
Xavier, és concretament l’extensió «SyntaxHighlighter Evolved» la que no et funcionava? Ho dic perquè existeix una altra SyntaxHighlighter que no és aquesta i que a mi m’ha donat problemes perquè no reconeix bé els salts de línia, amb la qual cosa el resultat era prou lleig. Amb l’evolved, això ja va bé!
Ostres genial les millores en el CSS3, i genial aquesta línia nova, ja que el desenvolupament web sempre m’ha agradat molt 🙂 De fet, una altra característica interessant del CSS és l’atribut font-face, que permet defeinir tipus de lletra, i sinó el té, l’ordinador se’l descarrega.
Per cert Pau, no és gaire important però t’has deixat de tancar l’etiqueta tbody 🙂
Jo tinc curiositat per saber com heu fet que en passar el ratolí per sobre ells enllaços doni l’efecte que “surten” de la pantalla.
Això també és css3. Faré un altre article… Per cert, l’efecte amb el Chrome és brutal (amb el Firefox no es veu tot l’efecte que hi ha implementat).
Tens raó, no m’hi havia fixat ja que uso el firefox normalment. Salut!!
Amb el Firefox 4.0 beta també es veu molt bé!