Parte 2 de HTML_CSS
Ejercicio 9 (ejer 2 mios )
Visualmente las dos etiquetas (<del> y <s>) producen exactamente el mismo efecto de tachar el texto por defecto en los navegadores.
La única diferencia entre ellas no es cómo se ven, sino lo que significan para los navegadores, lectores de pantalla y motores de búsqueda:
<del>avisa: "Esto fue borrado o modificado".<s>avisa: "Esto ya no es válido o ya no es verdad".Inserta <br> si quieres que haya salto de linea
<head>
</head>
<body>
<p>A element is displayed like this:</p>
<del>Some important text</del>
<s>Some important </s>
<strong>important</strong>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
<s> viene de strikethrough. Así es exactamente como se forma la palabra strikethrough:
Strike: Golpe, golpear o trazo.
Through: A través de.
Literalmente significa un "trazo a través" del texto, que es justo la línea horizontal que lo atraviesa por el medio (el tachado).
<h1>: Es el encabezado más importante (generalmente el título principal de la página).Fuente wikipedia
RGB
Fundamento teórico
Un triplete hexadecimal es un número hexadecimal de seis dígitos y tres bytes que se utiliza en HTML, CSS, SVG y otras aplicaciones informáticas para representar colores.
La paleta de colores RGB (RVA en español) consta, básicamente, de tres colores primarios aditivos: Rojo, Verde, Azul.
Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales del tipo RR-GG-BB según el siguiente formato:
<link rel="stylesheet" href="styles.css">) es la forma moderna y recomendada hoy en día.stylesheet.css, debes poner ese nombre en el href, y si se llama styles.css, poner ese otro).Parte 2:Lección 1
Quizás
ya adivinaste esta parte, pero si no, vamos a decirla de una vez:
¡cualquier elemento de HTML puede ser un selector de CSS! Podés
modificar las <ul>, <table>,
e incluso la etiqueta <body> completa,
seleccionando ul, table,
y body,
respectivamente.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title></title>
</head>
<body></body>
</html>
parte 2 lección 1 stylesheet.css
body{
background-color:Green;
}
Parte 2_lección 2
En
la pestaña CSS, selecciona únicamente el encabezado h3 anidado
dentro de tres <div> y
cámbiale su color a rojo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<h3>Soy una simple letra antigua</h3>
<div>
<h3>Y yo también</h3>
<div>
<h3>¿y yo?</h3>
<div>
<h3>¡Olvídense! ¡Estoy a punto de ser roja!</h3>
</div>
</div>
</div>
</body>
</html>
De la Lección2 parte segunda (arriba) presentamos la hoja de estilos stylesheet.css
div div div h3{
color:red;
}
Parte segunda_lección 3
Usa el selector universal para colocar un borde azul punteado de
valor 1px
dashed blue alrededor
de cada elemento de la página. ¿Vés cómo cada elemento parece
estar dentro de su propia caja en la página?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<h3>Cajas dentro de cajas</h3>
<div>
<p>Párrafo uno</p>
</div>
<div>
<p>Párrafo dos</p>
</div>
<div>
<p>Párrafo tres</p>
</div>
</body>
</html>
parte segunda lección 3 stylesheet
*{
border: 1px dashed blue;
}
1. ¿Qué es ese asterisco (*) en el CSS?
En CSS, el asterisco (*) se conoce como el selector universal.
¿Qué hace? Selecciona absolutamente todos los elementos que existen en la página web (la etiqueta
<html>, el<body>, los títulos<h3>, los<div>, los<p>, etc.).¿Por qué sin el asterisco no aparecen las cajas? Por defecto, en HTML, los elementos de tipo bloque como los
<div>y los<p>tienen un borde de 0 píxeles (border: none;). Si tú escribes soloborder: 1px dashed blue;sin especificar a qué elemento se lo aplicas, el navegador no sabe a quién ponerle el borde y lo ignora. Al poner el*, le estás diciendo: "A todos los elementos de la página, pónganles un borde punteado de color azul".
2. ¿Cómo se forman las "cajas" en este ejercicio?
Aunque en tu archivo HTML solo veas tres etiquetas <div> visibles en el cuerpo, el modelo de cajas de CSS actúa sobre prácticamente todo. Vamos a desglosar qué cajas se dibujan en la pantalla gracias a ese *:
La caja del navegador / HTML y Body: Al usar el
*, incluso el contenedor principal de la página recibe un borde azul. Verás un gran recuadro que envuelve a todo el contenido de la web.Las cajas de los
<div>(Contenedores principales): En tu HTML tienes tres bloques<div>. Cada uno de ellos es una caja de tipo bloque (ocupan todo el ancho disponible por defecto). Como el selector universal*afecta también a los<div>, cada uno de esos tres bloques tendrá su propio borde azul punteado.Las cajas de los párrafos (
<p>): Dentro de cada<div>hay un párrafo (<p>). Como el asterisco también selecciona los párrafos, cada párrafo tendrá su propia caja azul punteada dentro de la caja del<div>.La caja del título (
<h3>): El título "Cajas dentro de cajas" también es un elemento de texto, por lo que también recibirá su borde azul.
<div>, tendrías que cambiar el archivo CSS eliminando el asterisco y poniendo div en su lugar: