Entradas

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: ...

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: ...

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á...

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 ...

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 ...

CSS: Selectores :last-child y :nth-last-child

Imagen
  En CSS2 se definió la pseudoclase “:first-child” que permite definir una regla que se aplica al primer hijo del selector indicado. “p:first-child” selecciona un párrafo cuando sea el primer hijo de su padre. En CSS3 se han añadido estos selectores que complementan a “:first-child” de CSS2, estos son algunos de ellos: :last-child   Este selector representa un elemento de lista li que es el último elemento secundario de una lista ordenada de: Ejemplo: [style.css]   ol > li:last-child{ ol> li: last-child { color: red; color rojo; } } [index.html] <body> <cuerpo> <ol> <ol> <li>List-item 1</li> <li> List-item 1 </ li> <li>List-item 2</li> <li> List-item 2 </ li> <li>List-item 3</li> <li> List-item 3 </ li> </ol> </ ol> </body> </ body> :nth-last-child () representa un elemento que tie...

¿Cuál es la resolución de pantalla más común en la actualidad?

Imagen
  A cifras de Enero de 2016, la resolución de pantalla más común era de 1.366 x 768 píxeles, la típica resolución de los portátiles.   Hoy en día existen multitud de dispositivos que permiten acceder a la Web, lo que origina que no exista una resolución de pantalla estándar.   En marzo de 2009, la resolución más común era 1024x768 con un 42%. La siguiente resolución más popular era 1280x800 con casi un 20%. En octubre de 2014 la resolución de 1024x768 sólo representaba un 5%, igual que 1280x800. Fuentes:www. dgcomunicaciones.net Activate, Google España        

CSS: Pseudoclases de estado (link, visited, hover, active, focus).

Para conseguir que algunos enlaces cambien de color cuando ya estuviste en esa página, cuando los mantienes pulsados o se modifica su estilo cuando pasas el ratón por encima de ellos se utiliza el carácter “:”   El estado :link , solo aplicable a enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla. El estado :visited se aplicará a los hipervínculos visitados, es el selector complementario a :link. El estado :hover modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla. Importante : En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente. El estado :active se aplica a enlaces que están siendo pulsados. Normalmente no mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para casos particulares como pue...

CSS: escribe una hoja que sea fácil de leer

Imagen
Un fichero de CSS puede tener cientos de líneas y depende como lo escribas puede ser fácil o muy difícil de leer. Espacios en blanco, tabuladores y saltos de línea ayudan a que el código se visualice más claramente. Algunas personas prefieren escribir todo el código en una sola línea y esto dificulta la lectura y la revisión del código aplicado. Otras personas prefieren escribir una propiedad por línea, y otros prefieren que las propiedades aparezcan con sangría (con dos o cuatro espacios o con tabulación). Otras variantes las encontramos con la posición de las llaves de apertura (algunos casos situándolas detrás del selector, en otros en una línea nueva). También otro estilo de ordenamiento del código es alinear todo verticalmente, aunque según expertos en la materia este estilo es difícil de mantener. Otro mecanismo que facilita la lectura de un CSS son los comentarios. Estos empiezan con /* y finalizan con */ . Los comentarios ayudan a definir partes en un CSS, por ej.: ...

Selector universal * en CSS

Imagen
El selector universal se representa mediante un asterisco * .   Cuando se incluye en una regla, el selector universal selecciona todos los elementos . Muchos expertos desaconsejan su uso ya que es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta. El selector universal se aplica a veces para inicializar todos los elementos de una página web a un mismo estado, por ejemplo establecer el margen y el relleno de todos los elementos en seis píxeles.   Fuente: Activate, Google España