Hola me pasó lo mismo que a Juan... "Copié el estilo del header referenciando todos los archivos correctamente, de modo que al cargar el archivo solo aparece el header con el estilo que le dimos... ...pero cuando copio el contenido de la pagina home y sus estilos, el menú de navegación del header deja de estar inline y pasa a estar block y no se como corregir eso, de hecho es la única alteración que sufre el header" aclaro que sucedió antes de cambiar a style.css.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Barbería Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style home.css">
</head>
<body>
<header>
<div class="caja">
<h1><img src="imagenes/logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contactos</a></li>
</ul>
</nav>
</div>
</header>
<img id="banner" src="banner/banner.jpg">
<main><!--contenido principal-->
<section class="principal">
<h2 class="titulos">Sobre la Barbería Alura</h2>
<p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>
<p id="mision"><em>Nuestra misión es: <strong> "Proporcionar autoestima y calidad de vida a nuestros clientes".</strong> </em></p>
<p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes. </p>
</section>
<section class="diferenciales">
<h3 class="titulos"> Diferenciales</h3>
<ul>
<li class="items">Atención personalizada a los clientes</li>
<li class="items">Tenemos un espacio diferenciado</li>
<li class="items">Localización.</li>
<li class="items">Profesionales calificados</li>
</ul>
<img src="diferenciales/diferenciales.jpg" class="imagendiferencial">
</section>
</main>
</body>
</html>header{
background-color: #BBBBBB;
padding: 20px;
}
.caja {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li{
display: inline;/* no quiero que ocupe el 100 sino el tamaño del contenido*/
margin: 0 0 0 15px; /*arriba,abajo,derecha,izquierda*/
}
nav a{
text-transform: uppercase;/*La propiedad text-transform es la responsable de la transformación del texto a mayúscula, cuando usamos el valor uppercase.*/
color: black;
font-weight: bold; /*La propiedad font-weight sirve para alterar el peso de la fuente, inclusive para negrita, con el valor bold.*/
font-size: 22px;
text-decoration: none;/* text-decoration sirve para alterar la propiedad de exhibición de un link. Cuando usamos el valor none, quiere decir que no será subrayado.*/
}
nav a:hover{ /*movimiento del mouse*/
color: #c78c19;
text-decoration: underline;
}
body{
background-color: #cccccc;
}
.principal{
background: #14cd9c;
padding: 20px ;
}
#banner {
width: 100%;/*anchura*/
}
.tituloprincipal{
padding-left: 30px; /*espaciamiento interno izquierdo*/
}
.titulos{
text-align: center;
}
p{
text-align: center;
}
#mision{ /*un id siempre se llamara con un #*/
font-size: 20px;
}
em strong{ /* ser muy claros con las etiquetas, tener encuenta el orden de las e, hijas*/
color: red;
}
.diferenciales{
background: #ffffff;
padding: 30px;
}
.items{ /*para llamar una clase utilizamos un .*/
font-style: italic;
}
ul{
display: inline-block; /*Que ocupe solo el espacio de su contenido y que los espaciamientos, tanto de la parte de arriba, inferiores, superiores, inferiores, derechos, izquierdos, se puedan ajustar, puedan ser ajustables.*/
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagendiferencial{
width: 50%;
}
