Tema 4 CSS3 - freddymelgar65.files.wordpress.comA la hora de realizar el desarrollo de una página o...
Transcript of Tema 4 CSS3 - freddymelgar65.files.wordpress.comA la hora de realizar el desarrollo de una página o...
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
1. Introducción a CSS3
A la hora de realizar el desarrollo de una página o sitio web, el lenguaje de programación HTML está
limitada a la hora de aplicarle Rich Media (Anuncios con funciones avanzadas como vídeo, sonido u
otros elementos que atraigan a los usuarios.), videos y animaciones al documento o diseño de la
página.
Para solucionar el problema de limitación que tienen HTML/HTML5, nace el lenguaje CSS (no es un
lenguaje de programación en sí). CSS es la abreviatura por sus siglas en inglés (Cascading Style Sheet)
y que significa Hojas de Estilo en Cascada.
Uno de los temas actuales en el mundo del desarrollo de páginas web y la programación es el
desarrollo, empleo e implementación del HTML5 y el CSS3, es decir, la quinta revisión del lenguaje
básico de la Web y la tercera de las Hojas de Estilo en Cascada, que es el lenguaje utilizado para
diseñar la presentación de un documento estructurado en HTML o XHTML.
CSS funciona en base a reglas, declaraciones sobre estilos de uno o más elementos, por ende, las
hojas de estilo están compuestas por una o más de esas reglas, aplicadas a un archivo o documento
HTML, permitiendo controlar aspectos como colores, tipografías, bordes, entre otras cosas.
Para tener una mejor perspectiva, interpretemos la siguiente imagen:
La realidad es que se está frente a una evolución radical de los lenguajes principales de la web que
aportarán grandes mejoras, y que al mismo tiempo implicará un periodo de adaptación y
aprendizaje por parte de programadores y diseñadores.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Lo más importante que trae CSS3 es la incorporación de mecanismos que permiten controlar mejor
los estilos con los que se muestra el contenido en las páginas. Siendo más sencillo crear diseños con
múltiples columnas sin etiquetas adicionales. Dar la posibilidad que agregar reglas con cuadrículas
invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las
propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.
La novedad más importante que aporta CSS3, consiste en la incorporación de nuevos mecanismos
para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas,
sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las webs.
1.1. Historia
CSS se introdujo en la WEB en 1.996, con la versión de HTML 4.0, para ayudar a resolver algunos
problemas que los desarrolladores WEB de ese momento estaban teniendo con la versión 3.2 de
HTML, con las etiquetas y su estructura, y esto sucede porque HTML nunca fue confeccionado para
ser un lenguaje de presentación y estilos, o para dar formatos a las páginas, por ende, era poco
práctico para crear sitios WEB.
Como consecuencias de estos inconvenientes, se pensó en crear un lenguaje de estilos que separara
el diseño de la estructura como tal y de ahí que surge CSS.
CSS, hace que el desarrollo y el mantenimiento de sitios WEB sea más eficiente, ya que los estilos se
escriben en un solo archivo CSS y se puede compartir a través múltiples páginas en un sitio como
tal.
¿Qué es CSS3?
CSS3 es la última evolución de CSS, y simplemente extiende las características y poderío de CSS 2.1.
Se ha introducido nuevas características como, ángulos redondeados, sombras, degradados, etc.,
etc., haciendolo más poderoso que su antecesor.
W3C, que escribe y mantiene los estandartes de CSS, decidió dividir CSS3, en módulos de
características individuales que suben de nivel de forma independiente, que tienen sus propias
especificaciones (módulos).
De esta forma, los módulos pueden crecer en forma independiente sin tener en cuenta la evolución
de los otros módulos.
2. Conceptos básicos, sintaxis básica y formas de aplicar CSS
2.1. Conceptos básicos
CSS3 no es mas que una serie de reglas incluídas en un fichero.
Y una regla se compone de un selector y una/s declaración/es.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
La declaración es un conjunto de líneas separadas por ; (punto y coma) y cada línea (aunque pueden
estar todas seguidas) se compone de una propiedad y un valor de forma que especificamos qué
modificación visual queremos realizar (propiedad) y en qué medida (valor).
Se creará una página web standard “index.html”, desde la cual se vincularán los archivos de estilos
o CSS, además se creará un archivo llamado “estilos.css” que contendrá los estilos de la página.
<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0"> <title>Aprender21 - Unidad 6 CSS3</title> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <div id="contenido"> <h1 style="color: blue; margin-left: 20px">Aprender 21 - <a href="www.aprender21.com">CBTech</a></h1> <nav> <ul id="lista"> <li>Inicio</li> <li>Nosotros</li> <li>Clientes</li> <li>Contactos</li> </ul> </nav> <p class="parrafo">Somos una <span>Institución dedicada a la enseñanza </span>a través de Internet</p> <h2>Mayor seguridad, confianza y oportunidades laborales</h2> <p>El Instituto de Formación Profesional <a href="www.aprender21.com">CBTech </a>es líder en formación a distancia en el mundo hispanohablante.</p> <h2>Contáctanos</h2> <form action="#" method="post"> <div class="division"> <label for="name">Nombre</label> <input type="text" name="nombre" value="Ingrese su nombre" tabindex="1"/> </div> <div> <label for="textarea">Comentario</label> <textarea cols="40" rows="8" name?"textarea" id="textarea"></textarea> </div> <div> <input type="submit" value="Aceptar"/> </div> </form> </div> </body> </html>
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
@import url('normalize.css'); h2 { /*Con este formato se pueden hacer comentarios dentro de la hoja de estilo*/ background: #d0fff3; font-size: 30px; text-align: center; } .parrafo { background-color: pink; color: blue; margin: 20px; } .division { background-color: gray; color: red; margin: 20px; } #contenido { margin: 0 auto; width: 900px; } #lista { color: violet; list-style-type: none; } #contenido .parrafo span { color: green; text-decoration: underline; } div > h1 > a { color: red; font-weight: bold; } div > p > a { color: orange; font-weight: bold; } h2 + p { color: brown; font-weight: bold; } li + li { text-decoration: underline; } p ~ h2 { font-size: 40px; text-decoration: underline; }
Una página web básicamente se compone de HTML y CSS, el propósito básico de CSS es, es definir
las declaraciones de estilos a los elementos que seleccionamos del documento HTML por medio de
selectores.
Veremos los conceptos básicos de este lenguaje, veremos cómo incluir en los estilos a nuestros sitios
web y veremos cómo se compone su sintaxis básica.
2.1.1. Estilos
Primero hay que decir que hay tres formas de incluir estilos a nuestras páginas web:
1) Estilos en línea: son los estilos inline, aplicamos estilos en línea cuando agregamos los estilos CSS
dentro de una etiqueta HTML.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Por ejemplo, que estamos agregando a la etiqueta párrafo un estilo por medio del atributo “style”
y con un margen de 20 px a su izquierda (margin-left:20px).
<h1 style=”color: blue; margin-left: 20px”>Prueba CSS3</h1>
Se selecciona la etiqueta h1, y se escribe el atributo “style” y dentro de comillas se escribe el color
azul “color:blue”, se le dá un espaciado de margen izquierdo de 20px “margin-left:20px”.
Cuando se utiliza los estilos en línea (inline), se está de alguna manera mezclando contenido HTML
con CSS y los estilos que se aplican, solamente se aplicarán a la etiqueta padre que se haya
seleccionado.
Esta opción se la puede utilizar en ocasiones especiales o de emergencia, ya que, sólo se aplica a
una sola etiqueta y puede cargar mucho el documento HTML.
2) Estilos Internos: es una hoja de estilo que está incrustada dentro de un documento HTML.
Va a la derecha dentro del elemento <head>.
De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML
propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra,
(esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas, por lo tanto,
también es poco recomendable).
En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar
alguna característica a una página Web en específico, o en un simple fichero, por ejemplo, si se está
enviando algo a la página web.
En conclusión, los estilos internos, sólo afectarán el documento donde se está aplicando, estos
estilos los definimos cuando el documento va a tener estilos únicos y solamente se van a aplicar en
él.
Podemos definir estilos internos de esta manera, incluyendo la etiqueta “style” antes del cierre de
la etiqueta “</head>” en la cabecera del documento HTML. Solo afecta a los tags de la página que
están definidos o incrustados.
<head>
…
…
<style>
p {margin-left:20px;}
</style>
</head>
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
3) Estilos Externos: Se realiza por medio de la etiqueta “<link>”. Una hoja de estilo externa, es una
hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código
HTML de la página Web, yes invocada por la etiqueta “<link>”.
Esta es la manera de programar más potente, porque separa completamente las reglas de formateo
para la página HTML de la estructura básica de la página.
Este tercer método es mucho más efectivo y recomendado ya que se puede aplicar una hoja de
estilos, a múltiples documentos en el mismo sitio u otro servidor, y solamente se tiene que vincular
la hoja de estilos al documento dentro de su cabecera y utilizando la etiqueta “<link>”.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
2.2. Sintaxis básica
La sintaxis básica de CSS se compone de lo que observamos a continuación:
h2 {background: #d0fff3;}
Se compone de un selector, que normalmente es un elemento HTML que se vaya a seleccionar o a
necesitar h2 , se tiene las llaves de apertura { y de cierre }, y dentro se tiene lo que es la declaración
como tal background: #d0fff3.
Esta declaración está formada también por 2 propiedades o elementos, es decir, por la propiedad
background y por el valor #d0fff3.
Cada declaración de CSS cierra con un “;” ; y después del “;”, se puede agregar más de una
declaración.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Ejemplo: agregar un tamaño de fuente con font-size: de 30px y al texto con text-align centrado
center, cerrando con punto y coma “;” , guardar y ejecutar.
Para realizar comentarios dentro del archivo de estilos CSS, se emplea como apertura /* y como
cierre */
3. Normalizar Estilos
El concepto de normalizar estilos, significa hacer que todos los navegadores interpreten los estilos
por defecto, los cuales serán implementados en muestra página web.
Para ello, se creará una librería que se denomina normalize.css y a su vez se descargará el script para
cumplir con el objetivo.
¿Porque normalizar? Y es porque los estilos que se realizan como diseñador se aplican de último,
los primeros estilos que se aplican son las del navegador y suelen ya, de por sí, tener diferencias
entre los mismos navegadores como Google Chrome, Firefox, Microsoft Edge, Opera, etc., etc., y
entre medio, están los que el propio usuario implementa sus estilos, por lo general suelen ser
tipografías (fuentes, tipos de letra, etc.) y puede ser que la página diseñada no se vea como se desea,
o debe ser.
No obstante, lo que siempre prevalece son los estilos de diseñador.
En la página que se abre para la descarga, hacer clic en Download, y el archivo que se abre, hacer
clic derecho y guardarlo como, dejar por defecto el nombre con que viene.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
En el archivo index.HTML, en la parte del body, se tienen escrito párrafos, etiquetas h1, h2.
Se ejecutarán los diferentes navegadores, para ver sus diferentes aspectos.
Luego se codifica la nueva hoja de estilo, se la incluye en el head, y debe ir de primero para que
influya en el resto del diseño de la página web.
<link rel=”stylesheet” href=”css/normalize.css”>
Se vuelve a ejecutar el código en los mismos navegadores para poder diferencias los cambios que
se producen, el antes y después de la normalización.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Se puede diferenciar en este ejemplo, que los márgenes después de aplicar el “normalize.css” se
ajustan al borde derecho e izquierdo.
4. Buenas prácticas y desarrollo ordenado
La primera buena práctica, es incluir la etiqueta meta, con el atributo “charset=”UTF-8” ”, <meta
charset-“UTF-8”> que permitirá leer caracteres especiales, como son las letras ñ y las tildes,
puesto que se está empleando el idioma español, es necesario incluirlo.
Otra buena práctica recomendable, es incluir otra etiqueta meta, que sería el poder ver el área
visible del navegador (“viewport”) que se está utilizando, para que la aplicación o página web sea
más compatible en dispositivos móviles, o sea responsiva.
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-
scale=1.0, maximun-scale=1.0, minimum-scale=1.0”>
También, es aconsejable, no tener muchas librerías css, por lo tanto, la última librería incorporada
“normalize.css” se la incluirá dentro de “estilos.css”, para ello primero se eliminará el link del
archivo HTML, denominado index.HTML, y segundo se la incorporará al archivo “estilos.css”.
Abrir la hoja de estilos principal “estilos.css” y escribir al principio del archivo el siguiente código
para incluir los estilos de “normalize.css”.
@import url(‘normalize.css’);
Como el script “normalize.css”, está alojada en la misma carpeta css que “estilos.css”, cuando se
escribe, en este caso, la url, no hay que desarrollar la ruta, para ubicar el script ya que se encuentra
en el mismo directorio.
Para validar o hacer un cotejamiento/consulta, de que alguna propiedad css, o elemento HTML, es
soportada por los navegadores, Se llama a la página “caniuse.com”.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Otra buena práctica es la tabulación o indentación, con la cual se distinguirá los elementos, padres,
hijos y hermanos.
Por ejemplo, tomando el archivo index.HTML se puede observar lo siguiente:
5. Selectores
Los selectores de clases “class” y los identificadores “id”, permiten que apuntemos específicamente
a un elemento en el documento HTML basado en sus atributos ya sea “id” o “class”.
La principal diferencia entre una “class” y una “id”, es que los id son únicos en la página y solamente
los utilizados para identificar un elemento único del documento HTML mientras que las clases se
pueden dirigir a más de un elemento en el documento HTML.
5.1. Selectores de clases (class)
Los electores de clases se dirigen a los elementos del documento HTML que se basan en su atributo
“class”.
.Nombre {
Propiedad: valor;
}
Seguido del punto(.), es como se selecciona el nombre el atributo “class”, se coloca el nombre que
está en el atributo del archivo HTML, luego se coloca entre llaves la propiedad y a continuación el
valor que se le da a esa propiedad.
Ejemplo: siguiendo con el archivo index.HTML, se modificará párrafos y etiquetas div, como se
muestra a continuación
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
5.2. Selectores de identificación (id)
Los selectores de identificación o “id” para su empleo solo se debe colocar el símbolo “#”
(almohadilla, numeral, gato, etc.) seguido del nombre de la identificación y entre las llaves, la
propiedad y el valor.
#Nombre {
propiedad: valor;
}
Ejemplo: dentro del cuerpo “body”, se definirá un div, que lo abarque, y se definirá una
identificación que se llamará contenido y que será único en toda la página web.
En la hoja de estilo, se pondrá un margen 0 y auto, para que centre todo el contenido de la página
web, y un ancho (width) de 900px.
El resultado sería como se ve en la imagen siguiente: el contenido de 900 pixeles y centrado. El
selector de “id”, solamente selecciona a un solo elemento en la misma página, no se puede hacer
lo mismo que se hace con los selectores de clase que se pueden aplicar a varios elementos con esos
atributos.
Tema 4 – CSS3 Asignatura:IAT-700
Nivel: 7mo. Semestre
Otro ejemplo: a la lista se le cambiará el color por violeta y se eliminará los puntos que los identifican
como ítems.