CSS BÁSICO Hojas de Estilo. Iván Martínez Toro

Transcripción

1 CSS BÁSICO Hojas de Estilo Iván Martínez Toro

2 ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo.

3 CSS (CASCADING STYLE SHEETS) Nace en torno a En 1996 el W3C publica la primera recomendación oficial CSS nivel 1. Actualmente se trabaja en la versión CSS3. Permite definir el aspecto visual de una página HTML o XHTML. Antes de CSS la estructura de las páginas era definida mediante tablas.

4 HTML + CSS HTML define el marcado de los contenidos, es decir, qué es un párrafo, un titular o una lista. CSS define el aspecto de todos los contenidos, es decir, color, tamaño y tipo de letra de los párrafos de texto, separación entre titulares y párrafos, tabulación entre los elementos de una lista, etc. Es la mejor forma de separar los contenidos de la presentación lo que conlleva las siguientes ventajas: Obliga a crear HTML/XHTML bien definidos (o semánticos ). Mejora la accesibilidad, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en diferentes dispositivos.

5 CÓMO ES CSS? Se trata de un fichero de texto plano que contiene reglas. Cada regla tiene dos partes: Selector (para seleccionar las etiquetas HTML sobre las que actúa). Descriptor (para decir qué hace con ellas) h1: {color:green; font-family:verdana} El fichero CSS es una lista de reglas (pares selector+descriptor) Los selectores pueden ser una o varias etiquetas HTML. Los descriptores están definidos en CSS, hay una larga lista.

6 CÓMO ESCSS? (II) Las reglas CSS: selector {propiedad: valor} selector, selector,, selector { propiedad: valor; propiedad: valor; }

7 EJEMPLOS DE REGLAS h1, h2, h3 { font-family: helvetica } h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

