Hojas de estilo '.css'

10:22 0 Comments A+ a-






Las hojas de estilo, son un conjunto de propiedades de formato, se encargan de definir diferentes estilos para modificar y crear la web. Son más potentes que el formato en HTML. En este caso, las modificaciones realizadas, son:
  • final1.css 
body{ font-family: bell MT,Times New Roman,serif;

}

#container{

margin:0 auto;

width:100%;

}

#header {

background-color:beige;

padding:5px;

}

#menu{

float:left;

width:100%;

background-color:bisque;

}

#menu {

list-style-type:none;

display:inline;

}

#menu{ display:block;

text-decoration:none;


border-right:2px solid #ffffff;

padding: 3px 10px; float: left;

color:white;

}

#menu li a:hover{

background-color: snow;

}

#mainContainer{

float:left;

width:100%;

}

#content{

clear:left;

float:left;

width:65%; padding: 20px 0;

margin: 0 0 0 5%;

display:inline;

}

#sidebar {

float:right;

width:30%;

padding: 20px 0; margin: 0;

display: inline;

background-color:;

}

#footer {

clear:left;

background-color:;

text-align:center;

padding: 20px 0;

height:1%;

}
  • final2.css
body{

font-family: bell MT,helvetica,sans serif;

}

#container{

margin:0 auto;

width:100%;

}

#header{

Background-image:url();

background-size: 100% 100%;

padding:25px;

}

#menu{

float:left;

width:100%;

background-color:bisque;

}

#menu ul li{

list-style-type:none;

display:inline;

}

#menu li a{

display:block;

text-decoration:none;


border-right:2px solid #ffffff;

padding: 3px 10px;float: left;

color:black;

}

#menu li a:hover{

background-color: snow;

}

#mainContainer{

float:left;

width:100%;

}

#content{

clear:left;

float:left;

width:65%; padding: 20px 0;

margin: 0 0 0 5%;

display:inline;

}

#sidebar {

float:right;

width:30%;

padding: 20px 0; margin: 0;

display: inline;

background-color:black;

}

#footer {

clear:left;

background-color:;

text-align:center;

padding: 20px 0;

height:1%;

}

Para que cambie de estilo, se necesita crear un botón, por lo que añadiremos un identificador
  • <link rel="stylesheet" type ="text/css" href="final1.css" id="css"> 
un script
  • <script type="text/javascript" language="JavaScript"> 
         function cambio(){
         document.getElementById("css").href= "final2.css";
         }
         function cambio2(){
         document.getElementById("css").href= "final1.css";
         }
         </script>

y por último,insertamos los botones

  • <button type="button" onclick="cambio('final2.css')">Cambio de estilo</button> 
  • <button type="button" onclick="cambio('final.css')">Web principal</button>