› › Reglas de sintaxis CSS. Método de números aleatorios. Reglas para aplicar estilos.

Reglas de sintaxis CSS. Método de números aleatorios. Reglas para aplicar estilos.

CSS consta de tres partes: selector, propiedad y valor:

selector(propiedad: valor)

El selector es el elemento/etiqueta HTML que debe definirse. La propiedad es un atributo que desea cambiar. Cada propiedad puede tomar el valor. Hay una serie de reglas y recomendaciones que debes recordar.

  1. La propiedad y el valor están separados por dos puntos y colocados entre llaves:

    p (tamaño de fuente: 75%)

  2. Si el valor consta de varias palabras, deberá colocar el valor entre comillas:

    h1 (familia de fuentes: "caligrafía lucida")

  3. Si necesita definir más de una propiedad, debe separar las propiedades con un punto y coma:

    table (familia de fuentes: arial, "sans serif"; estilo de borde: punteado)

  4. Para que las definiciones de estilo sean más fáciles de leer, puede escribir cada propiedad en una línea separada:

    h2 (familia de fuentes: arial; margen derecho: 20 puntos; color:#ffffff)

  5. Al definir reglas, se permite la agrupación de selectores y se utiliza una coma como separador de selector. En el siguiente ejemplo, todos los elementos de párrafos, tablas y listas se combinaron en un grupo. Todos estos elementos se mostrarán en fuente sans serif:

    p,table,li (familia de fuentes: "sans serif";)

Selector de clase (clase)

En el desarrollo web, suele ser necesario especificar diferentes estilos para el mismo tipo de elemento HTML. Para resolver este problema, utilice un selector de clases.

Supongamos que un documento requiere dos tipos de encabezados: el encabezado más grande debe tener margen 10 puntos y el segundo, 20 puntos. Aquí se explica cómo hacerlo usando estilos:

h1.stepleft (margen izquierdo: 10 puntos) h2.stepright (margen izquierdo: 20 puntos)

Para aplicar estos estilos en documento HTML necesitarás usar el atributo de clase:

Encabezado con sangría exterior de 10 puntos.

Encabezado con sangría exterior de 20 puntos.

Al mismo tiempo, no se permite la siguiente definición. atributo de clase :

< h1 class="stepleft" h2 class="stepright">,

aquellos. sólo se puede definir un atributo de clase

También puede omitir el nombre de la etiqueta en el selector para definir un estilo que será utilizado por todos los elementos HTML que tengan una clase particular.

Izquierda (margen izquierdo: 40 puntos)

En el siguiente ejemplo todo elementos HTML, tener class="left" tendrá un margen exterior de 40 puntos.

En el siguiente código, los elementos table yp tienen class="left" . Esto significa que ambos elementos seguirán las reglas del selector ".left":

Esta tabla tendrá una sangría exterior de 40 puntos.

Este párrafo tendrá una sangría exterior de 40 puntos.

Para que los navegadores procesen correctamente el código, no se recomienda comenzar el nombre de la clase con un número, porque esto no funcionará en Mozilla/Firefox.

¿Qué es un selector en CSS? es una descripción de ese elemento o grupo de elementos que le dice al navegador qué elemento seleccionar para aplicarle un estilo. Veamos los selectores CSS básicos.

1) .X

.título del tema (color de fondo: amarillo;)

Selector CSS por clase X. La diferencia entre id y clase es que varios elementos de una página pueden tener la misma clase, pero la id siempre es única. Las clases deben usarse para aplicar el mismo estilo a múltiples elementos.

  • Cromo
  • Firefox
  • Safari
  • Ópera

2)#X

#content (ancho: 960px; margen: 0 automático;)

selector de identificación CSS. El signo hash antes del selector CSS X selecciona un elemento cuya identificación = X. Al asignar estilos por identificación, siempre debe recordar que debe ser único; solo una de esas identificaciones debe estar en la página. Por tanto, es mejor utilizar selectores por clases, combinaciones de clases o nombres de etiquetas. Sin embargo, los selectores de identificación son excelentes para pruebas automatizadas porque... le permite interactuar inmediatamente con el elemento necesario y tenga confianza que es el único en la página.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

