Definición del diseño de la propiedad CSS

Definición del diseño de la propiedad CSS

Definición del diseño de la propiedad CSS

VALORACIÓN DEL ARTÍCULO:
5/5


El estilo visual y el diseño de un sitio web son dictados por CSS u hojas de estilo en cascada. Se trata de documentos que dan forma al marcado HTML de una página web, proporcionando a los navegadores instrucciones sobre cómo mostrar las páginas que resultan de dicho marcado. CSS maneja el diseño de una página, así como el color, las imágenes de fondo, la tipografía y mucho más.

Si observa un archivo CSS, verá que, al igual que cualquier lenguaje de marcado o codificación, estos archivos tienen una sintaxis específica para ellos. Cada hoja de estilo está compuesta por un número de reglas CSS. Estas reglas, cuando se toman en su totalidad, son las que dan estilo al sitio.

Las Partes de una Regla CSS

Una regla CSS se compone de dos partes distintas: el selector y la declaración. El selector determina el estilo de una página y la declaración es como debe ser estilizada. Por ejemplo:

p {
color: #000;
}

>

Esta es una regla CSS. La parte de selección es la «p», que es un selector de elementos para «párrafos». Por lo tanto, seleccionaría TODOS los párrafos de un sitio y les proporcionaría este estilo (a menos que haya párrafos a los que se dirijan estilos más específicos en otro lugar del documento CSS).

La parte de la regla que dice «color: #000;» es lo que se conoce como la declaración. Esta declaración se compone de dos partes: la propiedad y el valor.

La propiedad es la parte «color» de esta declaración. Determina qué aspecto del selector se cambiará visualmente.

El valor es el que se cambiará a la propiedad CSS elegida. En nuestro ejemplo, estamos usando el valor hexadecimal #000, que es la abreviatura de CSS para «negro».

Así que usando esta regla CSS, nuestra página tendría párrafos mostrados en un color de fuente negro.

Conceptos básicos de las propiedades de CSS

Cuando escribes propiedades CSS, no puedes simplemente inventarlas como te parezca. Por ejemplo, «color» es una propiedad CSS real, por lo que puede usarla. Esta propiedad es la que determina el color del texto de un elemento. Si intentara usar «text-color» o «font-color» como propiedades CSS, éstas fallarían porque no son partes reales del lenguaje CSS.

Otro ejemplo es la propiedad «background-image». Esta propiedad establece una imagen que se puede utilizar para un fondo, como este:

.logo {
imagen de fondo: url(/images/company-logo.png);
}

>

Si intentara usar «background-picture» o «background-graphic» como propiedad, fallarían porque, una vez más, estas no son propiedades CSS reales.

Algunas propiedades de CSS

Hay un número de propiedades CSS que puedes usar para darle estilo a un sitio. Algunos ejemplos son:

  • Borde (incluyendo estilo de borde, color de borde y ancho de borde)
  • Acolchado (incluyendo acolchado en la parte superior, acolchado en la derecha, acolchado en la parte inferior y acolchado en la izquierda)
  • Márgenes (incluyendo margen superior, margen derecho, margen inferior y margen izquierdo)
  • Familia de fuentes
  • Tamaño de fuente
  • Color de fondo
  • Ancho
  • Altura

Estas propiedades de CSS son muy buenas para usar como ejemplos, porque son todas muy sencillas y, aunque no conozca CSS, probablemente pueda adivinar lo que hacen basándose en sus nombres.

Hay otras propiedades CSS que encontrará también que pueden no ser tan obvias como la forma en que funcionan en base a sus nombres:

  • Flotador
  • Borrar
  • Desbordamiento
  • Transformar texto
  • Índice Z

A medida que profundices en el diseño web, encontrarás (y usarás) todas estas propiedades y mucho más!

Las propiedades necesitan valores

Cada vez que utilice una propiedad, debe darle un valor – y ciertas propiedades sólo pueden aceptar ciertos valores.

En nuestro primer ejemplo de la propiedad «color», necesitamos usar un valor de color. Puede ser un valor hexadecimal, un valor RGBA o incluso palabras clave de color. Cualquiera de esos valores funcionaría, sin embargo, si usara la palabra «sombrío» con esta propiedad, no haría nada porque, por muy descriptiva que sea esa palabra, no es un valor reconocido en CSS.

Nuestro segundo ejemplo de «imagen de fondo» requiere que se utilice una ruta de imagen para obtener una imagen real de los archivos de su sitio. Este es el valor/sintaxis que se requiere.

Todas las propiedades CSS tienen valores que esperan. Por ejemplo:

  • El color del borde espera un valor de color
  • El tamaño del borde espera un valor de tamaño, como píxeles o porcentajes
  • Los estilos de borde esperan uno de los estilos reservados usados para esta propiedad, como «sólido»

Si repasa la lista de propiedades CSS, descubrirá que cada una de ellas tiene valores específicos que usarán para crear los estilos para los que están diseñadas.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,