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

  • Continuar usando el trabajo que hiciste en jsfiddle.
  • Dado que probablemente haya perdido el trabajo mientras hacía el ejercicio, 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 <p style="text-indent:50px">, se vuelve simple <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.

Indent

  • Let's try some other rules that you are familiar with.
  • Below color: blue;, add text-indent: 50px; so your CSS looks like this.
p {
  color: blue;
  text-indent: 50px;
}

Alignment

  • There are four types of text alignment. You've used right, and the default is left. You can also use center, but today, let's try justify. This aligns both the left and the right ends of the text as you see in books.
text-align: justify;
  • 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 ;) or ask for help.

Italic

  • Now make the span italic using the following code.
span {
  font-style: italic;
}
  • If you had more than one <span> tag, they would all be italicised.
  • Try adding another <span> tag somewhere in the text. Did it automatically become italicised? That's handy, isn't it?

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.1634082625.txt.gz · Last modified: 2023/08/16 09:33 (external edit)