User Tools

Site Tools


web_design:tablas:css

This is an old revision of the document!


Lección 3 de Desarrollo Web - Tablas

Hojas de estilo en cascada (CSS)

Preparacion

  • Continua usando el trabajo que hiciste en jsfiddle en la ultima leccion.
  • Por si a caso no tienes el codido, aquí está de nuevo.
<h1>Solicitud de empleo</h1>
<p>Medellin, Fecha</p>
<p>Nombre</p>
<p>Estimados Senor,</p>
<p style="text-indent:50px; color:blue;">Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de <em>Hospitalidad</em></strong>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p>
<p>Como saben, la escuela pide 400 horas de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>
<p style="text-indent:50px;">Podrán ver que una de mis mayores fortalezas está en el área de alimentos y bebidas, ya que he participado en diferentes entrenamientos y estudios paralelos, que me han llevado a innovar nuevas formas de ofrecer el servicio y experiencia del cliente, y estoy segura que el Hotel CortezTM sabrá sacar el máximo provecho, cuando vea el aumento de experiencias positivas que sus clientes experimentarán.</p>
<p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</p>
<p>Atentamente,</p>
<p>Murray</p>
  • Para empezar, elimine todos los estilos dentro de las etiquetas, por ejemplo cambia <p style="text-indent:50px"> a <p>.

CSS

  • Cada uno de los elementos de diseño que hemos utilizado se llama “estilos”.
  • Se pueden separar de HTML mediante CSS .
  • En jsfiddle, puede poner las reglas de estilo en la sección de la parte superior derecha.
  • Hagamos que el texto del párrafo sea azul.
p {
  color: blue;
}
  • La etiqueta antes de los corchetes ({}) muestra el objetivo: a qué se aplicarán las reglas.
  • 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.
  • Esto hace que CSS sea muy útil para crear una apariencia coherente en todo su sitio web.
  • Simplemente asocie las mismas reglas CSS con cada página y tendrán el mismo aspecto.
  • '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.

Sangría

  • Probemos algunas otras reglas con las que esté familiarizado.
  • A continuación color: blue;, agregue text-indent: 50px; para que su CSS se vea así.
p {
  color: blue;
  text-indent: 50px;
}

Alineación

  • Hay cuatro tipos de alineación de texto. Ha utilizado right (derecho), y left (izquierdo) el predeterminado. También puedes usar center (centro), pero hoy, probémoslo justify. Esto alinea los extremos izquierdo y derecho del texto como se ve en los libros.
text-align: justify;
  • ¿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 ;) o pida ayuda.

Italic

  • Ahora, cambia el span para parecer cursiva usando el siguiente codigo.
span {
  font-style: italic;
}
  • Si tuviera mas que una <span> etiqueta, todos aparecerían en cursiva.
  • Prueba anadir otra etiqueta <span> en otro lugar del texto. ¿Se puso automáticamente en cursiva? Eso es útil, ¿cierto?

Font Family

  • Let's modify the heading.
  • We can change the font family by adding the same code as the attribute.
h1 {
  font-family: Arial, sans-serif;
}

Font Size

  • Let's make the heading really big.
font-size: 3em;

Underline, Small Caps, Line Height, Shadow

  • Any attribute that works in HTML can be used in CSS. Let's complete the heading using the same attributes as before.
h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  text-decoration: underline;
  font-variant: small-caps;
  line-height: 3em;
  text-shadow:2px 2px #ff0000;
}
  • 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.

Next: Tables

web_design/tablas/css.1634242663.txt.gz · Last modified: 2023/08/16 09:33 (external edit)