Entradas

Mostrando entradas de octubre, 2016

Cómo incluir CSS en un documento HTML

Imagen
Podemos incluir CSS en un documento HTML de tres formas: Incluir CSS dentro del documento HTML Incluir CSS en las etiquetas HTML Incluir CSS desde un archivo externo Incluir CSS dentro del documento HTML Para incluir CSS dentro del documento HTML hacemos uso de la etiqueta <style> , la cual estará incluida dentro de la etiqueta <head> . El problema de definir CSS dentro del mismo documento es que si utilizas un mismo estilo en diferentes documentos HTML y luego desearas realizar algún cambio tendrás que hacerlo en todos los documentos HTML. Ejemplo: <html> <head> < style type="text/css"> p { color: green; font-size:18px; font-family:Verdana;  } </ style > </head> <body> <p>Este es un parrafo </p> </body> </html> Incluir CSS dentro de la etiqueta HTML Se puede incluir CSS dentro de la misma etiqueta html mediante el atributo style . Ejemplo: <html> <hea

Depurando los estilos de texto CSS

Imagen
Darle forma al texto es el cometido de las siguientes propiedades de CSS: text-align : se emplea para definir la justificación o alineación del texto. Esta propiedad puede tomar los valores: left: a la izquierda, right: a la derecha, center: centrado justify: justificado, es decir alineado a la izquierda y a la derecha a la vez.     text-indent : especifica la sangría de la primera línea de un bloque de texto. La sangría se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size. text-decoration : se emplea para definir algunos adornos que se pueden añadir al texto. Esta propiedad puede tomar los valores: none: (ninguno) underline: (subrayado) overline: ( subrayado por la parte superior) line-through: (tachado) blink: (parpadeo). text-transform : se emplea para convertir en mayúsculas o minúsculas un texto. Esta propiedad puede tomar los valores: capitalize:  el valor capita

Definir el estilo del texto con CSS

Para definir el estilo del texto de  una página web se utilizan las siguientes propiedades de CSS: font-family : define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos. font-size : especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex . font-weight : esta propiedad especifica el peso o grosor de la letra. font-style :  permite definir el aspecto de una familia tipográfica entre los valores: normal , italic (cursiva) y oblique font-variant : selecciona entre los aspectos normal* y small-caps** para la familia de fuente determinado. normal* Especifica un aspecto de letra normal   small-caps** Especifica un tipo de letra que está dec

Abreviaturas en HTML: abbr

El elemento HTML <abbr> ( o Elemento de Abreviación HTML ) representa una abreviación y opcionalmente proporciona a descripción completa para ella. Si está presente, el atributo title debe contener la descripción completa y nada más. < p > I do < abbr title = " Hypertext Markup Language " > HTML </ abbr > </ p > <ABBR title = "Texto Largo" &> Abreviatura </ABBR> Fuente: developer.mozilla.org

Etiqueta link / Enlace hoja de estilos CSS

Imagen
El  elemento HTML <link>  especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilo s . Suele ser utilizado para definir CSS en un archivo externo; en este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link> . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. Si se quieren incluir los estilos  en un archivo CSS externo, se deben seguir los siguientes pasos: 1) Se crea un archivo de texto y se le añade solamente el siguiente contenido: p { color : green ; font-family : Arial ; } 2) Se guarda el archivo de texto con el nombre estilos.css Se debe p

Diseño web adaptable, adaptativo o flexible

Imagen
Diseño adaptable, adaptativo o flexible (en inglés responsive design ) es aquel mediante el cual un sitio web se pueda visualizar de una forma correcta en todos los diferentes dispositivos que existen en la actualidad y en los que puedan aparecer en el futuro. En un diseño adaptable la visualización de la página web se ajusta de forma dinámica a las características particulares de cada dispositivo. Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas propiedades de CSS que no eran muy conocidas.   En un diseño adaptable, la visualización de la página web se ajusta de forma dinámica a las características particulares de cada dispositivo, para ofrecer al usuario la mejor experiencia posible. Un diseño adaptable se basa en el empleo de Media Queries            (consulta de los medios, traducido al español) es una técnica CSS introducida en CSS3. Con las media querie podemos adaptar la visualización de la página web en función de diferent