PDF de programación - [14.1] Propiedad display

Imágen de pdf [14.1] Propiedad display

[14.1] Propiedad displaygráfica de visualizaciones

Publicado el 17 de Enero del 2020
457 visualizaciones desde el 17 de Enero del 2020
126,2 KB
13 paginas
Creado hace 7a (08/03/2017)
[14.1] Propiedad display

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1 1

introducción

• Todos los elementos tienen una forma de comportarse
visualmente
• La forma de comportarse lo controla la propiedad CSS
display
• Esta propiedad se puede modificar

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

2 2

valores para la propiedad

display

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

3 3

display:inline

• Elemento cuyo contenido se muestra en la misma línea
• Ejemplos (por defecto):

• strong
• em
• mark
• q
• span

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

4 4

display:inline

• Admite márgenes, padding, bordes,…
• No admite propiedades width, height ni de
posicionamiento

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

5 5

display:block

• Elemento que genera un rectángulo
• Aparece separado
• Por defecto se expande en todo el ancho de su contenedor
• Ejemplos (por defecto):

• div
• p
• h1
• section
• article
• ul

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

6 6

display:block

• Permite modificar todas las propiedades

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

7 7

display:inline-block

• Genera una rectángulo con el contenido
• El tamaño se adapta al contenido
• No aparece separado
• Ejemplos (por defecto):

• img
• input
• textarea
• button
• video

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

8 8

display:inline-block

• Permite modificar width y height
• Admite modificar float
• No permite modificar las propiedades de posicionamiento

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

9 9

display:none

• No se muestra el elemento

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1010

display:list-item

• Hace que el elemento sea un ítem de lista
• Ejemplo:

• li

• Propiedades:

• list-style

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1111

otros

• table. Comportamiento de tabla (como <table>)
• table-row. Comportamiento de fila de tabla (como <tr>)
• table-cell. Comportamiento de celda (como <td>)
• table-column. Comportamiento de columna (como <col>)
• table-column-group. Como <colgroup>

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1212

otros

• table-header-group- Como <thead>
• table-footer-group- Como <tfoot>
• table-row-group- Como <tbody>

HTML y CSS
Propiedad display
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1313
  • Links de descarga
http://lwp-l.com/pdf17164

Comentarios de: [14.1] Propiedad display (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad