Identificarse | Registrarse | FAQ
Anonymous

Integrar css en body

+ Publicar una respuesta

1 mensaje Página 1 de 1


Integrar css en body

por maita » Lun Feb 06, 2017 11:07 am

Buenas!

estoy diseñando una newsletter en la que el css debe ir introducido en el body. Mi problema es que el diseño tiene unos botones que despliegan texto en css, y no se como podría hacer para que estando en el body pudiera seguir desplegándose.

Este es estilo que deseo integrar en el body:

<style>
input[id^="spoiler"] + label {
display: block;
background-color: #f8f8f8;
cursor: pointer;
width: 10%;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 15px;
float: right;
background-color: #666666;
background-position: 85% 0;
background-size: 20% 100%;
background-size: 20% 100%;
background-repeat: no-repeat;
}
input[id^="spoiler"]:checked + label {
color: #333;
background-color: #f8f8f8;
float: right;
height: 100%;
width: 10%;
background-color: #2226DB;
background-position: 85% 0;
background-size: 20% 100%;
background-repeat: no-repeat;
}
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}
</style>


Este es el body:

<body>
<ul style=" height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal;font-weight: 100; font-size: 14px;">
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8;
padding-left: 0%;">Título del texto <input style="display: none;
width: 20%;" type="checkbox" id="spoiler1"></input>
<label for="spoiler1"></label>
<div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;"" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;"> Cuerpo del texto.
</span></div>
</li>
</ul>
<ul style=" height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal; font-weight: 100; font-size: 14px;">
<li style="text-decoration: none; list-style-image: none; list-style-type: none; font-family: Raleway, sans-serif; padding-top: 2%; margin-top: 5px; text-align: left; width: 100%; float: left; background-color: #F8F8F8; padding-left: 0%;">Título del texto<input type="checkbox" id="spoiler2"></input>
<label for="spoiler2"></label>
<div style="padding-bottom: 2%; padding-top: 2%; padding-left: 1%; padding-right: 1%;" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">Cuerpo del texto.
</span></div>
</li>
</ul>
<ul style=" height: 100%; color: #000000; margin-left: -3em; font-family: Raleway; font-style: normal ;font-weight: 100;
font-size: 14px;">
<li style="text-decoration: none;list-style-image: none;list-style-type: none;font-family: Raleway, sans-serif;padding-top: 2%;margin-top: 5px;text-align: left;width: 100%;float: left;background-color: #F8F8F8;padding-left: 0%;">Título del texto <input type="checkbox" id="spoiler3"></input>
<label for="spoiler3"></label>
<div style="padding-bottom: 2%;padding-top: 2%;padding-left: 1%;padding-right: 1%;"" class="spoiler"><span style="font-family: 'Raleway', sans-serif; font-weight: bold; color: #333332; font-size: 13px; line-height: 22px;">Cuerpo del texto.
</span></div>
</li>
</ul>
</body>

Os agradecería que me dijerais si es posible hacerlo y en ese caso como hacerlo.

muchas gracias!
Avatar de Usuario

maita

  • Mensajes: 1
  • Registrado: Lun Feb 06, 2017 11:03 am


+ Publicar una respuesta

Página 1 de 1