Estilos CSS
Transcript of Estilos CSS
![Page 1: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/1.jpg)
Estilos cssPropiedades del fondo
![Page 2: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/2.jpg)
![Page 3: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/3.jpg)
background-color
Establece el color de fondo de un elemento. El fondo se extiende al borde del elemento. Valor inicial: transparente.
{ background-color: #CCCC00 }
![Page 4: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/4.jpg)
![Page 5: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/5.jpg)
![Page 6: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/6.jpg)
![Page 7: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/7.jpg)
![Page 8: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/8.jpg)
background-image
Define una imagen como patrón de fondo. En conjunción con las otras propiedades de fondo, puede usarse como mosaico o repetirse en una direccción solamente. De uso recomendado con background-color, para las personas que deshabilitan la carga de imágenes.
BODY {background-image: url(bg41.gif);}
![Page 9: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/9.jpg)
![Page 10: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/10.jpg)
![Page 11: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/11.jpg)
![Page 12: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/12.jpg)
background-repeat
Establede el estilo de repeticion para una imagen de fondo. Los valores son: repeat (mosaico), no-repeat, repeat-x (horizontal), repeat-y (vertical). Por defecto: repeat.
BODY { background-repeat: repeat-y }
![Page 13: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/13.jpg)
![Page 14: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/14.jpg)
![Page 15: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/15.jpg)
background-attachment
Define si la imagen de fondo sigue el movimiento de desplazamiento de la barra de scroll o si no. Los valores posibles son: scroll y fixed.
BODY {background-attachment: fixed;}
![Page 16: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/16.jpg)
![Page 17: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/17.jpg)
Fixed= la imagen se queda quieta en el fondoScroll= la imagen se mueve en conjunto con la barra
![Page 18: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/18.jpg)
background-position
Establece el punto de comienzo de un fondo, ya sea imagen o color. Si es un color, el relleno del color continua desde tal posición. Si es una imagen, la primera imagen es ubicada en esa posición. Valores: Position (x y) o (x% y%); top, center, bottom, left, right.
BODY {background-position: top center;}
![Page 19: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/19.jpg)
![Page 20: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/20.jpg)
![Page 21: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/21.jpg)
background
Abreviatura para las demás propiedades. Los valores pueden ser escritos en cualquier orden.
BODY {;} background: white url(bg41.gif) fixed center
![Page 22: Estilos CSS](https://reader036.fdocument.pub/reader036/viewer/2022062419/557b44e0d8b42a0d388b48e7/html5/thumbnails/22.jpg)