Podcast
Questions and Answers
¿Qué se menciona como una forma de crear diseños originales en el diseño de páginas?
¿Qué se menciona como una forma de crear diseños originales en el diseño de páginas?
¿Qué elementos conforman la estructura más simple mencionada en el texto para el diseño de páginas?
¿Qué elementos conforman la estructura más simple mencionada en el texto para el diseño de páginas?
¿Qué recomendación se da antes de escribir el código del diseño de una página?
¿Qué recomendación se da antes de escribir el código del diseño de una página?
¿Cuál es uno de los aspectos mencionados en el texto acerca de cambiar la posición, tamaño y cantidad de los bloques en una página?
¿Cuál es uno de los aspectos mencionados en el texto acerca de cambiar la posición, tamaño y cantidad de los bloques en una página?
Signup and view all the answers
¿Cuál es la función de una columna lateral según el texto?
¿Cuál es la función de una columna lateral según el texto?
Signup and view all the answers
¿Por qué se recomienda aprender a crear una página con varios bloques de contenidos según el texto?
¿Por qué se recomienda aprender a crear una página con varios bloques de contenidos según el texto?
Signup and view all the answers
¿Qué se destaca como clave para diseñar páginas distintas de las habituales según el texto?
¿Qué se destaca como clave para diseñar páginas distintas de las habituales según el texto?
Signup and view all the answers
¿Cuál es uno de los propósitos del esquema o dibujo previo que se recomienda hacer antes de escribir el código de una página?
¿Cuál es uno de los propósitos del esquema o dibujo previo que se recomienda hacer antes de escribir el código de una página?
Signup and view all the answers
¿Cuál es uno de los elementos comunes en las estructuras mencionadas para el diseño de páginas?
¿Cuál es uno de los elementos comunes en las estructuras mencionadas para el diseño de páginas?
Signup and view all the answers
¿En qué etapa del proceso se recomienda realizar un dibujo o esquema previo antes de escribir el código del diseño?
¿En qué etapa del proceso se recomienda realizar un dibujo o esquema previo antes de escribir el código del diseño?
Signup and view all the answers
Study Notes
Formas de aplicar estilos CSS
- CSS permite aplicar estilos a párrafos o etiquetas de varias manera: en la propia línea de HTML (aplicación de estilos en línea), en la parte inicial del documento HTML (aplicación de estilos interna) o en un archivo de extensión .css independiente del archivo HTML (aplicación de estilos externa)
Estilos en línea
- Se utiliza el atributo
stylepara aplicar estilos en línea a etiquetas HTML - Sintaxis para aplicar un estilo en línea: ``
- Ejemplo:
<p style="color:#0000FF;">
Propiedades de fondo
- La propiedad
background-repeatcontrola la forma en que se repite la imagen de fondo - Valores que puede tomar la propiedad
background-repeat:-
repeat: repite la imagen en sentido vertical y horizontal -
repeat-x: repite la imagen solo en horizontal -
repeat-y: repite la imagen solo en vertical -
no-repeat: muestra una sola vez la imagen y no se repite en ninguna dirección
-
- La propiedad
background-positioncontrola la posición de la imagen de fondo
Creación de cajas con CSS
- Una caja es un elemento HTML con contenido que puede tener propiedades como color de fondo, relleno y bordes
- Para crear una caja, se utiliza la etiqueta
divcon el atributoidoclass - Una caja puede contener varios elementos como párrafos, imágenes, enlaces, etc.
- Propiedades CSS para definir una caja:
-
border: define el borde -
padding: define el relleno -
margin: define los márgenes -
background-imageybackground-color: definen la imagen y el color de fondo
-
Tamaño y posición de cajas
- Se pueden definir el tamaño de una caja utilizando las propiedades
widthyheight - Se pueden posicionar los elementos utilizando las propiedades
top,bottom,left,right - Tipos de posicionamiento:
- Posicionamiento relativo: el punto de referencia es la esquina superior izquierda del elemento contenedor
- Posicionamiento absoluto: el punto de referencia es la ventana del navegador
- La propiedad
positionadmite los siguientes valores:-
static: valor por defecto, muestra los elementos tal y como se ven si no se aplica la propiedad - Otros valores de la propiedad
positionpueden ser utilizados para desplazar el elemento
-
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Aprende cómo crear una caja con múltiples etiquetas HTML dentro de ella utilizando CSS. Desde agregar color de fondo, relleno y bordes a varios elementos como párrafos, imágenes y listas, hasta englobarlos con un borde común. Descubre cómo estructurar y diseñar cajas creativas en tu página web.
