css básico. introducción, unidades y selectoresjorgesanchez.net/.../pdf/css-basico.pdf ·...
TRANSCRIPT
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
CSS básico.Introducción, Unidades y
Selectores
LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[1] introducción a CSS
LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Ejemplo de mal HTML, etiqueta font
• <font face=“Arial” color=“red”>Texto</font>
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento más apropiado
•HTMLDescripción de elementos•CSSCómo se deben presentar esos elementos en pantalla
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Versiones CSS
•CSS1 (1996)• Formatos de texto, párrafo, caja, lista, tamaños de imágenes,-
•CSS2 (1998) y CSS 2.1• Posicionamiento, tipos de medio
•CSS3 (actual)• http://www.w3.org/Style/CSS/current-work• 30 módulos en trabajo, estándar vivo (parte de HTML5)
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Compatibilidad
•http://caniuse.com (uso de CSS3 en los navegadores)•http://css3test.com (compatibilidad de mi navegador)•Las nuevas propiedades (sin compatibilidad) a veces usan prefijos:• -moz-Mozilla• -webkit-Motor de Safari, Chrome y (ahora) Opera• -ms-Microsoft• -o-Versiones anteriores de Opera
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[2] sintaxis básica
LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
funcionamiento
selector{
propiedad1:valor1;
propiedad2:valor2;
….
}
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
comentarios
/*
comentario
*/
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
añadir código CSS
•Dentro de la propia etiqueta<p style=“color:red”>Nuevo párrafo</p>
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
añadir código CSS
•En la cabecera<head>
<style>
p{
color:red;
}
</style>
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
añadir código CSS
• En archivo separado (externo), estilos.cssp{color:red;
}• Se incrusta el código con<head><link rel=“stylesheet” href=“estilos.css” type=“text/css”>
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[3] Selectores CSS
LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Seleccionar elemento
•nombreElemento (ejemplo: p)•p,h1,h2 Selecciona todos los elementos con ese nombre
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Seleccionar clase
•<p class=“clase1”>… Aplicación de una clase a un elemento
•<p class=“clase1 clase2”>… Aplicación de dos clases•p.clase1 Seleciona párrafos con esa clase aplicada• .clase1 Elementos (del tipo que sea) con esa clase• .clase1.clase2 Elementos con esas dos clases
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Seleccionar identificador
•<p id=“id1”>… Aplicación de un identificador•#id1 Selecciona el elemento con ese identificador• ¡Los identificadores no se pueden repetir!
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Seleccionar de limitación
•p strongSelector de negritas dentro de un párrafo•p strong em Selecciona los elementos de cursiva (énfasis) que están dentro de elementos resaltados (strong) que, a su vez, están dentro de párrafos•h1 .rojo Elementos de clase rojo que están dentro de elementos titulares de nivel 1 (h1).
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Selector universal
• * Todos los elementos•ul * Cualquier elemento dentro de ul
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Selector por atributos
• p[lang] Párrafos que usan el atributo lang• p[lang=“en”] Párrafos marcados con idioma inglés• [atributo=valor] Elementos con ese atributo valiendo lo que
indica el valor.• [atributo$=valor]Atributo cuyo final coincida con el valor• [atributo^=valor]Atributo cuyo inicio coincida con el valor• [atributo|=valor]Atributo cuyo inicio coincida con el valor y el
valor es una palabra• [atributo*=valor]Atributo que contiene el valor
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Selectores jerárquicos
• section p P es descendiente de p• section>p P es hija de section•p+pSelecciona el primer hermano de un párrafo (selecciona el segunda párrafo)•p~pSelecciona todos los hermanos de alguien.•p:emptyPárrafo vacío
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Selectores jerárquicos
•p:first-child El párrafo si es el primer hijo•p:last-child El párrafo si es el último hijo•p:nth-child(5) El párrafo si es el quinto hijo•p:nth-child(even) Los párrafos hijos pares•p:nth-child(odd) Los párrafos hijos impares•p:nth-child(3n) Párrafos hijos múltiplos de 3•p:only-childPárrafos que son únicos hijos
LMSGI-Unidad 2-Creación web con CSS y HTMLJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Selectores jerárquicos
•p:first-of-type El párrafo si es el primer hijo de ese tipo•p:last-of-type•p:nth-of-type(5)•p:nth-of-type (even)•p:nth-of-type (odd)•p:nth-of-type (3n)•p:only-of-type