Cap17 PDF

ca eítulo 16
El acceso igual pa r a todos , independientemente de sus

discapacidades , es un aspecto esencial . </p> O Capítulo 17: Listas y tablas
</body>
</html> A. Tipos de marcadores. . . . . . . . . . . . . . . . . . . 322
[.•lPJ6 ~' B.
{C'! Html5 y\Q.
Marcador gráfico . . . . . . . . . . . . . . . . . .. 323
c. Posición . . . .
325
+- C 1 ~ file:// / 0:/Ediciones%2( '{:¡ ~
-- - D. Declaración abreviada de una lista . . . . . . . . . . . . . 326
La potencia de la Web consiste en su
E. Espacio entre las celdas de las tablas . ... . . . ..
universalidad. El acceso igual para 326
todos, independientemente de sus
es Wl aspecto
F. Bordes de las tablas . . . . . . . . . . . . . . . . 328
discapacidades,
esencial. G. Celdas vacías en las tablas . . ... . .. 329
.. ~ 14!!!'1;;;;!1&,___ -,
H. Posición de la leyenda . . . . . . 33 1
Las propiedades width y height precisan muchos comentarios y, por este motivo, se
reservan para un estudio detallado en el capítulo Propiedades de caja - Anchura y altura .
HTMLS y CSS3
mi
Capítulo 17
Listas y_ tablas
A. Tipos de marcadores <li class= " style2 " >Circulo</li>

<li class= " style3 " >Cuadrado</li>
Esta propiedad permite determinar la apariencia del marcador o el estilo de numeración de </ul>
la lista. <ol>
<li class= " style4 " >Decimal</li>
list - style - type: disc ; Disco completo . <li class= " styleS " >Decimal</li>
circle ; Círculo vacío. <li class= " style6 " >Romanos en mayúsculas</li>
square ; Cuadrado. <li class= " style7 " >Romanos en minúsculas</li>
o bien <li class= " style8 " >Alfabeto en mayúsculas</li>
decimal ; Es decir 1 , 2, 3 , etc. <li class= " style9 " >Alfabeto en minúsculas</li>
decimal - leading - zero ; Es decir 01, 02, 03, etc. </ol>
upper - roman; Es decir 1, 11, 111 , etc. </body>
</html>
lower-roman ; Es decir i, ii , iii , etc .
upper - alpha; Es decir A, 8, C, etc.
lower-alpha ; Es decir a, b, e , etc. (j Ht miS - Mozilla Firefox [u;;;¡d :e Jw.:W
Archivo ,Editar Yer HiForial Marcadores Herram ienta !
W(u ~.~//D:/Edi c~~NL'~. .• ~ '"€);[ • ,

Comentarios
Los elementos disc, circle, square son idénticos a los de la etiqueta <ul> en Html5 .
[J Html5
Con estos, no obstante , la forma la determina por defecto el navegador.
xi. +J -
Ocurre del mismo modo con las numeraciones en la etiqueta <ol>, aunque ésta es única-
mente decimal. • Disco completo
o Círculo
Ejemplo
• Cuadrado
< !DOCTYPE html>
<html lang='' es'' > l . Decimal
<head> 02. Decimal
<title>Html5</title> IIL Romanos en mayúsculas
<meta charset= " iso-8859-l " > iv. Romanos en minúsculas
<style type= " text/css " > E. Alfabeto en mayúsculas
.stylel { list-style-type:disc ; } f. Alfabeto en minúsculas
. style2 { list-style-type:circle ; }
. style3 { list-style-type : square;}
"t>
.style4 { list-style - type:decimal;}
. styleS { list-style-type : decimal-leading-zero;}
~
. style6 { list-style-type : upper-roman;} ~ B. Marcador gráfico
~
.style7 { list-style-type : lower-roman ; }
.style8 { list-style-type:upper-alpha ; } ~ Esta propiedad de CSS permite reemplazar los marcadores por una imagen. Esto aporta un
.style9 { list-style-type : lower-alpha;} ~ poco de variedad respecto a los marcadores tradicionales de Html.
</style>
</head> ~ list- style - image: url(marcador_personalizado.gif) ;
<body> ~ none ;
<ul> ~
<li class= " stylel " >Disco completo</li> "'
Q
ll!l HTMLS y CSS3 Domine ~tándares de la; aplicaciones w;b

IW
Capítulo 17 Listas y tablas
Comentarios C. Posición
- El valor url (marcador personalizado. gif} indica la ruta (URL) de la imagen
que debe utilizarse como marcador. Es posible emplear una dirección relativa hacia una Esta propiedad determina la posición de la segunda línea (y las siguientes) de un elemento
de lista respecto al marcador o a la numeración.
imagen alojada en la misma carpeta (como es el caso de nuestro ejemplo) o bien una
dirección absoluta (con http:// ... ). list- sty le-position: outsi de; (valor por defecto)
Las imágenes pueden tener los formatos GIF, JPEG o PNG. inside ;
Ejemplo Comentarios
< !DOCTYPE html>
<html lang= " es"> - El valor ou tside coincide con la presentación clásica de las listas con todas las líneas
<head> del elemento con un pequeño desplazamiento respecto al marcador o al número.
<title>Html5</title> - El valor ins ide es una presentación algo particular que presenta un desplazamiento
<meta charset= " iso-8859 - 1 " > solamente para la primera línea del elemento de la lista . Las demás líneas del elemento
<style type= " text/css " > se alinean con el marcador.
ul { list-style-image: url(check.gif)) Ejemplo
</style>
<!DOCTYPE html>
</head>
<html lang=''es''>
<body>
<head>
<ul>
<li>Elemento 1</li> <title>Html5</title>
<li>Elemento 2</li> <meta charset= " iso-8859-1 " >
<li>Elemento 3</li> <style type= " text/css " >
<li>Elemento 4</li> .posicion1 { list-style-position : outside)
</ul> .posicion2 { list-style-position: inside)·
</style>
</body>
</head>
</html>
<body>
\i) Html5 - Mozilla Firefox ~ <ul>
<li class= "posicionl " >Elemento l<br />
Archivo Editar 'i_er Hi1torial Marcadores Herramienta> Siguie nte elemento 1<br />
~~ 0 fii=~/0:/Ediciones ENL'B ' ' • C ri Siguie nte elemento 1</li>
</ul>
X <ul>
0 Htm15
./
./
Elemento 1
Elemento 2
1
~
<li class="posicion2 " >Elemento 2<br />
Siguiente elemento 2<br />
Siguiente elemento 2</li>
./ Elemento 3 ~ </ul>
</body>
./ Elemento 4 ~
</html>
~
8
~
La imagen check.gif está disponible en el área de descargas.
"'Q
HTMLS y CSS3 Domine l~ndares de las aplicaciones Web
U;1
mi
Ejemplo
Qil HtmiS - Mozilla Firefox
< ! DOCTYPE html>
Archivo _Editar )ler Hi~torial-
,. ......
<html lang=" es " >
•• O file:/1/ D:/ Ediciones ENVC <head>
<title>HtmlS</title>
O HtmiS <meta charset= " iso-8859 - 1 " >
<style type=" text/css " >
• Elemento 1 table { width : 200px ;
Siguiente elemento 1 text-align : center ;
Siguiente elemento 1 border : lpx salid gray ;
border-spacing : lOpx ; )
• Elemento2 td { border : lpx salid gray ;
Siguiente elemento 2 background-color : rgb(213 , 230 , 245))
Siguiente elemento 2 </style>
</head>
<body>
<table>
<tr>
D. Declaración abreviada de una lista <td>l</td><td>2</td><td>3</td>
</tr>
Esta propiedad permite retomar en una declaración de estilo única todos los valores ante- <tr>
riores (list - style - type, list - style - image, list - style - position). <td>4</td><td>5</td><td>6</td>
</tr>
Ejemplo <tr>
list-style: url(check . gif) circle inside; <td>7</td><td>8</td><td>9</td>
</tr>
Comentarios </table>
- Los valores se reagrupan y separan por espacios . </body>
- Puede parecer extraño determinar un marcador mediante una imagen y un marcador de </html>
tipo círculo. En CSS esto significa que si el navegador no encuentra el recurso
correspondiente a la imagen en la ruta especificada , mostrará un marcador con forma de Qil Html5 - Morilla Firefox
círculo. Archivo ,Editar ller Hi;torial
- Ningún valor es obligatorio, y es posible definir un solo valor. 1:l
~
1
' u file: /I!D:' ;.;i
~ 0 Htm15
E. Espacio entre las celdas de las tablas :!
~
Esta propiedad permite especificar el espaciamiento entre cada celda . Es equivalente al ~ CIJLIJCIJ
atributo cellspacing de Html 4.0.
~ [IJQ][:IJ
border - spacing :
Valor numérico en px.
Valor numérico en pt.
s [I][IJ[i]
~
Porcentaje.
"'o
HTMLS y CS53 Domine los~ándar~e las aplicaci~es Web
Era ~al
Capítulo 17
-- Lis~s y tablas
Sin la propiedad de estilo border - spacing , la tabla se presenta por defecto de la </head>
siguiente manera : <bady>
<table>
1 1 1 2 lr=r=l <tr>
<td>l</td><td>2</td><td>3</td>
1 4 11 5 11 6 1
</tr>
1 7 11 8 11 9 1 <tr>
<td>4</td><td>5</td><td>6</td>
Es posible tener un solo borde para la tabla con border - spacing: Opx . </tr>
<tr>
</tr>
</table>
1 ; 1 : 1 : 1 </bady>
</html>
F. Bordes de las tablas ~ HtmiS - Mozilla Firefox [,~/!'6/~

Hemos visto que por defecto el navegador muestra dos bordes en las tablas: el borde que Arc hivo Editar Ver Historial Marcadores He1
compone el contorno de la tabla y los bordes que componen el contorno de las ce ldas.
La propiedad de estilo border - collapse permite gestionar esta situación . 1
~+.EJ[g ;~,:~;Edici~ ·~ Je)[ !J
U Htm15 xJ +J-
1 borde.r - collapse: 1 collapse; 1
separa te; 1 2 3
1 4 5 6
Comentarios 7
1 1 8 1 9
- El valor collapse fusiona los dos bordes adyacentes, otorgando el aspecto de un único 1
borde.
- El valor separa te muestra los dos bordes de forma separada , situación por defecto .
Ejemplo
<!DOCTYPE html> G. Celdas vacías en las tablas
<html lang= " es " >
<head>
<title>HtmlS</title>
J~
Esta propiedad permite determinar el comportamiento del navegador cuando se encuentra
una celda vacía en una tabla .
:!
<meta charset= " isa-8859-l " >
<style type= " text/css"> !;o: [ empt y - cells : 1 show ;
hlde;
1
table { width : 200px;
text-align: center;
barder : lpx salid gray;
~ Comentarios
barder - callapse: callapse ; )
td { barder : lpx salid gray;)
~ :· El va lor ~ow muestra la celda vacía. Los bordes y el fondo también son visibles.
</style> ;!!o - El va lor hi de no muestra la celda vacía . Los bordes y el fondo también son invisibles.
HTMLS y CSS3 Domine los estándares de ~saplicaciones Web

.a
Ejemplo H. Posición de la leyenda
<!DOCTYPE html> El atributo a l ign de la etiqueta <cap t ion> en Html 4.0 ha desaparecido, por ello es
<html lang= '' es '' > preciso invocar esta propiedad de estilo si queremos posicionar la leyenda en la tabla.
<head>
<title>Html5</title> caption - side: top ; Leyenda situada por encima de la tabla (valor por de-
<meta charset= " iso - 8859-1 " > fecto).
<style type= " text/css " > bottom ; Leyenda situada por debajo de la tabla.
table { width : 200px ;
text - align : center;) Ejemplo
td { border : lpx salid gray ;
< ! DOCTYPE html>
background - color : rgb(213 , 230 , 245) ; )
<html lang =" es " >
. show {empty- cells: show ; )
<head>
. hide {empty-cells: hide ; )
<title>Html5</title>
</style>
<meta charset= " iso-8859-1 " >
</head> <style type="text/css">
<body> table { width: 200px;
<table> text-align: center;
<tr>
border : lpx salid gray ;
<td class= " show " ></td><td>2</td><td>3</td>
border-collapse: collapse;)
</tr> td { border : lpx salid gray ; )
<tr> caption { caption-side: bottom;)
</style>
</tr> </head>
<tr> <body>
<td>7</td><td>8</td><td class= " hide " ></td>
<p></p>
</tr> <table>
</table> <cap tion>Leyenda de la tabla</caption>
</body> <t r>
</html> <td>l</td><td>2</td><td>3</td>
</ tr>
ii) Html5 - Mozilla Rrefox <tr>
~ditar 'f_er HiForial <td>4</td><td>5</td><td>6</td>
O Htm15
O file///0,/ Edicio
1
:!
.e:
</ tr >
<tr >
</ tr >
~ <ltab le>
1 11 2 11 3 l ~ </bo d y>
</ h t ml>
1 4 11 5 11 6 1 ~
7 8
s
...~
1 11 1
HTMLS y CSS3 Domine los estándares de las aplicaciones Web

1m
Capítulo 17
HtmiS - Mozilla Firefox O Capítulo 18: Fondos

A. Preámbulo . . . 334
B. Color de fondo . . 334
c. Inserción de una imagen de fondo . . . . . . . . . . . . . 336
1 ! i ! 1 1
Leyenda de la tabla
l
D.
E.
Repetición de la imagen . . . . . . . . . . . . . . . . .
Posicionamiento de la imagen. . . . . . . . . . . . . . .
337
340
F. Fijación del fondo . . .... . . . . . 343
G. Sintaxis abreviada . . 344
HTMLS y CSS3

Cap17 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cap17 PDF

Cargado por

Copyright:

Formatos disponibles

ca eítulo 16

El acceso igual pa r a todos , independientemente de sus

A. Tipos de marcadores <li class= " style2 " >Circulo</li>

W(u ~.~//D:/Edi c~~NL'~. .• ~ '"€);[ • ,

ll!l HTMLS y CSS3 Domine ~tándares de la; aplicaciones w;b

F. Bordes de las tablas ~ HtmiS - Mozilla Firefox [,~/!'6/~

HTMLS y CSS3 Domine los estándares de ~saplicaciones Web

HTMLS y CSS3 Domine los estándares de las aplicaciones Web

HtmiS - Mozilla Firefox O Capítulo 18: Fondos

También podría gustarte