front end
1.0.0
Preparación : Para este contenido, el estudiante deberá contar con una computadora con acceso a internet, un navegador web con soporte HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, etc.), un editor de texto (VSCode, etc.) .) y una plataforma de alojamiento (gratuita o de pago).
Cuando hablamos de sitio web, podemos notar que este término es la combinación de dos palabras en inglés: “web”, que significa red y se refiere a la red mundial, y “site”, que significa lugar. En este sentido, un sitio web o sitio es un lugar al que se puede acceder en Internet, a través de una URL, y que tiene un conjunto de páginas programadas en algún idioma.
Para comprender mejor este tema, veamos un ejemplo: cuando escribe la dirección blog.betrybe.com en su navegador de Internet para acceder al blog de Trybe, el navegador buscará dónde se encuentra este sitio web en Internet. Luego se realizará una solicitud al servidor.
En este servidor se almacenan todos los archivos de texto, imágenes y estilos que componen la página web. Luego, el servidor devolverá este conjunto de documentos al navegador para que pueda mostrar el contenido tal como lo ve en su pantalla.
Los sitios web pueden presentar diferentes formas y contenidos. Algunas de las opciones incluyen: tiendas virtuales, como Mercado Livre y Amazon, donde se pueden comprar y vender productos; sitios web y portafolios institucionales, utilizados por empresas y personas para presentarse y ser encontrados por los clientes; y blogs, como el que lees.
Además, los sitios web también se pueden clasificar en estáticos o dinámicos. Los sitios web estáticos generalmente se desarrollan utilizando HTML, CSS y JavaScript. Su contenido es más sencillo y no existe interacción con una base de datos.
Los sitios web dinámicos, además de aprovechar HTML, CSS y JavaScript, también utilizan lenguajes de programación más robustos, como PHP. Estos sitios tienen funcionalidad conectada a una base de datos. De esta forma, cada página a la que se accede puede aportar datos específicos.
Con Diseño Web es necesario observar la importancia de la interfaz para el desarrollo de sitios web, evolución de las tecnologías utilizadas en la construcción de páginas web ricas (web 1.0, web 2.0, web 3.0 y web 4.0), evolución de las interfaces (estéticas, funcionales y estructurales). ).
Por lo tanto, es necesario comprender la importancia de crear interfaces ricas para construir un sitio web, buscando la mejor experiencia de navegación y usabilidad para el usuario final, conociendo algunas tecnologías utilizadas en el pasado para construir sitios en línea. Desde esta visión, observar viejas tendencias del mercado, así como ver nuevas tendencias en el desarrollo de interfaces.
Paleta de colores:
Degradados:
Básicamente, el desarrollo web significa codificar páginas para Internet. Sin embargo, esta tarea va más allá del uso de HTML y CSS, las herramientas básicas para crear una página estática, que presenta información que sólo puede modificarse editando el código fuente.
Por el contrario, las páginas de un sitio web pueden ser dinámicas. Esto significa que el contenido mostrado se puede cambiar sin interferir con el código fuente. Para que esto sea posible, las partes dinámicas del sitio web se almacenan en una base de datos, a la que se accede siempre que es necesario para recuperar este contenido.
Esta característica permite el desarrollo de aplicaciones complejas, que utilizan reglas comerciales, API (interfaz de programación de aplicaciones) y mucho más. Por lo tanto, existe una división en actividades enfocadas al desarrollo web, codificación del lado del cliente (front-end) y codificación del lado del servidor (back-end).
Ejemplo de API con la estructura más utilizada actualmente para aplicaciones web y móviles, REST API también llamada RESTful API .
Las aplicaciones web son el número creciente de sitios en la Web; es decir, imitan las aplicaciones de escritorio en lugar de los documentos tradicionales y los enlaces estáticos de texto e imágenes que constituyen la mayor parte de la Web. Como ejemplo, tenemos procesadores de texto online, herramientas de edición de fotografías, sitios web de mapas, etc. Impulsado en gran medida por JavaScript, llevaron HTML4 al borde de sus capacidades. HTML5 especifica nuevas API (interfaz de programación de aplicaciones) para DOM (modelo de objetos de documento), que es una convención multiplataforma independiente del lenguaje para representar e interactuar con objetos y documentos HTML, XHTML y XML.
Estas nuevas API le ayudan a arrastrar y soltar objetos enviados por el servidor, como dibujos, vídeos y similares.
Estas nuevas interfaces que las páginas HTML exponen a JavaScript a través de objetos en el DOM facilitan la escritura de aplicaciones utilizando patrones altamente específicos, en lugar de simplemente trucos mal documentados.
Aún más importante es la necesidad de un estándar abierto que sea gratuito (de uso e implementación) que pueda competir con estándares propietarios como Adobe Flash o Microsoft Silverlight. Independientemente de lo que se piense de estas tecnologías o empresas, creemos que la Web es una plataforma vital para que la sociedad, el comercio y las comunicaciones estén en manos de un fabricante.
Ya hay millones de páginas web en uso y es imperativo que se sigan reproduciendo. Por lo tanto, HTML5 es principalmente un derivado de HTML4 que continúa definiendo cómo los navegadores deben manejar marcas antiguas como <font> , <center> y otras nuevas a medida que millones de páginas web las utilizan.
El término interfaz puede tener varios significados dependiendo del área en la que se estudie. En el área de las Tecnologías de la Información, interfaz significa la posibilidad de comunicación entre dos sistemas que no podrían comunicarse de forma natural sin alguna ayuda externa .
HCI es el estudio de la interacción entre personas y computadoras. Es una materia interdisciplinaria que relaciona informática, artes, diseño, ergonomía, psicología, sociología, semiótica, lingüística y áreas afines. La interacción entre humanos y máquinas se produce a través de la interfaz de usuario, compuesta por software y hardware.
La interacción persona-computadora es una disciplina que se ocupa del diseño, evaluación e implementación de sistemas informáticos interactivos para uso humano y el estudio de los principales fenómenos que los rodean.
<a href="mailto:[email protected]">Enviar correo electrónico</a>
El término medio digital es lo opuesto al medio analógico, que se configuraba a partir de una base material: el sonido se grababa en pequeños surcos, sobre una superficie de vinilo y, al pasar una aguja por esos surcos, se reproducía el sonido. En los medios digitales, el soporte físico prácticamente desaparece y los datos se convierten en secuencias numéricas o de dígitos, de ahí el uso del término digital. De esta manera, los sonidos, las imágenes y los textos son en realidad secuencias de números, lo que permite compartir, almacenar y convertir datos. En el sentido más amplio, los medios digitales pueden definirse como el conjunto de vehículos y dispositivos de comunicación basados en tecnología digital, que permiten la distribución o comunicación digital de obras intelectuales escritas, sonoras o visuales. Medios de origen electrónico utilizados en las estrategias de comunicación de las marcas con sus consumidores, generalmente denominados medios digitales.
Flash siempre ha sido la alternativa más viable para quienes necesitaban agregar videos y música a páginas web. Estaba y sigue estando presente en casi todos los navegadores y teníamos un formato que se podía utilizar sin mayores problemas.
Simplemente agregue una llamada al complemento y funcionará.
<object width="426" height="240"><param name="movie" value=" https://youtu.be/S2Vty9srpFw"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="allowscriptaccess" value="always"></param> <embed src= https://www.youtube.com/embed/S2Vty9srpFw type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="426" height="240"></embed></object>
Debido a inconsistencias del navegador, fue necesario agregar tanto el <object> ; en cuanto al comando <embed> ;, comandos específicos para usar el complemento, duplicando muchos atributos. Sin olvidar que complementos como Flash provocan muchas inestabilidades, provocando errores que incluso provocan el cierre del navegador.
Debido a todo esto, HTML 5 llega con un nuevo soporte, nativo del lenguaje, para evitar el uso de complementos y comandos innecesarios. Actualmente basta con realizar la simple llamada, como si fuera una imagen y se dispara el archivo.
<controles de vídeo src="video.mp4" width="426" height="240"></video>
El problema que presenta el nuevo comando es el uso del atributo src que no funciona bien en algunos navegadores. Y si queremos que todos puedan abrir la página, con cualquier navegador, es necesario utilizar otro tipo de atributo. Por tanto, es común utilizar el atributo <source> en la etiqueta <video> .
El elemento <source> se puede usar varias veces y le permite definir un formato de video para cada navegador, brindándole un mayor alcance.
< video width =" 426 " height =" 240 " controls >
< source src =" video.mp4 " type =" video/mp4 " >
< source src =" video.webm " type =" video/webm " >
< source src =" video.ogg " type =" video/ogg " >
</ video > < audio controls >
< source src =" audio.mp3 " type =" audio/mpeg " >
< source src =" audio.ogg " type =" audio/ogg " >
< source src =" audio.wav " type =" audio/wav " >
</ audio >Hay varios códecs posibles y necesitarás exportar al menos dos versiones para tener un mayor alcance.
Nota : Los códecs son programas que se utilizan para codificar y decodificar archivos multimedia. Comprimen el formato original, favoreciendo el almacenamiento, y lo descomprimen durante la reproducción, transformándolo nuevamente en imagen o audio.
Todos los ejemplos de audio y vídeo mencionados se importan mediante un documento en el directorio. Y la pregunta es ¿cómo importo un vídeo ya alojado en un sitio como YouTube o Vimeo? ¿Y cuál de las dos soluciones (vía documento o vía servidor) es la más ventajosa?
¡Veamos cómo importar vídeos de YouTube y Vimeo, paso a paso!
Hasta la aparición de HTML5, las tablas se utilizaban como recurso para diseñar diseños de páginas. Los diseñadores utilizaron tablas como cuadrícula para mostrar imágenes y texto, y fueron ampliamente utilizadas, convirtiéndose en la forma predominante de diseño de sitios web, creando así una apariencia rica.
Sin embargo, hoy en día, el uso de tablas está interfiriendo en la construcción de mejores sitios web, más accesibles, flexibles y funcionales, especialmente para los nuevos medios, como teléfonos móviles, tabletas, etc.
Estas tablas todavía existen en HTML 5 como recurso para mostrar datos tabulares, información proveniente de una base de datos. Con la nueva versión de HTML podemos crear sitios web completamente sin tablas, creando así diseños dinámicos que aparecen en pantallas grandes como en una computadora y se adaptan bien a la pantalla pequeña de un teléfono inteligente. Más adelante verás cómo crear diseños responsivos con HTML5 y CSS3.
El comando de tabla no se eliminó del lenguaje, pero se restringió su uso. Por otro lado, todavía tenemos varios sitios web que utilizan este recurso, por lo que es importante que entendamos cómo funciona para que podamos, en caso de ser necesario, mantener este tipo de páginas.
El comando para insertar una tabla es <table> . Para empezar una línea , debemos introducir la etiqueta <tr> y por una celda <td> , que divide la fila de la tabla. <th> divide la fila de la tabla colocando el contenido en negrita. Todos estos comandos terminan como </table> , </tr> y </td> respectivamente.
< table >
< tr >
< td > </ td >
< td > </ td >
</ tr >
</ table > El comando <table> tiene una serie de atributos que ayudan con el formato de la tabla. Los principales son:
align="" | alinea la tabla en tres posiciones: center , left , right y justify |
bgcolor="" | determina el color de la mesa |
border="" | determina el tamaño del borde, si es cero no muestra el borde |
cellspacing="" | determina el espacio entre las celdas |
colspan="" | determina la agrupación entre dos o más columnas de la tabla (de lado) |
rowspan="" | Determina la agrupación entre dos o más filas de la tabla. (hacia abajo y hacia arriba) |
cellpadding="" | determina el espacio entre el texto y el borde de la celda |
<caption> muestra el texto centrado en relación con la tabla, como si fuera un título.
Para elegir las filas internas que se mostrarán dentro de la tabla, utilizamos el atributo RULES , dentro de la etiqueta. Los complementos de este atributo son:
none | ninguna línea completa. |
all | para mostrar todas las filas entre cada columna y fila en la tabla (predeterminado) |
rows | para las líneas horizontales entre cada fila de la tabla. |
cols | para las líneas verticales entre cada columna de la tabla. |
groups | para filas entre grupos de columnas y secciones horizontales, definidas por etiquetas especiales como <colgroup> y <thead> |
Vea algunos ejemplos:
< table border rules =" all " 6 > <table border rules="none"6> <table border rules="cols"6> <table border rules="groups"6> <table border rules="rows"6>La parte de formularios HTML es muy importante para completar los datos que los usuarios ingresan en la página HTML. La recopilación de estos datos se realiza por el back-end con un lenguaje de programación back-end (PHP, JavaScript, Python, Java, etc.) que almacena y consulta estos datos en una base de datos (MySQL, PostgreSQL, MongoDB, OracleDB, etc. . Veamos las etiquetas de formulario:
Formulario de inicio de sesión (repetitivo) :
< html >
< body >
< h2 > Login </ h2 >
< form >
Login: < br >
< input type =" email " name =" email " > < br >
Senha: < br >
< input type =" password " name =" senha " > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html > A través del atributo type podemos definir el tipo de nuestro input utilizado, el atributo name='' podemos procesar los datos enviados a través de un lenguaje de programación.
Formulario de inicio de sesión (repetitivo) - Con PHP :
< html >
< body >
< h2 > Login </ h2 >
< form action =" processa.php " >
Login: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" senha " required > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html >Formulario de registro (repetitivo) :
< html >
< head >
< title > Cadastro </ title >
</ head >
< body >
< h2 > Cadastre-se </ h2 >
< form action =" processa.php " >
Nome Completo: < br >
< input type =" text " name =" nome " required > < br >
<!-- <label for="email">Email:</label> -->
Email: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" password " required > < br >
Repita a senha: < br >
< input type =" password " name =" password " required > < br >
Sexo: < br >
< input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
< input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
Interesses: < br >
< input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
< input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
< input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
Estado < br >
< select name =" estado " >
< option value =" RJ " > RJ </ option >
< option value =" SP " > SP </ option >
< option value =" MG " > MG </ option >
< option value =" ES " > ES </ option >
</ select > < br >
Comente! < br >
< textarea name =" comentario " > </ textarea > < br >
< input type =" submit " value =" Cadastrar " >
</ form >
</ body >
</ html > Sólo podremos input entre radios si el name es el mismo, de esta forma podremos agrupar esta información y solo se marcará una de ellas.
Con checkbox podemos elegir más de una opción para seleccionar.
Con
Podemos definir los tipos <input> y sus atributos:
buttonpasswordtext Los elementos <a> , <input> y <button> se usan para crear botones en una página HTML, pero cada uno tiene propósitos ligeramente diferentes y se usa en diferentes contextos.
El ancla <a> se utiliza para crear enlaces en HTML. Se utiliza principalmente para navegar entre diferentes páginas web o anclar a diferentes secciones de una página. Cuando un usuario hace clic en un elemento <a> , se le dirige a la URL especificada en el atributo href . Los elementos <a> a menudo tienen estilo con CSS para que parezcan botones, pero tienen un comportamiento de enlace estándar.
< a href =" pagina.html " > Link </ a > <input> se utiliza para crear elementos de entrada en un formulario HTML. Si bien se usa a menudo para crear campos de entrada de texto, también se puede usar para crear botones. El tipo de botón se especifica mediante el atributo type . Algunos valores comunes para el atributo type son "button" , "submit" y "reset" . Los botones <input> son útiles cuando necesita enviar datos desde un formulario a un servidor o realizar acciones específicas cuando se hace clic en un botón.
< input type =" button " value =" Clique Aqui " > <button> se utiliza para crear botones en HTML. Puede contener texto, elementos de imagen u otros elementos HTML. Al igual que los botones <input> , los botones <button> pueden tener un tipo específico especificado por el atributo type , como "button" , "submit" o "reset" . Los botones <button> ofrecen más flexibilidad en términos de contenido y comportamiento que los botones <input> , especialmente cuando se trata de estilo y manejo de eventos usando JavaScript.
< button type =" button " > Clique Aqui </ button > En resumen, si está creando un botón de navegación, utilice <a> . Si está creando un botón para enviar datos desde un formulario, utilice <input type="submit"> o <button type="submit"> . Si está creando un botón para realizar una acción específica en la página (como mostrar u ocultar contenido), use <button type="button"> .
El HTML semántico sirve para organizar y estructurar los elementos del documento en partes específicas para que no se descontrolen por todo el cuerpo de manera desorganizada e ilegible.
Hasta la versión 4 de HTML los divs eran la principal semántica estructuradora de la página, con la llegada de HTML5 aparecieron nuevos TAG con funciones div que se creaban para estructurar los elementos contenidos en el documento, lo que facilitaba mucho la estructuración de la página. Tenga en cuenta que puede comparar la estructura de una página web con el diseño de la página de un periódico , ya que ambos contienen encabezados, pies de página, artículos y secciones.
<section> representa una sección genérica dentro de un documento. Este elemento puede contener una agrupación de textos con varios capítulos, secciones numeradas, etc. En el siguiente ejemplo se presenta un artículo que contiene un tema principal y, dentro de ese tema, varias secciones con diferentes temas. 
<header> , también utilizado para delimitar el título de la sección, funciona en conjunto con los elementos anteriores, sin embargo, no es obligatorio. 
<nav> (navegación) este elemento es la sección donde se ubica la información de la página. Generalmente, en esta sección se colocan enlaces (enlaces internos) a la propia página o enlaces externos a otras páginas en sitios web externos. 
<article> (artículo) este elemento es un artículo independiente dentro de un texto, este elemento puede o no estar dentro de un elemento <section> . Imagínate un periódico con secciones de deportes, cotilleo, etc. Dentro de cada sección hay varios artículos sobre textos específicos, por ejemplo, en la sección de deportes puede haber un artículo hablando del equipo A, otro del equipo B y otro del equipo C. Un artículo puede contener un elemento <header> que es el título y un elemento <footer> que es el pie de página del elemento. 
<footer> (pie de página) este elemento es aquel que contiene básicamente información sobre el contenido de la sección, como el autor, enlaces relacionados, etc. 
<aside> este elemento contiene información que no está directamente relacionada con el texto. Por ejemplo: anuncios pagados, enlaces promocionales, etc. 
Se caracteriza por escribir código CSS, utilizando el comando HTML <estilo> . Este método es superior al anterior, ya que todas las reglas CSS se encuentran al principio del código HTML5. Sin embargo, estas reglas solo se pueden utilizar dentro de este documento, lo que impide compartirlas y reutilizarlas.
Ejemplo de uso:
< head >
< style >
* {margin: 0; padding: 0; box-sizing: border-box;}
body {width: 100%; height: 100vh;}
</ style >
</ head >Las reglas se escribieron en un archivo con extensión .css y se pueden cargar en el documento HTML5 de dos maneras:
< head >
< link rel =" stylesheet " href =" default.css " >
< link rel =" stylesheet " href =" green.css " title =" Green styles " >
< link rel =" alternate stylesheet " href =" contrast.css " title =" High contrast " >
< link rel =" alternate stylesheet " href =" big.css " title =" Big fonts " >
< link rel =" alternate stylesheet " href =" wide.css " title =" Wide screen " >
</ head > @import en CSSLe permite importar reglas de estilo dentro de otras reglas de estilo. Este método le permite aplicar reglas comunes a todos los documentos HTML.
Ejemplo de uso :
Dentro de un documento .css , podemos aplicar la llamada a archivos externos en las primeras líneas para usar comandos existentes.
@import "mystyle.css" ;
@import url ( "mystyle.css" );
@import url ( "fineprint.css" ) print; /* mídia específica para impressão */
@import url ( "bluish.css" ) projection , tv; /* mídia específica grandes mídias*/
@import url ( "narrow.css" ) handheld and ( max-width : 400 px ); /* mídia específica mídias portáteis*/ CSS nivel 3 implementó el concepto de módulos, en el que cada módulo se desarrolla de forma independiente, siguiendo su propio cronograma. La principal ventaja es la independencia a la hora de crear nuevas funciones.
Tras la creación de HTML, la necesidad de formatear las páginas se hizo evidente, por lo que en 1996 se creó el lenguaje de estilos que conocemos como CSS .
La sintaxis es muy sencilla y se puede explicar con la frase "creas reglas de estilo para elementos o grupos de elementos".
Usemos un elemento HTML que vimos anteriormente, el ancla, para ejemplificar.
Una regla CSS está representada por un selector o un grupo de selectores , en nuestro caso es un , entonces dentro de un par de llaves agregamos las declaraciones , en el siguiente ejemplo estamos cambiando el color y tamaño de fuente de este título, las declaraciones Están formados por una propiedad y un valor.
Una regla CSS está representada por:
Ejemplo:
a {
color : # 000 ;
}En CSS, la selección de elementos puede variar desde patrones contextuales simplificados hasta ricos.
Los tipos de selección son muy importantes, ya que su orden cambia según el resultado del procesamiento de la página.
CSS le permite agrupar declaraciones repetidas.
Ejemplo:
h1 {familia de fuentes: sans-serif}
h2 {familia de fuentes: sans-serif}
h3 {familia de fuentes: sans-serif}
Es equivalente a:
h1, h2, h3 {
familia de fuentes: sans-serif
}
NOTA: Todo h1, todo h2 y todo h3
Un elemento puede estar contenido dentro de otro elemento.
Ejemplo: <H1>Este texto es <EM>muy</EM> importante</H1>
h1 { color: rojo } /* indica que todos los elementos h1 tienen el color rojo */
en { color: rojo } /* indica que todos los elementos en tienen el color rojo */
h1 en { color: azul } /* indica que los elementos contenidos en un elemento h1 tienen el color azul */
Un elemento hijo se caracteriza cuando los elementos están separados por ">".
div ol > li p {color: verde }En este ejemplo, todos los elementos p se colorearán de verde cuando estén dentro de un elemento elemento <li>, un elemento secundario de una lista <ol> dentro de un <div>.
Un elemento por prioridad se caracteriza cuando los elementos están separados por "+". Es decir, el primer párrafo que viene después del div.
div + p {
color: rojo;
}
Especifica reglas para elementos que tienen un determinado atributo.
Ejemplo:
span[hola="Cleveland"][adiós="Columbus"] { color: azul; }La regla se aplicará a todos los elementos span que tengan el atributo hola="Cleveland" y el atributo adiós="Columbus".
Una clase le permite asignar un conjunto de reglas a un elemento determinado. Está determinado por el asterisco y el punto (*.) o simplemente por el punto (.).
Ejemplo:
.pastoral { color: verde } /* todos los elementos con clase~=pastoral */
/*o*/
*.pastoral { color: verde } /* todos los elementos con clase~=pastoral */
El atributo ID le permite identificar un elemento único en el documento HTML. Para seleccionar este elemento, simplemente use el carácter “#” seguido del nombre del elemento.
Ejemplo:
h1#title1 { text-align: center } /* aplica la regla al elemento h1 con id=title */
*.pastoral { color: verde } /* todos los elementos con clase~=pastoral */
En el ejemplo anterior creamos una regla que cambia un elemento HTML directamente, pero esto significa que todos los elementos tendrán esa apariencia y generalmente tenemos sitios más complejos que necesitan varias reglas diferentes para los mismos elementos.
Para hacerlo más tangible, recordemos un poco del sitio web que comenzamos a crear en el último módulo, tenía varios elementos de encabezado, pero no queremos que el encabezado principal tenga el mismo formato que el encabezado de una publicación, ahí es donde los ID y las Clases.
El selector que vimos en el primer ejemplo es un selector de tipo, ya que representa un elemento HTML, y con IDs y Classes podemos representar cualquier tipo de elemento pero existen algunas diferencias entre ellos:
ID : está representado por el símbolo # (almohadilla) seguido de un nombre para ese ID. ¡Solo se puede usar una vez!
#id{
}Clase : la clase se representa de forma similar al ID, pero va precedida por un punto en lugar del hash. ¡Se puede usar más de una vez!
.class{
}Y la diferencia más importante entre ellos es la forma en que deben usarse: el ID solo se puede usar una vez en una página HTML mientras que la clase no tiene restricciones.
Y hay un último detalle en este ejemplo: la pseudoclase . Los elementos HTML sufren cambios causados por la interacción del usuario, como mover el mouse sobre ese elemento o hacer clic en él. Las pseudoclases son muy similares a los eventos de JavaScript, pero no tienen el mismo poder para manipular elementos.
selector:pseudoclase {
propiedad: valor;
}
El a:hover en el ejemplo significa que el ancla también se verá así cuando el usuario pase el cursor sobre un hipervínculo.
| Pseudoclase | Definición |
:hover | Cambia el elemento al pasar el cursor sobre él. |
:active | Cambie el elemento haciendo clic en él. |
:link | Cambia todos los enlaces no visitados. |
:visited | Cambia todos los enlaces visitados. |
:focus | Cambia el elemento <input> que tiene el foco. |
:checked | Cambia todos los elementos <input> marcados. |
:disable | Cambia todos los elementos <input> deshabilitados. |
:enabled | Cambia todos los elementos <input> habilitados. |
:empty | Cambia todos los elementos <p> que no tienen hijos. |
:first-child | Cambia cada elemento <input> habilitado. |
:enabled | Cambia cada elemento <input> habilitado. |
:first-child | Cambia cada elemento <p> que es el primer hijo del elemento padre. |
:first-of-type | Cambia cada elemento <p> que es el primer elemento <p> de su elemento padre. |
:in-range | Cambia los elementos <input> con un valor dentro de un rango especificado. |
:invalid | Cambia todos los elementos <input> a un valor no válido. |
:lang(language) | Cambia cada elemento <p> con un valor de atributo lang que comienza con " it ". |
:last-child | Cambia todos los elementos <p> que son los últimos hijos de su elemento padre. |
:last-of-type | Cambia cada elemento <p> que es el último elemento <p> de su elemento padre. |
:link | Cambia todos los enlaces no visitados. |
:not(selector) | Cambia cada elemento que no sea el elemento <p> . |
:nth-child(n) | Cambia cada elemento <p> que está ordenado desde su elemento principal. |
:nth-last-child(n) | Cambia cada elemento <p> que está ordenado desde su elemento padre, contando desde el último hijo. |
:nth-last-of-type(n) | Cambia cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo. |
:nth-of-type(n) | Cambia cada elemento <p> que es el segundo elemento <p> de su elemento principal. |
:only-of-type | Cambia el elemento <p> que es el único elemento <p> de su elemento principal. |
:only-child | Cambia cada elemento <p> que es el único hijo de su elemento padre. |
:optional | Cambia los elementos <input> sin el atributo "requerido". |
:out-of-range | Cambia los elementos <input> con un atr
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada
Todo
|
