aprende CSS: La Guía Completa

hemos creado una guía completa para ayudarte a aprender CSS, ya sea que estés empezando con lo básico o quieras explorar CSS más avanzado.

selectores CSS

así que aprendiste la base id, class, y descendant Selectores—y luego lo llamó un día? Si es así, te estás perdiendo un enorme nivel de flexibilidad. Te debes a ti mismo el Enviar estos Selectores avanzados de CSS y CSS3 a la memoria.

Selectores básicos

1., *

* { margin: 0; padding: 0;}

eliminemos los obvios, para los principiantes, antes de pasar a los selectores más avanzados.

el símbolo de estrella se dirigirá a cada elemento de la página. Muchos desarrolladores usarán este truco para poner a cero margins y padding. Si bien esto está bien para pruebas rápidas, te aconsejo que nunca uses esto en código de producción. Añade demasiado peso en el navegador, y es innecesario.

el * también se puede utilizar con Selectores secundarios.,

#container * { border: 1px solid black;}

Esto se destino de cada elemento individual que es un hijo de la etiqueta #container div. Una vez más, Trate de no utilizar esta técnica mucho, si alguna vez.

2. #X

#container { width: 960px; margin: auto;}

anteponer el símbolo hash a un selector nos permite apuntar por id. Este es fácilmente el uso más común; sin embargo, tenga cuidado al usar los selectores id.,

pregúntese: ¿Es absolutamente necesario aplicar un id a este elemento para dirigirlo?

id los selectores son rígidos y no permiten su reutilización. Si es posible, primero intente usar un nombre de etiqueta, uno de los nuevos elementos HTML5, o incluso una pseudo-clase.

3. .X

.error { color: red;}

Esto es un class selector. La diferencia entre id s y classes es que, con este último, puede dirigirse a varios elementos., Utilice class es cuando desee que su estilo se aplique a un grupo de elementos. Alternativamente, utilice id s para encontrar una aguja en un pajar, y el estilo solo ese elemento específico.

4. X

a { color: red; }ul { margin-left: 0; }

¿Qué pasa si usted desea apuntar todos los elementos de una página, de acuerdo a sus type, en lugar de un id o classnombre? Manténgalo simple y use un selector de tipos. Si necesita dirigirse a todas las listas no ordenadas, use ul {}.,

demostración en vivo de Selectores básicos

Selectores combinadores

5. X Y

li a { text-decoration: none;}

El siguiente más común selector es el descendant selector. Cuando necesite ser más específico con sus Selectores, use estos. Por ejemplo, ¿Qué pasa si, en lugar de apuntar a todas las etiquetas de anclaje, solo necesita apuntar a los anclajes que están dentro de una lista desordenada? Esto es específicamente cuando usarías un selector descendiente.

Pro-tip: si su selector se parece a X Y Z A B.error, lo está haciendo mal., Siempre pregúntate si es absolutamente necesario aplicar todo ese peso.

6. X + Y

ul + p { color: red;}

Esto se conoce como un selector adyacente. Seleccionará solo el elemento que está precedido inmediatamente por el elemento anterior. En este caso, solo el primer párrafo después de cada ul tendrá texto rojo.

7., X > Y

div#container > ul { border: 1px solid black;}

La diferencia entre el estándar X Y y X > Y es que esto último sólo seleccione directo a los niños. Por ejemplo, considere el siguiente marcado.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un selector de #container > ul sólo objetivo de la etiqueta uls que son hijos directos de la etiqueta div con un id de container., No apuntará, por ejemplo, al ul que es un hijo del primer li.

por esta razón, hay beneficios de rendimiento en el uso del combinador infantil. De hecho, se recomienda especialmente cuando se trabaja con motores selectores CSS basados en JavaScript.

8. X ~ y

ul ~ p { color: red;}

Este combinador de hermanos es similar a X + Y, pero es menos estricto., Mientras que un selector adyacente (ul + p) solo seleccionará el primer elemento que esté inmediatamente precedido por el selector anterior, este es más generalizado. Seleccionará, haciendo referencia a nuestro ejemplo anterior, cualquier elemento p, siempre y cuando siga un ul.

