CSS básico. Introducción, Unidades y Selectoresjorgesanchez.net/.../pdf/css-basico.pdf ·...

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


@jorgesancheznet

[1] introducción a CSS



@jorgesancheznet

Ejemplo de mal HTML, etiqueta font

• <font face=“Arial” color=“red”>Texto</font>


@jorgesancheznet

Funcionamiento más apropiado

•HTMLDescripción de elementos•CSSCómo se deben presentar esos elementos en pantalla


@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)


@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


@jorgesancheznet

[2] sintaxis básica



@jorgesancheznet

funcionamiento

selector{

propiedad1:valor1;

propiedad2:valor2;

….

}


@jorgesancheznet

comentarios

/*

comentario

*/


@jorgesancheznet

añadir código CSS

•Dentro de la propia etiqueta<p style=“color:red”>Nuevo párrafo</p>


@jorgesancheznet

añadir código CSS

•En la cabecera<head>

<style>

p{

color:red;

}

</style>


@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”>


@jorgesancheznet

[3] Selectores CSS



@jorgesancheznet

Seleccionar elemento

•nombreElemento (ejemplo: p)•p,h1,h2 Selecciona todos los elementos con ese nombre


@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


@jorgesancheznet

Seleccionar identificador

•<p id=“id1”>… Aplicación de un identificador•#id1 Selecciona el elemento con ese identificador• ¡Los identificadores no se pueden repetir!


@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).


@jorgesancheznet

Selector universal

• * Todos los elementos•ul * Cualquier elemento dentro de ul


@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


@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


@jorgesancheznet


•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


@jorgesancheznet


•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

CSS básico. Introducción, Unidades y Selectoresjorgesanchez.net/.../pdf/css-basico.pdf ·...

Documents

Transcript of CSS básico. Introducción, Unidades y Selectoresjorgesanchez.net/.../pdf/css-basico.pdf ·...