Tech School

User Tools

Site Tools

Trace: • sessions
web_design:tablas:css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
web_design:tablas:css [2021/10/12 16:41]
mag created 		web_design:tablas:css [2023/08/16 09:33] (current)
Line 1: Line 1:
 ====== Lección 3 de Desarrollo Web - Tablas ====== ====== Lección 3 de Desarrollo Web - Tablas ======
-===== Hojas de estilo en cascada (CSS) =====+===== Hojas de Estilo en Cascada (CSS) =====
 ==== Preparacion ==== ==== Preparacion ====
-  * Continuar usando el trabajo que hiciste en [[https://jsfiddle.net|jsfiddle]]. +  * Continua usando el trabajo que hiciste en [[https://jsfiddle.net|jsfiddle]] en la ultima leccion. 
-  * Dado que probablemente haya perdido el trabajo mientras hacía el ejercicio, aquí está de nuevo. +  * Por si a caso no tienes el codido, aquí está de nuevo. 
 <code><h1>Solicitud de empleo</h1> <code><h1>Solicitud de empleo</h1>
 <p>Medellin, Fecha</p> <p>Medellin, Fecha</p>
Line 14: Line 14:
 <p>Atentamente,</p> <p>Atentamente,</p>
 <p>Murray</p></code> <p>Murray</p></code>
-  * To start with, remove all the styles inside tags, so for example, <html><p style="text-indent:50px"></html> becomes simply <html><p></html>.+  * Para empezar, elimine todos los estilos dentro de las etiquetas, por ejemplo cambia <html><p style="text-indent:50px"></html> a <html><p></html>.
  
 ==== CSS ==== ==== CSS ====
  
-  * Each of the design elements we've used are called 'styles'. +  * Cada uno de los elementos de diseño que hemos utilizado se llama "estilos".  
-  * They can be separated from HTML by using CSS. +  * Se pueden separar de HTML mediante CSS .  
-  * In jsfiddle, you can put the style rules in the section at the top right. +  * En jsfiddle, puede poner las reglas de estilo en la sección de la parte superior derecha.  
-  * Let's make paragraph text blue.+  * Hagamos que el texto del párrafo sea azul. 
 <code>p { <code>p {
   color: blue;   color: blue;
 }</code> }</code>
-  * The tag before the brackets (<html>{}</html>) shows the target - what the rules will be applied to. +  * La etiqueta antes de los corchetes (<html>{}</html>) muestra el objetivo: a qué se aplicarán las reglas.  
-  * The rules inside the brackets are applied to all elements that match the target element. In this case, all paragraphs. The heading remains unchanged. +  * Las reglas dentro de los corchetes se aplican a todos los elementos que coinciden con el elemento de destino. En este caso, todos los párrafos. El título permanece sin cambios.  
-  * This makes CSS very useful for creating a consistent look throughout your website. +  * Esto hace que CSS sea muy útil para crear una apariencia coherente en todo su sitio web.  
-  * Simply associate the same CSS rules with every page and they'll look the same. +  * Simplemente asocie las mismas reglas CSS con cada página y tendrán el mismo aspecto.  
-  * 'Cascading' refers to the way the rules are applied to child elements as well, unless it's overridden by rules for a more specific target. We'll talk about what 'specific' means later.+  * 'Cascading' se refiere a la forma en que las reglas se aplican también a los elementos secundarios, a menos que sea anulado por reglas para un objetivo más específico. Hablaremos de lo que significa "específico" más adelante.
  
-==== Indent ==== +==== Sangría ==== 
-  * Let's try some other rules that you are familiar with. +  * Probemos algunas otras reglas con las que esté familiarizado.  
-  * Below <html>color: blue;</html>, add <html>text-indent: 50px;</html> so your CSS looks like this.+  * A continuación <html>color: blue;</html>, agregue <html>text-indent: 50px;</html> para que su CSS se vea así. 
 <code>p { <code>p {
   color: blue;   color: blue;
Line 39: Line 39:
 }</code> }</code>
  
-==== Alignment ==== +==== Alineación ==== 
-  * There are four types of text alignment. You've used <html>right</html>, and the default is left. You can also use <html>center</html>, but today, let's try <html>justify</html>. This aligns both the left and the right ends of the text as you see in books.+  * Hay cuatro tipos de alineación de texto. Ha utilizado <html>right</html> (derecho), y <html>left</html> (izquierdo) el predeterminado. También puedes usar <html>center</html> (centro), pero hoy, probémoslo <html>justify</html>. Esto alinea los extremos izquierdo y derecho del texto como se ve en los libros. 
 <code>text-align: justify;</code> <code>text-align: justify;</code>
-  * Did you add this line inside the brackets on its own line? Did it work as expected? If it didn't, try to work out what you did wrong (eg spelling, missing <html>;</html>) or ask for help.+  * ¿Agregó esta línea dentro de los corchetes en su propia línea? ¿Funcionó como se esperaba? Si no fue así, intente averiguar qué hizo mal (por ejemplo, ortografía, falta <html>;</html>) o pida ayuda. 
  
 ==== Italic ==== ==== Italic ====
-  * Now make the <html>span</html> italic using the following code.+  * Ahora, cambia el <html>span</html> para parecer cursiva usando el siguiente codigo.
 <code>span { <code>span {
   font-style: italic;   font-style: italic;
 }</code> }</code>
-  * If you had more than one <html><span></html> tag, they would all be italicised. +  * Si tuviera mas que una <html><span></html> etiqueta, todos aparecerían en cursiva. 
-  * Try adding another <html><span></html> tag somewhere in the text. Did it automatically become italicised? That's handy, isn't it?+  * Prueba anadir otra etiqueta <html><span></html> en otro lugar del texto. ¿Se puso automáticamente en cursiva? Eso es útil, ¿cierto?
  
 ==== Font Family ==== ==== Font Family ====
-  * Let's modify the heading. +  * Modificamos el cabezera. 
-  * We can change the font family by adding the same code as the attribute.+  * Podemos cambiar la familia del fuente usando lo mismo codigo del atributos.
 <code>h1 { <code>h1 {
   font-family: Arial, sans-serif;   font-family: Arial, sans-serif;
 }</code> }</code>
  
-==== Font Size ==== +==== Tamano del Fuente ==== 
-  * Let's make the heading really big.+  * Hagamos el titulo muy grande.
 <code>font-size: 3em;</code> <code>font-size: 3em;</code>
  
-==== Underline, Small Caps, Line Height, Shadow ==== +==== Decoraciones ==== 
-  * Any attribute that works in HTML can be used in CSS. Let's complete the heading using the same attributes as before.+  * Cualquier atributo que funcione en HTML se puede utilizar en CSS . Completemos el titulo usando los mismos atributos que antes.
 <code>h1 { <code>h1 {
   font-family: Arial, sans-serif;   font-family: Arial, sans-serif;
Line 73: Line 73:
   text-shadow:2px 2px #ff0000;   text-shadow:2px 2px #ff0000;
 }</code> }</code>
-  * Notice that by placing each style definition on a separate line and indenting them makes it very clear which element is targeted and what styles they will use. If you haven't been indenting your code, please try from now on.+  * Cualquier atributo que funcione en HTML se puede utilizar en CSS . Completemos el encabezado usando los mismos atributos que antes.
  
-[[web_design:horario:tables|Next: Tables]]+[[web_design:tablas:tables|Siguiente: Tablas]]
web_design/tablas/css.1634082077.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki