Que son las hojas de estilo (CSS)?

Transcripción

1

2

3 Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. Describe como los elementos dispuestos en la página son presentados al usuario.

4 CSS Podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

5 CSS Asocia las reglas de estilo a las etiquetas HTML de tres maneras: 1. Directamente a la etiqueta 2. En el head de la página 3. Agrupar las reglas de estilo en un archivo independiente con extensión *.css

6 Gramática del CSS Selectores y propiedades El selector: define la etiqueta a la que se aplicará el estilo. Las propiedades: especifican la apariencia de la etiqueta: color, fuente etc. van siempre entre llaves y separados entre sí por puntos y comas SELECTOR { propiedad1: caraterísticas; propiedad2: características; }

7 Comentarios Los comentarios se escriben entre /* Este texto es un comentario */

8 1. Estilos directamente en la etiqueta Es la forma más fácil pero menos recomendada para aplicación de un estilo a una etiqueta HTML. Se define en la propiedad style los estilos a definir para cada etiqueta.

9 Propiedades Color y Background-color Color: define el color del texto background-color: define el color de fondo del texto. Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.

10 Ejemplo <h1 style="color:#ff0000;backgroundcolor:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> Por defecto, todo navegador tiene un estilo definido para cada etiqueta HTML, lo que hacemos con la propiedad style es redefinir el estilo por defecto.

11 Desventaja Se debe considerar que el estilo se aplica únicamente a la etiqueta donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada Etiqueta

12 2. Definición de estilos a nivel de página. Es la definición de estilos en una sección del Head de la página HTML donde podemos definir estilos que se aplican a las distintas etiquetas HTML de la página.

13 2. Definición de estilos a nivel de página. En el head de la página definimos el estilo: <head> <title>definición a nivel de Página</title> <style type="text/css"> H1{ color:#ff0000; Background-color:#ffff00; } </style> </head>

14 2. Definición de estilos a nivel de página. Al aplicar el estilo a nivel de página se indica al navegador que en todos los lugares de esa página donde se utilice la etiqueta h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Se puede observar que es mucho más eficiente que definir los estilos directamente sobre las etiquetas HTML.

15 Propiedades relacionadas a fuentes font-family font-size font-style font-weight font-variant

16 Propiedad font-family Algunas de las fuentes más comunes que puede acceder el navegador son: Arial Arial Black Arial Narrow Courier New Georgia Impact Tahoma Times New Roman Verdana

17 Propiedad font-family En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para esa etiqueta HTML. Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha)

18 <style type="text/css"> h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; } h2 { font-family:verdana; font-size:20px; font-variant:small-caps; } </style> Ejemplo

19 Propiedad font-size Indica el tamaño de la fuente. font-size:30px;

20 Propiedad font-style Puede tener los siguientes valores: Normal Italic oblique

21 Propiedad font-weight Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos). Puede tener los siguientes valores: Normal Bold Bolder Lighter

22 Propiedad font-variant Define si la fuente se muestra en mayúsculas tipo normal o pequeñas Valores: small-caps normal

23 Agrupación de varias etiquetas HTML con una misma regla de estilo. Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes etiquetas HTML. Separamos por coma todas las etiquetas a las que se aplicará la misma regla de estilo: h1,h2,h3 { font-family:verdana; color:#0000ff; }

24 Propiedades relacionadas al texto. Color: permite definir el color del texto, lo podemos indicar por medio de tres valores hexadecimales que indican la mezcla de rojo, verde y azul. Otra forma de indicar el color, por medio de la función rgb (red,green,blue), indicamos la cantidad de rojo, verde y azul en formato decimal color:rgb(255,0,0);

25 Propiedades relacionadas al texto. text-align: puede tomar alguno de estos cuatro valores: left right center justify

26 Propiedades relacionadas al texto. text-decoration: Permite entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior, los valores posibles de esta propiedad son: none underline overline line-through

27 Ejemplo: <style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } </style>

28 Propiedades relacionadas al texto. letter-spacing y word-spacing Permiten indicar el espacio que debe haber entre los caracteres y entre las palabras.

29 Propiedades relacionadas al texto. text-indent: Indenta la primera línea de un texto (agregar una sangría). A partir de la segunda línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación es hacia la izquierda.

30 Propiedades relacionadas al texto. text-transform: puede inicializarse con alguno de los siguientes valores: Capitalize : Dispone en mayúsculas el primer carácter de cada palabra. lowercase: Convierte a minúsculas todas las letras del texto. uppercase: Convierte a mayúsculas todas las letras del texto. none: No provoca cambios en el texto.

31 Ejemplo h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; } p { text-indent:20px; }

32 Herencia El conjunto de etiquetas HTML forman en sí un árbol que en su raíz podemos identificar la etiqueta body del cual se desprenden otras etiquetas contenidas en esta sección, como podrían ser las etiquetas h1,h2,h3,h4,h5,h6,p,div Luego estas en su interior contienen otras etiquetas HTML como podrían ser em,b,i,pre etc.

33 HTML: Estructura

34 Ejemplo: <style type="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p { color:#999999; } </style>

35 Definición de Estilos específicos Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. Sólo en ese caso el estilo para dicha marca se activará. Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo

36 Ejemplo <style type="text/css"> p b{ color:#0000ff; } h1 b{ color:#ff0000; } </style> Se usa un espacio para indicar el estilo específico.

37 Jerarquía La herencia en CSS estádefinadapor: Cascada Herencia Especificidad

38 SOBREESCRIBE Cascada Es la manera en que las reglas se resuelven: Reglas definidas por el agente (browser) Hojas de estilo externas Hojas de estilo encrustadas Estilos en línea

39 Se define según el árbol de documento. Cada elemento de un documento HTML estácontenido en otro elemento y puede contener elementos dentro de él. Herencia

40 Especificidad Qué ocurre cuando dos propiedades, especificadas en reglas distintas y contradictorias entre sí son aplicables al mismo elemento? Regla general: en caso de conflicto se aplica la regla más específica. Los selectores de ID son más específicos que los otros selectores. Los selectores de clase son más específicos que los selectores de etiqueta. Los selectores contextuales y otros selectores que implican a más de un elemento, son más específicos que los selectores simples. (cuantos más elementos haya implicados, más específico será el selector y por tanto tendrá preferencia).

41 Especificidad Qué ocurre cuando dos propiedades, especificadas en reglas distintas y contradictorias entre sí son aplicables al mismo elemento?

42 Especificidad En los casos en que dos reglas tengan exactamente el mismo nivel de especificidad, tendrá preferencia el que esté después en la cascada. Por ejemplo si tenemos una hoja de estilos A y una hoja de estilos B desde la que importamos las reglas de la hoja de estilos A. Si hay dos reglas contradictorias, prevalecerá la establecida en la hoja de estilos B por estar después en la cascada. Si en una misma hoja de estilos hay dos reglas contradictorias, se aplicará la que esté en último lugar, la más alejada del comienzo del documento.

43 Definición de estilos por medio de clases En muchas ocasiones una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML

44 Definición de estilos por medio de clases Para definir una clase aplicable a cualquier marca HTML se usa un punto y el nombre de la clase:.resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }

45 Ejemplo: <p> Este párrafo muestra el resultado de aplicar la clase.resaltado en la última <span class="resaltado">palabra.</span> </p>

46 Definición de estilos por medio de Id La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las class, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML, ya que todos los Id que se definen en una página HTML deben ser distintos.

47 Definición de estilos por medio de Id La sintaxis para definir un estilo por medio de Id es numeral (#) + Nombre del ID: #cabecera { font-family:times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; }