User Tools

Site Tools


web_design:tablas:css

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

  • Modificamos el cabezera.
  • Podemos cambiar la familia del fuente usando lo mismo codigo del atributos.
h1 {
  font-family: Arial, sans-serif;
}

Tamano del Fuente

  • Hagamos el titulo muy grande.
font-size: 3em;

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

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