3) *

* ( margen: 0; relleno: 0; )

Selector CSS para todos los elementos.. El símbolo de estrella selecciona todos los elementos que están en la página. Muchos desarrolladores lo utilizan para eliminar (poner a cero) los valores de margen y relleno de todos los elementos de la página. Sin embargo, en la práctica es mejor no hacer esto porque este selector CSS carga bastante el navegador al buscar en todos los elementos de la página.

El símbolo * también se puede utilizar para seleccionar todos los elementos secundarios:

#encabezado * (borde: 5px gris sólido;)

Este ejemplo selecciona todos los hijos (descendientes) del elemento con #header . Pero siempre vale la pena recordar que este selector es bastante pesado para el navegador.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

4)X

a (color: verde;) ol (margen izquierdo: 15px;)

selector de tipo CSS. ¿Cómo seleccionar todos los elementos del mismo tipo si no tienen id ni clases? Vale la pena usar un selector de tipo de elemento CSS. Por ejemplo, para seleccionar todas las listas ordenadas en una página, use ol(...) como se muestra arriba.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

5) X Y

li a (peso de fuente: negrita; decoración de texto: ninguna;)

Selector descendiente CSS o Selector de elementos secundarios CSS se utiliza con mayor frecuencia. Se utiliza si necesita seleccionar elementos. cierto tipo de muchos elementos secundarios. Por ejemplo, debe seleccionar todos los enlaces que están en el elemento li. En este caso, utilice este selector. Cuando utilice cadenas de tales selectores, pregúntese siempre si es posible seleccionar de este elemento utilice una secuencia aún más corta de selectores.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

6)X+Y

div + p (familia de fuentes: "Helvetica Neue", Arial, sans-serif; tamaño de fuente: 18px;)

Selector de elementos adyacentes elige solo un elemento de tipo Y que viene inmediatamente después de un elemento X. En este caso, cada párrafo sigue inmediatamente a cada uno. elemento div recibirá tipo especial y tamaño de fuente.

    Qué navegadores son compatibles:
  • IE7+
  • Firefox
  • Cromo
  • Safari
  • Cromo

7) X > Y

#content > ul (borde: 1px verde sólido;)

Selector descendiente CSS. La diferencia entre los selectores X Y y X > Y es que el selector CSS en cuestión solo seleccionará hijos inmediatos de elementos (sólo seleccionará descendientes directos). Por ejemplo:

  • Elemento de lista
    • Descendiente del primer elemento de la lista.
  • Elemento de lista
  • Elemento de lista

El selector CSS #content > ul solo seleccionará un ul que sea un hijo directo bloque div con id="contenedor" . No seleccionará un ul que sea hijo del primer li. Es bastante ventajoso en términos de velocidad. CSS funciona selector.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

8) X ~ Y

ol ~ p (margen izquierdo: 10px;)

Selector de elementos hermanos (subling) menos estricto que X + Y. Seleccionará no solo el primero, sino también todos los demás elementos p siguientes a ol.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera
a:enlace ( color: verde; ) a:visitado ( color: gris; )

Pseudoclase: enlace Se utiliza para seleccionar todos los enlaces en los que aún no se ha hecho clic. Si necesita aplicar un estilo determinado a enlaces ya visitados, utilice pseudoclase: visitada.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

10)X

a(color:rojo;)

selector de atributos CSS. Este ejemplo selecciona sólo aquellos enlaces que tienen un atributo de título.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

11)X

un (color: amarillo;)
    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

12)X

un (color: #dfc11f;)

El asterisco significa que el valor que busca debe estar en algún lugar del atributo (cualquier parte del atributo href). De esta manera, también se seleccionarán los enlaces de https://www..stijit.. El color dorado se aplicará a todos los enlaces seleccionados.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

13)X

a (fondo: url(ruta/a/externo/icon.png) sin repetición; relleno-izquierda: 15px;)

