Lección 3 de Desarrollo Web - Tablas

• 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>.

• 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.

• 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;
}

• 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.

• 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?

• Modificamos el cabezera.
• Podemos cambiar la familia del fuente usando lo mismo codigo del atributos.

h1 {
  font-family: Arial, sans-serif;
}

• Hagamos el titulo muy grande.

font-size: 3em;

• Cualquier atributo que funcione en HTML se puede utilizar en CSS . Completemos el titulo usando los mismos atributos que antes.

h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  text-decoration: underline;
  font-variant: small-caps;
  line-height: 3em;
  text-shadow:2px 2px #ff0000;
}

• Cualquier atributo que funcione en HTML se puede utilizar en CSS . Completemos el encabezado usando los mismos atributos que antes.

Siguiente: Tablas