Lectura 5 - Estilos Básicos, Tamaño, Color y Fuente PDF

“Educación que genera cambio” LECTURA 5. “Estilos Básicos Tamaño, color y fuente” Instrucciones: Realiza la siguiente lectura, toma nota de los estilos y sus propiedades, al finalizar realiza la práctica o actividad correspondiente según lo indique tu...

“Educación que genera cambio” LECTURA 5. “Estilos Básicos Tamaño, color y fuente” Instrucciones: Realiza la siguiente lectura, toma nota de los estilos y sus propiedades, al finalizar realiza la práctica o actividad correspondiente según lo indique tu docente. CSS la mayoría de las veces lo encontramos dentro de documentos de hojas de estilo, estos constan de una lista de reglas, un ejemplo común es el del cambio de color a un párrafo. La estructura completa es llamada regla predeterminada. 1. Selector: indica al navegador el elemento HTML que se está seleccionando y en el que se va a aplicar la regla. Esta regla selecciona el o los elementos a dar estilo y les llama sujeto del selector. 2. Declaración: una sola regla como color: red; específica a cuál de las propiedades del elemento quieres dar estilo. 3. Propiedades: son las maneras en las cuales se puede dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento. 4. Valor de la propiedad: a la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada. Es necesario apuntar que existen varios tipos de selectores en CSS: 48  “Educación que genera cambio” 1. Selector universal: para definir a este tipo de selectores se usa el asterisco (*), esto seleccionara a todos los elementos del documento. Sintaxis * {propiedades de estilo} EJEMPLO: Documento HTML: Documento CSS: Resultado: 2. Selector de tipo: este tipo de selector permite la selección con un nombre de elemento común, por ejemplo, si usas «p», seleccionará todos los elementos de tipo párrafo. Sintaxis elemento {propiedades de estilo} EJEMPLO: Documento HTML: Documento CSS: 49  “Educación que genera cambio” Resultado: 3. Selector de clase: permiten que se selecciones todos los elementos que tienen un mismo nombre de clase, usando (. ) antes del nombre de la clase. Sintaxis.nombre de clase { propiedades de estilo } EJEMPLO: Documento HTML: Documento CSS: Resultado: 4. Selector de ID: Selecciona elementos que tengan el atributo ID, teniendo en cuenta que solo funcionará cuando el selector sea idéntico al atributo ID del elemento. Sintaxis #nombre de ID {propiedades de estilo} 50  “Educación que genera cambio” EJEMPLO: Documento HTML: Documento CSS: Resultado: 5. Selector de atributo: Selecciona todos aquellos elementos que contengan un atributo específico o un valor de atributo definido. Sintaxis [attr] {propiedades de estilo } [attr=value] { propiedades de estilo } [attr~=value] { propiedades de estilo } [attr|=value] { propiedades de estilo } [attr^=value] { propiedades de estilo } [attr$=value] { propiedades de estilo } [attr*=value] { propiedades de estilo } EJEMPLO: Documento HTML: 51  “Educación que genera cambio” Documento CSS: Resultado: 6. Selector de pseudo-clase: permite la selección a elementos que se encuentran en un estado específico, por ejemplo: hover, que modifica el estilo del elemento cuando el usuario se desplace sobre él. Sintaxis selector:pseudo-clase { propiedades de estilo } EJEMPLO: Documento HTML: Documento CSS: Resultado: 7. Selector de pseudo-clase: combina dos selectores seleccionando solamente los elementos que coinciden con el segundo selector y cuyo elemento padre o ancestro coinciden con el primer selector. Un selector descendiente puede ser similar a un selector hijo, pero no estrictamente requieren la relación entre padres e hijos. 52  “Educación que genera cambio” Sintaxis selector1 selector2 { propiedades de estilos } EJEMPLO: Documento HTML: Documento CSS: Resultado: Hay otros tipos de selectores que puedes consultar en la siguiente página: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors Consideraciones importantes de la sintaxis: Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({ }). Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor. Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente. Puedes usar las reglas de forma lineal o con saltos de línea, sin que esto afecte su funcionamiento. 53  “Educación que genera cambio” Por ejemplo: Forma lineal Saltos de línea Vincular la hoja de estilo. Para vincular la hoja de estilos CSS con el documento HTML, se puede hacer de las tres formas mencionadas a continuación: 1. CSS en línea: las declaraciones CSS se integran en las etiquetas HTML mediante el atributo style. Este método tan solo afecta al elemento en el que se integra el código, pero no a los demás elementos del mismo tipo del documento. Ejemplo: Aquí tienes dos elementos para cada elemento y solo en uno de ellos se incluye el estilo CSS, por lo que solo uno de ellos es modificado por el estilo. Documento HTML: Resultado: 2. Incluir el CSS en el mismo documento HTML: los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta de HTML y 54  “Educación que genera cambio” solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección ). Tiene como desventaja que las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas. Ejemplo: Aquí tienes dos elementos para cada elemento y al incluirse en la cabecera, no es necesario declararlos en línea, ambos elementos serán afectados. Documento HTML: Resultado: 3. Definir CSS en un archivo externo: consiste en crear uno o varios ficheros con extensión “.CSS” en los cuales se declaran las reglas CSS. Se incluye dentro del elemento y se enlaza mediante la etiqueta. Un archivo de tipo CSS es 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. 55  “Educación que genera cambio” Pasos para incluir estilos en un archivo CSS externo 1. Se crea un archivo de texto y se le añade solamente las líneas de código que debe contener: 2. Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión.css y no.txt 3. En la página HTML se enlaza el archivo CSS externo mediante la etiqueta : Normalmente, la etiqueta incluye cuatro atributos cuando enlaza un archivo CSS: rel: indica el tipo de relación que existe entre el recurso enlazado (el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css 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. media: indica el medio en el que se van a aplicar los estilos del archivo CSS. EJEMPLO: Documento HTML: 56  “Educación que genera cambio” Documento CSS: Resultado: Unidades de medida Es necesario que se pueda comprender que para crear una página web debemos ser concientes de las medidas o proporciones de los elementos (anchura, altura, márgenes y tamaño), ya que esto va a permitir una mejor visualización de estos elementos en su conjunto. Es por ello que vamos a aprender los tipos y unidades de medida que podrás emplear al aplicar a través de las hojas de estilos CSS. Por ejemplo: Margin: 1px; border: 0.5in; widht: 25%; Para esto las unidades se clasifican en dos tipos: 1. Unidades absolutas: la medida no va a cambiar, es decir, que no va a necesitar de ningún tipo de cálculo, sin embargo, tendrá la desventaja que es poco flexible, por lo que al querer adaptar la página en diferentes medios esto se hará difícil. Unidad Descripción 57  “Educación que genera cambio” cm Centímetros mm Milímetros in Pulgadas (1in = 2.54cm) pt Puntos (1pt = 0.0353 cm) pc Picas (1pc = 12pt) 2. Unidades relativas: la medida va a cambiar o variar, es decir que, su valor dependerá de otros valores, esto es de elementos de niveles superiores que contienen al elemento al que le queremos modificar su unidad de medida. Unidad Descripción Relativa al tamaño del texto del element (2em significa 2 veces el tamaño del em texto actual) ex Relativa a la altura del eje x de la fuente actual (apenas se usa) ch Relativa a la anchura del carácter “0” (cero) de la fuente usada rem Relativa al tamaño del texto del elemento raíz vw Relativa al 1% del ancho del dispositivo donde se visualiza la página vh Relativa al 1% del alto del dispositivo donde se visualiza la página vmin, Relativa al menor tamaño, 1% de ancho o 1% de alto, del dispositivo donde se vm visualiza la página Relativa al mayor tamaño, 1% de ancho o 1% de alto, del dispositivo donde se vmax visualiza la página % Relativa un tanto por ciento al tamaño del elemento contenedor px pixels 3. Porcentajes: este se estructura con un valor numérico seguido del signo de porcentaje (%) y corresponde a un tanto por ciento del contenedor, por ejemplo, la página, un contenedor u otro. Modelo de caja o box model 58  “Educación que genera cambio” Todo elemento CSS tiene una caja alrededor y estas se crean de forma automática al momento de definir cada elemento. Las cajas se conforman por: Contenido: es el contenido del elemento HTML. Relleno: espacio que hay entre el borde y el contenido. Borde: es la línea que circunda todo el elemento incluyendo el contenido y su relleno. Margen: espacio en blanco que se define alrededor del borde. Fondo: color o imgane de fondo que tiene el elemento. Así también se deben conocer las dimensiones como son: Propiedad Descripción Posibles valores height Define la altura de un elemento auto, altura, %, inherit max-height Define la atura máxima de un elemento none, altura, %, inherit max-widht Define el ancho máximo de un elemento none, altura, %, inherit min-height Define la altura mínima de un elemento Altura, %, inherit min-widht Define la anchura mínima de un elemento Altura, %, inherit widht Define el ancho de un elemento auto, anchura, %, inherit Propiedad Descripción auto El navegador calcula el valor Especifica un valor numérico seguido de una unidad de medida como Anchura, altura px, in,cm, etc. El valor por defecto es 0px % Especifica un tanto por ciento con relación al valor de la misma 59  “Educación que genera cambio” propiedad del elemento contenedor inherit Especifica que el valor se heredará del elemento padre none Ningún valor Propiedades de las fuentes o tipos de letras (tipografía) Cambiar la tipografía para modificar los textos es esencial al crear las páginas web, en CSS lo podemos hacer con las siguientes propiedades y valores. Propiedad Descripción Posibles valores font-style, font-variant, font-weight, font-size/line- font Sintaxis alternativa height, font-family, caption, icon, menu, message- box, small-caption, status-bar, initial, inherit Especifica la fuente del font-family Nombre fuente, initial, inherit texto medium, xx-small, x-small, small, large, x-large, Especifica el tamaño de la font-size xx-large, smaller, larger, longitud, número%, fuente initial, inherit Especifica el estilo de la font-style normal, italic, oblique, initial, inherit fuente Especifica si la fuente se font- convierte en mayúsculas normal, small-caps, initial, inherit variant pequeñas Especifica el grosor de una normal, bold, bolder, lighter, font-weight fuente número, initial, inherit Hay otros tipos de propiedades que puedes consultar en la siguiente página: https://www.mclibre.org/consultar/htmlcss/css/css-propiedades.html 60  “Educación que genera cambio” Recurso didáctico sugerido https://youtu.be/uqkj7HQ7ids 61