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 línea
<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
__m______d_____i___c
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 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 stylesshakira.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éis
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;
}
Explicación teoría d____i_____c
<link rel="stylesheet" href="stylesheet.css">
En ese fragmento de código, href viene del inglés Hypertext Reference (Referencia de Hipertexto), y su trabajo es indicar la dirección exacta o la ruta donde se encuentra el archivo CSS.
<link rel="stylesheet" href="stylesheet.css">
href="stylesheet.css" le está diciendo al navegador: "El archivo de estilos (CSS) se llama stylesheet.css y está guardado en la misma carpeta que este documento HTML".
Parte 2 del curso_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: Cajas dentro de cajas
Usa el selector universal * para colocar un borde azul punteado de
valor 1px
dashed blue alrededor
de cada elemento de la página. ¿Ves 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 *:
Las cajas de 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. Como pusiste el asterisco (*), el navegador le pone borde a las dos:Verás un borde gigante que recorre los bordes de la pantalla (esa es la caja de
<html>).Y un poquito más adentro, pegado o muy cerca, verás otra caja que lo envuelve todo (la caja de
<body>).
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 * es 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: