2 - Aprendiendo a usar CSS en las paginas web [2025].pdf

2
.
Cascading Style Sheets
C S S

3
.
Contenido
▪ Qué es HTML5?
▪ Ventajas de HTML5
▪ Introducción y conceptos básicos de CSS
▪ Selectores básicos
▪ Como incluir CSS en un archivo HTML
▪ Colores en CSS
▪ Propiedades CSS para fuentes y textos
▪ El elemento CANVAS

4
.
Que es HTML5?
▪ HTML5 es la última versión de HyperText Markup Language (Lenguaje de
Marcado de Hipertexto). Combina tres tecnologías web: HTML, para construir la
estructura de la página; CSS, para mejorar la presentación; y JavaScript, para
agregar funcionalidad a los elementos HTML.
▪ Sus etiquetas o marcas hacen que textos, imágenes y elementos multimedia se
visualicen correctamente en la pantalla, y que las páginas web tengan un
formato unificado, estandarizado y sean compatibles con distintos navegadores,
como Chrome, Edge, Firefox y Safari.

5
.
Ventajas de HTML…
• Es gratuito: no necesitas ningún software costoso para empezar a programar.
• El lenguaje tiene un código claro, ordenado y fácil de aprender.
• HTML5 es compatible con los navegadores web más populares y tiene un diseño
responsive
• HTML5 soporta multimedia y funcionalidades interactivas.
• HTML5 permite crear aplicaciones web
• El lenguaje optimiza el tiempo de carga de un sitio web

6
.
INTRODUCCIÓN Y CONCEPTOS
BÁSICOS DE CSS

7
.
Introducción a CSS (1)
▪ El HTML original era mucho más enfocado al contenido como tal que a la forma en que se
presentaba, y la Web lucía de esta manera, es decir, la estética y la organización visual del
contenido no era algo importante en los primero días de la Web.
▪ Aunque esta situación era comprensible e incluso adecuada en algún momento, las
necesidades fueron cambiando, los dueños de los navegadores se dieron cuenta de la
situación y añadieron etiquetas y atributos propios que proporcionaban nuevas capacidades,
pero al mismo tiempo se creó cierta complejidad y desorden.
▪ Ahora con la nueva especificación HTML5, se intenta regresar a la idea original en la cual
HTML se concentraba en el contenido. Las etiquetas que estaban dedicadas a dar formato,
posición o color en HTML han sido descontinuadas, así es, etiquetas como <center>, <font>
y <b>, entre otras, ya no están disponibles.

8
.
Introducción a CSS (2)
▪ Sin embargo, se dispone de un lenguaje completamente dedicado a darle un
buen aspecto a las paginas web, el lenguaje es llamado CSS (Cascading Style
Sheets).

9
.
¿Qué son las hojas de estilo? (1)
CSS: Cascade StyleSheet. En español, Hojas de Estilo en Cascada.
▪ Una hoja de estilo es un conjunto de instrucciones que definen la
apariencia de los diversos elementos HTML en una página Web.
▪ Permite separar el contenido de la página de la presentación final que
tendrá en el navegador.
▪ En términos sencillos, CSS es un lenguaje que trabaja junto con HTML para
proveer estilos visuales a los elementos del documento, como tamaño,
color, fondo, bordes, etc…

10
.
¿Qué son las hojas de estilo? (2)
▪ Para muchos, quienes comienzan a dar sus primeros
pasos con las hojas de estilo en cascada, este estándar
es casi como aprender magia.
▪ Y es que, en realidad, con CSS podrá aplicar efectos a
la información (texto, hiperenlaces) y a los elementos
(tablas, imágenes, formularios) que le resultará
asombroso. Llegará a sentirse como el Harry Potter del
diseño web.

11
.
Sintaxis de una regla de estilo (1)
▪ Una regla de estilo se compone de dos partes fundamentales: un
selector y una declaración.
▪ A su vez, cada declaración se compone de otras dos partes : Una
propiedad y un valor.
En el siguiente ejemplo se
ilustran los elementos básicos
de una regla CSS:

12
.
Los términos de la sintaxis hacen referencia a lo siguiente:
▪ Regla: Cada uno de los estilos que componen una hoja de estilo CSS. Cada regla
incluye un selector, una llave de apertura { , una declaración y una llave de cierre } .
▪ Selector: Con él se indica a que elemento o elementos HTML se aplicará la regla
CSS.
▪ Declaración: Suma de una propiedad y un valor. Con ellos se asignan los estilos
que se aplican al elemento o elementos señalados en el selector.
▪ Propiedad: Características especificas de unos elementos que están sujetas a ser
modificadas.
▪ Valor: Los valores con los que es posible modificar una propiedad.