demostración en vivo de los selectores combinadores

Selectores de atributos

9. X

a { color: green;}

referido como un selector de atributos, en nuestro ejemplo anterior, esto solo seleccionará las etiquetas de anclaje que tienen un atributo title., Las etiquetas de anclaje que no recibirán este estilo particular. ¿Pero qué pasa si necesitas ser más específico? Echa un vistazo al siguiente ejemplo!

10. X

a { color: #83b348; /* Envato green */}

El fragmento de código anterior estilizará todas las etiquetas de anclaje que se vinculen a https://code.tutsplus.com; recibirán nuestro color verde de marca. Todas las demás etiquetas de anclaje no se verán afectadas.

tenga en cuenta que estamos envolviendo el valor entre comillas. Recuerde que también debe hacer esto cuando se utiliza un motor de selector CSS JavaScript. Cuando sea posible, Utilice siempre Selectores CSS3 sobre métodos no oficiales.,

Esto funciona bien, aunque es un poco rígido. ¿Qué pasa si el enlace de hecho se dirige a Envato Tuts+, pero tal vez el camino es code.tutsplus.com en lugar de la URL completa? En esos casos, podemos usar un poco de la sintaxis de expresiones regulares.

11. X

a { color: #83b348; /* Envato green */}

ahí vamos; eso es lo que necesitamos. La estrella indica que el valor de procedimiento debe aparecer en algún lugar del valor del atributo. De esa manera, esto cubre tutsplus.com, code.tutsplus.com, e incluso webdesign.tutsplus.com.

tenga en cuenta que esta es una declaración amplia., ¿Qué pasa si la etiqueta de anclaje vinculada a algún sitio no Envato con la cadena tutsplus en la URL? Cuando necesite ser más específico, use ^y $, para hacer referencia al principio y al final de una cadena, respectivamente.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

¿alguna vez se preguntó cómo algunos sitios web son capaces de mostrar un pequeño icono junto a los enlaces que son externos? Estoy seguro de que los has visto antes; son buenos recordatorios de que el enlace te dirigirá a un sitio web completamente diferente.

esto es pan comido con el símbolo de quilates., Se usa más comúnmente en expresiones regulares para designar el comienzo de una cadena. Si queremos apuntar a todas las etiquetas de anclaje que tienen un href que comienza con http, podríamos usar un selector similar al fragmento de código que se muestra arriba.

observe que no estamos buscando ; eso es innecesario, y no tiene en cuenta las URL que comienzan con

ahora, ¿qué pasaría si en su lugar quisiéramos estilizar todos los anclajes que enlazan, por ejemplo, a una foto?, En esos casos, busquemos el final de la cadena.

13. X

a { color: red;}

nuevamente, usamos un símbolo de expresiones regulares, $, para referirnos al final de una cadena. En este caso, estamos buscando todos los anclajes que enlazan a una imagen—o al menos una URL que termina con .jpg. Tenga en cuenta que esto no capturará imágenes GIF y PNG.

14. X

a { color: red;}

¿Cómo compensamos todos los diversos tipos de imagen?, Bueno, podríamos crear varios Selectores, como:

a,a,a,a { color: red;}

pero eso es un dolor, y es ineficiente. Otra posible solución es utilizar atributos personalizados. ¿Qué pasa si agregamos nuestro propio atributo data-filetype a cada ancla que enlaza con una imagen?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

entonces, con ese gancho en su lugar, podemos usar un selector de atributos estándar para apuntar solo a esos anclajes.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Aquí hay uno especial que impresionará a tus amigos. No mucha gente sabe de este truco., El símbolo tilde (~) nos permite apuntar a un atributo que tiene una lista de valores separada por espacios.

junto con nuestro atributo personalizado del número 15, arriba, podríamos crear un atributo data-info, que puede recibir una lista separada por espacios de cualquier cosa que necesitemos anotar. En este caso, vamos a tomar nota de Enlaces Externos y enlaces a imágenes-solo para el ejemplo.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Con ese marcado en su lugar, ahora podemos apuntar a cualquier etiqueta que tenga cualquiera de esos valores, utilizando el truco del selector de atributos ~.

Bastante ingenioso, ¿eh?

demostración en vivo de Selectores de atributos

Pseudo Selectores

16. X: visited y X:link

a:link { color: red; }a:visited { color: purple; }

utilizamos la pseudo-clase :link para apuntar a todas las etiquetas de anclaje en las que aún no se ha hecho clic.,

alternativamente, también tenemos la pseudo clase :visited, que, como era de esperar, nos permite aplicar un estilo específico solo a las etiquetas de anclaje en la página en la que se ha hecho clic o «visitado».

17. X: checked

input:checked { border: 1px solid black;}

Esta pseudo clase solo se dirigirá a un elemento de la interfaz de usuario que haya sido marcado, como un botón de opción o una casilla de verificación. Es tan simple como eso.

18. X: después de

Las pseudo clasesbefore yafter son geniales., Todos los días, al parecer, la gente está encontrando nuevas y creativas formas de usarlos de manera efectiva. Simplemente generan contenido alrededor del elemento seleccionado.

muchos fueron introducidos por primera vez a estas clases cuando se encontraron con el truco clear-fix.

este hack utiliza la pseudo clase :after para añadir un espacio después del elemento y luego borrarlo. Es un excelente truco para tener en su bolsa de herramientas, particularmente en los casos en que el método overflow: hidden; no es posible.

Para otro uso creativo de esto, consulte mi consejo rápido sobre la creación de sombras.,

de acuerdo con la especificación de Selectores CSS3, técnicamente debe usar la sintaxis de pseudo elemento de dos puntos ::. Sin embargo, para seguir siendo compatible, el user-agent también aceptará un solo uso de dos puntos.

19. X:hover

div:hover { background: #e3e3e3;}

Oh, vamos. Conoces a este. El término oficial para esto es»pseudo clase de acción del usuario». Suena confuso, pero en realidad no lo es. ¿Quieres aplicar un estilo específico cuando un usuario pasa el cursor sobre un elemento? ¡Esto hará el trabajo!,

tenga en cuenta que las versiones anteriores de Internet Explorer no responden cuando la pseudo clase :hover se aplica a cualquier cosa que no sea una etiqueta de anclaje.

más a menudo usará este selector cuando aplique, por ejemplo, un border-bottom para anclar etiquetas, cuando se cierne sobre ellas.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; parece mejor que el text-decoration: underline;.

20., X: not (selector)

div:not(#container) { color: blue;}

La pseudo clase de negación es particularmente útil. Digamos que quiero seleccionar todos div s, excepto el que tiene un id de container. El fragmento de código anterior manejará esa tarea perfectamente.

o, si quisiera seleccionar cada elemento (no aconsejado) excepto las etiquetas de párrafo, podríamos hacer:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

podemos usar pseudo elementos (designados por ::) para dar estilo a fragmentos de un elemento, como la primera línea o la primera letra. Tenga en cuenta que estos deben aplicarse a elementos a nivel de bloque para que surtan efecto.,

Un pseudo-elemento se compone de dos puntos: ::

apuntar la primera letra de un párrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

este fragmento es una abstracción que encontrará todos los párrafos de la página y, a continuación, subobjetivo solo la primera letra de ese elemento.

esto se usa más a menudo para crear un estilo similar al de un periódico para la primera letra de un artículo.,

apunte a la primera línea de un párrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

de manera similar, el pseudo elemento::first-line solo dará estilo a la primera línea del elemento.

«para la compatibilidad con hojas de estilo existentes, Los agentes de usuario también deben aceptar la notación anterior de un punto para pseudo-elementos introducidos en los niveles CSS 1 y 2 (a saber, :first-line, :first-letter, :before y :after). Esta compatibilidad no está permitida para los nuevos pseudo-elementos introducidos en esta especificación.,»- W3C Selectors Specs

demostración en vivo de Pseudo Selectores

Nth Child and Type Selectors

22. X: nth-child (n)

li:nth-child(3) { color: red;}

¿Recuerdas los días en que no teníamos forma de apuntar a elementos específicos en una pila? La pseudo clase nth-child resuelve eso!

tenga en cuenta que nth-child acepta un entero como parámetro, pero esto no está basado en cero. Si desea apuntar al segundo elemento de la lista, use li:nth-child(2).

incluso podemos usar esto para seleccionar un conjunto variable de Hijos., Por ejemplo, podríamos hacer li:nth-child(4n) para seleccionar cada cuarto elemento de la lista.

23. X: nth-last-child (n)

li:nth-last-child(2) { color: red;}

¿Qué pasaría si tuviera una enorme lista de elementos en un ul, y solo necesitara acceder, digamos, al último elemento? En lugar de hacer li:nth-child(397), podría usar la pseudo clase nth-last-child.

esta técnica funciona casi de manera idéntica al número 16 anterior. La diferencia es que comienza al final de la colección, y trabaja su camino de regreso.

24., X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}

Hay veces que, en lugar de seleccionar un child, que en lugar necesario seleccionar de acuerdo con el type del elemento.

Imagine un marcado que contiene cinco listas desordenadas. Si usted quería estilo sólo la tercera ul, y no tienen una única id gancho en, usted podría utilizar la etiqueta nth-of-type(n) pseudo clase. En el fragmento de código anterior, solo el tercer ul tendrá un borde alrededor.

25., X: nth-last-of-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

y sí, para permanecer consistentes, también podemos usar nth-last-of-type para comenzar al final de la lista de selectores y trabajar nuestro camino de regreso para apuntar al elemento deseado.

26. X: first-child

ul li:first-child { border-top: none;}

Esta pseudo clase estructural nos permite apuntar solo al primer hijo del padre del elemento. A menudo usará esto para eliminar los bordes del primer y último elemento de la lista.

Por ejemplo, digamos que usted tiene una lista de filas, y cada uno tiene un border-top y un border-bottom., Bueno, con ese arreglo, el primer y último elemento en ese conjunto se verá un poco extraño.

Muchos de los diseñadores aplican clases de first y last para compensar esto. En su lugar, puede usar estas pseudo clases.

27. X:last-child

ul > li:last-child { color: green;}

El opuesto de first-child, last-child le meta el último elemento del elemento padre.

last-child ejemplo de Selector

construyamos un ejemplo simple para demostrar un posible uso de estas clases., Crearemos un elemento de lista con estilo.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

para el marcado, no hay nada especial: solo una lista simple.

Aquí está el CSS:

Este estilo establecerá un fondo, eliminará el relleno predeterminado del navegador en el ul, y aplicará bordes a cada li para proporcionar un poco de profundidad.

Para añadir profundidad a sus listas, aplicar un border-bottom cada li que es un tono o dos más oscuro que el li‘s el color de fondo., A continuación, aplique un border-top que es un par de tonos más claros.

el único problema, como se muestra en la imagen anterior, es que se aplicará un borde a la parte superior e inferior de la lista desordenada, lo que parece extraño. Usemos las pseudo clases :first-child y :last-child para arreglar esto.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Hay que ir; que lo arregla!

28., X: only-child

div p:only-child { color: red;}

a decir verdad, probablemente no se encontrará usando la pseudo clase only-child con demasiada frecuencia. Sin embargo, está disponible, en caso de que lo necesite.

le permite apuntar a elementos que son el único hijo de su padre. Por ejemplo, haciendo referencia al fragmento anterior, solo el párrafo que es el único hijo de div será de color rojo.

asumamos el siguiente marcado.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

En este caso, el segundo div‘s de los párrafos no será específica; sólo el primer div. Tan pronto como se aplica más de un hijo a un elemento, la pseudo clase only-child deja de tener efecto.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Esta pseudo clase estructural se puede usar de algunas maneras inteligentes. Se dirigirá a los elementos que no tengan hermanos dentro de su contenedor padre. Como ejemplo, vamos a apuntar a todos los ul s que tienen un solo elemento de Lista.,

primero, pregúntate cómo lograrías esta tarea. Podría hacer ul li, pero esto se dirigiría a todos los elementos de la lista. La única solución es usar only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

La pseudo clase first-of-type le permite seleccionar los primeros hermanos de su tipo.

una prueba

para entender mejor esto, hagamos una prueba. Copie el siguiente marcado en su editor de código:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

ahora, sin leer más, intente averiguar cómo apuntar solo a»elemento de Lista 2″., Cuando te hayas dado cuenta (o te hayas dado por vencido), sigue leyendo.

Solución 1

Hay una variedad de maneras para resolver esta prueba. Revisaremos un puñado de ellos. Comencemos usando first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Este fragmento esencialmente dice, para encontrar la primera lista desordenada en la página, luego encuentre solo los hijos inmediatos, que son elementos de Lista. A continuación, filtre eso hasta solo el segundo elemento de la lista en ese conjunto.

Solución 2

Otra opción es utilizar el selector adyacente.,

p + ul li:last-child { font-weight: bold;}

En este escenario, nos encontramos con la etiqueta ul que inmediatamente procede el p etiqueta y, a continuación, encontrará el último hijo del elemento.

Solución 3

podemos ser tan desagradables o tan juguetones como queramos con estos Selectores.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Esta vez, tomamos el primer ul en la página, y luego encontramos el primer elemento de la lista, ¡pero comenzando desde la parte inferior!,

demostración en vivo de los Enésimos Selectores secundarios y de tipo

conclusión

Si está compensando los navegadores más antiguos, como Internet Explorer 6, aún debe tener cuidado al usar estos Selectores más nuevos. Pero por favor, no dejes que eso te impida aprender esto. Te estarías haciendo un flaco favor a ti mismo. Asegúrese de consultar aquí una lista de compatibilidad con navegadores. Alternativamente, puedes usar el excelente IE9 de Dean Edward.script js para dar soporte a estos Selectores en navegadores antiguos.,

en segundo lugar, cuando se trabaja con bibliotecas JavaScript, como la popular jQuery, siempre intente utilizar estos Selectores CSS3 nativos sobre los métodos/Selectores personalizados de la biblioteca, cuando sea posible. Hará que tu código sea más rápido, ya que el motor de selección puede usar el análisis nativo del navegador, en lugar del propio.

es genial que estés pasando tiempo aprendiendo los fundamentos del diseño web, pero si necesitas una solución rápida, una de nuestras plantillas CSS listas para usar podría ser una buena opción. También tenemos algunos elementos CSS premium para que usted considere.,

• CSS3
  12 elegantes tablas de precios CSS para su último proyecto web
  Monty Shokeen
• Bootstrap 4
  18 best bootstrap 4 plugins
  Monty Shokeen

acceso gratuito a Envato Elements durante 1 mes

finalmente, aquí hay una oferta muy especial para ayudarlo a construir sitios y aplicaciones de aspecto profesional. Además de usar estos selectores CSS, ¿por qué no aprovechar fotos de archivo de alta calidad, secuencias de video, fuentes premium, gráficos, ilustraciones y más?,

normalmente, tendrías que pagar por recursos como ese. Pero ahora mismo, puedes acceder a millones de activos creativos para tus proyectos de codificación durante todo un mes, de forma totalmente gratuita. Y lo que es más, obtienes descargas ilimitadas, por lo que puedes agarrar todo lo que quieras durante ese mes, ¡y solo pagar si decides continuar!,

para aprovechar esta oferta, haga clic en este enlace especial de registro o ingrese el código a continuación en la página de registro:

elements_cont_tuts-freemonth1-4bwkbp

no espere demasiado: la oferta solo es válida por un tiempo limitado!