Guía de Programación
CSS
Diego Alejandro Restrepo Vela - 20171578080
¿Qué es CSS?
CSS (Del inglés Cascading Style Sheets) permite crear páginas web con un diseño
agradable, CSS es un lenguaje que se usa para diseñar la forma de presentar los
documentos a los usuarios — su estilo, diseño, etc.
Un documento suele ser un archivo de texto estructurado usando un Lenguaje de marcado
— HTML es el más común, pero hay otros como SVG o XML.
Presentar un documento a un usuario implica convertirlo en algo que este pueda utilizar.
Navegadores (Browsers), como Firefox, Chrome o Internet Explorer, están diseñados para
presentar documentos de forma visual, por ejemplo, en una pantalla de ordenador, un
proyector o una impresora.
¿Cómo funciona CSS enrealidad?
Cuando un navegador muestra un documento, debe combinar su contenido con su
información de estilos. Procesa el documento en dos fases:
1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo). Este
DOM representa el documento en la memoria del ordenador. Combinando el
contenido del documento con su estilo.
2. El navegador muestra el contenido del DOM.
Sintaxis de CSS
Un poco del Vocabulario
En el nivel más básico, CSS se compone de dos bloques:
1. Propiedades: Son identificadores que indican a las personas qué característica de
estilo (ancho, color de fondo, fuente) queremos cambiar.
2. Valores: A cada propiedad se le da un valor, que indica cómo queremos cambiar
esta característica (por ejemplo qué fuente, qué ancho o qué color usar)
El par formado por una propiedad y un valor se denomina declaración CSS. Las
declaraciones CSS forman bloques declarativos. Los bloques de declaraciones
CSS emparejados con selectores forman Conjuntos de Reglas CSS (o
simplemente Reglas CSS).
Antes de profundizar más en el tema, veamos un ejemplo concreto (vimos algo
parecido en nuestro artículo anterior):
Y el archivo CSS:
Combinando estos dos se producirá el siguiente resultado:
Declaraciones CSS
La principal función del lenguaje CSS es asignar valores a las propiedades CSS. El
motor CSS calcula qué declaraciones debe aplicar a cada elemento de una página
para mostrarla y darle estilo de manera adecuada. Lo importante es recordar que
tanto las propiedades como los valores son modificables en CSS. Los pares
propiedad y valor, se separan por dos puntos (:).
Hay más de 300 propiedades diferentes en CSS y casi infinitos valores diferentes. Cada
propiedad tiene una lista especifica de valores que puede adoptar.
Bloques de Declaraciones en CSS:
Las declaraciones están agrupadas por bloques, en los que el conjunto de
declaraciones se encuentra enumerado entre llaves, uno inicial ( { ) y otro final ( } ).
Cada declaración contenida en un bloque declarativo deber estar separada por
un punto y coma (;), sino el código no funcionará (o producirá resultados
inesperados). La última declaración de un bloque no necesita llevar (;), aunque se
considera buena práctica añadirlo, para prevenir olvidos cuando se añaden más
declaraciones al bloque.
Selectores y Reglas
Pero, en este rompe cabezas falta una pieza — y es aprender a identificar los elementos a
los que afectará nuestro bloque declarativo. Esto lo conseguiremos añadiendo a cada
bloque declarativo un prefijo a modo de selector — un módulo que identificará a ciertos
elementos de nuestra página. Las declaraciones asociadas se aplicarán solo a estos
elementos. El selector más el bloque declarativo se llama regla o regla-conjunto.
Los selectores (filtros) pueden llegar a ser bastante complicados — se puede
establecer una regla que afecte a múltiples elementos separándolos en el selector
por comas, y estos pueden ser identificados en conjunto, por ejemplo: Seleccionar
los elementos de la clase "blah", pero solo los que estén dentro de un <artículo>, y
solo cuando pase por encima el puntero del ratón. Tranquilidad — esto lo iremos
viendo más claro a medida que ganemos experiencia con CSS, veremos los
selectores con más detalle en el siguiente artículo dedicado a los Selectores.
Un elemento puede estar afectado por varios selectores, por tanto, una propiedad
puede ser asignada en distintas ocasiones por distintas reglas. CSS definirá cual
tiene preferencia sobre las otras para ser aplicada: esto se conoce como algoritmo
en cascada, y veremos cómo funciona en Cascada y herencia.
Declaraciones CSS
Las Reglas CSS son los bloques principales de un documento de estilos — el
bloque más usual que veremos en un CSS. Pero nos podemos encontrar con otros
tipos de bloques — Las reglas CSS son uno de los tipos de declaraciones CSS.
Los otros son:
Reglas-@: Usadas en CSS para definir metadatos, información condicional
u otra información descriptiva. Comienzan con el símbolo (@), seguido del
identificador del tipo de regla, luego un bloque sintáctico correspondiente y
terminará con un (;). Cada tipo de Regla-@ definido por un identificador dispondrá
de su propia sintaxis y semántica internas. Ejemplos:
- @charset y @import (metadatos)
- @media o @document (información condicional, llamada también
declaraciones anidadas, ver más abajo).
- @font-face (información descriptiva)
Ejemplo concreto de sintaxis:
Esta Regla-@ importará un archivo CSS externo hasta nuestro CSS actual.
Declaraciones anidadas son un subtipo de Reglas-@, su sintaxis es un
bloque de reglas CSS anidadas que solo afectará al documento bajo ciertas
condiciones:
- El contenido de la regla-@ @media se aplicará solo si el
dispositivo que ejecuta el navegador cumple la condición
expresada.
- El contenido de la regla-@ @supports se aplicará solo si el
navegador soporta la característica mencionada.
- El contenido de la regla-@ @document se aplicará solo si la
página actual cumple ciertas condiciones.
Ejemplo de sintaxis:
Esta regla anidada solo se aplicará cuando el ancho de la página sea superior a 800 pixels.
El Modelo De Cajas
El modelo de cajas es la base del diseño web — cada elemento se representa como una
caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos
uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de
una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la
cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo
crear diseños CSS, debemos entender el modelo de cajas — que es lo que veremos en
este artículo.
Propiedades de Cajas
Cualquier elemento contenido en un documento tiene la estructura de una caja
rectangular dentro del formato del documento, el tamaño y las capas que serán
retocadas usando las propiedades CSS. Las propiedades importantes son:
width y height
Las propiedades width y height establecen el ancho y alto de la caja de
contenido, que es el área donde se muestra el contenido de la caja — este
contenido comprende tanto el texto incluido en la caja como otras cajas
representadas por elementos anidados.
padding
Padding hace referencia al margen interior de la caja CSS — entre el límite
exterior de la caja del contenido y el límite interior del borde. El tamaño de
esta capa puede configurarse en sus cuatro lados a la vez con la propiedad
abreviada padding, o cada lado por separado con las propiedades: padding-
top, padding-right, padding-bottom y padding-left.
border
El borde de una caja CSS descansa entre el límite exterior del padding y el
límite interior del margen. Por defecto tiene un tamaño de 0 — invisible —
pero podemos cambiar su grosor, estilo y color para hacerlo visible. La
propiedad abreviada de border permite establecer los cuatro lados a la vez,
por ejemplo: border: 1px solid black. Pero también se puede dividir en
varias propiedades extendidas para su uso en necesidades concretas de
estilo:
border-top, border-right, border-bottom, border-left: Establecen el grosor,
estilo y color de cada lado del borde.
border-width, border-style, border-color: Establecen únicamente el grosor, el
estilo y el color por separado, pero para los cuatro lados del borde al mismo
tiempo.
Podemos también establecer cada propiedad por separado para cada lado
individualmente, usando border-top-width, border-top-style, border-top-
color, etc.
margin
El margen envuelve la caja CSS, y sostiene a otras cajas del diseño. Se
comporta como padding; la propiedad abreviada es margin y las propiedades
individuales son margin-top, margin-right, margin-bottom, y margin-left.
Manipulación de Cajas Avanzada
Además de establecer el alto, ancho, borde, padding y margen de las cajas, hay otras
propiedades disponibles para modificar el comportamiento de estas.
Desbordamiento:
Al establecer el ancho de una caja con valores absolutos ([Link]. ancho/alto en
pixels), el contenido puede no encajar con el tamaño permitido, en cuyo caso el
contenido desborda la caja. Para controlar lo que ocurre en estos casos, podemos
usar la propiedad overflow. Puede tomar varios valores, pero los más usuales son:
auto: Si hay demasiado contenido, el desbordamiento del contenido es
ocultado apareciendo las barras de desplazamiento para permitir al usuario
desplazarse para ver todo el contenido
hidden: Si hay demasiado contenido, el desbordamiento es escondido.
visible: Si hay demasiado contendido, el desbordamiento se muestra fuera
de la caja (este es normalmente el comportamiento por defecto).
Veamos un sencillo ejemplo para comprobar el funcionamiento:
Primero, el HTML:
Y el CSS:
El código anterior produce el siguiente resultado:
Limite de Fondo
Los fondos de las cajas están hechos de colores e imágenes, apiladas unas sobre
otras (background-color, background-image.) Se aplican al fondo de la misma. Por
defecto los fondos se extienden hasta el límite exterior del borde. Suele ser
suficiente, pero en ocasiones puede molestar (¿Qué pasa si tenemos una imagen
de fondo que queremos que solo llegue hasta el límite del contenido?) Este
comportamiento puede ajustarse mediante la propiedad background-clip de la caja.
Veamos el funcionamiento con un ejemplo. Primero el HTML:
Ahora el CSS:
El código anterior produce el siguiente resultado:
Comentarios
funcionamiento del código al tiempo de haberlo programado, además de ayudar a
otros a entenderlo. Los comentarios son prácticos cuando se está probando ciertas
partes del código, por ejemplo para averiguar que parte del código está causando
el error encontrado.
Los comentarios en CSS comienzan con /* y acaban con */.
Referencias
Developer Mozilla (18 de marzo de 2019). CSS. Recuperado de
[Link]