8 EJEMPLOS DE REGLAS(II) - h1,h2,h3 { font-family: "lucida calligraphy", arial, 'sansserif'; } p,table,li, { font-family: "lucida calligraphy", arial, 'sansserif'; margin-left: 10pt; } body{ background-color:#fffaf0; } p,li,th,td{ font-size: 75%; } h1,h2,h3,hr { color:#483d8b; } table{ border-style:outset} li{list-style: square;)}

9 TIPOS DE SELECTORES Podemos seleccionar un solo elemento HTML ul { list-style: disc; } (lista con círculo relleno) Seleccionar varios elementos HTML h1, h3{ font-family: verdana; } (ambos títulos con ese tipo de letra) Repetir selectores h1, h3{ font-family: verdana; } h1, h2, h3, hr{ color: black; } Si un valor no coincide, la última regla es la que se tiene en cuenta. Utilizar el selector universal *. Se aplica a todos los elementos. * { color: green; } Si los valores no coinciden, prevalecen las reglas más específicas.

10 HERENCIA EN SELECTORES h1 { color: blue; } body { color: black; background: url(texture.gif) white; } Si no se especifica una propiedad, se hereda del elemento padre: <h1>el titular <em>es</em> corto</h1> es será azul porque <h1> es azul y <em> lo hereda por ser su hijo. La página tendría texto negro sobre fondo blanco en el caso de que no se encuentre la imagen de fondo texture.gif.

11 SELECTORES ADYACENTES Seleccionando elementos adyacentes o consecutivos que están al mismo nivel (no son hijos unos de otros): HTML CSS <h1>separa tras esta línea</h1> <h2>importante</h2> <h2>otro título</h2> h1 + h2 { margin-top: 11px; } El efecto de la regla es un margen entre h1 y h2.

12 SELECTOR ATRIBUTO Se selecciona un elemento que tenga un atributo: Sintaxis: elemento[atributo] { } Ejemplo: table[border] { } Se puede seleccionar una elemento que tenga un atributo con un valor determinado: Sintaxis: elemento[atributo= valor ] { } Ejemplo: table[border= 0 ] { }

13 EL ATRIBUTO CLASS El atributo class permite tener diferentes estilos para elementos del mismo tipo. HTML CSS <p class = importante >Este párrafo aparecerá en negrita y grande</p> <p class = normal >Este párrafo aparecerá sin negrita y pequeño</p> p.importante { font-weight: bold; font-size: 24pt; } p.normal { font-size: 10pt; } Para definir una regla que aplique a cualquier elemento de una clase concreta se puede usar indiferentemente:.importante { font-weight: bold; font-size: 24pt; } *.importante { font-weight: bold; font-size: 24pt; }

14 EL ATRIBUTO CLASS (II) Ejemplo: CSS *.coloreado { color: red; } h1.coloreado { color: green; } HTML <h1>no aparece de ni rojo ni verde</h1> <h1 class = coloreado >aparece verde</h1> <p class = coloreado >aparece rojo</p>

15 EL ATRIBUTO CLASS (III) Subconjunto del atributo class : CSS p.importante.coloreado { color: green; } Regla: que sea al menos de la clase importante y coloreado. HTML <p class = importante grande coloreado >sale verde </p> <p class = importante grande >NO sale verde</p>

16 LAS ETIQUETAS <DIV> Y <SPAN> <div> y <span> son etiquetas HTML que permiten aplicar reglas CSS a diferentes elementos: <div> asegura que habrá una nueva línea antes y después del bloque. <span> no añade líneas antes ni después, solo espacios simples. Ejemplo: CSS div { background-color: #66FFFF; } span.color { color: red; } HTML <div>este divse trata como un párafocon fondo de color pero <spanclass= color >este spanaparece con letras rojas.</span></div>

17 EL SELECTOR ID Este selector se usa para aplicar estilo a un elemento concreto. CSS #cabecera { width: 740px; top: 0px; } HTML <divid = cabecera >Esta división o caja tiene que aparecer con un ancho de 740px y situado en la parte superior</div>

18 CÓMO USAR LASHOJAS DEESTILO Existen 3 formas de aplicar el estilo a un HTML: Hoja de estilo externa Es la más potente La hoja de estilo es un archivo.cssindividual. Hoja de estilo empotrada También permite usar toda la potencia de CSS. Va dentro del archivo.htmlde la página. Hoja de estilo en línea Potencia de CSS limitada. Se aplica el estilo a cada elemento en su definición.

19 CÓMO USAR LASHOJAS DEESTILO(II) Hoja de estilo externa: Se implementa la hoja de estilo y se guarda como.css. Dentro del HTML hay que hacer referencia a la hoja de estilo.css creada: Dentro de <head>: <link rel= stylesheet type= text/css href= URL del archivo CSS /> Por ejemplo: <link rel= stylesheet type= text/css href= prueba.css />

20 CÓMO USAR LASHOJAS DEESTILO(III) Hoja de estilo empotrada: Todo el cssse mete en una etiqueta <style> dentro de <head> en el archivo HTML. <style type= text/css > <!-- --> Hoja de estilo CSS </style> Se pone como un comentario para ocultarlo a navegadores que no entiendan CSS.

21 CÓMO USAR LASHOJAS DEESTILO(IV) Hoja de estilo en línea: Se define el estilo de cualquier elemento HTML en la definición del mismo mediante el atributo <style>. <p style = border-bottom: blue > Válido si queremos poco marcado. Mezcla HTML con presentación lo ensucia! No puede usar la potencia de CSS, sólo marcado.

22 PRIORIDAD DE CADA TIPO DE ESTILO Es posible realizar definición de estilo de varias formas a la vez (externa + empotrada + en línea). En caso de conflicto, la prioridad de mayor a menor es la siguiente: 1. Estilo en línea. 2. Hojas de estilo internas (empotradas dentro de <head>). 3. Hojas de estilo externas. 4. Navegador (estilo por defecto). La regla memotécnica es: Ante conflicto, prevalece la definición más cercana al elemento afectado.

23 PRIORIDAD DE CADA TIPO DE ESTILO(II) Ejemplo: Hoja de estilos externa: h3 { color: red; text-align: left; font-size: 8pt; } Hoja de estilos interna: h3 { text-align: right; font-size: 20pt; } Resultado de los atributos que toma el elemento h3: color: red; text-align: right; font-size: 20pt;