CSS - Sintaxis

Un CSS se compone de reglas de estilo que son interpretadas por el navegador y luego aplicadas a los elementos correspondientes en su documento. Una regla de estilo se compone de tres partes:

  • Selector- Un selector es una etiqueta HTML en la que se aplicará un estilo. Puede ser cualquier etiqueta como <h1> o <table>, etc.

  • Property- Una propiedad es un tipo de atributo de etiqueta HTML. En pocas palabras, todos los atributos HTML se convierten en propiedades CSS. Pueden ser de color , borde , etc.

  • Value- Los valores se asignan a las propiedades. Por ejemplo, la propiedad de color puede tener un valor rojo o # F1F1F1, etc.

Puede poner la sintaxis de reglas de estilo CSS de la siguiente manera:

selector { property: value }

Example - Puede definir un borde de tabla de la siguiente manera -

table{ border :1px solid #C00; }

Aquí la tabla es un selector y el borde es una propiedad y el valor dado 1px sólido # C00 es el valor de esa propiedad.

Puede definir selectores de varias formas sencillas según su comodidad. Permítanme poner estos selectores uno por uno.

Los selectores de tipo

Este es el mismo selector que hemos visto anteriormente. Una vez más, un ejemplo más para dar color a todos los títulos de nivel 1:

h1 {
   color: #36CFFF; 
}

Los selectores universales

En lugar de seleccionar elementos de un tipo específico, el selector universal simplemente coincide con el nombre de cualquier tipo de elemento:

* { 
   color: #000000; 
}

Esta regla muestra el contenido de cada elemento de nuestro documento en negro.

Los selectores descendientes

Suponga que desea aplicar una regla de estilo a un elemento en particular solo cuando se encuentra dentro de un elemento en particular. Como se muestra en el siguiente ejemplo, la regla de estilo se aplicará al elemento <em> solo cuando se encuentre dentro de la etiqueta <ul>.

ul em {
   color: #000000; 
}

Los selectores de clases

Puede definir reglas de estilo según el atributo de clase de los elementos. Todos los elementos que tengan esa clase serán formateados de acuerdo con la regla definida.

.black {
   color: #000000; 
}

Esta regla muestra el contenido en negro para cada elemento con el atributo de clase establecido en negro en nuestro documento. Puedes hacerlo un poco más particular. Por ejemplo

h1.black {
   color: #000000; 
}

Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo de clase establecido en negro .

Puede aplicar más de un selector de clase a un elemento dado. Considere el siguiente ejemplo:

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Los selectores de ID

Puede definir reglas de estilo basadas en el atributo id de los elementos. Todos los elementos que tengan esa identificación serán formateados de acuerdo con la regla definida.

#black {
   color: #000000; 
}

Esta regla muestra el contenido en negro para cada elemento con el atributo id establecido en negro en nuestro documento. Puedes hacerlo un poco más particular. Por ejemplo

h1#black {
   color: #000000; 
}

Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo id establecido en negro .

El verdadero poder de los selectores de id es cuando se utilizan como base para los selectores descendientes, por ejemplo:

#black h2 {
   color: #000000; 
}

En este ejemplo, todos los encabezados de nivel 2 se mostrarán en color negro cuando esos encabezados se encuentren en etiquetas que tengan el atributo id establecido en negro .

Los selectores de niños

Has visto los selectores descendientes. Hay un tipo más de selector, que es muy similar a los descendientes pero tiene una funcionalidad diferente. Considere el siguiente ejemplo:

body > p {
   color: #000000; 
}

Esta regla representará todos los párrafos en negro si son hijos directos del elemento <body>. Otros párrafos colocados dentro de otros elementos como <div> o <td> no tendrían ningún efecto en esta regla.

Los selectores de atributos

También puede aplicar estilos a elementos HTML con atributos particulares. La regla de estilo a continuación coincidirá con todos los elementos de entrada que tengan un atributo de tipo con un valor de texto :

input[type = "text"] {
   color: #000000; 
}

La ventaja de este método es que el elemento <input type = "submit" /> no se ve afectado y el color se aplica solo a los campos de texto deseados.

Existen las siguientes reglas que se aplican al selector de atributos.

  • p[lang]- Selecciona todos los elementos de párrafo con un atributo lang .

  • p[lang="fr"]- Selecciona todos los elementos de párrafo cuyo atributo lang tiene un valor de exactamente "fr".

  • p[lang~="fr"]- Selecciona todos los elementos de párrafo cuyo atributo lang contiene la palabra "fr".

  • p[lang|="en"]- Selecciona todos los elementos de párrafo cuyo atributo lang contiene valores que son exactamente "en" o comienzan con "en-".

Reglas de estilo múltiple

Es posible que deba definir varias reglas de estilo para un solo elemento. Puede definir estas reglas para combinar varias propiedades y los valores correspondientes en un solo bloque como se define en el siguiente ejemplo:

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Aquí todos los pares de propiedades y valores están separados por un semicolon (;). Puede mantenerlos en una sola línea o en varias líneas. Para una mejor legibilidad, los mantenemos en líneas separadas.

Por un tiempo, no se preocupe por las propiedades mencionadas en el bloque anterior. Estas propiedades se explicarán en los próximos capítulos y puede encontrar detalles completos sobre las propiedades en Referencias CSS

Selectores de agrupación

Puede aplicar un estilo a muchos selectores si lo desea. Simplemente separe los selectores con una coma, como se muestra en el siguiente ejemplo:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Esta regla de definición de estilo se aplicará también a los elementos h1, h2 y h3. El orden de la lista es irrelevante. Todos los elementos del selector tendrán aplicadas las declaraciones correspondientes.

Puede combinar los distintos selectores de identificación como se muestra a continuación:

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}