Sintaxis básica CSS módulo LMSGI

LMSGI-Unidad 5-CSS
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[6.3] sintaxis básica de CSS
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 5-CSS
@jorgesancheznet
funcionamiento
selector{
propiedad1:valor1;
propiedad2:valor2;
….
}

LMSGI-Unidad 5-CSS
@jorgesancheznet
comentarios
/*
comentario
*/

LMSGI-Unidad 5-CSS
@jorgesancheznet
inserción de código CSS
LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 5-CSS
@jorgesancheznet
añadir código CSS
•Dentro de la propia etiqueta
<p style=“color:red”>Nuevo párrafo</p>
•El código CSS solo afecta a esa etiqueta

LMSGI-Unidad 5-CSS
@jorgesancheznet
añadir código CSS
•En la cabecera
<head>
<style>
p{
color:red;
}
</style>
•Afecta a todo el documento

LMSGI-Unidad 5-CSS
@jorgesancheznet
añadir código CSS
• En archivo separado (externo), por ej. estilos.css
p{
color:red;
}
• Se incrusta el código con:
<head>
<link rel=“stylesheet” href=“estilos.css”
type=“text/css”>
• Código reutilizable para varios documentos

LMSGI-Unidad 5-CSS
@jorgesancheznet
orden de aplicación de
estilos CSS

LMSGI-Unidad 5-CSS
@jorgesancheznet
orden de aplicación de estilos según el ámbito
(el último predomina)
1. Estilos del navegador
2. Estilos externos (link)
3. Etiqueta style (dentro de head)
4. Atributo style (dentro de un elemento concreto)

LMSGI-Unidad 5-CSS
@jorgesancheznet
orden de aplicación de estilos en el mismo
ámbito (el último predomina)
1. El último que aparece
2. El que se refiere a un elemento más interior

LMSGI-Unidad 5-CSS
@jorgesancheznet
Alteración del orden predefinido
•Se coloca la palabra !important al final de la propiedad.
•Ejemplo:
strong{
color:Green !important;
}
•Solo funciona ante conflictos en el mismo ámbito

LMSGI-Unidad 5-CSS
@jorgesancheznet
Herencia
•Un elemento que se encuentra dentro de otro hereda el
formato de su contenedor:
p{
color:red;
}
strong{
font-size:14pt;
}
…
<p><strong>Hola</strong> amigos </p>
Color rojo y 14 t Solo color rojo

Sintaxis básica CSS módulo LMSGI

Recomendados

Recomendados

Más contenido relacionado

Similar a Sintaxis básica CSS módulo LMSGI

Similar a Sintaxis básica CSS módulo LMSGI (20)

Sintaxis básica CSS módulo LMSGI