CURSO DE HTML Y CSS
HTML 1.0.- SINTAXIS La Sintaxis: es la forma como vemos el código en nuestro documento. Los Elementos: nos ayudan a estr
Views 138 Downloads 4 File size 557KB
Recommend stories
Citation preview
HTML 1.0.- SINTAXIS La Sintaxis: es la forma como vemos el código en nuestro documento. Los Elementos: nos ayudan a estructurar y a darle significado a las partes de un documento html, con ellos podemos crear encabezados, párrafos, textos con énfasis, subrayados o cursivas, listas de elementos, tablas imágenes, formularios y más. Para definir y conocer la estructura de un elemento debemos revisar los conceptos de contenido, texto del contenido, etiqueta y atributo. Tipos de elementos
Elementos vacíos Elementos no vacíos
Un elemento vacío es aquel cuyo modelo de contenido no le permite tener ningún contenido, sin embargo puede tener atributos por ello es que este elemento solo tienen una etiqueta de inicio. Ej.:
---- salto de línea
Un elemento no vacío es aquel cuyo modelo de contenido tiene una etiqueta de inicio una de cierre pudiendo no tener contenido. Ej.:
texto del elemento no vacío
Los Comentarios: son los textos que escribimos en nuestro documento html para realizar algún tipo de acotación sobre algún elemento, propiedad, regla, entre otros, por lo que los mismo no deben mostrarse en la página web. La sintaxis de los comentarios es la siguiente:
1.1.- ESTRUCTURA DE UN DOCUMENTO HTLM La estructura básica de un elemento es de la siguiente forma:
Donde representa la versión de html con la que se está trabajando. En este caso el DOCTYPE utilizado representa a la versión html5. representa el elemento raíz debido a que dentro del estarán todos los demás elementos. este elemento contiene la información del documento que no se muestra en el navegador exento por el elemento cuyo contenido siempre se muestra en la pestaña del navegador. este elemento contiene a los elementos que le dan forma al documento. Nota: el elemento que va dentro de nuestro elemento permite asignarle la codificación a nuestro documento para que permita la escritura de caracteres especiales por lo que debemos incluirlo en nuestro código para resolver este problema de la siguiente manera.
1.2.- ELEMENTOS ESTRUCTURALES Son aquellos elementos que nos permiten ordenar y agrupar los contenidos de nuestra página web. En html 4 se trabaja con los elementos div y spam. El elemento div: es un contenedor que se puede utilizar para agrupar secciones de documentos en bloque. El elemento spam: es un contenedor que se puede utilizar para agrupar secciones de contenido en línea con demás elementos. Estos dos elementos no tienen semántica por lo que se aconseja no usarlos demasiado en nuestro documento para evitar el efecto divitis. Ahora los elementos estructurales para html 5 son: El elemento contiene el encabezado de una página web. El elemento contiene el menú de navegación u otras funcionalidades de navegación de la página web. El elemento contiene piezas individuales de contenido como post individuales y noticias individuales. Elemento se utiliza para agrupar diferente áreas por funciones o diferentes artículos por temas, así mismo, se puede utilizar dentro del elemento .
Elemento representa una sección con contenido que esta sutilmente relacionado con el contenido que está a su alrededor, pero, que no es fundamental para el flujo de la página. Elemento contiene el pie de página. Con estos elementos podemos crear una página web con secciones bien definidas que nos permitan hacer un trabajo más ordenado y limpio. A continuación en el código se muestra un ejemplo de la aplicación de esta estructura.
Mi primera página
Aquí va la cabecera Aquí va el menu de navegación
Aquí va el artículo
Aquí va la información sobre el autor Aquí va el pie de página
Guardamos y abrimos con el navegador para ver el resultado. 1.3.- ELEMENTOS PARA DESPLEGAR TEXTO Son los elementos que nos permiten agregar en nuestra página web textos como encabezados y párrafos. Elementos de Frase: son lo que añaden información estructural y semántica al texto, y; se comportan como elementos en línea. Dentro de estos tenemos a los elementos: que añade énfasis al texto. Ej.
Código html: Me gusta mucho este curso Como se ve en la página: Me gusta mucho este curso
que añade un énfasis mayor (negrita). Ej. Código html: Me gusta mucho este curso Como se ve en el navegador: Me gusta mucho este curso Los elementos I y B casusa el mismo efecto que el strong más estos dos elementos no brindan elementos al texto. En nuestro caso procuraremos no utilizar estos elementos para dar estilo al texto de ser necesario utilizaremos las propiedades CSS.
Elementos de Encabezado: estos nos permiten describir brevemente el tema de las secciones que presentan siendo el h1 el más importante y h6 el menos importante. Ej. Código html:
Encabezado de nivel 1 Encabezado de nivel 2 Encabezado de nivel 3 Encabezado de nivel 4 Encabezado de nivel 5 Encabezado de nivel 6
Como se ve en el navegador:
Encabezado de nivel 1 Encabezado de nivel 2 Encabezado de nivel 3 Encabezado de nivel 4 Encabezado de nivel 5 Encabezado de nivel 6
Es importante que se evite saltar los niveles de encabezado, es decir, después de utilizar h1 se utilizaría h2 y así sucesivamente. Si por ejemplo h2 no presenta el tamaño que se desea utiliza la propiedad CSS font-size para modificar su tamaño, esto quiere decir que el objetivo del encabezado no es brindar un tamaño al texto sino resaltar su importancia. Elemento
: este elemento representa un párrafo de texto en el navegador como podemos verlo en el siguiente ejemplo.
¡Hola a todos!
Curso de HTML y CSS en Devode.la.
Al realizar este ejemplo en nuestro procesador de texto se puede ver como se despliega un elemento
debajo del otro por ser un elemento de bloque. Es importante saber que dentro de un elemento de bloque no puede haber otros elementos de bloque. Ahora realicemos el siguiente ejemplo partiendo desde nuestro documento index.html realizado anteriormente.
Manual de HTML y CCS
Manuales de Programación - HEADER Lista de Manuales - NAV
Manual de HTML y CCS
fundamentos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
CCS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
Sobre el autor
Este manual fue elaborado por José Pino, un apasionado de la tecnología y amante de los videojuegos
Todos los derechos reservado - FOOTER
El texto Lorem ipsum en algunos editores de texto se genera automáticamente este párrafo al colocar la primera palabra y darle a la tecla tab y este es un texto que se utiliza precisamente para realizar prácticas como estas y poder observar como se ve nuestra página con párrafos. En caso de que tu editor no lo realice puedes googlearlo para copiarlo y pegarlo. Lugo de esto guardamos nuestro código y abrimos nuestro archivo con el navegador para ver como quedo nuestra página web. Cualquier duda ver el resultado al final del video de este tema. Todos estos elementos nos ayudaran a dotar nuestra página web de una mejor estructura y semántica. Existen otros elementos que sirven para desplegar texto los cuales se verán más adelante.
1.4.- ENLACES En esta sección aprenderemos a colocar enlaces en nuestro sitio web. Los enlaces son importantes porque nos permiten direccionar a un usuario desde una página web hasta otras páginas de nuestro mismo sitio web así como también enlazar nuestra página con otro sitio web externo, enlazar a ciertos elementos dentro de la misma página, enlazar a un correo electrónico, enlazar para un recurso a descargar y más. Para crear estos enlaces utilizaremos el elemento conocido como anchor que tiene la siguiente estructura: Mi primer enlace Inicio Atributo
Enlace
Texto del enlace
Cierre
En la estructura identificamos una etiqueta de inicio y una etiqueta de cierre también identificamos el atributo href cuyo valor es el enlace al cual direccionaremos al usuario para que interactúe con él y por ultimo tenemos el texto del enlace que será lo que visualicemos en el navegador.
Un enlace por defecto aparece subrayado y de color azul y una vez que haya sido cliqueado pasara a ser de color morado. Cabe mencionar que estos colores son manipulables con CSS que es un tema que veremos más adelante. Ahora le mostrare los códigos de los tipos de enlaces más utilizados. Enlace de una página web a otra página de mismo sitio web Creamos un archivo html llamado fundamentos y tecleamos el siguiente código. Documento fundamentos.html
Manual de HTML y CCS
Guardamos los cambios realizados y nos vamos a nuestro documento index.html donde en el encabezado h2 crearemos un enlace hacia fundamentos como a continuación se muestra resaltado. Documento index.html
Manual de HTML y CCS
Manuales de Programación - HEADER Lista de Manuales - NAV
Manual de HTML y CCS
fundamentos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
CCS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
Sobre el autor
Este manual fue elaborado por José Pino, un apasionado de la tecnología y amante de los videojuegos
Todos los derechos reservado - FOOTER
Guardamos y abrimos en nuestro navegador el documento index y le damos clic a nuestro enlace fundamentos el cual nos llevar a la página fundamentos donde está el link del Manual de HTML y CCS y le damos clic a este el cual deberá regresarnos a la página inicial Manual de HTML y CSS. Recomiendo ver el video por si no se entiende esta explicación. Enlace de una página web hacia una página de un sitio web externo Volvemos al documento index.html y sobre este guardamos un documento con otro nombre ej. index2.html con la finalidad de que nos quede el primer documento con el ejemplo del primer tipo de enlace, posterior a esto nos vamos a la sección específicamente en el elemento párrafo y teclearemos los códigos resaltados que se muestran continuación. Documento index2.html
Manual de HTML y CCS
Manuales de Programación - HEADER Lista de Manuales - NAV
Manual de HTML y CCS
fundamentos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
CCS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
Sobre el autor
Este manual fue elaborado por José Pino, un apasionado de la tecnología y amante de los videojuegos
Todos los derechos reservado - FOOTER
Guardamos y abrimos en el navegador donde debería aparecernos el nombre del autor Jose Pino convertido en enlace y al darle clic debería redirigirnos hasta su cuenta twitter. Como verán con este enlace hemos salido de nuestro sitio web a una página externa por lo que si no queremos que esto ocurra deberemos agregar en nuestro enlace el atributo target=”_blank” para que esta se abra en una nueva pestaña por tanto con esto último nuestro enlace quedaría así: José Pino target=”_blank”
Guardamos, actualizamos la página en el navegador y verificamos que efectivamente la cuenta twitter de José Pino se abra en una pestaña nueva. Enlace a elementos de una misma página web Este nos permitirá ubicarnos sobre una sección específica de nuestra página web según indique el enlace. Para entender mejor esto nos vamos a nuestro documento index.html donde realizaremos algunos cambios por lo que aconsejo guardar uno nuevo con el mismo contenido y proceder a editarlo agregándole ocho párrafos más a nuestro segundo elemento article iguale al anterior lorem ipsum, una vez hecho esto se guarda y se abre la página en el navegador para verificar que se muestren estos ocho párrafos con la finalidad de que la pagina tenga más longitud. Posterior a esto nos regresamos al editor de texto y se colocan los atributos que a continuación se resalta:
Manual de HTML y CCS
Manuales de Programación - HEADER Lista de Manuales - NAV
Manual de HTML y CCS
fundamentos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor
En el último párrafo, es decir, el párrafo nueve de este elemento article colocamos los codigos resaltadosLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayorIr a encabezados de Fundamentos Ir a encabezados de HTML
CCS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Este texto tiene énfasis Cras dapibus. Vivamus elementum semper nisi.Este texto tiene un énfasis mayor.
Sobre el autor
Este manual fue elaborado por José Pino, un apasionado de la tecnología y amante de los videojuegos
Todos los derechos reservado - FOOTER
Una vez agregados los códigos se guardan los cambios y se actualiza la página en el navegador donde debería aparecernos en el último párrafo del segundo elemento article dos link o enlaces que digan Ir a encabezados de Fundamentos e Ir a encabezado de HTML y cuando le demos clic a cada uno de estos debería llevarnos hasta los encabezados a los que hacen referencia dentro de la misma página y con esto vemos que este tipo de enlace evita devolvernos hasta el primer encabezado de una página utilizando el scromg del mouse o la barra deslizadora de la página ahorrando de esta forma algo de tiempo al usuario. Enlace hacia un correo electrónico
Este enlace permite facilitar el envió de un e-mail a través de un enlace hacia un correo electrónico de destino ya determinado. Entonces nos vamos nuevamente a nuestro archivo index.html y en la sección aside colocaremos los códigos que a continuación se muestran resaltados.
Sobre el autor
Este manual fue elaborado por José Pino, un apasionado de la tecnología y amante de los videojuegos. Puedes escribirle un correo a [email protected]
Se guardan los cambios y se refresca la página en el navegado para que aparezca el correo de José Pino en forma de enlace y al darle clic automáticamente debería abrirse el correo que se tenga predeterminado en la computadora por defecto, donde, si este está configurado perfectamente aparecerá en la pestaña de redacción el correo de José Pino como destinatario para el envío del email. Enlace hacia un recurso descargable Este es un enlace que nos permite automáticamente descargar a nuestra computadora un recurso, bien sea un programa, un video, un pdf, etc. Veamos a continuación los códigos que nos permiten hacer esto partiendo de nuestro documento fundamentos.html al cual le agregaremos lo que esta resaltado si no queremos teclear todo el código.
Manual de HTML y CCS Descarga de Edgar Ramirez
Una vez hecho esto se guardan los cambios y se abre en el navegador la página para verificar que al darle clic a nuestro enlace Descarga de Edgar Ramírez se descargue la foto de este famoso personaje de cine Venezolano.
CSS 2.1.- SINTAXIS DE LENGUAJES DE ESTILOS CSS Está basada en reglas que se define por selectores, propiedades y valores tal como se presenta en la siguiente estructura. Selector { Propiedad1: valor1; Propiedad2: valor2; Propiedad3: valor3;wss }
Características de las reglas de CSS
Siempre escribir las reglas en minúsculas aunque esto sea opcional es lo que se estila. El selector del identificador puede contener números y letras.
Ej.: .identificadores { Propiedad: valor; }
Ej.:
El primer carácter de un selector identificador no puede ser un número. El identificador de un selector puede tener caracteres no permitidos como la & utilizando la barra invertida. identificadores\& { Propiedad: valor; }
Los selectores: corresponden a cualquier elemento dentro de nuestro documento incluso podemos usar clases como el ejemplo anterior o el atributo id entre otros como se verá más adelante. Ej.:
.selector { Propiedad: valor; } (a cualquier clase)
o
#selector { Propiedad: valor; } (a cualquier id)
Propiedades: es una característica escrita en inglés a la que le asignamos un valor para poder cambiar el aspecto o estilo de un elemento. Ej.:
selector { color: valor; background: valor; font-family: valor; font-size: valor; }
Uso de estilos CSS en documento HTML Hay varias formas de hacer estos pero la que se explicara en este ejemplo es la más utilizada la cual consiste en crear un documento en CSS con los estilos que queramos y enlazar nuestro documento HTML con este como se muestra a continuación. Ej.: Primero creamos una carpeta dentro de nuestra carpeta donde tenemos los documentos html llamada CSS y posterior a esto se crea un documento CSS llamado estilos.css con la siguiente regla: p{ Color: green; }
Guardamos este documento en la carpeta anteriormente creada. Ahora abrimos en el editor de texto el documento index.html y le realizaremos los cambios que a continuación se muestran dentro del elemento head.
Manual de HTML y CCS
Guardamos y abrimos en el navegador nuestro documento index.html donde se puede ver como el texto de los párrafos cambio a color verde. Nota: si no te sucede lo anterior debes verificar que en elemento link específicamente en atributo href hayas escrito bien el nombre de la carpeta y del documento css, es decir, respetando las mayúsculas y minúsculas. Entonces se tiene que los archivos css se deben de tener en una carpeta llamada CSS, para que así se tenga un poco de orden, ya que este será el método que se utilizará para darle estilos a los documentos html debido a que con un solo documento css se le puede aplicar estilo a dos o más archivos css que estén enlazados al mismo y de esta forma poder compartir estilos y escribir las reglas una única vez. 2.2.- SELECTORES SIMPLES Un selector representa una estructura, esta estructura puede ser usada como una condición en una regla CSS. Ej.: Selector{ Propiedad: valor; }
Un selector nos ayuda a referirnos a un elemento, una clase, un id entre otros en nuestro documento html. En CSS tenemos distintos tipos de selectores.
Ej.: Selectordeelemento{ Propiedad: valor; }
.selectordeclase{ Propiedad: valor; }
#selectordeid{ Propiedad: valor; }
Selector Universal: Este selector aplica reglas a todos los elementos que se encuentran en nuestro documento html. Ej.: *{ Color:blue; }
Entonces aplicando este estilo CSS todos los textos del documento html se colocan de color azul. Selector de tipo: este selector aplica el estilo CSS a los elementos que elijamos, además, este selector se puede aplicar a varios elementos. Ej.: p{ Color:orange; {
Entonces solo el contenido que está dentro del elemento
se coloca de color naranja. Selector ID: posee el atributo id y nos permite definir un nombre único con el cual se pueda encontrar cualquier elemento dentro de nuestro documento html. Ej.: REALIZAR EN HTML
selector de ID
En este ejemplo veremos como funciona el selector ID
REALIZAR EN CSS #noticia{ color:grey; }
Nota: no olvides enlazar el documento html con el css para que se pueda aplicar el estilo y logres ver los cambios en la página desde el navegador. El resulta que se obtiene es que todos los elementos que están dentro de se colocan de color gris. Selector de clase: se le puede asignar cualquier elemento para que se le apliquen estilos en común, para esto, se pueden crear estilos con un nombre de clase y esta clase se le puede asignar a cualquier elemento.
Ej.: REALIZAR EN DOC. HTML
Selector de clase
En este ejemplo veremos cómo funciona el selector de clase
REALIZAR EN DOC. CSS .miprimeraclase{ Color:violet; }
El resultado obtenido es que el texto del elemento h1 fue afectado por la clase y se muestra de color violeta.
2.3.- LAS PSEUDO CLASES El concepto pseudo clase se introdujo para permitir la selección basada en la información que esta fuera de la estructura del documento o que son difíciles o imposibles de expresar con los selectores simples. Una pseudo clase siempre contiene dos puntos seguidos del nombre de la pseudo clase. Ej.:
:pseudoclase
Pseudo clases más utilizadas: Pseudo clase :link y :visited Codigo html con link
Pseudo clases :link y :visited En este ejemplo veremos cómo funciona las pseudo clases :link y :visited
Codigo css aplicando esta pseudo clase a:link{ color:yellow; } a:visited{ color:olive; }
Esta pseudo clase permite cambiar el estado de un enlace de acuerdo a si fue visitado o no, por ejemplo al realizar los códigos anteriores cuando abramos nuestra página nos aparecerá un link en amarillo y luego de abrirlo este pasará a ser de color verde oliva así como pasa con los
link de google que antes de abrirlos se muestran en azul y después de abiertos se muestran en morado. Pseudo clases basadas en la acción del usuario: :hover, :active, :focus Código html para crear un formulario
Pseudo clases :hover, :active y:focus
Datos Personales Nombres: Apellidos:
Código css para dar estilo con esta pseudo clase legend:hover{ color:red; } legend:active{ color:blue; } input:focus{ color:orange; }
Aquí podremos observar en nuestra página que al pasar el cursor por el texto Datos personales de nuestra página este cambiara de color negro a rojo y cuando le demos clic este se pondrá de color azul así como cuando escribamos nuestros datos estos se mostraran en anaranjado durante la acción de escribir pues ahí el elemento estará en el foco. Pseudo clases first-child, last-child, nth-child Estas se usan para dar diferentes estilos a los elementos de una lista de acuerdo a su posición. De acuerdo a esto veamos el siguiente ejemplo: Codigo html de una lista
- Primer Hermano
- Segundo Hermano
- Tercer Hermano
- Cuarto Hermano
- Ultimo Hermano
Código css aplicando las pseudo clases li:first-child{ background: yellow; } li:last-child{ background: red; } li:nth-child(2n){ background: orange; } li:nth-child(3n){ background: olive; }
El resultado que se obtendrá en nuestra página es que el elemento Primer Hermano se sombreara de color amarillo, el elemento segundo hermano se colocara de color rojo, el segundo y cuarto hermano se colocaran de color anaranjado y el elemento tercer hermano se colocara de color verde oliva. Esto se debe a que: First-Child: Fija el aspecto del primer elemento de un tipo de selector. Last-Child: Fija el aspecto de la última instancia de un selector particular en el elemento padre. Nth-child(numero): Esta pseudo-clase de gran potencia es una de las novedades en CSS3 y permite personalizar los estilos para el hijo n. Como ejemplo, tenemos en nuestro HTML un listado de 8 elementos:
Queremos que el tercer elemento del listado tenga una fuente de color verde. Utilizando la pseudo-clase nth-child:
ul.menu li:nth-child(3) { color: green ; }
Además, esta pseudo-clase tiene la capacidad de crear reglas más complejas. Por ejemplo, un problema habitual a la hora de maquetar tablas y/o listados es la posibilidad de alternar dos estilos para sus diferentes elementos. Hasta ahora, esto se solucionaba a nivel de programación, colocando un class para los elementos pares y otro para los impares. Gracias a CSS3 y la potencia de esta pseudo-clase, podemos establecer un estilo para todos los elementos pares de nuestro menú de esta forma tan sencilla: ul.menu li:nth-child(2n) { color: green ; }
2.4 LOS PSEUDOELEMENTOS En CSS3 un pseudo elemento está formado por doble dos puntos (::) seguido del nombre del pseudo elemento como se muestra a continuación. ::pseudo elemento Los pseudo elementos te permiten accerder a información del documento que no son accesibles de otra manera tales como ::first-letter y first-line, así mismo también pueden permitir a los autores referirse a contenidos que no se existen en el documento tales como la hace los pseudo elementos ::after y before. Veamos el siguiente ejemplo: Primero en nuestro editor de texto creamos el documento Pseudo Elementos.html donde escribiremos el código que se muestra debajo, donde; tenemos un encabezado h1 seguido de un párrafo con algunos estilos definidos.
Pseudo Elementos
First-line First-letter. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Luego en CSS creamos un documento llamado PseudoElementos.css y escribimos lo siguiente: body{ background:#2c3e50; margin: 30px 30px; font-family: trebuchet ms;
color:white; } .titulo{ text-align: center; } h1::before{ content: "Before"; }
Y creamos el link de este archivo css en el archivo html anterior para que se puedan aplicar los estilos y poder ver los resultados en nuestro navegador ya que la herramienta CODEPEN utilizada en el video el cual los vincula automáticamente sin este elemento es paga y pues el que no la pueda pagar no se quede sin realizar la práctica. Entonces después de esto abrimos el archivo Pseudo Elementos.html con nuestro navegador donde se debería ver el texto de color blanco y el fondo de nuestra página en azul marino. Posterior a esto en nuestro archivo CSS agregamos el atributo que aparece resaltado: body{ background:#2c3e50; margin: 30px 30px; font-family: trebuchet ms; color:white; } .titulo{ text-align: center; } h1::before{ content: "Before"; background: orange; }
Guardamos y actualizamos nuestra página donde, podremos notar que en nuestro encabezado la palabra Before se resalta con color anaranjado. Luego de esto volvemos a nuestro archivo css y agregamos nuevamente los códigos que se encuentran resaltados: body{ background:#2c3e50; margin: 30px 30px; font-family: trebuchet ms; color:white; } .titulo{ text-align: center; } h1::before{ content: "Before"; background: orange; } h1::after{ content: "After"; background: orange;
}
Guardamos y volvemos a nuestra página y la actualizamos nuevamente con la finalidad de observar que en nuestro encabezado aparece la palabra After resaltada de color anaranjado. Ahora le anexaremos a nuestro código lo que esta resaltado: body{ background:#2c3e50; margin: 30px 30px; font-family: trebuchet ms; color:white; } .titulo{ text-align: center; } h1::before{ content: "Before"; background: orange; } h1::after{ content: "After"; background: orange; } ::p first-letter{ Font-size: 36px; Color: gold; }
Guardamos y volvemos a recargar nuestra página en el navegador para observar como la letra F que está en el inicio de nuestro párrafo se colocó de color dorado (gold). Esto se debe porque el pseudo elemento first-letter representa el primer carácter del texto de un elemento. Por ultimo agregamos a nuestro código lo que esta resaltado: body{ background:#2c3e50; margin: 30px 30px; font-family: trebuchet ms; color:white; } .titulo{ text-align: center; } h1::before{ content: "Before"; background: orange; } h1::after{ content: "After"; background: orange; } ::p first-letter{ Font-size: 36px;
color: gold; }
::p first-line{ color: crimson; }
Guardamos y volvemos a recargar nuestra página en el navegador para poder ver como se cambió la primera línea de nuestro párrafo a color carmesí. Esto se debe a que first-line describe el contenido de la primera línea de un elemento. 2.5.- COMBINACIÓN DE SELECTORES Este punto se explicara mediante un ejemplo. Primero creamos dos documentos uno html y el otro css con el nombre que queramos ejemplo combinaciondeselectores.html y combinaciondeselectores.css y en el primero teclearemos el siguiente código:
- Objeto 1
- Objeto 2
- Objeto anidado 1
- Objeto anidado 2
Se guardan los cambios y abrimos con el navegador para verificar que veamos lo siguiente.
Ahora en el segundo documento escribimos las siguientes reglas: ul li{ margin-left: 40px; }
Guárdanos y actualizamos nuestra página donde se podrá notar que todos los elementos li descendientes de ul adoptan un margen izquierdo de 40 pixeles, ahora, se cambia el combinador y se utilizará el combinador hijo el cual se denota con el siguiente signo > y el código del documento css queda así: ul > li{ margin-left: 40px; }
Guardamos y refrescamos la página en nuestro navegador y se debería ver que solo los elementos hijos de ul adoptan el margen de 40 pixeles los demás descendientes no. Entiéndase por elementos li hijo los que están dentro del elemento ul y los elementos li descendentes son los que están dentro del elemento ol. Ahora veamos un nuevo ejemplo. Documento HTML
Párrafo 1
Párrafo 2
CajaPárrafo 3
Párrafo 4
Guardamos y abrimos con el navegador. Documento CSS p + p{ background:yellow; }
Guardamos, enlazamos a nuestro documento html y después de refrescar la página en el navegador se observa que solo el párrafo 2 se sombrea de color amarillo al usar el combinador de hermano adyacente p + p ahora cambiamos a combinador de hermano general de la siguiente forma.
p~p{ background:yellow; }
Y luego de guarda y refrescar la página se podrá ver que ahora tanto el párrafo 2 como el 3 adoptan un fondo amarillo. Esto se debe a que en un combinador hermano adyacente el elemento hermano ubicado a la derecha debe estar en el documento inmediatamente después del elemento hermano ubicado a la izquierda es por ello que primer elemento p no puede ser ya que no tiene a nadie que lo preceda y el párrafo 3 tampoco ya que lo precede un elemento div y no un p, mientras que con el combinador general no es necesario que un elemento hermano este inmediatamente después del otro y es por ello que el párrafo 3 a pesar de estar después de un elemento div y no de un elemento p también se coloca de fondo amarillo. 2.6.- COLORES Aquí se aprenderá que opciones tenemos para asignar colores a los elementos dentro de nuestro sitio web. La manera más sencilla de definir un color en CSS es utilizar el espacio de colores RGB o también llamado Standard red, Green and blue. El espacio de colores RBG son formados por la combinación de tres canales de colores rojo, verde y azul cuyo rango de valores van de 0 a 255 la combinación de estos tres colores nos permiten crear millones de colores, para ser exactos permiten crear (256x256x256)=16.777.216 colores donde se puede encontrar el color que más nos agrade o que mejor se adecue a nuestras necesidades. Actualmente existen cuatro maneras principales para representar colores en CSS con el Estándar red, green and blue dentro de CSS y estos son: Keywords, notación hexadecimal, RGB y HSL.
Keywords: son valores con nombres en ingles que representan colores en la vida cotidiana tal como pink de rosado, orange de naranja, yellow de amarillo, entre otros. Estos colores tienen su correspondiente valor en una notación hexadecimal y algo que tenemos que tener en cuenta es que este método es un poco limitado para definir colores en cuanto a la variedad de colores por lo que para solucionar esta limitación tenemos otras opciones. La lista completa de estos colores la podemos encontrar en www.w3.org/TR/css3-color/. Ej.: Creamos un documento html y css con el nombre que más nos guste y escribimos el siguiente código según corresponda: Documento HTML
Representación de colores por keywords
Guardamos y lo abrimos en nuestro navegador. Ahora en: Documento CSS p{ color:red; background:yellow; } Guardamos y enlazamos el mismo con nuestro documento html en el elemento link como anteriormente se ha venido haciendo y por ultimo refrescamos nuestra página en el navegador y verificamos que el texto de nuestro párrafo se muestre de color rojo y con de fondo de color amarillo Notación hexadecimal: esta es la notación más utilizada y la definimos por el símbolo (#) seguidos por números hexadecimales que pueden ser un valor de 0 al 9 y una letra de la A hasta la F. Se pueden usar tres o seis números hexadecimales para formar el color del valor adecuado. En una notación de seis caracteres los dos primero caracteres representan el color rojo, los dos siguientes el color verde y los dos últimos el color azul. Estos pares se obtienen mediante la conversación de 0 a 255 en su sistema hexadecimal. Veamos un ejemplo: Documento HTML
Valores hexadecimales
Guardamos y lo abrimos en nuestro navegador. Ahora en: Documento CSS p{ color:#ff0000; }
Guardamos, enlazamos con el documento html, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color rojo. Lugo nos vamos nuevamente a nuestro documento css y cambiamos la posicisión de las ff como se muestra a continuación. p{ color:#00ff00; }
Guardamos, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color verde. Lugo nos vamos nuevamente a nuestro documento css y nuevamente cambiamos la posicisión de las ff como se muestra a continuación. p{ color:#0000ff; }
Guardamos, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color verde. Lugo nos vamos nuevamente a nuestro documento css y volvemos a cambiar la posicisión de las ff como se muestra a continuación. p{ color:#0000ff; }
Guardamos, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color azul. Entonces con este sistema hexadecimal se puede representar millones de colores como se mencionó anteriormente. Una notación hexadecimal se puede representar con 3 caracteres siempre y cuando en cada canal se repitan los dos caracteres. Ej.: #FF0000 = #F00 = Rojo #00FF00 = #0F0 = Verde RGB y RGBA Estas notaciones nos permiten combinar los colores usando dos funciones llamadas RGB y RGBA utilizando un formato decimal. RGB utiliza tres canales rojo, verde y azul en cambio RGBA además de estos tres canales utiliza un cuarto canal llamado alfa el cual define la opacidad y oscila entre los valores 0 y 1, donde 0 significa que el pixel no tiene ninguna opacidad por lo tanto es totalmente transparente y 1 significa que el pixel es totalmente opaco por ende no cuenta con ninguna transparencia. Veamos el siguiente ejemplo: Creamos un documento html y css con el nombre que más nos guste y escribimos el código según corresponda: Documento HTML
Color RBG
Color RBGA
Guardamos y lo abrimos en nuestro navegador. Ahora en: Documento CSS Para agregarle color al texto de la clase RGB: .colorrgb{ color: rgb(255,0,0); }
Guardamos, enlazamos con el documento html, actualizamos la página en el navegador y observamos que el texto del se coloca de color rojo. Lugo nos vamos nuevamente a nuestro documento css y cambiamos el color rgb como se muestra a continuación. .colorrgb{ color: rgb(0,255,0); }
Guardamos, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color verde. Lugo vamos otra vez a nuestro documento css y cambiamos el color rgb como se muestra a continuación. .colorrgb{ color: rgb(0,0,255); }
Guardamos, actualizamos la página en el navegador y observamos que el texto del párrafo se coloca de color azul. Ahora para agregarle color al texto de la clase RGBA utilizando la función RBGA la cual constara de cuatro valores separados por comas donde los tres primeros valores van desde 0 a 255 y el cuarto valor va de 0 a 1 ya que representa la opacidad. Entonces tenemos: .colorrgba{ color: rgba(0,0,255,.4); }
Guardamos, enlazamos con el documento html, actualizamos la página en el navegador y vemos el resultado donde se nota que el color azul tiene transparencia. HSL Y HSLa El modelo HSL se representa gráficamente mediante un cono doble o un doble hexágono. Los dos vértices se corresponden con los colores blanco y negro, el ángulo con el matiz, la distancia al eje con la saturación y la distancia al eje blanco negro se corresponde con la luminancia.
Los colores HSL son asignados con la función HSL del inglés Hue(o matiz), Saturation(o saturación) y lightness(o brillo). Para usar esta función se debe agregar tres valores entre paréntesis el primero es el matiz con un valor que va entre 0 y 359 porque a partir de 360 los matices se repiten, en cuanto al segundo que es la saturación y el tercero que es el brillo sus valores están basados en porcentajes que van de 0% a 100%. Veamos el siguiente ejemplo: Primero como siempre se crean dos documento uno html y otro css para transcribir los códigos según corresponda. Documento HTML
Color HSL
Color HSLa
Guardamos y abrimos con el navegador.
Documento CSS .colorhsl{ color: hsl(240,100%,50%);
} .colorhsla{ color: hsla(240,100%,50%,.4); }
Guardamos, enlazamos con el documento html, actualizamos la página en el navegador y se cómo los textos cambian a color azul donde, el color de la clase HSLa es claro porque tiene transparencia. Si deseas encontrar colores de manera rápida para tus diseños se recomienda visitar las páginas:
http://www.color-hex.com http://www.flatuicolors.com/ http://color.adobe.com/es/create/color-wheel/
Así mismo existen más herramientas. 2.7.- LONGITUDES Las longitudes en CSS nos ayudan a definir los tamaños de los elementos estructurales, de las letras, de los bordes entre otros. Para establecer longitudes en CSS tenemos varias unidades tanto absolutas como relativas. Unidades de Longitud Absolutas Las unidades de longitud absolutas están fijas en relación a unidades físicas que son:
Centímetro (cm) Milímetro (mm) Pulgada (in) Pixel (px) Punto (pt) Pica (pc) Dónde: 1 in = 2,54 cm 1 px = 1/96 in 1 pt = 1/72 in 1 pc = 12 pt
Cabe mencionar en esta parte que una pulga de CSS al medirla con una regla no necesariamente mide una pulga esto dependerá de la densidad de pixeles de la pantalla. De estas unidades debes saber que la más popular es el pixel pero en la actualidad con a la aparición de nuevos dispositivos con tamaño de pantallas diferentes los pixel han perdido popularidad, sin embargo, son confiables e ideales para comenzar por ello en este curso trabajaremos con esta unidad y con otra cuando sea necesario.
Veamos el siguiente ejemplo: Primero como siempre se crean dos documento uno html y otro css para transcribir los códigos según corresponda. Documento HTML
Unidades de Longitudes Absolutas pulgada centimetro pica milimetro punto pixel
Guardamos y nos vamos a: Documento CSS div{ height:50px; font-family:Verdana; font-size:16; overflow:visible; } .pulgada{ width: 7in; background: green; } .centimetro{ width: 7cm; background: gold; } .pica{ width: 7pc; background: olive; } .milimetro{ width: 7mm; background: red; } .punto{ width: 7pt; background: blue; } .pixel{ width: 7px;
background: maroon; }
Guardamos, enlazamos con el documento html, actualizamos la página en el navegador y si el código está bien debería verse de la siguiente manera:
Ahora manipula en el documento css el ancho de la pulgada con los valores 6, 5, 4 y regresas a 7 para que de esta formas veas surte efecto esta variación en la página. Unidades de Longitud Relativas Estas a diferencia de las absolutas no está completamente definida ya que su valor siempre esta referenciado respecto a otro valor. A pesar de aparente dificultad son las más utilizadas en el diseño web por la flexibilidad con que se adaptan a los diferentes medios, entre estas unidades tenemos a:
em rem ex ch
Las cuales están relacionadas al tamaño de la fuente, donde la más utilizada es em. Veamos un ejemplo para profundizar con la unidad rem. Primero crea dos documento uno html y otro css para transcribir los códigos según corresponda. Documento HTML
rem
20px
40px
80px
Documento CSS .leve1{ width: 400px; height: 400px; background: red; font-size: 80px; } .leve2{ background: green; } .leve3{ background: blue; }
Guardamos y verificamos en el navegador como queda nuestra página. Después de esto nos vamos nuevamente al documento css le agregamos al selector level2 de la clase2 lo siguiente: } .leve2{ background: green; width: 50%; height: 50%; font-size: 50% }
Guardamos los cambios, actualizamos la página y vemos en el navegador que el elemento ahora posee el 50%, es decir, que ahora tiene la mitad del alto, ancho y tamaño de fuente del elemento padre, esto se debe a que los porcentajes hacen que esta propiedades adopten un valor proporcional a la longitud del elemento padre quedando el ancho y el alto de 200px y una fuente de 40px ahora en el selector level 3 agregamos lo siguientes: } .leve3{ background: blue; width: 50%; height: 50%; font-size: 50% }
Guardamos, refrescamos la página y vemos que igualmente adopto la mitad de los valores de su elemento padre, esto se debe a que si bien las unidades del elemento padre son porcentajes lo que se hereda y proporciona es el valor calculado y no el porcentual.