13
.

14
.
▪ Dicho esto, puede comenzar a escribir reglas CSS con la siguiente sintaxis:
selector {
propiedad1:valor1;
propiedad2:valor2;
…
propiedadN:valorN;
}

15
.

16
.
▪ Por ejemplo, una regla de estilo básica sería la siguiente:
En este ejemplo se crea una regla que dota de un diseño especifico al pie de
pagina (footer). En concreto la regla especifica que el color de fondo
(background-color) del footer será negro (black) y el color del texto
(color) será blanco (white).

19
.
Selectores CSS
▪ Para el W3C un selector es, sencillamente, “una cadena que identifica a qué
elementos se aplica una regla de estilo”.
▪ CSS3 ofrece un amplio abanico de selectores , sin embargo, para no
abrumar con todos los tipos en esta clase se presentaran únicamente los
que se consideran “selectores básicos”. Los selectores considerados como
básicos son los siguientes:
❑Selector universal
❑Selector de etiqueta
❑Selector de clase
❑Selector de id

20
.
Selector universal
▪ Se utiliza para seleccionar todos los elementos de la página. El selector
universal se indica mediante un asterisco (*). A pesar de su sencillez, no se
utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a
todos los elementos de una página. Un ejemplo de aplicar el selector universal
para dar estilo a todo el documento sería el siguiente:

21
.
Selector de etiqueta (1)
▪ Selecciona todos los elementos de la página
cuya etiqueta HTML coincide con el valor del
selector. Para utilizar este selector, solamente
es necesario indicar el nombre de una
etiqueta HTML (sin los caracteres < y >)
correspondiente a los elementos que se
quieren seleccionar.
El siguiente ejemplo aplica
diferentes estilos a los titulares
y a los párrafos de una página
HTML:

22
.
▪ Si se quiere aplicar los mismos estilos a dos etiquetas
diferentes, se pueden encadenar los selectores. En el
siguiente ejemplo, los títulos de sección h1, h2 y h3
comparten los mismos estilos.
▪ En este caso, CSS permite agrupar todas las reglas
individuales en una sola regla con un selector múltiple.
Para ello, se incluyen todos los selectores separados por
una coma.

23
.
▪ En las hojas de estilo complejas, es
habitual agrupar las propiedades
comunes de varios elementos en una
única regla CSS y posteriormente
definir las propiedades específicas de
esos mismos elementos.
▪ El siguiente ejemplo establece en
primer lugar las propiedades comunes
de los títulos de sección (color y tipo
de letra) y a continuación, establece el
tamaño de letra de cada uno de ellos:

24
.
Selector de clase (1)
El selector de clase permite asociar un estilo a aquellos elementos HTML que
han sido clasificados dentro una clase específica. Esto se realiza utilizando el
atributo class dentro de los elementos HTML. Por ejemplo:
Para aplicar estilo a este elemento se puede hacer de una de las siguientes
formas:

25
.
▪ Para que el navegador no confunda este selector con los otros tipos de
selectores, se prefija el valor del atributo class con un punto (.) tal y como
muestra el siguiente ejemplo:
▪ El selector .destacado se interpreta como "cualquier elemento de la página
cuyo atributo class sea igual a destacado“.
▪ La principal característica de este selector es que en una misma página HTML
varios elementos diferentes pueden incluir el mismo valor en el atributo class

26
.
▪ ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea
igual a destacado? Combinando el selector de tipo y el selector de clase, se
obtiene un selector mucho más específico:
▪ El selector p.destacado se interpreta como "aquellos elementos de tipo <p>
que dispongan de un atributo class con valor destacado". De la misma forma, el
selector a.destacado solamente selecciona los enlaces cuyo atributo class sea
igual a destacado.

27
.
▪ Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo
elemento. La sintaxis es similar, pero los diferentes valores del atributo class se
separan con espacios en blanco. En el siguiente ejemplo:
▪ Al párrafo anterior se le aplican los estilos definidos en las reglas .especial,
.destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se
vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:

