1

Hola tengo un problema con la hoja de estilos css que teniendo boostrap los cambios que pongo en la hoja de css no hace nada.

<head>
  <title>Pruebas Javascript</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script language="JavaScript" src="funciones.js"></script>
  <LINK REL="stylesheet" TYPE="text/css" href="estilos.css">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">

</head>

<body>

  <div align="center">
    <h1>Formulario</h1>
    <form class="form-horizontal">
      Escribe tu <label>nombre </label> <input id="nombre" type="text" name="nombre" required> <br><br> Escribe tus <label>apellidos </label> <input id="apellidos" type="text" name="apellidos" required><br><br> Escribe tu <label>edad </label><input id="edad"
        type="text" name="edad" required><br><br>
      <label>Sexo</label><br> Masculino <input type="radio" name="sexo" value="Masculino"> Femenino <input type="radio" name="sexo" value="Femenino"><br><br>

      <div name="aficiones">
        <input type="checkbox" name="aficion" value="1"> Tenis <br>
        <input type="checkbox" name="aficion" value="2"> Futbol <br>
        <input type="checkbox" name="aficion" value="3"> Baloncesto <br>
        <input type="checkbox" name="aficion" value="4"> Motociclismo
      </div>
      <input type="submit" id="boton" name="boton" value='Aceptar' class="btn btn-primary" onclick="mostrar()">
    </form>
  </div>

</body>
11
  • Hola Rubén. Puedes explicar qué es lo que no te está funcionando ?
    – lois6b
    el 19 jul. 2017 a las 7:36
  • inspecciona la web con tu navegador (por ej, con chrome puedes usar ctrl+may+i) y mira si te da un error de carga del archivo, a ver si no te esta cogiendo el archivo estilos.css
    – Jakala
    el 19 jul. 2017 a las 7:37
  • Me esta cogiendo todos los estilos de boostrap. No coge nada de la hoja de estilos.
    – Ruben
    el 19 jul. 2017 a las 7:39
  • Prueba en tu hoja de estilos a añadir !important tras uno de ellos como el color de una fuente o algo así
    – aenon83
    el 19 jul. 2017 a las 7:42
  • He añadido el !important y no lo coge
    – Ruben
    el 19 jul. 2017 a las 7:45

2 respuestas 2

4

Te digo lo que suelo hacer yo:

Bootstrap suele comerse los estilos propios, así que no intentes dar estilos a elementos html (<h1><div>...) ni a las propias clases de bootstrap, a no ser que quieras modificar todos los <h1> y darles otro estilo. Para esto entra en tu hoja de estilos de bootstrap.css y edita la propiedad que modifica a los .

(Viendo tu código, estás usando bootstrap desde bootstrapcdn.com - Descárgate bootstrap y súbelo a tu sitio para poder editarlo a tu gusto)

Añade tus propias clases en el elemento a modificar y, si fuera necesario, métele el !important delante.

Todo esto pruébalo antes en el editor de estilos del navegador que utilices para saber qué propiedad de bootstrap está machacando la tuya.

13
  • El !important va detrás de la propiedad en cuestión, aún así, no es la mejor práctica para realizar un cambio de estilos. el 19 jul. 2017 a las 10:38
  • Al utilizar Bootstrap te atañes a eso si no quieres modificar la base de bootstrap.css el 19 jul. 2017 a las 11:41
  • 1
    No tiene por qué, realmente lo que hace bootstrap (y otros frameworks del estilo) es utilizar selectores combinados con una gran especificidad. Con una buena gestión de la especificidad podrías modificar los estilos de un elemento concreto sin necesidad de utilizar !important. Por supuesto, esta última es mucho más rápida, pero también existe la posibilidad de "ganar" a los estilos de bootstrap sin necesidad de modificar el framework. el 19 jul. 2017 a las 12:18
  • 1
    A la larga da más problemas de los que soluciona. De todas formas que se haga así por falta de tiempo o interés en muchas empresa a no es excusa para que aconsejemos malas prácticas
    – user7176
    el 19 jul. 2017 a las 13:19
  • 1
    Estoy totalmente de acuerdo con @blonfu, que sea habitual no significa que sea lo correcto. Evidentemente el tiempo apremia, y es por eso que en muchas empresas se utilizan malas prácticas. A la larga puede generar muchos problemas de inconsistencia de estilos y estilos que es imposible de sobreescribir por este motivo. El abuso de !important no debería considerarse una buena práctica, lo cual no quiere decir que en muchas empresas lo utilicen así (para casos muy concretos yo también lo he tenido que utilizar). el 19 jul. 2017 a las 13:28
1

Podrías darle relevancia o autoridad a tu hoja de estilo que quieres como "principal" colocando:

<head>
  <title>Pruebas Javascript</title>
  (Primero la hoja con relevancia)<LINK REL="stylesheet" TYPE="text/css" href="estilos.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script language="JavaScript" src="funciones.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">

</head>

O genera una hoja de estilo desde bootstrap http://getbootstrap.com/customize/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.