CSS. EJERCICIOS DE REPASO HTML
Enviado por pechu11 • 9 de Diciembre de 2022 • Ensayos • 705 Palabras (3 Páginas) • 28 Visitas
CSS. EJERCICIOS DE REPASO SIMR1-MAÑANA
1. Indica las etiquetas que debes incluir en HTML para definir las reglas CSS del ejercicio 4 en el propio documento HTML.
<style type=”text/css”>… </style>
2. Indica las etiquetas que debes incluir en HTML para definir las reglas CSS del ejercicio 4 en un archivo externo llamado “formatos.css” (indica en que carpeta lo vas a poner).
<link rel=”stylesheet” type=”text/css” href=”formatos.css” media=”screen”>
3. Indica los selectores que tendríamos que utilizar en cada uno de los siguientes casos:
SELECTORES | |
Todos los blockquote de la página | blockquote{} |
Todos los h1 contenidos en #ejemplo | #ejemplo h1{} |
Todos los h3 contenidos en .ejemplo | .ejemplo h3{} |
Todos los títulos definidos con h1, h2 y h3 | h1, h2, h3 {} |
Las divisiones con el nombre de clase “titulo” | div.titulo{} |
Los elementos span con el nombre de clase “titulo” | span.titulo{} |
Todos los elementos de la página con el nombre de clase “titulo” | .titulo{} |
Todos los elementos de la página con el identificador “titulo” | #titulo{} |
Las imágenes que están dentro de las divisiones con el nombre de clase “ejemplo” | div.ejemplo img{} |
Todas las imágenes de la página | img{} |
Todos los enlaces que están dentro de un párrafo | p a{} |
Las imágenes que están dentro de un párrafo | p img{} |
Todos los párrafos y todos los enlaces de la página | p, a{} |
Cualquier elemento del documento | *{} |
Todas las celdas de una tabla | td{} |
Una tabla con el nombre de identificador “tablita” | table#tablita{} |
Todas las filas de una tabla | tr{} |
Todas las filas de las tablas que están dentro de la división “ejemplo” | div#ejemplo table tr{} div#ejemplo tr{} |
Los elementos span que están dentro de una tabla | table span{} |
4. Indica las reglas CSS que debemos utilizar para conseguir los siguientes formatos, no olvides incluir los selectores correspondientes:
- El tipo de letra principal del texto debe ser Algerian. Como este tipo de letra no está en todos los ordenadores, se debe definir como alternativa los tipos de letra Arial, Calibri y el tipo genérico serif. El tamaño de letra e interlineado debe ser 1.5 em.
body{
Font-family: Algerian, Arial, Calibri, Serif;
Font-size: 1.5em;
line-height: 1.5em;
}
- Todos los encabezados de segundo nivel (h2) de la página deben ser de color rojo, en negrita y al doble del tamaño de letra que tenga fijado el documento y estarán en cursiva. Además, estarán centrados.
h2{
color: red
font-weight: bold;
font-size: 2em;
text-align: center;
font-style: italic;
}
- Todos los elementos de clase “ejemplo” tendrán un borde punteado, de color verde y de 8 pixeles. Además, tendrán un color de fondo plateado y tendrán un margen superior e inferior de 10 pixeles. El texto de estos elementos estará centrado.
.ejemplo{
border: dotted green 8px;
background-color: silver;
margin: 10px 0px;
text-align: center;
}
- Todos los elementos de la página que tienen el nombre de clase “fecha” deben aparecersubrayados, en negrita con un tamaño de letra de 10 puntos y alineados a la derecha.
.fecha{
text-decoration: underline;
font-weight: bold;
font-size: 10pt;
text-align: right;
}
- Todas las imágenes aparecerán con un bordesólido de 10 pixeles de color morado.
- Se pondrá una imagen de fondo en el documento HTML, que aparecerá centrada en la página, y no se repetirá. (La imagen se llama “fondo1.jpg” y está en la misma carpeta que el documento actual, es decir, donde estamos poniendo el formato).
- Define varias posibilidades a la hora de mostrar la imagen anterior en el documento HTML.
- Todos los encabezados de primer nivel (h1) de la página deben ser de color verde, en negrita, estarán centrados. Con un color de fondo morado. Aparecerá el texto en mayúsculas. La primera letra del encabezado aparecerá destacada (inventa su formato).
- Al pasar el ratón por encima de los enlaces cambiarán su aspecto, poniéndose el texto al doble de su tamaño, cambiará el color del texto a rojo y el fondo a color azul.
5.Detalla las propiedades CSS que se aplicarán a “.prueba” y las medidas totales exactas de la caja resultante si se le aplican los siguientes formatos: “Su anchura será de 350 pixeles y su altura de 180 pixeles. Tendrá un padding de 10 pixeles y sus márgenes (izquierdo, derecho, superior e inferior) serán de 20 pixeles cada uno. El texto será de color amarillo, estará justificado y con un color de fondo azul. Además, tendrá un borde doble de 8 pixeles de color rojo”.
...