28
.
Selector de ID (1)
▪ En ocasiones, es necesario aplicar estilos CSS a un único elemento de la
página. Aunque puede utilizarse un selector de clase para aplicar estilos a un
único elemento, existe otro selector más eficiente en este caso.
▪ El selector de ID permite seleccionar un elemento de la página a través del
valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento
de la página porque el valor del atributo id no se puede repetir en dos
elementos diferentes de una misma página.

29
.
Selector de ID (2)
▪ La sintaxis de los selectores de ID es muy parecida a la de los selectores de
clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.)
como prefijo del nombre de la regla CSS:
▪ En el ejemplo anterior, el selector #destacado solamente selecciona el
segundo párrafo (cuyo atributo id es igual a destacado).
#destacado { color : red; }

30
.
Selector de ID (3)
▪ La principal diferencia entre este tipo de selector y el selector de clase tiene que
ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del
atributo id debe ser único, de forma que dos elementos diferentes no pueden
tener el mismo valor de id.
▪ Sin embargo, el atributo class no es obligatorio que sea único, de forma que
muchos elementos HTML diferentes pueden compartir el mismo valor para su
atributo class.
▪ De esta forma, la recomendación general es la de utilizar el selector de ID
cuando se quiere aplicar un estilo a un solo elemento específico de la página
y utilizar el selector de clase cuando se quiere aplicar un estilo a varios
elementos diferentes de la página HTML.

31
.
¿CÓMO INCLUIR CSS EN UN ARCHIVO HTML?

32
.
1. Incluir CSS en el mismo documento HTML
▪ Los estilos se definen en una zona específica del propio documento HTML.
Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la
cabecera del documento (sólo dentro de la sección <head>).
▪ Este método se emplea cuando se define un número pequeño de estilos o
cuando se quieren incluir estilos específicos en una determinada página
HTML que completen los estilos que se incluyen por defecto en todas las
páginas del sitio web.
▪ El principal inconveniente es que si se quiere hacer una modificación en los
estilos definidos, es necesario modificar todas las páginas que incluyen el
estilo que se va a modificar.

33
.
1. Incluir CSS
en el mismo
documento
HTML
(Ejemplo)

34
.
2. Definir CSS en un archivo externo (1)
▪ En este caso, todos los estilos CSS se incluyen en un archivo de tipo
CSS que las páginas HTML enlazan mediante la etiqueta <link>.
▪ Un archivo de tipo CSS no es más que un archivo simple de texto
cuya extensión es .css Se pueden crear todos los archivos CSS que
sean necesarios y cada página HTML puede enlazar tantos archivos
CSS como necesite.

35
.
2. Definir CSS en un archivo externo (Ejemplo)

36
.
La etiqueta <link> incluye dos atributos cuando se enlaza un
archivo CSS:
▪ rel: indica el tipo de relación que tiene el recurso enlazado (en
este caso, el archivo CSS) y la página HTML. Para los archivos CSS,
siempre se utiliza el valor stylesheet
▪ href: indica la URL del archivo CSS que contiene los estilos. La
URL indicada puede ser relativa o absoluta y puede apuntar a un
recurso interno o externo al sitio web.

37
.
▪ De todas las formas de incluir CSS en las páginas HTML, esta es la
más utilizada y la más recomendable. La principal ventaja es que
se puede incluir un mismo archivo CSS en multitud de páginas
HTML, por lo que se garantiza la aplicación homogénea de los
mismos estilos a todas las páginas que forman un sitio web.
▪ Con este método, el mantenimiento del sitio web se simplifica al
máximo, ya que un solo cambio en un solo archivo CSS permite
variar de forma instantánea los estilos de todas las páginas HTML
que enlazan ese archivo.

38
.

39
.
3. Incluir CSS en los elementos HTML (1)
▪ El último método para incluir estilos CSS en documentos HTML es el
peor y el menos utilizado. También se hace referencia a esta técnica
como estilos embebidos en los elementos. No es nada recomendable
por la dificultad que implica realizar un cambio a posteriori.
▪ Esta forma de incluir CSS directamente en los elementos HTML
solamente se utiliza en determinadas situaciones en las que se debe
incluir un estilo muy específico para un solo elemento concreto.

40
.
3. Incluir CSS en los elementos HTML (2)
▪ Para insertar un estilo CSS en un elemento se utiliza la propiedad
style de HTML, que en ningún momento se debe confundir con la
etiqueta <style> que se introduce en la cabecera del documento.

