CSS - ¿Como integrar este código CSS a este HTML?

   
Vista:

¿Como integrar este código CSS a este HTML?

Publicado por Eduardo (3 intervenciones) el 21/02/2013 06:45:43
Buenos días/tardes/noches.
Estoy creando una página en Google Sites por un trabajo que me pidieron en la Universidad, quiero personalizarla lo mas que pueda. En una de las subpáginas inserté una tabla y ahora quiero aplicarle un fondo degradado con CSS pero no se como integrarlo al HTML. Me harían un gran favor si me resuelven este problema.
Aquí dejo los códigos.

CSS
1
2
3
4
5
6
7
8
9
10
background: #9dd53a; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZDUzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ExZDU0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzgwYzIxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Y2JjMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ 
background: linear-gradient(to right, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 ); /* IE6-8 */ 


HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<table border="1" bordercolor="#6C540A" cellspacing="0" style="line-height:0.8;font-size:10pt;border-collapse:collapse;border-color:rgb(108,84,10);border-width:2px">
<tbody>
<tr>
<td style="width:245px;height:228px">&nbsp;
<div style="display:block;margin-right:auto;margin-left:auto;text-align:center"><a href="https://sites.google.com/a/uabc.edu.mx/a-traves-de-los-beatles/please-please-me/The%20Beatles%20-%20Please%20Please%20Me.jpg?attredirects=0" imageanchor="1"><img border="0" height="199" src="https://sites.google.com/a/uabc.edu.mx/a-traves-de-los-beatles/please-please-me/The%20Beatles%20-%20Please%20Please%20Me.jpg?height=199&amp;width=200" width="200"></a></div>
</td>
</tr>
<tr>
<td style="width:245px;height:668px"><br>
<font color="#45818e" size="4">
CANCIONES</font><br>
<br>
Cara A<br>
<br>
<font><font color="#ff9900" size="3"><span style="line-height:1.3">1. I Saw Her Standing There</span></font><br>
</font>&nbsp; &nbsp;<span style="font-size:x-small;line-height:1.3;font-style:italic">McCartney-Lennon</span>
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><span style="line-height:1.3"><font size="1"><br>
</font></span></blockquote>
<font color="#ff9900" size="3">
2. Misery</font><br>
&nbsp; &nbsp;<span style="font-size:x-small;font-style:italic;line-height:0.8">McCartney-Lennon</span>
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><font size="1"><br>
<br>
</font></blockquote>
<font color="#ff9900" size="3">3. Anna (Go To Him)</font><br>
<span style="line-height:0.8"><font size="2">&nbsp; &nbsp;</font></span><span style="font-size:x-small;font-style:italic;line-height:0.8">Alexander</span><br>
<br>
<br>
<font color="#ff9900" size="3">4. Chains</font><br>
<font>&nbsp; &nbsp;<i style="font-size:x-small;line-height:0.8">Goofin-King</i></font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">5. Boys</font><br>
<font style="line-height:0.8"><i><font size="2">&nbsp; &nbsp;</font><font size="1">Dixon-Farrel</font></i></font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">6. Ask Me Why</font><br>
<font size="2" style="line-height:12px">&nbsp; &nbsp;</font><font size="1" style="line-height:0.8;font-style:italic">McCartney-Lennon</font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">7. Please Please Me</font><br>
<font size="2" style="line-height:12px">&nbsp; &nbsp;</font><font style="line-height:0.8"><font size="1" style="font-style:italic">McCartney-Lennon</font><br>
<br>
<br>
<font size="2">Cara B</font><br>
<br>
<font color="#ff9900" size="3">1. Love Me Do</font><br>
<font size="2">&nbsp; &nbsp;</font><font size="1"><i>McCartney-Lennon</i></font><br>
<br>
<br>
<font color="#ff9900" size="3">2. P.S I Love You</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney-Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">3. Baby It's You</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">David-Williams-Bacharach</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">4. Do You Want To Know A Secret</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney-Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">5. A Taste Of Honey</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">Scott-Marlow</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">6. There's A Place</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">7. Twist And Shout</font><br>
<font size="2">&nbsp; &nbsp;</font><font size="1"><i>Medley-Russell</i></font></font></td>
</tr>
</tbody>
</table>
<br>
<div dir="ltr">
 
<br>
</div>


De antemano, muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

¿Como integrar este código CSS a este HTML?

Publicado por xve (352 intervenciones) el 21/02/2013 07:44:03
Hola Eduardo, sabes hacer un degradado con estilos, y no sabes aplicarlo al código html?

el estilo, tienes que ponerlo en una clase... algo así:
1
2
3
4
5
<style>
.miclase {
tu codigo css
}
</style>

y en el codigo HTML, algo así:
1
<table class="miclase" ....>


Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Como integrar este código CSS a este HTML?

Publicado por Eduardo (3 intervenciones) el 21/02/2013 10:11:10
Sí lo dices así, claro que suena algo ilógico(: Lo que pasa es que el degradado lo creé con una página web especializada en eso. Soy un novato en este tema la verdad.

Entonces, ¿justo en el comienzo del HTML es donde debo poner class="clasequequiera"?
Y el CSS entre etiqueta style puedo ponerlo aparte o justo después del final del HTML ¿no?

Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

¿Como integrar este código CSS a este HTML?

Publicado por xve (352 intervenciones) el 21/02/2013 14:31:49
Ok Eduardo, era una cosa muy extraña...

El class lo tiene que poner en el objeto que quieras que tenga dicho efecto... en este caso, lo tienes que poner el tabla tal y como te mostré en el ejemplo anterior.

El style, lo suyo es que estuviera en un archivo separado, pero si lo pones en el archivo html, lo suyo es que lo pongas en la cabecera html, entre los tags <head> y </head>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Como integrar este código CSS a este HTML?

Publicado por Eduardo (3 intervenciones) el 21/02/2013 17:24:19
Al parecer, va mejorando, me tira menos errores que antes.
Ahora el problema es con esto. Me sale este error:

1
0+0:css property filter has bad value: ==>progid:dximagetransform.microsoft.gradient(startcolorstr='#9dd53a', endcolorstr='#7cbc0a', gradienttype=1
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar