El estilo visual y el diseño de un sitio web y de un dos son dictados por CSS o hojas de estilo en cascada. Estos son documentos que dan forma a un marcado HTML de página web y amp; apos; s, que proporcionan a los navegadores web instrucciones sobre cómo mostrar las páginas que resultan de ese marcado. CSS maneja un diseño de página y amp; apos; s, así como color, imágenes de fondo, tipografía y mucho más.
Si mira un archivo CSS, verá que, como cualquier marcado o lenguaje de codificación, estos archivos tienen una sintaxis específica. Cada hoja de estilo está compuesta por varias reglas CSS. Estas reglas, cuando se toman en su totalidad, son los estilos del sitio.
Las partes de una regla CSS
Una regla CSS se compone de dos partes distintas & amp; # x2014; el selector y la declaración. El selector determina qué se está diseñando en una página, y la declaración es cómo se debe diseñar. Por ejemplo:
& lt; pre & gt; p {& lt; br & gt ;
color: # 000; & lt; br & gt ;
}
& lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Esta es una regla CSS. La parte selectora es p , que es un selector de elementos para & amp; quot; párrafos.& amp; quot; & amp; amp; nbsp; Por lo tanto, seleccionaría TODOS los párrafos en un sitio y les proporcionaría este estilo (a menos que haya párrafos dirigidos por estilos más específicos en otra parte de su documento CSS).& amp; amp; nbsp;
Video destacado
La parte de la regla que dice, & amp; quot; color: # 000; & amp; quot; es lo que se conoce como la declaración. Esa declaración se compone de dos piezas & amp; # x2014; la propiedad y el valor .& amp; amp; nbsp;
La propiedad es la pieza de color de esta declaración. Dicta qué aspecto del selector se cambiará visualmente.& amp; amp; nbsp;
El valor es a lo que se cambiará la propiedad CSS elegida. En nuestro ejemplo, estamos utilizando el valor hexagonal de # 000 , que es la abreviatura de CSS para & amp; quot; black.& amp; quot;
Entonces, usando esta regla CSS, nuestra página tendría párrafos mostrados en un color de fuente de negro.
Conceptos básicos de propiedad de CSS
Cuando escribe propiedades CSS, no puede simplemente inventarlas como mejor le parezca. Por ejemplo, & amp; quot; color & amp; quot; es una propiedad CSS real, por lo que puede usarla. Esta propiedad es lo que determina el color del texto de un elemento. Si intentara usar & amp; quot; text-color & amp; quot; o & amp; quot; font-color & amp; quot; como propiedades CSS, fallarían porque no son partes reales del lenguaje CSS.
Otro ejemplo es la propiedad & amp; quot; background-image.& amp; quot; Esta propiedad establece una imagen que se puede usar para un fondo, como este:
& lt; pre & gt; .logo {& lt; br & gt ;
imagen de fondo: url (& amp; quot; / images / company-logo.png & amp; quot;); & lt; br & gt ;
}
& lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Si intentara usar & amp; quot; background-picture & amp; quot; o & amp; quot; background-graphic & amp; quot; como propiedad, fallarían porque, una vez más, estas no son propiedades CSS reales.
Algunas propiedades CSS
Hay varias propiedades CSS que puede usar para diseñar un sitio. Algunos ejemplos son:
- Borde (incluido el estilo de borde, el color de borde y el ancho de borde)
- Acolchado (incluyendo sobre acolchado, derecho de relleno, fondo de acolchado y acolchado izquierdo)
- 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 CSS son excelentes para usar como ejemplos, porque todas son muy sencillas e, incluso si no conoce CSS, probablemente pueda adivinar lo que hacen en función de sus nombres.& amp; amp; nbsp;
También encontrará otras propiedades de CSS que pueden no ser tan obvias en cuanto a cómo funcionan en función de sus nombres:
- Flotador
- Borrar
- Desbordamiento
- Transformación de texto
- Índice Z
A medida que profundice en el diseño web, encontrará (y usará) todas estas propiedades y más!
Propiedades Valores necesarios
Cada vez que use una propiedad, debe darle un valor & amp; # x2014; y ciertas propiedades solo pueden aceptar ciertos valores.
En nuestro primer ejemplo de & amp; quot; color & amp; quot; propiedad, necesitamos usar un valor de color. Esto podría ser un valor hexagonal, un valor RGBA o incluso palabras clave de color. Sin embargo, cualquiera de esos valores funcionaría si usara la palabra & amp; quot; gloomy & amp; quot; con esta propiedad, no haría nada porque, por descriptiva que sea esa palabra, no es un valor reconocido en CSS.
Nuestro segundo ejemplo de & amp; quot; background-image & amp; quot; requiere que se use una ruta de imagen para obtener una imagen real de sus archivos de sitio y amp; apos; s. Este es el valor / sintaxis que se requiere.
Todas las propiedades CSS & amp; amp; nbsp; tienen valores que esperan. Por ejemplo:
- Border-color espera un valor de color.
- Border-size espera un valor de tamaño, como píxeles o porcentajes.
- Los estilos de borde esperan uno de los estilos reservados utilizados para esta propiedad, como & amp; quot; solid.& amp; quot;
Si revisa 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 destinadas.
& amp; # x203A; Informática
