Recomendados
Más contenido relacionado
Similar a Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Similar a Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx (20)
Último
Último (20)
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
- 2. • En el lenguaje CSS se define casi todo el aspecto visual de un sitio. Se escribe en un único archivo usualmente llamado styles.css o style.css y todos los archivos HTML tienen un vínculo hacia él. CSS es un lenguaje de estilos utilizado en el ámbito del diseño web para dotar un sitio web de detalles estéticos, interacción y aspecto visual.
- 3. ¿Cómo usar CSS? Formas de aplicar CSS a una página web • Ya tenemos claro que nuestros documentos web van a tener código HTML por un lado y código CSS por otro. Pero aún no sabemos como se relacionan entre sí o como se aplican. Antes de comenzar a trabajar con CSS hay que conocer las diferentes formas que existen para incluir estilos en nuestros documentos HTML.
- 4. Nombre Mediante... Descripción Archivo CSS externo Etiqueta <link rel="stylesheet"> El código se escribe en un archivo .css a parte. Recomendado. Bloque de estilos Etiqueta <style> El código se escribe en una etiqueta <style> en el documento HTML. Estilos en línea Atributo HTML style="..." El código se escribe en un atributo HTML style en una etiqueta. Formas de enlazar CSS En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la última la menos habitual:
- 5. Sintaxis de una regla CSS • Todo el código CSS se compone de reglas. Una regla es el conjunto de propiedades que se van a aplicar a un elemento determinado. • Una regla CSS siempre tiene un selector (el elemento al que quiero modificar) y una declaración (las características que le quiero agregar o cambiar). La declaración va encerrada entre llaves { } y dentro de ella se escriben todas las propiedades con sus valores, que modificarán al selector. Cuando hay más de una propiedad, se separan con punto y coma.
- 6. La sintaxis se ve de esta manera: • Nota: después de los dos puntos y del punto y coma pueden ir espacios o no, es indistinto. Después de la última propiedad, puede ir o no un punto y coma. Las propiedades se pueden escribir una debajo de la otra o todas en una misma línea como está en la imagen. Un archivo CSS puede tener un número ilimitado de reglas CSS y dentro de cada regla podemos escribir tantas propiedades como necesitemos. Una misma regla se puede aplicar sobre varios elementos del HTML.
- 7. Tipos de Selectores El selector es la parte de la regla que asocia un elemento HTML con su diseño. Básicamente los selectores se pueden clasificar en 4 grupos: de etiqueta, de clase, de id y compuestos. Selectores de etiqueta Al primero al que recurrimos es al selector de etiqueta, porque aprovechamos las etiquetas que ya están escritas en el html. Por ejemplo: si en el HTML tenemos la etiqueta <body>, para crear una regla en CSS simplemente escribo el nombre de la etiqueta y coloco las propiedades entre las llaves: body {}.
- 8. Selectores de clase o de ID Cuando tenemos varias etiquetas iguales y sólo queremos darle diseño a una de ellas, entonces necesitamos identificarla de alguna manera y tenemos dos opciones: a esa etiqueta en el HTML le podemos agregar el atributo class="" por ejemplo:<article class="destacado"> y en ese caso en el CSS el selector comienza con un punto: .destacado {} o el atributo id="" por ejemplo: <article id="destacado"> entonces el selector comienza con numeral: #destacado {} La diferencia entre un selector de clase y uno de id es que en un archivo HTML puede haber varias etiquetas con el mismo class, en cambio no puede haber dos etiquetas con el mismo id.