Hola estoy realizando una pagina web con php, todo me estaba funcionando perfecto hasta que cree una nueva pagina para la interfaz de usuario del login. Tengo un archivo que se llama index.css y desde allí estoy dándole estilo a las diferentes paginas que he estado creando, el problema que tengo radica cuando desde index.css le doy estilos a las etiquetas que están en mi pagina login.php, no se aplican todos los estilos, según vi en inspeccionar solo se están aplicando los estilos:
.main-content{
margin-top: 60px;
width: 100%;
font-family: 'Sen', sans-serif;
}
No se me están aplicando los siguientes estilos:
form{
max-width: 460px;
width: calc(100% - 40px);
padding: 20px;
background: #fff;
border-radius: 5px;
margin: 40px auto;
}
form h3{
margin: 5px 0;
}
form input{
padding: 7px 10px;
width: calc(100% - 22px);
margin-bottom: 10px;
}
form button{
padding: 10px 15px;
width: calc(100%);
background: var(--main-blue);
border: none;
color: #fff;
}
form p{
margin: 0;
margin-bottom: 5px;
color: var(--main-red);
font-size: 14px;
}
Este es el código de mi login.php
<!DOCTYPE html>
<html>
<head>
<title>Sistema E-Commerce</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Sen&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="logo-place"><a href="index.php"><img src="assets/logo.png"></a></div>
</header>
<div class="main-content">
<div class="content-page">
<form action="servicios/login.php" method="POST" >
<h3>Iniciar sesión</h3>
<input type="text" class="form-control" name="emausu" placeholder="Correo" required="true">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<input type="password" class="form-control" name="pasusu" placeholder="Contraseña" required="true">
<?php
if (isset($_GET['e'])) {
switch ($_GET['e']) {
case '1':
echo '<p>Error de conexión</p>';
break;
case '2':
echo '<p>Email inválido</p>';
break;
case '3':
echo '<p>Contraseña incorrecta</p>';
break;
default:
break;
}
}
?>
<button type="submit" class="btn btn-primary" id="prueba">Ingresar</button>
</form>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</html>
Y este es el index.css completo
:root{
--main-header-color:linear-gradient(45deg, rgb(245, 15, 16),#EF5962);
--main-blue:#3483FA;
--main-red:rgb(245, 15, 16);
}
body,html{
margin: 0;
padding: 0;
}
body{
background-color: #f3f3f3;
}
header{
height: 40px;
padding: 10px;
width: calc(100% - 20px);
line-height: 40px;
display: flex;
background: var(--main-header-color);
position: fixed;
top:0;
left: 0;
}
form{
max-width: 460px;
width: calc(100% - 40px);
padding: 20px;
background: #fff;
border-radius: 5px;
margin: 40px auto;
}
form h3{
margin: 5px 0;
}
form input{
padding: 7px 10px;
width: calc(100% - 22px);
margin-bottom: 10px;
}
form button{
padding: 10px 15px;
width: calc(100%);
background: var(--main-blue);
border: none;
color: #fff;
}
form p{
margin: 0;
margin-bottom: 5px;
color: var(--main-red);
font-size: 14px;
}
.logo-place{
width: 70px;
justify-content: center;
align-items: center;
margin-top: 4px;
margin-right: 10px;
}
.logo-place img{
width: 100%;
}
.search-place{
width: calc(100% - 400px);
display: flex;
padding: 0px 20px;
}
input{
padding: 10px;
margin-right: 5px;
font-size: 15px;
background-color: #fefefe;
border:1px solid #ccc;
width: calc(100% - 62px);
font-family: 'Sen', sans-serif;
border-radius: 5px;
}
input:placeholder{
color: #ccc;
}
.search-place input{
padding: 10px;
font-size: 15px;
background-color: #fefefe;
border:1px solid #ccc;
width: calc(100% - 62px);
font-family: 'Sen', sans-serif;
border-radius: 5px;
}
.search-place input:placeholder{
color: #ccc;
}
.btn-main{
padding: 10px;
font-size: 15px;
background-color: #fefefe;
border-style: none;
border:1px solid #ccc;
cursor: pointer;
}
.btn-search{
width: 40px;
color: #333;
}
.options-place{
width: 250px;
display: flex;
justify-content: flex-end;
}
.item-option{
padding: 5px 10px;
line-height: 30px;
font-size: 30px;
cursor: pointer;
color:#fff;
font-family: 'Sen', sans-serif;
display: flex;
}
.item-option p{
font-size: 15px;
margin: 0;
margin-left: 5px;
}
.main-content{
margin-top: 60px;
width: 100%;
font-family: 'Sen', sans-serif;
}
.content-page{
margin: auto;
padding: 10px;
width: calc(100% - 20px);
max-width: 1180px;
}
.content-page section{
display: flex;
background: #fff;
}
.part1{
padding: 10px;
width: calc(60% - 20px);
}
.part2{
padding: 10px;
width: calc(40% - 20px);
border-left: 1px solid #ddd;
}
.part1 img{
width: 100%;
}
.part2 *{
margin: 10px 0;
font-family: 'Sen', sans-serif;
}
.part2 h2{
color: #333;
font-size: 30px;
}
.part2 h1{
color: var(--main-red);
font-size: 45px;
}
.part2 h1 span{
color: var(--main-red);
font-size: 30px;
}
.part2 h3{
color: #333;
font-weight: normal;
}
button{
border-style: none;
border-radius: 5px;
padding: 13px 20px;
color: #fff;
background: #3483FA;
cursor: pointer;
font-size: 16px;
}
.part2 button{
border-style: none;
border-radius: 5px;
padding: 13px 20px;
color: #fff;
background: #3483FA;
cursor: pointer;
font-size: 16px;
}
.part2 #quantity-input{
width: 50px;
}
.title-section{
padding: 10px 0;
font-size: 20px;
color: #666;
font-family: 'Sen', sans-serif;
}
.products-list{
display: table;
width: 100%;
}
.product-box{
display: inline-table;
padding: 10px;
width: calc(100%/5 - 20px);
}
.product-box a{
text-decoration: none;
}
.product{
width: 100%;
border-radius: 10px;
box-shadow: 0 0 8px 3px #ccc;
background-color: #fff;
font-family: 'Sen', sans-serif;
}
.product img{
width: 100%;
border-radius: 10px 10px 0 0;
}
.detail-title{
padding: 5px;
text-align: center;
font-size: 18px;
color: #333;
width: calc(100% - 10px);
height: 35px;
}
.detail-description{
text-align: center;
font-size: 14px;
color: #333;
padding: 5px;
width: calc(100% - 10px);
height: 34px;
}
.detail-price{
text-align: center;
font-size: 25px;
color: var(--main-red);
padding: 5px;
width: calc(100% - 10px);
}
.detail-price span{
font-size: 15px;
}
a{
color: #fff;
}
.body-pedidos{
width: 100%;
}
.item-pedido{
display: flex;
border: 1px #ccc solid;
margin-bottom: 5px;
background: #fff;
}
.pedido-img{
width: 200px;
}
.pedido-img img{
width: 100%;
}
.pedido-detalle{
padding: 10px;
width: calc(100% - 220px);
}
.pedido-detalle h3,
.pedido-detalle p{
margin: 5px 0;
}
.ipt-procom{
width: 250px;
margin-bottom: 5px;
}
.p-line{
display: flex;
}
.p-line div{
width: 150px;
font-weight: 600;
}
.metodo-pago{
display: flex;
width: 100%;
}
input[type="radio"]{
width: 20px;
height: 20px;
margin: 0 5px 5px 5px;
}
.metodo-pago label{
width: calc(100% - 30px);
}
.content-page h4{
margin: 5px 0;
}
PD: Algo que note es que si le aplico estilos desde el mismo html
<style type="text/css">
(ESTILOS)
</style>
Si se aplican y también otra solución que encontré es que crear un archivo por ejemplo login.css y allí pegar los estilos que quiero y linkearlo en mi login.php en el head, pero quiero saber porque no me funciona haciéndolo desde el index.css.
Ctrl + Shift + I
Una vez que se habrá la Herramienta de desarrollador, dirígete al apartado que se llamaNetwork
y allí marca la casilla que se llama Disable Cache y luego refresca la pagina web. Nota: si la casillaDisable cache
ya esta activada, desmárcala, refresca la pagina y vuelve a marcarla y vuelve a refrescar la pagina. Me deja saber cualquier cosa.