Lección 3 de Desarrollo Web - Tablas
Hojas de Estilo en Cascada (CSS)
Preparacion
<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
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
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
h1 {
font-family: Arial, sans-serif;
}
Tamano del Fuente
Decoraciones
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