En algunos sitios, junto a los enlaces que conducen a otros sitios, se colocan pequeños iconos de flechas para indicar cuáles son. enlaces externos. El quilate “^” es un símbolo para indicar el comienzo de una línea. Por lo tanto, para seleccionar todas las etiquetas cuyo href comience con http, debe usar un selector CSS con quilates, como se muestra en el ejemplo anterior.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

14)X

a(color:verde;)

aqui se usa expresión regular y un símbolo $ para indicar el final de la línea. EN en este ejemplo Buscamos todos los enlaces que hagan referencia a imágenes con la extensión .jpg.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

15)X

a(color:verde;)

Aquí aplicamos Selector de atributos personalizados CSS. Agregamos nuestro propio atributo de tipo de archivo de datos a cada enlace:

enlace

Ahora, usando lo anterior Selectores CSS, puede seleccionar todos los enlaces que conducen a imágenes con cualquier extensión.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

16)X

Tilde (~) le permite resaltar atributo específico de una lista de atributos separados por espacios. Puede escribir nuestro propio atributo de información de datos, en el que puede especificar varios palabras clave a través de un espacio. De esta forma podrás indicar que el enlace es externo y lleva a la imagen.

enlace

Usando esta técnica, podemos seleccionar elementos con las combinaciones de atributos que necesitemos:

/* Seleccione un elemento cuyo atributo de información de datos contenga el valor externo */ a ( color: verde; ) /* Seleccione un elemento cuyo atributo de información de datos contenga el valor imagen */ a ( borde: 2px negro discontinuo; )

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

17) X: marcado

entrada: marcado (borde: 3px inicio negro;)

Esta pseudoclase solo resalta elementos como una casilla de verificación o un botón de opción, y solo cuando ya están en el estado marcado.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

18) X:después

Las pseudoclases :before y :after son muy útiles: crean contenido antes y después del elemento seleccionado.

Clearfix:después ( contenido: ""; mostrar: bloque; borrar: ambos; visibilidad: oculto; tamaño de fuente: 0; altura: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Aquí, usando la pseudoclase:después, después de un bloque con class.clearfix, un cadena vacía, después de lo cual se borra. Este enfoque se utiliza si es imposible aplicar propiedad de desbordamiento: oculto.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

19) X: flotar

div:hover (color de fondo: rgba(11,77,130,0.5); )

Aplica un estilo específico a un elemento cuando el cursor del mouse pasa sobre él. Viejo Versiones de Internet Explorer solo se aplica: pasa el cursor sobre los enlaces.

A: pasar el cursor (borde inferior: 1 px con puntos azules;)

    Qué navegadores son compatibles:
  • IE6+ (Solo se aplica a enlaces en IE6)
  • Cromo
  • Firefox
  • Safari
  • Ópera

20) X:no(selector)

div:not(#content) (color: gris;)

Pseudoclase no (negaciones) Esto es útil cuando, por ejemplo, necesita seleccionar todos los divs excepto el que tiene id="content" .

Usando el mismo principio, puedes seleccionar todos los elementos excepto p:

*:no(p) ( color: azul; )

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

21) X::pseudoElemento

p::primera línea (peso de fuente: negrita; tamaño de fuente: 24px;)

Los pseudoelementos se pueden utilizar para aplicar estilos a partes de elementos (por ejemplo, la primera línea de un párrafo o la primera letra de una palabra). Se aplica sólo a elementos de bloque.

Seleccionando la primera letra de un párrafo:

P::primera letra (familia de fuentes: cursiva; tamaño de fuente: 30 px; peso de fuente: negrita; relleno derecho: 1 px;)

Seleccionar la primera línea de un párrafo:

P: primera línea (tamaño de fuente: 28px; peso de fuente: negrita;)

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera

22) X:primer hijo

ul li:primer hijo (borde superior: ninguno;)

Primer hijo de pseudoclase selecciona solo el primer hijo elemento padre. A menudo se utiliza para eliminar un borde del primer elemento de una lista. Esta pseudoclase ha existido desde CSS 1.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari
  • Ópera 3.5+
  • Androide

23) X: último hijo

ul > li: último hijo (borde inferior: ninguno;)

