Post on 13-Oct-2020
TIC II
Tema 2: Programación Web
REFERENCIAS Existen varios métodos para seleccionar qué elementos
HTML serán afectados por las reglas CSS:
Referencia por la palabra clave del elemento.
Referencia por el atributo id.
Referencia por el atributo class.
REFERENCIANDO CON PALABRA CLAVE
Al declarar la regla CSS, afectamos a cada elemento de la misma clase.
Ejemplo: cambiar el tamaño de todos los elementos p
p { font-size: 20px}
Problema: si sólo necesitamos señalar una etiqueta específica
EJEMPLO: PALABRA CLAVE <html>
<head>
<title>Atributo ID</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</body>
</html>
EJEMPLO: PALABRA CLAVE
REFERENCIANDO CON EL ATRIBUTO ID
El atributo id se utiliza para identificar un elemento.
El valor de id no puede ser duplicado.
La regla debe ser declarada con el símbolo # delante del valor que usamos para identificar el elemento.
#texto1 {font-size: 20px}
EJEMPLO ID <html>
<head>
<title>Atributo ID</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p id="texto1">Texto afectado por el estilo</p>
<p>Texto sin afectar por el estilo</p>
</body>
</html>
EJEMPLO ID
REFERENCIANDO CON EL ATRIBUTO CLASS
Declara un conjunto de reglas que se aplicarán a los elementos a los que le asignemos esa clase.
Pueden ser asignados a varios elementos de la misma página.
Se declara poniendo un punto antes del nombre.
.texto1 {font-size: 20px}
EJEMPLO: ATRIBUTO CLASS <html>
<head>
<title>Atributo ID</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p class="texto1">Mi texto</p>
<p class="texto1">Mi texto</p>
</body>
</html>
EJEMPLO: ATRIBUTO CLASS
EJEMPLO 2: ATRIBUTO CLASS Archivo HTML Archivo CSS
<html> <head> <title>Atributo ID</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <p class="destacado">Lorem ipsum dolor sit
amet...</p> <p>Nunc sed lacus et est adipiscing
accumsan...</p> <p>Class aptent taciti sociosqu ad
litora...</p> </body> </html>
.destacado { color: red; }
EJEMPLO 2: ATRIBUTO CLASS
EJEMPLO 3: ATRIBUTO CLASS
Archivo HTML Archivo CSS
<html>
<head>
<title>Atributo class</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<span class="error">Texto con la clase error</span>
<div class="aviso">Texto con la clase aviso</div>
</body>
</html>
.aviso {
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
EJEMPLO 3: ATRIBUTO CLASS
REFERENCIANDO CON EL ATRIBUTO CLASS
Es posible crear referencias más complejas.
Ejemplo: utilizar el mismo valor en diferentes elementos pero asignar diferentes estilos para cada tipo.
p.texto1 {font-size: 20px}
SELECTORES
Vamos a ver otras maneras de referenciar los elementos.
Una regla CSS está formada por una parte llamada selector y por otra parte llamada declaración.
La declaración indica qué hay que hacer, y el selector a quién hay que hacérselo.
A un mismo elemento HTML, se le pueden aplicar varias reglas CSS.
Una regla CSS se puede aplicar a varios elementos HTML.
SELECTORES Selector universal: se utiliza para seleccionar todos
los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML
SELECTORES Selector de tipo o etiqueta: Selecciona todos los
elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
SELECTORES El siguiente ejemplo aplica diferentes estilos a los
titulares y a los párrafos de una página HTML:
SELECTORES Si se quiere aplicar los mismos estilos a dos etiquetas
diferentes, se pueden encadenar los selectores separándolos con comas.
SELECTORES En las hojas de estilo complejas, es habitual agrupar las
propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos.
El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:
SELECTORES
AGRUPACIÓN DE REGLAS Es conveniente agrupar las distintas reglas aplicadas a
un estilo, para mejorar el mantenimiento.
Ejemplo:
HERENCIA Cuando se define una propiedad para un elemento,
ésta es heredada por sus descendientes.
Ejemplo:
En este caso, el color definido para la etiqueta body sería heredada por todos sus hijos.
HERENCIA <!DOCTYPE html> <head> <title>Ejemplo de herencia de estilos</title> <style type="text/css"> body { color: blue; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>
HERENCIA
Se puede anular el efecto de la herencia estableciendo de forma explícita otro valor para la propiedad que se hereda.
EJEMPLO HERENCIA <!DOCTYPE html> <head> <title>Ejemplo de herencia de estilos</title> <style type="text/css"> body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p { color: red; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>
BIBLIOGRAFÍA López Quijado, José. “Domine HTML y DHTML”. Ra-
Ma
Gauchat, Juan Diego. “El Gran Libro de HTML 5, CSS 3 y Javascript”. Marcombo.
Referencias:
http://www.w3schools.com/css
http://librosweb.es/css