Flashcards
Hojas de Estilo CSS
Cards in this deck (8)
- 1UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO INGENIERÍA EN SISTEMAS INTELIGENTES HOJAS DE ESTILO CSS- ASIGNATURA: PROGRAMACIÓN WEB
-PROFESOR(A): ANA KARINA SÁNCHEZ
HERNÁNDEZ
- GRUPO: V5 - 2¿QUÉ ES CSS? CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada). Es un lenguaje de estilo diseñado para definir los aspectos visuales de los elementos electrónicos creados mediante HTML y XHTML, tales como: color, tamaño, apariencia, posición, formato de texto, etc. Se denominan "hojas de estilo en cascada" porque se pueden definir múltiples hojas y los estilos pueden aplicarse a todas las páginas. Las hojas de estilo pueden utilizarse para: • Organizar la presentación y aspecto de una página web, controlando el estilo y formato utilizando un solo documento para almacenar las características de presentación de las páginas asociadas a grupos de elementos.VENTAJAS DE LAS CSS :
• Es flexible: De aquí se generan tres formas de incluir CSS en un documento electrónico de HTML: en el mismo documento, en un archivo externo y dentro de los elementos de HTML.
• Fácil uso: El CSS permite guardar y almacenar los estilos por separado del contenido de una web, sea lo grande que sea. Los CSS aportan un mejor control en la presentación de un sitio web que los elementos de HTML.
• Mayor accesibilidad: Permiten modificar el formato de una página web según sean las necesidades del usuario.
• Mayor optimización: La hoja de estilo se almacena en cache y no tiene que descargar la página web una y otra vez. Los CSS, además, reducen más del 50% el ancho de banda y los costes de almacenamiento del sitio. Por lo tanto, estas páginas se cargan mucho más rápido.
• Multidispositivo: Las hojas de estilo permiten configurar la página para diferentes dispositivos, como son móviles, tables, lectores de voz, etc. - 3CSS funciona mediante reglas que especifican exactamente el estilo de uno o varios elementos en una página. Una regla posee tres elementos básicos que se expresan de la siguiente forma en el código: • Selector (nombre del estilo): Elemento al que llamamos desde la hoja de estilos (CSS) que se encuentra en el documento HTML. Lo podemos identificar con su etiqueta (p, h1, table…) o también lo podemos identificar introduciendo en su etiqueta un id o un name. Permite especificar el elemento al que se aplica la regla. • Atributo: estilo aplicado al selector (nombre de estilo). • Valor: Características del atributo, como por ejemplo el tamaño, color, posición, etc. • Bloque de declaración: Se define entre llaves y está formado por una o varias declaraciones de estilo. Cada una incluye la propiedad y su valor. • selector { • propiedad: valor; • }Ejemplo de uso.
h2{
text-align:center;
color:blue;
font-family:calibri;
}
La propiedad y el valor tienen que estar separados por dos puntos y la declaración termina con un punto y coma.
Algunos ejemplos simples:
– La siguiente regla especifica que todos los enlaces en la página deben tener el color rojo.
a {
color: #f44336;
} - 4– La siguiente regla especifica que el elemento que posee la identidad "big" debe usar un tamaño de fuente de 22 pixeles. #big { font-size: 22px; } – La siguiente regla especifica que todos los elementos con la clase "neg", su texto debe de usar negritas. .neg { font-weight: bold; } En una misma regla se puede usar varios selectores al mismo tiempo, separándolos con una coma. También se pueden especificar varias propiedades con sus valores en una misma declaración.Por ejemplo:
h3, #id1, .clas2 {
line-height: 38px;
margin: 6px;
padding-top: 10px;
} - 5—¿CÓMO SE USA EL CSS EN LAS PÁGINAS?
Se puede aplicar CSS para formatear cualquier documento HTML, de tres formas:
1. - Inline. Insertando las reglas directamente en los elementos usando la propiedad STYLE.
Por ejemplo:
Mi casa es de color azul.
2.- Una hoja de estilo interna, incluyendo las reglas dentro de un script , situado en el área del HEAD de la página, de la siguiente forma:
blue{
color: #2196f3;
} - 63.- Una hoja de estilo externa, enlazada a la página. Las reglas de almacenan en un archivo de texto con la extensión CSS, de la siguiente forma: La ventaja de este último método es que permite aplicar las reglas a varias páginas al mismo tiempo y solo es necesario modificar el archivo ante cualquier actualización.OTROS ELEMENTOS DE LAS HOJAS DE ESTILO CSS
En las hojas de estilo modernas se pueden usar las reglas
• @media screen: Para especificar el ancho de la ventana del navegador.
• @media print: Para especificar el estilo del documento solo para imprimir.
• @font-face: Para cargar fuentes externas, entre otras.
Además, pueden contener otros elementos que no son reglas.
• Comentarios: Para agregar anotaciones, las que son ignoradas por el navegador.
• Índices o tablas de contenido en hojas extensas. - 7ATRIBUTOS PARA DAR TAMAÑO: • widht: Tamaño horizontal, lo podemos expresar en pixeles(px) o porcentajes(%). width:1040px o width:50% • height: tamaño vertical, lo podemos expresar en pixeles(px) o porcentajes(%). height:1040px o height:50% ATRIBUTOS PARA DAR COLOR • valores de colores básicos: los colores como azul, rojo, amarillo… los podemos expresar como blue ,red, yellow…. • valores de otros colores: se expresan en hexadecimal. Como por ejemplo #BDBDBD • background-color: color de fondo del atributo, tambíen podemos usarlo para el fondo de la página web. background-color:#BDBDBD; color: Para dar color a un texto. color:blueATRIBUTOS PARA FORMATO DE TEXTO
• text-align: alineación del texto right(derecha) center(centrado) left(izquierda).
text-align:center
• font-size: sirve para dar el tamaño de la fuente, se expresa con un número.
font-size:18
• font-family: tipo de fuente del texto.
font-family:calibri
• font-weight:bold —> texto en negrita
OTROS ATRIBUTOS:
• float: nos permite anclar una capa o elemento arriba, abajo, a la derecha y a la izquierda.
float:top - 8INCLUIR HOJAS DE ESTILOS CSS • Embebido En la parte del documento HTML donde queremos incluir el estilo css introducimos: aqui el estilo • Desde otro documento con extensión .css Incluir en el del documentoBIBLIOGRAFIA:
• C. (s. f.). ¿Qué son las hojas de estilo en cascada (CSS) y para qué sirven? CCM. Recuperado 2 de septiembre de 2021, de https://es.ccm.net/contents/156-css-hojas-de-estilo
• Carrodeguas, N. (2019, 24 diciembre). Como usar las hojas de estilo CSS en las páginas web. NorfiPC. https://norfipc.com/web/usar-estilos-css.html
• Parilli, M. (2020, 4 junio). ¿QUÉ ES CSS? ¡FUNCIÓN PRINCIPAL DE ESTA HERRAMIENTA! Tecnoinformatic.com. https://tecnoinformatic.com/c-programacion/que-es-css/
• ¿Qué es CSS? Descripción y ventajas de la hoja de estilos. (2018, 4 octubre). FP Online. https://fp.uoc.fje.edu/blog/que-es-css-descripcion-y-ventajas-de-la-hoja-de-estilos/
• Escudero, A. V. (2016, 21 enero). CSS Estructura y elementos básicos. Adrián Vergara ASIR. https://adrianvergaraasir.wordpress.com/2016/01/20/css-estructura-y-elementos-basicos/
Information
- Description
- Flashcards on Hojas de Estilo CSS, created by Jennifer Berenice Rojas Hernandez on 02/09/2021.
- Created by
- Jennifer Berenice Rojas Hernandez
- Views
- 5
- Rating