Último hijo de pseudoclase selecciona el último hijo del elemento padre. Sólo apareció desde CSS 3.

    Qué navegadores son compatibles:
  • IE9+ (IE8 admite el primer hijo, pero no el último hijo. Microsoft (c))
  • Cromo
  • Firefox
  • Safari
  • Ópera 9.6+
  • Androide

24) X: hijo único

div p: hijo único (color: verde;)

Hijo único de pseudoclase permite seleccionar aquellos elementos que son hijos únicos de sus padres.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox
  • Safari 3.0+
  • Ópera 9.6+
  • Androide

25) X: enésimo hijo(n)

li:nth-child(3) (color: negro;)

Selecciona elemento hijo por el número especificado en el parámetro. selector de enésimo hijo toma un número entero como parámetro, pero cuenta desde 1, es decir si necesita seleccionar el segundo elemento de la lista, use li:nth-child(2) . Todas las pseudoclases que usan nth-child aparecieron solo a partir de CSS 3.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.6+
  • Safari 3.1+
  • Ópera 9.6+
  • Androide 2.1+
  • iOS 2.0+

26) X: enésimo último hijo(n)

li:nésimo-último-hijo(2) (color: rojo;)

si tienes gran lista elementos en ul y necesitas seleccionar el tercer elemento desde el final? En lugar de escribir li:nth-child(109) puedes usar selector del último hijo n-ésimo-último-hijo. Este método es igual que el anterior, pero contando desde el final.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.6+
  • Safari 3.1+
  • Ópera 9.6+
  • Androide 2.1+
  • iOS 2.0+

27) X: enésimo tipo (n)

ul:nth-of-type(3) (borde: 1px con puntos negros;)

Si hay cuatro listas desordenadas en una página y solo necesita diseñar la tercera, que no tiene una identificación única, debe usar nth-of-type.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.6+
  • Safari 3.1+
  • Ópera 9.6+
  • Androide 2.1+
  • iOS 2.0+

28) X: enésimo último de tipo (n)

ul: n-ésimo-último-de-tipo (3) (borde: 2px cresta azul; }

Pseudoclase enésima última de tipo (n) está destinado a seleccionar el enésimo elemento de un determinado tipo desde el final.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.6+
  • Safari 3.1+
  • Ópera 9.6+
  • Androide 2.1+
  • iOS 2.0+

29) X: único de tipo

li:solo tipo (peso de fuente: negrita;)

Pseudoclase solo de tipo selecciona elementos que no tienen vecinos dentro del elemento principal. Por ejemplo, puede seleccionar todos los ul que contengan solo lis solitarios.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.5+
  • Safari 3.1+
  • Ópera 9.6+
  • Androide 2.1+
  • iOS 2.0+

30) X: primero de tipo

ul:primero de tipo > li:nth-child(3) (estilo de fuente: cursiva;)

Pseudoclase de primera clase selecciona el primer elemento del tipo dado.

    Qué navegadores son compatibles:
  • Cromo
  • Firefox 3.5+
  • Safari 3.1+
  • Ópera 9.5+
  • Androide 2.1+
  • iOS 2.0+

Como se señaló anteriormente, las reglas de estilo están escritas en su propio formato, diferente del HTML. El concepto principal es un selector: es un nombre específico del estilo para el cual se agregan parámetros de formato. Los selectores son etiquetas, clases e identificadores. método general Los registros se ven así:

El nombre del selector se escribe primero, por ejemplo, TABLE, esto significa que todas las reglas de estilo se aplicarán a la etiqueta.

, luego hay llaves en las que está escrita la propiedad de estilo y su valor se indica después de los dos puntos. Propiedades de estilo separados por un punto y coma; este símbolo se puede omitir al final.

CSS no distingue entre mayúsculas y minúsculas, saltos de línea, espacios o tabulaciones, por lo que la forma de la entrada depende del deseo del desarrollador. Así, el ejemplo 1.14 muestra dos tipos de diseño de selectores y sus reglas.

Ejemplo 1.14. Usando estilos

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

xmlns="http://www.w3.org/1999/xhtml">

Encabezamientos