Hojas de estilo '.css'
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
}
#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
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">
- <script type="text/javascript" language="JavaScript">
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>