41
.
Importación de estilos
La regla @import permite importar hojas de estilo desde otras hojas de estilo o
desde un área de definición de estilos dentro de la cabecera del documento.
La sintaxis puede ser de una de las siguientes formas: @import
"estilos.css";
O bien,
@import url("estilos.css");
IMPORTANTE: Esta declaración debe ir antes que cualquier otra regla en la
hoja de estilo y también se debe colocar entre los elementos <style> y </style>.

44
.
Comentarios en CSS (1)
▪ Es posible dentro de un documento CSS incluir pequeños comentarios que
permitan entender mejor la estructura del código que hemos creado, que nos
de una pista de qué reglas se definen y qué alcance tienen.
▪ Los navegadores ignoran por completo cualquier comentario de los archivos
CSS, por lo que es común utilizarlos para estructurar de forma clara los
archivos CSS complejos.

45
.
El comienzo de un comentario se indica mediante los caracteres /* y el final del
comentario se indica mediante */, tal y como se muestra en el siguiente
ejemplo:
Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se
puede incluir un comentario dentro de otro comentario:

46
.
▪ Aunque los navegadores ignoran los comentarios, su contenido se envía
junto con el resto de estilos, por lo que no se debe incluir en ellos ninguna
información sensible o confidencial.
▪ La sintaxis de los comentarios CSS es muy diferente a la de los comentarios
HTML, por lo que no deben confundirse:

48
.
Colores en CSS
▪ Los colores en CSS se pueden indicar de cinco formas diferentes:
palabras clave, colores del sistema, RGB hexadecimal (el método
más habitual), RGBA numérico y RGB porcentual.
▪ De estos 5 métodos, los más tradicionalmente usados son los
siguientes:
❑Palabras clave.
❑RGB hexadecimal
❑RGBA numérico.

49
.
Palabras clave (1)
▪ CSS define 17 palabras clave para
referirse a los colores básicos. Las
palabras se corresponden con el
nombre en inglés de cada color:
aqua, black, blue,
fuchsia, gray, green,
lime, maroon, navy,
olive, orange, purple,
red, silver,teal, white,
yellow.

50
.
Palabras clave (2)
▪ Aunque es una forma muy sencilla de referirse a los colores básicos, este
método prácticamente no se utiliza en las hojas de estilos de los sitios
web reales, ya que se trata de una gama de colores muy limitada.
Además de la lista básica, los navegadores modernos soportan muchos
otros nombres de colores. La lista completa se puede ver en:
https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors

51
.
RGB hexadecimal
▪ Aunque es el método más complicado de indicar los colores, se trata
del método más utilizado con mucha diferencia. De hecho,
prácticamente todos los sitios web reales utilizan exclusivamente este
método.
▪ Con esta nueva notación, el color del mismo ejemplo anterior se indica
de la siguiente forma:

52
.
RGBA numérico (1)
▪ En el campo del diseño gráfico, se han definido varios modelos diferentes
para referirse a los colores. Aunque no es una definición exacta, el modelo
RGB consiste en definir un color indicando que cantidad de color rojo, verde
y azul se debe mezclar para obtener el color.
▪ Por lo tanto, en el modelo RGBA un color se define indicando sus cuatro
componentes R (rojo), G (verde) y B (azul). Además, el ultimo valor
corresponde a la opacidad del color (A).
▪ Las primeras tres componentes puede tomar un valor entre cero y un valor
máximo de 255. El ultimo componente toma un valor entre 0 y 1. De esta
forma, el color rojo puro en RGB se crea mediante el máximo valor de la
componente R y un valor de 0 para las componentes G y B.

53
.
RGBA numérico (2)
▪ Si los tres primeros componentes valen 0, el color creado es el negro; si los tres
primeros componentes toman su valor máximo (255), el color obtenido es el blanco.
▪ El siguiente ejemplo establece el color de fondo de un div:
▪ La sintaxis que se utiliza para indicar los colores es rgba() y entre paréntesis se
indican las tres componentes RGB, en ese mismo orden y separadas por comas y
finalmente el valor de opacidad del color. El color del ejemplo anterior se obtendría
mezclando las componentes R=71, G=98, B=176 con una opacidad del 60% (es decir
una transparencia del 40%), que se corresponde con un color azul claro.

54
.
Paleta de colores
▪ En el siguiente vinculo se encuentra una lista muy completa de colores que se
pueden usar en las paginas web:
http://en.wikipedia.org/wiki/Websafe
▪ A continuación se presenta un generador de colores RGBA:
http://www.css3maker.com/css-3-rgba.html
▪ Finalmente se presenta la paleta de colores del llamado “diseño material” la cual es
una tendencia del diseño web actual.
https://www.materialui.co/colors

