Hojas de estilo de css

¿Qué es CSS?

Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva. Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad, se siguen una serie de normas para resolverla.


La idea de CSS es la de utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan sólo información y datos, relativos al significado de la información a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS independiente (la presentación)

Sintaxis CSS.

La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.

La propiedad que es un identificador, un nombre leíble por humanos, que define qué característica es considerada. El valor que describe como las características deben ser manejadas por el motor.

Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador

---

Declaraciones de CSS

Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos. Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, ':' (U+003A COLON), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.

 

---

Bloques de declaraciones en CSS

Las declaraciones son agrupada en bloques, que es una estructura delimitada por una llave de apertura, '{' (U+007B LEFT CURLY BRACKET), y una de cierre, '}' (U+007D RIGHT CURLY BRACKET). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coincidir.

Esos bloques son naturalmente llamados bloques de declaraciones y las declaraciones dentro de ellos están separadas por un punto y coma, ';' (U+003B SEMICOLON). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una buena práctica porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.

Sets de reglas CSS

Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento. CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un selector, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de set de reglas, o simplemente una regla.

 Selectores Básicos CSS

En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

a[title] { } Copy to Clipboard O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:

a[href="https://example.com"] { } Copy to Clipboard Las pseudoclases y los pseudoelementos Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.

a: hover {} Copy to Clipboard También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. }Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (

, en el ejemplo siguiente), y actúa como si un elemento hubiera delimitado la primera línea, seleccionado y aplicado estilo.

p::first-line { }

Combinadores

El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento

utilizando el operador de combinación hijo (>):

article > p { } Copy to Clipboard Próximos pasos Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en Selectores de tipo, de clase y de ID.

Formas de insertar CSS.

Incluir CSS en HTML puede llegar a ser confuso ya que existen varias formas de hacerlo. Se puede incluir CSS en HTML:

Vinculando a un archivo de hoja de estilo separado

Incrustando CSS en una etiqueta de estilo

Agregando estilos en línea a elementos HTML

Importando archivos de hojas de estilo existentes

Métodos para incluir CSS en HTML

Existen varios métodos para incluir css en html y son los siguientes: Vinculando a un archivo de hoja de estilo separado Este es el método más común para adjuntar reglas CSS a documentos HTML.

Con este método, todas las reglas de estilo están contenidas en un único archivo de texto que se guarda con la extensión .css.

Este archivo se guarda en un servidor y se vincula directamente desde cada archivo HTML. Para su vinculación se utiliza la etiqueta link de la siguiente manera:

vincular archivo css

El atributo rel indica al navegador que el archivo vinculado es una hoja de estilo en cascada (css).

El atributo type indica el tipo de archivo vinculado. Si se utiliza HTML5 no es obligatorio incluir este atributo.

El atributo href es donde especifica la ruta a su archivo CSS.

Si el archivo CSS está en la misma carpeta que su archivo HTML, entonces no se requiere una ruta, solo necesita especificar el nombre de archivo. Si se guarda en una carpeta distinta, puede especificar la ruta de dicha carpeta de manera relativa o absoluta. También es posible especificar una ruta mediante una url. El atributo media en una etiqueta que especifica cuándo se deben aplicar las reglas CSS. Los valores más comunes son:

Screen: indica para su uso en una pantalla de computadora. Projection: para presentaciones proyectadas. Handheld: para dispositivos de mano (generalmente con pantallas pequeñas). Print: para diseñar páginas web impresas. All (valor predeterminado): Para que el estilo se aplique a todos los tipos de medios. El uso de este método tiene las siguientes ventajas:

Los cambios del código css son reflejados en todas las páginas. Cambiar el tema del sitio web es fácil. La velocidad del sitio web aumenta para múltiples solicitudes de página. La principal desventaja es que se requiere una solicitud HTTP adicional para cada archivo css vinculado.

Incrustando CSS en una etiqueta de estilo Puede incluir CSS en HTML utilizando la etiqueta style de la siguiente forma:

incrustar css

El atributo type es para especificar el tipo de código incluido y es posible omitirlo en HTML5 y el atributo media controla cuándo se aplican los estilos. Las principales ventajas de este método son:

Tiempos de carga más rápidos. Funciona muy bien con estilos dinámicos. La principal desventaja es que los estilos incrustados deben ser descargados con cada solicitud de página.

Agregando estilos en línea a elementos HTML Las reglas de estilo se pueden agregar directamente a cualquier elemento HTML. Para hacer esto, simplemente hay que agregar un atributo de estilo al elemento y luego indicar las reglas deseadas en la misma línea. A continuación se muestra un ejemplo de un encabezado (h2) al que aplicamos un estilo donde el color del texto será rojo y el color de fondo será negro:

Agregar estilos en linea

Este método presenta las siguientes ventajas: Los estilos en línea anulan los estilos externos. Por tanto es buena idea este método para casos concretos que no deben seguir la norma general de estilo para dicho elemento establecida en el estilo externo. Páginas más rápidas. Puede cambiar los estilos sin editar el archivo css principal. Ideal para estilos dinámicos. Útil para el envío de emails en formato html.

Por el contrario, tiene las siguientes desventajas:

El uso excesivo de estilos en multitud de etiquetas hará que la página ocupe más tamaño y en consecuencia aumente el tiempo de carga. El mantenimiento y los cambios de estilo se vuelven más complicados.

Inyectando css con javascript. En este artículo os voy a mostrar los pros y contras de cada método, veremos cómo funciona cada uno y en qué circunstancias utilizarlos.

Unidades CSS.

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).

CSS divide las unidades de medida en dos grupos: absolutas y relativas.

Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser uno de los errores más habituales de los diseñadores que empiezan con CSS. Algunas pro

piedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos. Si el valor decimal de una medida es inferior a 1, se puede omitir el 0 de la izquierda (0.5em es equivalente a .5em).

Unidades absolutas

Una medida indicada mediante unidades absolutas está completamente definida, ya que su valor no depende de otro valor de referencia. A continuación se muestra la lista completa de unidades absolutas definidas por CSS y su significado:

in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros. cm, centímetros. mm, milímetros.

pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros. pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros. A continuación se muestran ejemplos de utilización de unidades absolutas:

/* El cuerpo de la página debe mostrar un margen de media pulgada */ body { margin: 0.5in; }

/* Los elementos

deben mostrar un interlineado de 2 centímetros */ h1 { line-height: 2cm; }

/* Las palabras de todos los párrafos deben estar separadas 4 milímetros entre si */ p { word-spacing: 4mm; }

/* Los enlaces se deben mostrar con un tamaño de letra de 12 puntos */ a { font-size: 12pt }

/* Los elementos deben tener un tamaño de letra de 1 pica */ span { font-size: 1pc } La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar, sin necesidad de realizar cálculos intermedios. Su principal desventaja es que son muy poco flexibles y no se adaptan fácilmente a los diferentes medios.

De todas las unidades absolutas, la única que suele utilizarse es el punto (pt). Se trata de la unidad de medida preferida para establecer el tamaño del texto en los documentos que se van a imprimir, es decir, para el medio print de CSS, tal y como se verá más adelante.