El fondo con CSS. La propiedad de los fondos o backgrounds. Aplicar color al fondo



Documentos relacionados
Resumen Rápido de CSS

Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.

Curso de CSS - CEF NAC

CSS: Cascading Style Sheets

Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

CSS. Cascading Style Sheets (Hojas de estilo en cascada)

Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5.

Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)

CSS1. manual de referencia. Autor: Jorge Sánchez ( año 2003

TIC II Tema 2: Programación Web

Resumen del Manual de CSS. Resumen CSS. Este es un resumen de lo visto en el manual de CSS de Aprende-Web.

Joomla! 2.5 Cree y administre sus sitios Web

Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D)

Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.

Edición HTML Estilos CSS Fondos, bordes, márgenes y rellenos

Capítulo 8. Usar un estilo predeterminado según el navegador. Como resolverlo.

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 10: Diseño web con estilos.

Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales

Tecnologías Web para la presentación CSS

Hojas de estilo en cascada

Que son las hojas de estilo (CSS)?

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara

TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)

Consejos para el correcto armado de HTML para s

Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design

Propiedades CSS1. Sintaxis usada en definición de propiedades. Propiedades de fuentes.

CSS-Hojas de estilos en cascada

MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.

Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas.

<meta http-equiv="content-ty T pe" content="text/html; charset=utf-8" /> <meta charset="utf-8">

PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D)

1. Temario Curso Web Design 2014

Diseño y Programación de Páginas Web

HOJAS DE ESTILO EN CASCADA

CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...

REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG)

lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML

Curso de Maquetación Web: HTML 5 y CSS

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2

Edición HTML Estilos CSS Texto y fuentes

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

CSS nivel 1 Autor: Joaquin Bravo Montero

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Maquetación con estilos

Índice del curso. Elementos HTML. Elementos HTML. Elementos de texto. Creación de páginas web básicas. 1.Introducción a Internet. Lenguaje HTML.

Capas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML

Modelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO

ELECTIVA FE I. Tema 3: Introducción a las hojas

DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D)

Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;

CSS. Añadir estilos a las páginas web

UNIDAD 2 FORMATO BÁSICO DE FUENTE Y PÁRRAFO

Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1

Roberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en

EL MODELO DE CAJA CSS

PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)

Cómo se define? selector {propiedad1: valor1; propiedad2: valor2}

Diseño web. Fundamentos de CSS. Informática 4º ESO

SOMBRAS CON CSS ver. 2

Diseño de columnas con CSS

HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO

escuela técnica superior de ingeniería informática

escuela técnica superior de ingeniería informática

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers

Introducción...1. Capítulo 1: Instalación de Altova XML Suite Objetivos del capítulo Instalación de Altova XML Suite...

<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>

CURSO DE CSS Índice de contenido

Aplicaciones Telemáticas ( )

Yusef Hassan Montero Francisco Jesús Martín Fernández. Introducción a DOM. Todos los derechos reservados

CSS Flujo y posicionamiento

CSS AVANZADO Hojas de Estilo. Iván Martínez Toro

Manual Rápido de CSS Beatriz Eugenia Florián Gaviria 03/10/2007

Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

ESTILOS Y FORMATOS AL TEXTO EN WORD

Propiedades de las Hojas de Estilo CSS

Roatan Bilingual School

Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín

Roberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en

Hojas de Estilo en Cascada (CSS)

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un

Páginas multimedia Pizarra

Tema. Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS. Material a utilizar.

CSS. Apuntes de guerrilla

Texto y Organización del contenido

SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D)

HTML: Organización del Contenido

Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas.

Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla

Departamento de Lenguajes y Sistemas Informáticos. Hojas de Estilo en Cascada (CSS)

HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)

DISEÑO DE PÁGINAS WEB CON CÓDIGO HTML TEXTO EN MOVIMIENTO

Capítulo 4. Introducción a HTML

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:

CSS: Hojas de Estilo en Cascada

Transcripción:

El fondo con CSS Las propiedades de fondo (en inglés background) en CSS, nos permiten controlar el color de fondo de un elemento. Colocar una imagen de fondo, la ubicación de la misma en la pantalla (centrada, a la izquierda, en alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetirá. En términos del modelo de cajas la propiedad background afecta tanto al fondo del elemento, al relleno del mismo (padding) y a los bordes (border). Las propiedades de background se aplican a todos los elementos La propiedad de los fondos o backgrounds La propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez. Aplicar color al fondo La propiedad background-color especifica el color de fondo del elemento.

Decorar el fondo con una imagen La propiedad background-image inserta una imagen como fondo del elemento.

Imagen más pequeña que el tamaño del fondo Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedad background-repeat. Elije el lugar exacto para ubicar la imagen de fondo La propiedad background-position nos permite ubicar una imagen en un lugar específico dentro del fondo.

Propiedades del fondo Propiedad Descripción Valores Detalles background-color Color de fondo background background-image Imagen de fondo Propiedades individuales background-repeat Repetición del fondo relacionadas con el fondo. background-attachment Acoplamiento del fondo background-position Posición del fondo background-color Color de fondo. color Color transparent Transparente background-image Imagen de fondo. URL Dirección URL none Nada repeat Repite background-repeat Repetición de la imagen de repeat-x Repite horizontalmente fondo. repeat-y Repite verticalmente no-repeat No se repite background-attachment Desplazamiento de la scroll Desplaza imagen de fondo. fixed Fija

background-position Posición de la imagen de fondo. % Porcentaje longitud Longitud left Izquierda center Centro right Derecha top Superior bottom Inferior Los textos con CSS Las propiedades de los textos nos permiten controlar la apariencia de los mismos.

Propiedades de los textos Propiedad Descripción Valores Detalles text-indent text-align text-decoration text-transform letter-spacing word-spacing white-space direction unicode-bidi Desplazamiento de la primera línea del texto. Alineamiento del texto. Efectos de subrayado, tachado, parpadeo. Transformaciones del texto a mayúsculas/minúsculas. Espacio entre caracteres. Espacio entre palabras. Comportamiento de los espacios dentro de los elementos. Sentido direccional de la escritura. Sentido direccional de la escritura. longitud Longitud % Porcentaje left Izquierda right Derecha center Centro justify Justificar none Sin efectos underline Subrayado overline Línea por encima line-through Tachado blink Parpadeo capitalize Convierte en mayúscula el primer carácter de cada palabra uppercase Convierte en mayúscula todas las letras del elemento lowercase Convierte en minúscula todas las letras del elemento none Neutraliza el valor heredado normal Normal longitud Longitud normal Normal longitud Longitud normal Normal pre Preformateado nowrap Los cambios de línea solo ocurren con el elemento br pre-wrap pre-line ltr Izquierda a derecha rtl Derecha a izquierda normal Normal Abre un nivel adicional de embed incrustación con respecto al algoritmo bidireccional Si el elemento es a nivel de línea bidi-override o es un elemento a nivel de bloque, crea una sustitución