55
.
PROPIEDADES CSS PARA FUENTES Y TEXTO

56
.
Color
▪ La propiedad básica que define CSS relacionada con la tipografía se
denomina color y se utiliza para establecer el color de la letra.

57
.
Font-family (1)
▪ Se utiliza para indicar el tipo de letra con el que se muestra el texto.

58
.
Font-family (2)
El tipo de letra del texto se puede indicar de dos formas diferentes:
▪ Mediante el nombre de una familia tipográfica: en otras palabras,
mediante el nombre del tipo de letra, como por ejemplo "Arial",
"Verdana", "Garamond", etc.
▪ Mediante el nombre genérico de una familia tipográfica: los nombres
genéricos no se refieren a ninguna fuente en concreto, sino que hacen
referencia al estilo del tipo de letra. Las familias genéricas definidas
son serif (tipo de letra similar a Times New Roman), sans-serif (tipo
Arial), cursive (tipo Comic Sans), fantasy (tipo Impact) y monospace
(tipo Courier New).

59
.
Font-family (3)
▪ Los navegadores muestran el texto de las páginas web utilizando los
tipos de letra instalados en el ordenador del propio usuario.
▪ De esta forma, si el diseñador indica en la propiedad font-family
que el texto debe mostrarse con un tipo de letra especialmente raro
o rebuscado, casi ningún usuario dispondrá de ese tipo de letra.
▪C:windowsfontsarial.ttf

60
.
Font-family (3)
▪ Para evitar el problema común de que el usuario no tenga instalada la fuente que
quiere utilizar el diseñador, CSS permite indicar en la propiedad font-family más de un
tipo de letra. El navegador probará en primer lugar con el primer tipo de letra
indicado.
▪ Si el usuario la tiene instalada, el texto se muestra con ese tipo de letra. Si el usuario
no dispone del primer tipo de letra indicado, el navegador irá probando con el resto
de tipos de letra hasta que encuentre alguna fuente que esté instalada en el
ordenador del usuario.

61
.
Font-family (4)
▪ Para solucionar este problema se utilizan las familias tipográficas genéricas.
Cuando la propiedad font-family toma un valor igual a sans-serif, el diseñador
no indica al navegador que debe utilizar la fuente Arial, sino que debe utilizar
"la fuente que más se parezca a Arial de todas las que tiene instaladas el usuario".
▪ Por todo ello, el valor de font-family suele definirse como una lista de tipos de
letra alternativos separados por comas. El último valor de la lista es el nombre
de la familia tipográfica genérica que más se parece al tipo de letra que se
quiere utilizar.

62
.
Font-family (5)
▪ Las listas de tipos de letra más utilizadas son las siguientes:
▪ Adicionalmente, se pueden utilizar servicios de tipografía de terceros como
Google Fonts
https://www.google.com/fonts

63
.
Font-size
▪ Establece el tamaño de letra utilizado para el texto.
▪ Ejemplo:

64
.
Unidades de medida para texto
▪ Las unidades de medida más típicamente usadas para definir el tamaño del
texto son: pixeles, em y rem.
❖ Pixel (px)
Unidad relativa respecto de la pantalla del usuario.
❖ em
Unidad relativa al tamaño de letra. Se lee como “tantas veces el tamaño de letra definido”.
Por ejemplo si el tamaño de letra de un elemento es 12 pixeles, 1 em son 12px, 2 em son
24 px, 3 em son 36 px, etc.
❖ Rem
Unidad relativa al tamaño de letra del elemento raíz del documento (html).

65
.
em vrs rem (1)
Uso de em
Un em, es básicamente el tamaño de una letra del elemento al cual se esté
aplicando esta medida. Es decir, si en elemento tiene aplicado un tamaño
de fuente de 16 pixeles, entonces 1 em será igual a 16px (los navegadores
de manera predeterminada definen un font-size de 16px al elemento HTML,
por lo tanto, por defecto 1em es igual a 16px).

66
.
em vrs rem (2)
▪ La unidad em es escalable y siempre depende de su elemento padre. Por
ejemplo, si el elemento body tiene un tamaño de fuente de 16px y un
elemento hijo tiene una fuente con tamaño 1.3em, este texto se mostrará de
un tamaño un 30% más grande que el del body (20.8px), mientras que si
dentro de ese elemento tenemos otro hijo con un font-size de 1.3 em, el
tamaño de fuente de este objeto sería un 30% más grande que el tamaño de
su padre (27.04px).
▪ Body = 1em (16px)
Hijo = 1.3em (16px x 1.3 = 20.8px)
Nieto = 1.3em (20.8px x 1.3 = 27.04px)

67
.
em vrs rem (3)
▪ Uso de rem
La unidad de medida rem es muy similar a em, con la única diferencia de que no es
escalable, esto quiere decir que no depende del elemento padre, sino del
elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea,
es un em basado en la raíz.
Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como
es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño
basado en rem a cualquier elemento de la página, no importará cual sea el tamaño
de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16
pixeles a no ser que se modifique el elemento raíz.

68
.
font-weight
▪ Establece la anchura de la letra utilizada para el texto
▪ Ejemplo:

69
.
font-style
▪ Establece el estilo de la letra utilizada para el texto
▪ Normalmente la propiedad font-style se emplea para mostrar un texto en cursiva
mediante el valor italic.

70
.
text-align
▪ Establece la alineación del contenido del elemento
▪ Ejemplo:

71
.
line-height
▪ Además de todas las unidades de medida y el uso de porcentajes, la propiedad line-height
permite indicar un número sin unidades que se interpreta como el múltiplo del tamaño normal
de la letra. Por tanto, estas reglas CSS son equivalentes:

72
.
text-decoration
▪ Establece la decoración del texto
▪ Ejemplo

73
.
text-transform
▪ Una de las propiedades de CSS más desconocidas y que puede ser de gran utilidad
en algunas circunstancias es la propiedad text-transform, que puede variar de
forma sustancial el aspecto del texto.
▪ La propiedad text-transform permite mostrar el texto original transformado en un
texto completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con
la primera letra de cada palabra en mayúscula (capitalize).

75
.
▪ El elemento canvas crea un área rectangular donde los autores pueden
representar gráficos y animaciones programáticamente y en tiempo real. Este
es un recurso valuable al diseñar sitios ricos en animación e interactividad, o
cuando se desarrollan aplicaciones dentro del documento o videojuegos.
▪ Desde el punto de vista de un autor de contenido, el elemento canvas define
solo un área rectangular.
▪ Sus beneficios se vuelven tangibles al ser usado junto a lenguajes de
programación del lado cliente como Javascript.
¿Qué es el elemento CANVAS?

76
.
Otro concepto nos dice:
▪ El componente canvas es una especie de lienzo o contenedor que
podemos incluir dentro de nuestra página, mediante la etiqueta <canvas>
y </canvas>, en el cual podemos dibujar gráficos y realizar animaciones
utilizando un lenguaje de programación web llamado JavaScript

77
.
Para incluir código Javascript dentro de nuestro documento HTML , podemos
utilizar las etiquetas <script> y </script>, lo cual le indicará al navegador que lo
que se encuentre dentro de estas etiquetas los debe interpretar como código
Javascript y no como código HTML.

78
.
▪ La instrucción document.getElementById("miCanvas"); indica que vamos a
obtener el canvas con identificador “miCanvas” para poder dibujar sobre este.
Es por esto que es indispensable que cada canvas tenga asociado un
identificador para poder referenciarlo.
▪ La instrucción c.getContext("2d"); indica que el grafico que se va a dibujar será
en 2 dimensiones.
▪ La instrucción ctx.fillStyle = "#FF0000"; indica que el color de relleno del
rectángulo será rojo (#FF0000).
▪ La instrucción ctx.fillRect(50,20,150,75); indica que se va a dibujar un
rectángulo empezando desde la coordenadaSirve para determinar la posición
de un punto en un plano. 50, 20 y terminando en la coordenada 150,75 dentro
del canvas.

79
.
Atributos específicos
▪ Ancho (WIDTH)
El número de píxeles a ser usados como ancho del rectángulo que define
este elemento. Cuando este atributo no se especifica, el área del elemento
toma un ancho de 300 píxeles.
▪ Alto (HEIGHT)
El número de píxeles a ser usados como altura del rectángulo que define este
elemento. Cuando este atributo no se especifica, el área del elemento toma
una altura de 150 píxeles.

2 - Aprendiendo a usar CSS en las paginas web [2025].pdf

Más contenido relacionado

Similar a 2 - Aprendiendo a usar CSS en las paginas web [2025].pdf

Más de GersonZuniga

2 - Aprendiendo a usar CSS en las paginas web [2025].pdf