CSS foundation

Objetivo

CSS

Sintaxis

Best practices

Resumen

Referencias

PDF descargable
17

Objetivo

Al finalizar la unidad de aprendizaje, el estudiante desarrollará Responsive Web

Interfaces con contenido está co, u lizando HTML, CSS y JavaScript, considerando
principios y elementos de diseño visual, así como heurís cas de Informa on
Architecture, Usability e Inclusive Design.
27

CSS

Cascading Style Sheets

Es un lenguaje para definir la presentación de un documento estructurado escrito en
HTML o XML. CSS es un lenguaje de hojas de es lo que describe la apariencia y
formato de un documento escrito en el lenguaje de markup. Su propósito es
enriquecer la apariencia de los documentos HTML.

El lenguaje HTML no estaba pensado para contener tags para dar formato a una
página web. Es por ello que la World Wide Web Consor um (W3C) creó CSS.
Ventajas

Estandarizar la presentación de un si o web completo, haciéndola fácil de mantener.

Diferentes usuarios pueden contar con diferentes es los acordes a sus necesidades

Ejemplos:

Es los para personas con dificultades visuales,

Es los para disposi vos móviles,

 Es los para disposi vos monocromos,

Es los para impresión, etc.

 Los documentos HTML se reducen en tamaño y complejidad.

37

Sintaxis

La sintaxis básica de CSS incluye los siguientes elementos:

Selector, que apunta hacia el elemento HTML al que se desea aplicar

es los.

Declara on Block, que con ene una o más declaraciones separadas por
punto y coma. El declara on block está delimitado por llaves.

Cada declara on con ene una propiedad y un valor.

Los selector se u lizan para ubicar o seleccionar el elemento HTML
sobre el que se desea aplicar un es lo.

En este ejemplo, todas las e quetas h1 en el documento HTML tendrán

la propiedad color en rojo.
Un bloque de declaraciones puede incluir varias declaraciones. En este
caso las e quetas h1 tendrán color rojo y subrayado.
Los sub-selectors permiten aplicar un bloque de declaraciones a, en
este caso, los tags li que se encuentren encerradas en un tag ul.
 1

Los pseudo selectors se u lizan para aplicar un bloque declaraciones de es lo sobre

un elemento en un estado en par cular. Por ejemplo, aquí el bloque de declaración
de es los se está aplicando a las e quetas a (anchor) cuando el mouse pasa por
encima del hipervínculo.
 2

En este ejemplo se aprecia la asignación de es los para diferentes estados el anchor

tag.
 3

Los pseudo-selectors permiten establecer declaraciones de es los a elementos en

par cular. Por ejemplo, en este caso se aplica al primer elemento li encerrado en un
tag ul.

COLOR E S P E C IFIC A C IÓN DE COLOR

CSS soporta la especificación de colores para los elementos, pudiendo expresarse

éstos como nombres predefinidos, valores hexadecimales, valores en RGB, RGBA,
HSL, HSLA y opacity.
 COLOR E S P E C IFIC A C IÓN DE COLOR

Aquí se puede apreciar la especificación de color en formato hexadecimal.

Formas de inserción

Existen tres formas de inserción del código de CSS para aplicar

declaraciones de es lo a elementos de un documento HTML.

External Stylesheets (Hojas de es lo externas).

Internal Stylesheets (Hojas de es lo internas).

Inline Styles (Es los en línea).

Las hojas de es lo externas se

ubican en archivos que pueden
ser referenciados mediante el tag
link en la sección head del
documento HTML.

1 of 3

Las hojas de es lo internas

permiten que se incluya
declaraciones de es lo exclusivas
del documento HTML actual. Ello
se puede especificar mediante el
tag style en la sección head del
documento HTML.

2 of 3
 Es posible aplicar
declaraciones de es lo a
HTML tags en par cular. Por
ejemplo, aquí se está
aplicando las declaraciones de
es lo a un h1 tag en
par cular dentro del
documento HTML.

3 of 3
47

Best practices

A con nuación se deja un link que servirá de prác ca.

h ps://www.w3schools.com/css/css_examples.asp
57

Resumen

CSS es un lenguaje de hojas de es lo que describe la apariencia y formato

de un documento escrito en el lenguaje de markup. Su propósito es
enriquecer la apariencia de los documentos HTML.

El lenguaje HTML no estaba pensado para contener tags para dar formato a
una página web. Es por ello que la World Wide Web Consor um (W3C)
creó CSS.
Los selector se u lizan para ubicar o seleccionar el elemento HTML sobre
el que se desea aplicar un es lo.
67

Referencias

h ps://www.w3schools.com/css/

h ps://developer.mozilla.org/en-US/docs/Learn/CSS

h ps://www.learn-html.org/

h ps://learn.shayhowe.com/
h ps://cssreference.io/
77

PDF descargable

SI 385_ LMM_ D ESC_ CSS FOUND ATI ON_ V1.pd f

10.1 MB

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Ángel Velásquez Núñez

SALIR

UPC, 2021.