Blog

Conoce todos los contenidos de mi web y cuéntame tus dudas o impresiones en los comentarios de las entradas.

Lenguaje CSS

Introducción al lenguaje CSS

Todas las páginas web cuentan con dos lenguajes importantes para su desarrollo. Por un lado tenemos el HTML, utilizado para crear la estructura y los elementos del sitio web. Y por otro lado, contamos con el lenguaje CSS, encargado de plasmar el diseño dichos elementos. En este articulo, desarrollaré el segundo.

¿Qué es el CSS?

CSS (Cascading Style Sheets), «hojas de estilo en cascada» en castellano, es el lenguaje que se utiliza para darle diseño a las páginas web. Gracias a ello podemos darle diferentes Look and feel a los sitios web para presentarlos a las personas que los visitan. Los CSS no pueden funcionar sin su mayor alido, el lenguaje HTML que es el encarga del contenido básico de las páginas y sobre los que se aplican los estilos.

Sintaxis del CSS

Como hemos dicho anteriormente los estilos CSS se aplican sobre contenido HTML, para ello, necesitaremos saber la clase (.) o el id (#) del elemento al que le queremos aplicar el diseño. Imaginemos que le queremos dar estilo a un div que tiene como identidicador una clase llamada «contenedor», la sintaxis para aplicarle un estilo es la siguiente:

/* Comentario */
div.contenedor {
   propiedad: valor;
}

En el código anterior podemos observar varias cosas:

1.- Comentarios: Podmeos poner comentarios con la ayuda de /* */.
2.- Declaramos con ayuda de la clase el elemento que va a ser afectado.
3.- Añadimos las propiedades y el valor de la propiedad separados por «:».

Unidades de las propiedades CSS

Existen infinidad de propiedades CSS que pueden ser aplicadas a las etiquetas HTML. En este apartado hablaremos de las unidades con las que puedes seleccionar el valor de las mismas.

1.- Para margenes, rellenos, alturas, anchuras, etc. contamos con estas unidades:

px | em | ex | % | in | cm | mm | pt | pc

2.- Para los colores, ya sea de la letra, de los fondos o de muchas cosas más puedes utilizarlo en formato exadecimal, en formato RGB o simplemente poniendo el nombre del color:

#ff6633 | #f63 | rgb(0,255,0) | rgb(0%,100%,50%)
aqua | black | blue | red | silver | teal white | yellow

Selectores CSS

Se pueden seleccionar elementos para darles estilos de muchas maneras. Aquí te dejo alguna de ellas:

  • * -> Todos los elementos
  • div -> Para tpdps los elementos <div>
  • div * ->  Elementos dentro de  un <div>
  • div span -> Para los <span> dentro de <div>
  • div, span -> Para los elementos <div> y <span>
  • div > span -> Para los elementos <span> que tiene como padre un <div>
  • div + span -> Para un <span> precedido de <div> </div>
  • .contenedor -> Para elementos de la clase «contenedor»
  • div.class -> Para los <div> de la clase «contenedor»
  • #contenedor -> Para los elementos con id «contenedor»
  • div#contenedor -> Para los <div> de la id «contenedor»
  • div[class] -> Para los links <div> con el atributo class
  • div[class=’link’] -> Para los <div> con el clase es «link»
  • div[class~=’link’] Para los <div> cuando su clase es una lista de
  • valores y uno de ellos es «link»
  • div[lang|=’es’] -> Para los <div> cuando lang comienza por «es»

Pseudo-clases y pseudoelementos CSS

También existe la posibilidad de añadir estilos a una parte concreta del documento. Esto se hace con las pseudo-clases y pseudoelementos:

  • :active -> Para el elemento seleccionado
  • :focus -> Para el elemento enfocado
  • :hover -> Para el elemento con el cursor del ratón encima
  • :link -> Para el link no visitado
  • :visited -> Para el link visitado
  • :first-child -> Para el primer elemento hijo de otro elemento
  • :lang -> Para el lenguage utilizado en un elemento
  • :first-letter -> Para la primera letra de un texto
  • :first-line -> Para la primera línea de un texto
  • :before -> Para el contenido antes de un elemento
  • :after -> Para el contenido después de un elemento

Con esto he repasado un poco muchos de los aspectos que puedes encontrarte en el lenguaje CSS pero existe muchos más que pueden ser importantes a la hora de darle diseño a una página web. Si te ha gustado, no lo dudes, y sigue informándote y ensayando sobre el tema.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio