1. Lunes
   • Inglés
   • Francés
2. Martes
   1. Inglés
      1. Correccion de ejercicios
      2. Proponer ejercicios

<ol>
    <li>Lunes
        <ul type="square">
            <li>Inglés
            </li>

            <li>Francés
            </li>
        </ul>
    </li>

    <li>Martes
        <ol>
            <li>Inglés
                <ol type="A">
                    <li>Correccion de ejercicios
                    </li>

                    <li>Proponer ejercicios
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Bienaventurados los que saben              reírse de sí mismos, porque               siempre tendrán motivos para                            el cachondeo.

<table background="https://lh5.googleusercontent.com/-dBtxCp18BSc/
U-D2TamWjzI/AAAAAAAA1B4/hnrie1V3yGo/w360-h344-no/17.gif">
<tbody>
<tr>
<td width="356" height="342"><span style="font-weight: normal;
 text-align: center; color: #532037; font-family: monotype corsiva;
 font-size: 19px; line-height: 150%; text-shadow: 1px 2px 1px #3e3444,
1px 1px 1px #532037; column-count: 3; column-width: 0px;">
<span style="font-size: 21px; color: #000000; font-family:'Monotype Corsiva';">
<strong><span style="color: #d0bdff;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
Bienaventurados los que saben<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp;re&iacute;rse de s&iacute; mismos, porque<br />&nbsp; &nbsp; &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; siempre tendr&aacute;n motivos para<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;el cachondeo.</span></strong></span></span></td>
</tr>
</tbody>
</table>

<p><img src="https://s-media-cache-ak0.pinimg.com/736x/0a/
b1/7b/0ab17b9bb3e15a048d991e4288308c48.jpg" alt="" width="220" 
height="280" align="left" /></p><div style="overflow: auto; 
scrollbar-arrow-color: #000000; scrollbar-base-color: #228B22; 
position: width; height: 280px; background-image: 
url(http://img-fotki.yandex.ru/get/3914/39663434.27b/0_7de3a_489ec964_M.jpg);
 top: 5px; text-align: left; text-indent: 5pt;"><span style="color: #000000;">
<strong>Texto 1<br />
<strong style="color: #000000; text-indent: 5pt;">
Texto 2</span></div>

Texto de barra en movimiento 

  <script language="JavaScript" type="text/javascript">

  //<![CDATA[<!-- Begintext = "Texto"; 

  // The text to scrollcolor1 = "#5c6390"; 

  // original text colorcolor2 = "#ffffff";

  // new character colorfontsize = "6"; 

  // font size of textspeed =" 98 "; 

  // how fast to rotate to next character

  // time is in milliseconds, (i.e. 1000 = 1 second)   i = 0;if (navigator.appName == "Netscape") {document.write("<layer id=a visibility=show><\/layer><br><br><br>");}else {document.write("<div id=a><\/div>");}function changeCharColor() {if (navigator.appName == "Netscape") {document.a.document.write("<center><font size =" + fontsize + "><font color=" + color1 + ">");for (var j = 0; j < text.length; j++) {if(j == i) {document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) + "<\/font>");}else {document.a.document.write(text.charAt(j));}}document.a.document.write('<\/font><\/font><\/center>');document.a.document.close();}if (navigator.appName == "Microsoft Internet Explorer") {str = "<center><font size=" + fontsize + "><font color=" + color1 + ">";for (var j = 0; j < text.length; j++) {if( j == i) {str += "<font color=" + color2 + ">" + text.charAt(i) + "<\/font>";}else {str += text.charAt(j);}}str += "<\/font><\/font><\/center>";a.innerHTML = str;}(i == text.length) ? i=0 : i++; 

  // reset after going through all letters}setInterval("changeCharColor()", speed);

  // End -->//]]>

</script>

  

<script language="JavaScript" type="text/javascript">
  //<![CDATA[<!-- Begintext = "Texto"; 
  // The text to scrollcolor1 = "#5c6390"; 
  // original text colorcolor2 = "#ffffff";
  // new character colorfontsize = "6"; 
  // font size of textspeed =" 98 "; 
  // how fast to rotate to next character
  // time is in milliseconds, (i.e. 1000 = 1 second)   i = 0;if (navigator.appName == "Netscape") 
{document.write("<layer id=a visibility=show><\/layer><br><br><br>");}
  else {document.write("<div id=a><\/div>");}
  function changeCharColor() 
{if (navigator.appName == "Netscape") {document.a.document.write("<center><font size =" + fontsize + ">
<font color=" + color1 + ">");for (var j = 0; j < text.length; j++) {if(j == i) {document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) + "<\/font>");}
 else {document.a.document.write(text.charAt(j));}}
  document.a.document.write('<\/font><\/font><\/center>');document.a.document.close();}
  if (navigator.appName == "Microsoft Internet Explorer")
 {str = "<center><font size=" + fontsize + "><font color=" + color1 + ">";for (var j = 0; j < text.length; j++) {if( j == i) {str += "<font color=" + color2 + ">" + text.charAt(i) + "<\/font>";}
                                                                                                                 else {str += text.charAt(j);}}str += "<\/font><\/font><\/center>";a.innerHTML = str;}
  (i == text.length) ? i=0 : i++; 
  // reset after going through all letters}setInterval("changeCharColor()", speed);
  // End -->//]]>
</script>

Text-shadow effect!

<h1>Text-shadow effect!</h1>

<style>
h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>

Text-shadow effect!

HTML

<h1>Text-shadow effect!</h1>

CSS

<style>
h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>

Text-shadow effect!

HTML

<h1>Text-shadow effect!</h1>

CSS

<style>
h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
</style>

Text-shadow effect!

HTML

<h1>Text-shadow effect!</h1>

CSS

<style>
h1 {
    text-shadow: 2px 2px 5px red;
}
</style> 

Text-shadow effect!

HTML

<h1>Text-shadow effect!</h1>

CSS

<style>
h1 {
    text-shadow: 2px 2px;
}
</style>
 

<div style="width: 100%; height: 50; font-size: 16px;

font-family: Magneto; color: #000; filter: alpha(opacity=100,

finishopacity=1, style=1, startX=1, startY=5, finishX=100, 

finishY=10);"><span style="color: #000;">

<strong>Texto<br /></strong>
</span></div>

*Texto*

HTML

 <span style="text-shadow: #2B2356 1px 0px, #2B2356 1px 1px, #2B2356 0px 1px, #B4A2C8 -1px 1px, #2B2356 -1px 0px, #2B2356 -1px -1px, #2B2356 0px -1px, #2B2356 1px -1px, #2B2356 0 0 3px, #2B2356 0 0 3px, #2B2356 0 0 3px, #2B2356 0 0 3px; font-family: monotype corsiva; font-size: 22px; color: #ffffff;"> <br /> *Texto*<br /></span>

   Texto

HTML

<p><span style="font-weight: normal; text-align: center; color: white; font-family: monotype corsiva, serif; font-size: 25px; line-height: 150%; text-shadow: 3px 3px 4px #000;">&nbsp; &nbsp;Texto</span></p>

   Texto

HTML

<p><span style="font-weight: normal; text-align: center; color: white; font-family: monotype corsiva, serif; font-size: 25px; line-height: 150%; text-shadow: 0px 2px 3px rgba(0,0,0,0.9);">&nbsp; &nbsp;Texto</span></p>

http://lineadecodigo.com/categoria/css/

Este es nuestro párrafo, el cual tendrá su primera letra como una letra capital

HTML

 <p class="parrafo">Este es nuestro p&aacute;rrafo, el cual tendrá su primera letra como una letra capital</p>

CSS

.parrafo:first-letter {
  /* definición CSS */
}
.parrafo:first-letter{
  font-size:200%;
  float:left;
  color:#0000FF;
}

Fuente
Sombra para texto:
1. text-shadow: -1px -1px #666, 1px 1px #FFF;
2. text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
3. text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
4. text-shadow: 1px 0 #F33, -1px 0 #33F;
5. text-shadow: 1px 1px 2px #999;
6.text-shadow: 2px 2px 3px #999;
7. text-shadow: 0 0 8px #000;
8. text-shadow: 0 0 5px #FF0;
9.
10. text-shadow: 1px 1px 0px #eee, 3px 3px 0px #707070;
11. text-shadow: 0px 1px 2px #737373;
12. text-shadow: 0px 0.5px 1px #F2F2F2;
13. text-shadow: #f8fcee 0 1px 1px;
14. text-shadow: 2px 2px 3px #000;
15. text-shadow: 2px 2px #666;
16. text-shadow: 2px -2px 3px #000;
17. text-shadow: 0px 1px 1px #fff;
18. text-shadow: 0px 1px 1px #000;
19. text-shadow: 0px 0px 3px#fff;
20. text-shadow: 1px 1px 4px#000;
21. text-shadow: 0px 1px 0px #ccc;

El secreto no es correr detrás de las mariposas…es cuidar el jardín para que ellas vengan a tí.

<span style="letter-spacing:0.1em">Texto</span> 

El cerebro humano es como una máquina de acuñar moneda. Si echas en ella metal impuro, obtendrás escoria; si echas oro, obtendrás moneda de ley.” Santiago Ramón y Cajal

<span style="letter-spacing:0.3em">Texto</span> 

Los problemas de la gente están solo en su cabeza.

<span style="letter-spacing:0.5em">Texto</span> 

Estuve pensando en ti, en tus detalles, en cada uno de los momentos que pasamos juntos y comprendo que la mejor forma de corresponderte es confesándote un secreto. Te amo demasiado.

 <p align="left">Texto</p> 

Seré breve….te amo, eres maravillosa como una lluvia de estrellas vista desde la playa de mi corazón.

 <p align="right">Texto</p>

Tú eres la razón de mi existir, eres la chispa de mi alma, la llama que enciende mi corazón, eres lo mejor que me ha podido pasar, por eso te amo incansablemente, porque llenas toda mi felicidad con tu amor. Te Amo.

 <p align="justify">Texto</p> 

No tenía a nadie a quien seguir, necesitaba una persona a mi lado, pero nunca me imagine encontrarte a ti, Te amo.

<p align="right" style="margin-right:13em">Texto</p> 

Este mensaje es para que no se te olvide lo mucho que te extraño cuando no estás conmigo.

 <p align="leftt" style="margin-left:13em">Texto</p> 

Pensar en ti es volar y sentir que mi corazón crece cada día más al pensar que es todo tuyo. Te amo mucho.

<p style="text-indent: 40px">Texto</p> 

Tú eres mi más bella ilusión y mayor esperanza, que lindo saber que tu amor todo lo transforma. Te amo mucho.

<p style="border-bottom:5px outset #CCB4FC;">Texto</p> 

---

La ternura y la dulzura que me das es suficiente motivo para ser feliz, gracias por estar a mi lado. Te Adoro.

---

<hr size="3" color="#B4EDFC" /> Texto<hr>

---

Son muchos los instantes juntos, las palabras y los besos que nos hemos dado y es una alegría que sea así. Te Amo.

<hr size="3" color="#F2A1E2" /> Texto 

<div style="Writing-mode: tb-rl"><font style="Font-weight: normal; font-size: 16px;  WIDTH: 480px; height: 250px;font-family: georgia; text-aling: justify">Texto</font></div> 

La vida está llena de pequeños detalles que alegran el corazón, que rico saber que mi regalo eres tú. Te Amo.

<marquee align="middle" behavior="alternate" direction="up" scrolldelay="20" scrollamount="2" height="22" width=" 114%">Texto</marquee>

Cuánto se te puede querer? Hasta el cielo es poquito… pero tú con un beso y un abrazo lo entiendes. Te quiero con todo el corazón.

<marquee align="middle" behavior="alternate" direction="down" scrolldelay="15" scrollamount="2" height="22" width="22%"> Texto </marquee> 

Es terrible cuando los malos hábitos son el sentido de la vida ... ..

<p><span style="font-size: 80px;"><span style="font-family: 'Monotype Corsiva';"><span style="color: #0000ff;">T</span></span></span>&nbsp;exto&cedil;</p>

The border-image property specifies an image to be used as the border around an element:

Here, the middle sections of the image are repeated to create the border.

Here is the original image:

Note: Internet Explorer 10, and earlier versions, do not support the border-image property.

<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>
<p>Here is the original image:</p><img src="http://thumbs.dreamstime.com/t/huevos-de-oro-en-jerarqu%C3%ADa-41770064.jpg" width="205" height="">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
 <style>
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://img-fotki.yandex.ru/get/4412/65019656.13d/0_681fd_b44f6b66_S) 30 round;
}
</style>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<style>
#example1 {
    background-image: url(https://img-fotki.yandex.ru/get/6606/155764624.3e/0_932a8_5d1c8736_S), url(https://lh3.googleusercontent.com/v3Q92aEXsRGJ7bQTFFdVTv2TT44VUmNcCur_ByayudzU=w22-h150-no);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
    box-shadow: 0px 2px 1px #606060;
    border-radius: 10px;
    border: 1px dotted #ccc;
}
</style>

Floating boxes

<h2>Floating boxes</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<style>
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 2px ridge #E5DBDC;
    border-radius: 5px 5px 5px 5px;
    background-image: url('https://img-fotki.yandex.ru/get/6605/155764624.3e/0_932b4_1f5ff4f2_S');
    box-shadow: -1px -1px 4px #333333,1px 1px 4px #333333,1px 1px 5px #333333;
}
</style>