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.

Índice de contenidos

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.

TAMBIÉN TE INTERESA

OnePlus Nord 4 precio

OnePlus Nord 4: un gama media con IA, metálico y con gran batería

El OnePlus Nord 4 se ha presentado de forma oficial. La marca vuelve a dar un paso más en su gama media con este esplendoroso smartphone que llega a España para destronar a sus oponentes y plantar cara a su competencia premium. De hecho, por la red ya circulan comentarios muy positivos de este dispositivo

ordenador sobremesa Deep Gaming

Deep Gaming, la marca española confiable para personalizar un PC

Como en casi todos los ámbitos, en el mundo del gaming hay dos tipos de personas: los que apuestan un por un PC ya configurado o los que quieren personalizar su PC. Para estos últimos, Deep Gaming es una gran opción para empezar a poner a punto su setup. Hablamos de una marca española con

Qué es un CDN y por qué es relevante

Cómo mejorar la experiencia web con un CDN

Imagínate visitar un sitio web y tener que esperar largos segundos para que se cargue cada página o imagen. Esta experiencia frustrante no solo afecta nuestra paciencia, sino que también puede influir negativamente en la percepción de una marca o empresa. Aquí es donde entra en juego el CDN, o Content Delivery Network, una tecnología

como detectar ofertas de trabajo falsas

Ojo con las ofertas de trabajo falsas: aprende a detectarlas

Las ofertas de trabajo falsas están a la orden del día. En muchos casos parecen reales porque coinciden en un momento en el que estamos en búsqueda activa de empleo. Puede que nos hallamos inscrito a un proceso de selección en LinkedIn y, de repente, alguien intenta contactar con nosotros por mail o WhatsApp. A