El principio básico del uso de CSS
By s4pcademy
Para utilizar el principio CSS de manera que tenga sentido, primero debe crear el documento HTML con elementos HTML lógicos y semánticos.
Con CSS, puedes usar reglas para los elementos HTML individuales para determinar su apariencia. Como ejemplo (consulte la figura siguiente), usaremos un elemento de encabezado, que se ha escrito como se muestra aquí en el documento HTML, índice.html:
...
<header>
<h1>My cooking blog</h1>
<p>A blog with delicious recipes ...</p>
</header>
...
Asignarás un nuevo estilo a este elemento HTML usando CSS, lo que determinará el formato y la apariencia del elemento de encabezado. En este ejemplo, puede encontrar esta regla de formato descrita en el documento externo. estilo.css archivo de la siguiente manera:
/* File: style.css */
...
header {
background: #add8e6;
padding: 2px;
text-align:center;
}
...
En este punto, no es importante entender lo que está escrito en estilo.css. Lo único importante es que puedes ver aquí cómo aplicar reglas CSS a un elemento HTML. En el ejemplo, la regla se crea en el estilo.css archivo con el encabezado selector (es decir, selector de tipo) y el declaraciones entre las llaves. Para que esta regla CSS realmente afecte índice.html y los elementos de encabezado que contiene, el documento HTML debe saber dónde se encuentra el archivo CSS (estilo.css) fue almacenado. En el ejemplo, usted informa al navegador web sobre esto mediante el elemento de enlace.
Usando esta regla CSS en el estilo.css archivo para los elementos de encabezado en el índice.html archivo, especifica que para el contenido entre las etiquetas HTML
, el color de fondo debe ser azul (#add8e6). El espacio interior (relleno) es de 2 píxeles y la alineación del texto (alineación de texto) es central. Pero como dije, estas declaraciones aún no son realmente importantes en este ejemplo. La figura anterior demuestra este proceso.
Si aplica el principio de las reglas CSS con selectores y declaraciones a varios elementos HTML, la apariencia exterior cambiará significativamente, como puede ver en la siguiente figura.
Estructura de una regla CSS
Como ya has aprendido, puedes definir una regla CSS con un selector y una declaración. Los selectores son un componente esencial de CSS y existen muchos tipos diferentes. En esta sección, no cubriremos estos selectores en detalle, pero aprenderá cómo construir una regla CSS de este tipo en general:
Selectores
Puede utilizar el selector para especificar el elemento HTML al que se debe aplicar la regla CSS. También es posible aplicar una regla a varios elementos HTML separando los elementos HTML individuales con comas:
h1, h2, h3, p { color: blue; }
Esto establece la regla CSS de que el color de fuente es azul para los elementos HTML h1, h2, h3 y p al mismo tiempo.
Declaraciones
Puede utilizar las declaraciones para especificar cómo desea formatear los elementos HTML seleccionados mediante el selector. La propia declaración también consta de dos partes, una propiedad y un valor. La propiedad está separada del valor por dos puntos.
En la siguiente figura, puede ver la estructura y los componentes individuales de una regla CSS.
Declarar un selector
La declaración dentro de las llaves de una regla CSS consta de al menos una propiedad y un valor, con dos puntos entre la propiedad y el valor. Si desea utilizar varios pares propiedad-valor, debe cerrar cada par con un punto y coma:
h1 {
font-family: "Arial";
color: red;
text-align: center;
}
h2, h3 {
font-family: "Courier";
color: blue;
}
Aquí, especifica que todos los elementos h1 se muestren en fuente Arial, en color de texto rojo y centrados. Además, establece una regla CSS para los elementos h2 y h3, que se mostrarán en fuente Courier y en color azul. Puede elegir el orden de las declaraciones como desee. Por ejemplo, también puedes definir primero el color y luego la fuente.
Puede omitir el punto y coma del último (o único) par propiedad-valor, pero la práctica común ha demostrado que generalmente se agregan más funciones CSS a una regla CSS, y la gente tiende a olvidar el punto y coma omitido para separar dos pares propiedad-valor. La falta de punto y coma entre dos pares propiedad-valor es un error.
Volvamos a los dos componentes de una declaración CSS:
Propiedades
Usted especifica una característica CSS (por ejemplo, color, fuente, alineación) que desea cambiar para el elemento HTML seleccionado con el selector.
Valores
Usted especifica el valor de la característica CSS utilizada. Nuevamente, lo que puedes usar aquí depende de la función CSS que estés usando. Por ejemplo, si la propiedad es color, puede especificar el valor de un color.
Uso de comentarios para código CSS
Si mantiene más código CSS y proyectos web más grandes, debe comentar su código CSS lo más claramente posible para que, incluso después de unas semanas, siga sabiendo qué es y qué ha hecho allí. Puedes introducir un comentario a través de /* y cerrarlo con */. El navegador web ignorará todo lo que se encuentre entremedio (incluidos los saltos de línea), por ejemplo:
/* Creates a circle */
/* Warning! Does not work with IE8 or older */
.circle {
height: 50px;
width: 50px;
border-radius: 50px;
}
Estos comentarios también son útiles si divides tus hojas de estilo en secciones individuales para poder orientarte más rápidamente en el código CSS, por ejemplo:
/*------------------------------------*/
/* Header and footer area */
/*------------------------------------*/
...
8
CSS statements for header and footer
...
/*------------------------------------*/
/* Contents */
/*------------------------------------*/
...
CSS statements for the main content
...
Algunas notas sobre el formato del código CSS
Aunque formatear el código CSS es una cuestión de gusto personal, le daremos algunos consejos al respecto. Al menos, si deseas cambiar o arreglar algo, es posible que tengas algunos problemas para encontrar rápidamente lo que buscas con el siguiente formato del código CSS:
/* All right, but very confusing */
h2,h3{font-family:"Courier";color:blue;text-align:center;}
Una recomendación general para esto es utilizar una línea adicional para cada declaración y sangrarla. Debes poner el corchete de cierre en una línea separada. Lo siguiente es mucho mejor de leer que el formato del código CSS mostrado anteriormente:
/* Much better to read */
h2,
h3 {
font-family: "Courier";
color: blue;
text-align: center;
}
Por otro lado, para las reglas CSS con una sola declaración, puedes escribir todo en una línea:
h1 { color: blue; }
Como se mencionó, cada uno tiene su propio estilo, que desarrolla y continúa utilizando con el tiempo.
Nota del editor: esta publicación ha sido adaptada de una sección del libro. HTML y CSS: la guía completa por Jürgen Wolf.
