Share
Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..
Así aprendiste la base carné de identidad, clase, y descendiente selectores-y luego lo llamaron un día? Si es así, te estás perdiendo un enorme nivel de flexibilidad. Si bien muchos de los selectores mencionados en este artículo son parte de la especificación de CSS3 y, por lo tanto, solo están disponibles en los navegadores modernos, usted debe enviar estos a la memoria..
Y, por cierto, si tiene problemas con su CSS y desea que un profesional lo revise y corrija cualquier error, puede encontrar algunos profesionales independientes calificados en Envato Studio..
* margen: 0; relleno: 0;
Vamos a eliminar los obvios, para los principiantes, antes de pasar a los selectores más avanzados.
El símbolo de la estrella apuntará a cada elemento en la página. Muchos desarrolladores utilizarán este truco para poner a cero el margens y relleno. Si bien esto está bien para las pruebas rápidas, le aconsejo que nunca use esto en el código de producción. Agrega demasiado peso en el navegador, y es innecesario.
los * También se puede utilizar con selectores de niños..
#container * border: 1px solid black;
Esto apuntará a cada elemento que sea hijo de la #envase div. Nuevamente, trate de no usar mucho esta técnica, si es que alguna vez.
Ver demostración
#container width: 960px; margen: auto;
El prefijo del símbolo hash a un selector nos permite apuntar por carné de identidad. Este es fácilmente el uso más común, sin embargo, tenga cuidado al usar carné de identidad selectores.
Pregúntate a ti mismo: ¿Necesito absolutamente aplicar un
carné de identidada este elemento para apuntarlo?
carné de identidad 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.
Ver demostración
.error color: rojo;
Esto es un clase selector. La diferencia entre carné de identidads y claseEs que, con este último, puedes apuntar a múltiples elementos. Utilizar claseEs cuando quieres que tu estilo se aplique a un grupo de elementos. Alternativamente, use carné de identidads para encontrar una aguja en un pajar y diseñar solo ese elemento específico.
Ver demostración
li a text-decoration: none;
El siguiente selector de comentarios es el descendiente selector. Cuando necesite ser más específico con sus selectores, use estos. Por ejemplo, ¿qué pasa si, en lugar de la orientación todos 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 de descendientes..
Propina - Si su selector se ve como
X Y Z A B.error, lo estás haciendo mal. Siempre pregúntese si es absolutamente necesario aplicar todo eso. peso.
Ver demostración
a color: rojo; ul margen izquierdo: 0;
¿Qué pasa si desea orientar todos los elementos en una página, de acuerdo con su tipo, en lugar de un carné de identidad o clase¿nombre? Mantenlo simple y usa un selector de tipo. Si necesita apuntar a todas las listas desordenadas, use ul .
Ver demostración
a: link color: rojo; a: visted color: púrpura;
Usamos el :enlazar pseudo-clase para apuntar a todas las etiquetas de anclaje que aún no se han hecho clic en.
Alternativamente, también tenemos la :visitó pseudo clase, que, como esperaba, nos permite aplicar un estilo específico solo a las etiquetas de anclaje en la página que tener ha hecho clic en, o visitó.
Ver demostración
ul + p color: rojo;
Esto se conoce como un selector adyacente. Se seleccionará solamente 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.
Ver demostración
div # container> ul border: 1px solid black;
La diferencia entre el estándar. X Y y X> Y Es que este último solo seleccionará hijos directos. Por ejemplo, considere el siguiente marcado.
- Elemento de lista
- Niño
- Elemento de lista
- Elemento de lista
- Elemento de lista
Un selector de #contenedor> ul solo apuntará al uls cuales son hijos directos de la div con un carné de identidad de envase. No apuntará, por ejemplo, al ul que es un hijo de los primeros li.
Por esta razón, hay ventajas de rendimiento en el uso del combinador de niños. De hecho, se recomienda especialmente cuando se trabaja con motores de selección de CSS basados en JavaScript..
Ver demostración
ul ~ p color: rojo;
Este combinador de hermanos es similar a X + Y, Sin embargo, es menos estricto. Mientras que un selector adyacente (ul + p) solo seleccionará el primer elemento que sea inmediatamente precedido por el antiguo selector, este es más generalizado. Se seleccionará, refiriéndose a nuestro ejemplo anterior, cualquier pag elementos, siempre y cuando sigan una ul.
Ver demostración
un [título] color: verde;
Referido como selector de atributos, en nuestro ejemplo anterior, esto solo seleccionará las etiquetas de anclaje que tienen una título atributo. Las etiquetas de anclaje que no reciben este estilo en particular. Pero, ¿y si necesitas ser más específico? Bien?
Ver demostración
a [href = "http://net.tutsplus.com"] color: # 1f6053; / * nettuts verde * /
El fragmento anterior mostrará un estilo de todas las etiquetas de anclaje que enlazan con http://net.tutsplus.com; Ellos 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. Recuerda también hacer esto cuando utilices un motor selector de CSS CSS. Cuando sea posible, use siempre selectores CSS3 sobre métodos no oficiales.
Esto funciona bien, sin embargo, es un poco rígido. ¿Qué pasa si el enlace de hecho se dirige a Nettuts +, pero, tal vez, el camino es nettuts.com en lugar de la url completa? En esos casos podemos usar un poco de la sintaxis de expresiones regulares..
Ver demostración
a [href * = "tuts"] color: # 1f6053; / * nettuts verde * /
Aquí vamos; eso es lo que necesitamos La estrella designa que el valor de proceder debe aparecer. algun lado en el valor del atributo. De esa manera, esto cubre nettuts.com, net.tutsplus.com, e incluso tutsplus.com.
Tenga en cuenta que esta es una declaración amplia. ¿Qué pasa si la etiqueta de ancla vinculada a algún sitio no Envato con la cadena tuts en la url? Cuando necesites ser más específico, usa ^ y PS, para hacer referencia al principio y al final de una cadena, respectivamente.
Ver demostración
a [href ^ = "http"] background: url (path / to / external / icon.png) no se repite; relleno-izquierda: 10px;
¿Alguna vez te has preguntado cómo algunos sitios web pueden mostrar un pequeño icono junto a los enlaces que son externos? Estoy seguro de que has visto esto antes; Son buenos recordatorios de que el enlace lo dirigirá a un sitio web completamente diferente..
Esto es una cincha con el símbolo del quilate. Es más comúnmente usado en expresiones regulares para designar el comienzo de una cadena. Si queremos apuntar a todas las etiquetas de anclaje que tienen una href que comienza con http, Podríamos usar un selector similar al fragmento mostrado arriba.
Note que no estamos buscando
http: //; eso es innecesario, y no tiene en cuenta las direcciones URL que comienzan conhttps: //.
Ahora, ¿qué pasaría si quisiéramos en cambio estilizar todos los anclajes que enlazan, por ejemplo, con una foto? En esos casos, busquemos la fin de la cuerda.
Ver demostración
a [href $ = ". jpg"] color: rojo;
Una vez más, usamos un símbolo de expresiones regulares, PS, para referirse 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 ciertamente no funcionará para gifs y pngs.
Ver demostración
a [data-filetype = "image"] color: red;
Remítase al número ocho; ¿Cómo compensamos todos los diferentes tipos de imágenes: png, jpeg,jpg, gif? Bueno, podríamos crear múltiples selectores, tales como:
a [href $ = ". jpg"], a [href $ = ". jpeg"], a [href $ = ". png"], a [href $ = ". gif"] color: rojo;
Pero, eso es un dolor en el trasero, y es ineficiente. Otra posible solución es utilizar atributos personalizados. ¿Qué pasa si añadimos nuestra propia tipo de archivo de datos atribuir a cada ancla que enlaza a una imagen?
Enlace de imágen
Entonces, con eso gancho en su lugar, podemos usar un selector de atributos estándar para apuntar solo a esos anclajes.
a [data-filetype = "image"] color: red;
Ver demostración
a [data-info ~ = "external"] color: red; a [data-info ~ = "image"] border: 1px solid black;
Aquí hay una especial que impresionará a tus amigos. No mucha gente sabe acerca de este truco. La tilda (~) el símbolo nos permite apuntar a un atributo que tiene una lista de valores separados por espacios.
Siguiendo nuestro atributo personalizado del número quince, arriba, podríamos crear un información de datos atributo, que puede recibir una lista separada por espacios de cualquier cosa de la que tengamos que tomar nota. En este caso, tomaremos nota de los enlaces externos y de las imágenes, solo para el ejemplo..
"Haz clic en mí, tonto
Con ese marcado en su lugar, ahora podemos apuntar a cualquier etiqueta que tenga cualquiera de esos valores, usando el truco del selector de atributos ~.
/ * Attr de información de datos de destino que contiene el valor "externo" * / a [datos-información ~ = "externo"] color: rojo; / * Y que contienen el valor "image" * / a [data-info ~ = "image"] border: 1px solid black;
Bonita ingeniosa ay?
Ver demostración
entrada [tipo = radio]: marcada borde: 1px negro sólido;
Esta pseudo clase solo apuntará a un elemento de la interfaz de usuario que ha sido comprobado - como un botón de radio, o casilla de verificación. Es tan simple como eso.
Ver demostración
los antes de y después pseudo clases patadas a tope. Todos los días, al parecer, las personas están encontrando formas nuevas y creativas de usarlas de manera efectiva. Simplemente generan contenido alrededor del elemento seleccionado..
Muchos se introdujeron por primera vez en estas clases cuando se encontraron con el hackeo de corrección.
.clearfix: after content: ""; bloqueo de pantalla; Limpia los dos; visibilidad: oculta; tamaño de letra: 0; altura: 0; .clearfix * display: inline-block; altura: 1%;
Esta cortar usa el :después pseudo clase para agregar 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 desbordamiento: oculto; el método 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 los selectores de CSS3, técnicamente debe utilizar la sintaxis de pseudo-elementos de dos puntos.
::. Sin embargo, para seguir siendo compatibles, el agente de usuario también aceptará un uso de dos puntos. De hecho, en este punto, es más inteligente usar la versión de un solo punto en sus proyectos.
div: hover background: # e3e3e3;
Oh vamos. Usted sabe este. El término oficial para esto es pseudo clase accion del usuario. Suena confuso, pero en realidad no lo es. ¿Desea aplicar un estilo específico cuando un usuario se desplaza sobre un elemento? Esto hará el trabajo!
Tenga en cuenta que la versión anterior de Internet Explorer no responde cuando
:flotarla pseudo clase se aplica a cualquier otra cosa que no sea una etiqueta de anclaje.
Usará con más frecuencia este selector cuando aplique, por ejemplo, un borde inferior para anclar etiquetas, cuando se cierne sobre.
a: flotar borde inferior: 1px negro sólido;
Propina -
borde inferior: 1px negro sólido;se ve mejor quetexto-decoración: subrayado;.
div: no (#contenedor) color: azul;
los negación La pseudo clase es particularmente útil. Digamos que quiero seleccionar todos los divs, excepto el que tiene un carné de identidad de envase. El fragmento de arriba se encargará perfectamente de esa tarea..
O, si quisiera seleccionar cada elemento (no recomendado) excepto las etiquetas de párrafo, podríamos hacer:
*: no (p) color: verde;
Ver demostración
p :: primera línea font-weight: negrita; tamaño de letra: 1.2em;
Podemos utilizar pseudo elementos (designados por ::) para dar estilo a los fragmentos de un elemento, como la primera línea o la primera letra. Tenga en cuenta que estos deben aplicarse a elementos de nivel de bloque para que tengan efecto..
Un pseudo-elemento se compone de dos puntos:
::
p :: primera letra float: left; tamaño de letra: 2em; font-weight: negrita; Familia tipográfica: cursiva; derecho de relleno: 2px;
Este fragmento es una abstracción que encontrará todos los párrafos en la página, y luego sub-apuntará solo a la primera letra de ese elemento.
Esto se usa con más frecuencia para crear un estilo similar a un periódico para la primera letra de un artículo.
p :: primera línea font-weight: negrita; tamaño de letra: 1.2em;
Del mismo modo, el ::primera linea pseudoelemento, como se espera, diseñará solo la primera línea del elemento.
"Para la compatibilidad con las hojas de estilo existentes, los agentes de usuario también deben aceptar la notación de dos puntos anterior para los pseudo-elementos introducidos en los niveles 1 y 2 de CSS (a saber, primera línea, primera letra, antes y después). Esta compatibilidad no está permitida para los nuevos pseudo-elementos introducidos en esta especificación ". - Fuente
Ver demostración
li: nth-child (3) color: rojo;
¿Recuerdas los días en que no teníamos forma de apuntar a elementos específicos en una pila? los nth-child pseudo clase resuelve eso!
Tenga en cuenta que nth-child acepta un entero como parámetro, sin embargo, 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.
Ver demostración
li: nth-last-child (2) color: rojo;
¿Qué pasa si tienes una gran lista de artículos en un ul, ¿Y solo necesitaba acceder, digamos, del tercero al último elemento? En lugar de hacer li: nth-child (397), en su lugar podrías usar el nth-last-child pseudo clase.
Esta técnica funciona de manera casi idéntica a la del número dieciséis anterior, sin embargo, la diferencia es que comienza al final de la colección y se remonta..
Ver demostración
ul: nth-of-type (3) border: 1px solid black;
Habrá ocasiones en que, en lugar de seleccionar una niño, en su lugar necesita seleccionar de acuerdo a la tipo de elemento.
Imagina un marcado que contiene cinco listas desordenadas. Si quisieras estilizar solo el tercero ul, y no tenía un único carné de identidad para enganchar en, podrías usar el enésimo de tipo (n) pseudo clase En el fragmento de arriba, solo el tercero. ul tendrá un borde alrededor de él.
Ver demostración
ul: nth-last-of-type (3) border: 1px solid black;
Y sí, para mantener la coherencia, también podemos utilizar nth-last-of-type para comenzar al final de la lista de selectores, y trabajar de regreso para apuntar al elemento deseado.
ul li: primer hijo border-top: none;
Esta pseudo clase estructural nos permite apuntar solo al primer hijo del elemento primario del elemento. A menudo, utilizará esto para eliminar los bordes de los elementos de la primera y última lista..
Por ejemplo, digamos que tiene una lista de filas y cada una tiene una borde superior y un borde inferior. Bueno, con ese arreglo, el primer y último elemento de ese conjunto se verá un poco extraño.
Muchos diseñadores aplican clases de primero y último para compensar esto En su lugar, puede utilizar estas pseudo clases.
Ver demostración
ul> li: último hijo color: verde;
Lo contrario a primer hijo, último niño se dirigirá al último elemento del elemento principal del elemento..
Construyamos un ejemplo simple para demostrar un posible uso de estas clases. Crearemos un elemento de lista con estilo.
Nada especial aquí; solo una lista simple.
ul ancho: 200px; fondo: # 292929; color blanco; estilo de lista: ninguno; relleno-izquierda: 0; li relleno: 10px; borde inferior: 1px negro sólido; borde superior: 1px sólido # 3c3c3c;
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 agregar profundidad a sus listas, aplique un
borde inferiora cadalieso es una sombra o dos más oscura que laliColor de fondo. A continuación, aplique unborde superiorque es un par de tonos encendedor.
El único problema, como se muestra en la imagen de arriba, es que se aplicará un borde en la parte superior e inferior de la lista desordenada, lo que parece extraño. Vamos a usar el :primer hijo y :último niño pseudo clases para arreglar esto.
li: primer hijo border-top: none; li: último hijo borde inferior: ninguno;
Aquí vamos; eso lo arregla!
Ver demostración
Sí - IE8 apoyado :primer hijo, pero no :último niño. Imagínate.
div p: hijo único color: rojo;
A decir verdad, probablemente no te encuentres usando el hijo único pseudo clase demasiado a menudo. No obstante, está disponible, en caso de necesitarlo..
Te permite apuntar elementos que son los solamente Hijo de su padre. Por ejemplo, haciendo referencia al fragmento anterior, solo el párrafo que es el único hijo del div será de color rojo.
Asumamos el siguiente marcado.
Mi parrafo aqui.
Dos párrafos en total.
Dos párrafos en total.
En este caso, el segundo. divlos párrafos de 'no serán apuntados; solo el primero div. Tan pronto como aplique más de un niño a un elemento, el hijo único La pseudo clase deja de tener efecto..
Ver demostración
li: sólo de tipo font-weight: negrita;
Esta pseudo clase estructural se puede utilizar de algunas maneras inteligentes. Se dirigirá a elementos que no tienen hermanos dentro de su contenedor primario. Como ejemplo, vamos a apuntar a todos uls, que tienen un solo elemento de lista.
Primero, pregúntate a ti mismo cómo lograrías esta tarea. Podrías hacerlo ul li, pero, esto apuntaria todos elementos de la lista. La única solución es usar solo de tipo.
ul> li: sólo de tipo font-weight: negrita;
Ver demostración
los primero de tipo pseudo clase le permite seleccionar los primeros hermanos de su tipo.
Para entender mejor esto, hagamos una prueba. Copia el siguiente marcado en tu editor de código:
Mi parrafo aqui.
- Artículo de la lista 1
- Artículo de la lista 2
- Artículo de la lista 3
- Artículo de la lista 4
Ahora, sin seguir leyendo, intente averiguar cómo apuntar solo "Elemento de lista 2". Cuando lo hayas resuelto (o te hayas rendido), sigue leyendo..
Hay una variedad de maneras de resolver esta prueba. Revisaremos un puñado de ellos. Comencemos usando primero de tipo.
ul: primero en tipo> li: nth-child (2) font-weight: negrita;
Este fragmento esencialmente dice: "encuentre la primera lista desordenada en la página, luego busque solo los elementos secundarios inmediatos, que son elementos de la lista. A continuación, filtre hasta el segundo elemento de la lista en ese conjunto.
Otra opción es utilizar el selector adyacente..
p + ul li: último hijo font-weight: negrita;
En este escenario, encontramos el ul que procede inmediatamente el pag etiqueta, y luego encuentra el último hijo del elemento.
Podemos ser tan desagradables o juguetones como queramos con estos selectores.
ul: primero del tipo li: nth-last-child (1) font-weight: negrita;
Esta vez, agarramos la primera ul en la página, y luego encuentre el primer elemento de la lista, ¡pero comenzando desde la parte inferior! :)
Ver demostración
Si está compensando a 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. Estarías haciendo un gran daño a ti mismo. Asegúrese de consultar aquí para obtener una lista de compatibilidad de navegadores. Alternativamente, puede usar el excelente script IE9.js de Dean Edward para brindar soporte para estos selectores a los navegadores más antiguos.
En segundo lugar, cuando trabaje con bibliotecas de JavaScript, como la popular jQuery, siempre intente usar estos selectores nativos de CSS3 sobre los métodos / selectores personalizados de la biblioteca, cuando sea posible. Hará que su código sea más rápido, ya que el motor selector puede usar el análisis nativo del navegador, en lugar de su propio código..
Es fantástico que dedique tiempo a aprender los fundamentos del diseño web, pero si necesita una solución rápida, una de nuestras plantillas CSS listas para usar puede ser una buena opción. También tenemos algunos elementos premium de CSS para que los tengas en cuenta:
Aquí hay un puñado de artículos de código de CSSS listos para usar que Envato Market puede encontrar útiles.
Este Mega menú desplegable es una solución flexible y fácil de integrar para construir sus menús personalizados. El menú desplegable solo se basa en CSS / XHTML y viene con un formulario de contacto completamente funcional.
CSS3 Mega Menú desplegableCSS3 Responsive Web Pricing Tables Grids es un paquete de tablas de precios puras CSS3, responsivas y listas para retina. La plantilla viene con 2 estilos de tabla, 20 máscaras de color predefinidas, estados de animación animados, posibilidad de establecer una o varias columnas como activas (emergente) de forma predeterminada, cintas CSS3, información sobre herramientas CSS3, 20 iconos de sí / no basados en fuentes.
Esta versión está dedicada a cualquier sitio personalizado basado en CMS así como a sitios que no son CMS y funcionará con sitios web HTML o PHP directos.
Tablas de Precios Web Compensivo CSS3 GrillasTooltip es un apuesto y moderno caballero que aparece cuando es hora de mostrar. Sus características incluyen:
La información sobre herramientasMegaNavbar es un componente puro de navegación HTML5 / CSS3 que utiliza el marcado estándar de la barra de navegación y las clases de sistema de cuadrícula fluida de Bootstrap 3. Funciona para diseños fijos y sensibles, y tiene la facilidad de incluir otros componentes de Bootstrap. MegaNavbar es compatible con dispositivos móviles y navegadores web modernos.
MegaNavbar (v 2.2.0). Mega Menu avanzado para Bootstrap 3.0+Este paquete de tablas de precios de CSSS3 es una solución completa para construir tablas increíbles en minutos. Viene con 6 variantes de color así como 2 variantes de mesa (claro u oscuro).
Tablas responsivas de precios CSS3
Accentsconagua