logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema03

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema03 [2020/09/09 18:14]
admin 		clase:daw:diw:1eval:tema03 [2023/11/21 09:03] (actual)
admin [display]
Línea 5: Línea 5:
 Hay 3 formas de añadir CSS a una página: Hay 3 formas de añadir CSS a una página:
   * Con un fichero externo y añadiendo en el <head>:   * Con un fichero externo y añadiendo en el <head>:
 +  *  
 +<sxh html>
   <link rel="stylesheet" href="main.css">   <link rel="stylesheet" href="main.css">
 +</sxh>
  
   * Añadiendo la etiqueta <style>   * Añadiendo la etiqueta <style>
Línea 23: Línea 25:
  
   * CSS dentro del propio elemento con el atributo "style".   * CSS dentro del propio elemento con el atributo "style".
 +  *  
 +<sxh html>
   <h1 style="color:blue;text-align:center;">This is a heading</h1>   <h1 style="color:blue;text-align:center;">This is a heading</h1>
 +</sxh>
  
 Solo se debería añadir el CSS en ficheros externo y en algún caso concreto con "style" como por ejemplo la imagen de background. Solo se debería añadir el CSS en ficheros externo y en algún caso concreto con "style" como por ejemplo la imagen de background.
Línea 89: Línea 93:
     * [[https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1|Ejemplo display]]     * [[https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1|Ejemplo display]]
     * [[http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements|How to remove the space between inline-block elements?]]     * [[http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements|How to remove the space between inline-block elements?]]
 +
 +==== Ejemplo ====
 +Vamos a ver un ejemplo con las diferencias entre ''<span>'', ''<div>'', ''<span> con inline-block'' y ''<div> con inline-block''
 +
 +<sxh css>
 +.destacar {
 +  color:red;
 +  font-weight:bold
 +}
 +</sxh>
 +
 +<sxh html>
 + <p>
 +span:Frodo lo sacó del bolsillo del <span class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span class="destacar">cadena</span> que le colgaba del cinturón.
 + </p>
 + <hr>
 + <p>
 +div:Frodo lo sacó del bolsillo del <div class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div class="destacar">cadena</div> que le colgaba del cinturón.
 + </p>
 + <hr>
 + <p>
 +span inline-block:Frodo lo sacó del bolsillo del <span style="display:inline-block" class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span style="display:inline-block" class="destacar">cadena</span> que le colgaba del cinturón.
 + </p>
 + <hr>
 + <p>
 +div inline-block:Frodo lo sacó del bolsillo del <div style="display:inline-block" class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div style="display:inline-block" class="destacar">cadena</div> que le colgaba del cinturón.
 + </p>
 +</sxh>
  
  
clase/daw/diw/1eval/tema03.1599668048.txt.gz · Última modificación: 2020/09/09 18:14 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki