SEGURO PARA

LIBERAR
EXCEPCIONES
5TO SEMESTRE ANTERIORES A CR
DOCENTE: ING. JOOFRE HONORES

INTEGRANTES:
• ERIKA CÓRDOVA
• ROBERT CUN
• HUMBERTO CORREA
• ANDRÉS CARRIÓN
OBJETIVO:
C ONOC ER LOS S EGU ROS PA RA LIBERA R EX C EPC IONES A NTERI ORES
A C R MEDIA NTE LA BÚ S QU EDA DE INFORMAC IÓ N PA RA U NA
BUENA COMPRESIÓN DEL TEMA .
ÍNDICE DE SELECCIÓN
SELECTOR UNIVERSAL

 El selector universal sirve para

seleccionar, con ayuda de un joker (el
* {
carácter *) cada elemento del árbol margin: 0;
del documento y vincularlo con una padding: 0;
instrucciones determinada. Una }
instrucción muy típica es la siguiente:

* Con esta instrucción se da el valor cero, por ejemplo, a las distancias de todos los elementos (*)
predefinidas por el navegador.
SELECTOR DE ELEMENTO O DE TIPO

 La referencia se indica • Para asignar a varios elementos

mediante la etiqueta, por las mismas propiedades,
ejemplo: podemos formar un grupo con
los selectores de elemento
h1 { correspondientes:
color: #000033;
} h1, h2, h3 {
color: #000033;
}

* En este caso se ha asignado el color azul a los tres tipos de título. Observe que los selectores han de
ir separados mediante comas (,).
SELECTORES DE CLASE

 Siguiendo el ejemplo anterior,

suponiendo que nos encontramos
en una situación en que algunos
de los títulos <h2> no tienen que
ir en azul sino en rojo y negrita – <h2 class=”rojo-negrita”>
como excepción. Para situarse así, Título rojo negrita
CSS nos ofrece el selector de </h2>
clase.
 En primer lugar, asigne en el
código HTML del título un
atributo de clase propio
(class=”..”).
SELECTORES DE CLASE
 Ahora escribamos en la hoja de estilo
la instrucción especial que ha de
aplicarse a esa clase. Para ello, sólo
tiene que añadir el nombre de la clase
al selector de elemento, separado
mediante un punto (.), sin espacios en
blanco.
h2.rojo-negrita {
color: #330000;
font-weight: bold;
} color: #330000;
• A partir de ahora que necesite un
título rojo y negrita, sólo tiene que
asignarle la clase rojo-negrita. Incluso
se puede ir más lejos. Si en algún
momento dado se necesita de un
título <h3> (o cualquier otro
elemento) en rojo y negrita – no
vincule la clase a ningún otro
elemento concreto.
.rojo-negrita {
font-weight: bold;
}
SELECTORES ID

 Permiten asignar nombres significativos <h1 id=”verde-negrita”>

a elementos HTML concretos. A Título verde en negrita
diferencia de los selectores de clase, </h1>
que sirven para un tipo de elementos
(por ejemplo, todos los elementos del
tipo <h1>) y que se pueden utilizar La instrucción en CSS
dentro de un documento todas las correspondiente será entonces así:
veces que se desee, los selectores ID se
utilizan para un solo elemento (por h1#verde-negrita {
ejemplo, un <h1>) y que se pueden color: #003300;
utilizar dentro de un documento todas }
las veces que se desee, los selectores
ID se utilizan para un solo elemento
SELECTORES AVANZADOS

 En los grandes proyectos Web, con el tiempo se acaban acumulando una gran
cantidad de formatos específicos para los diversos documentos. El resultado, a
menudo, es un código fuente plagado de clases de todo tipo para cada página, por
lo que al hacer modificaciones, o ajustes, es fácil pasar por alto algún detalle. Para
situaciones así lo más práctico es utilizar los selectores contextuales en las
anotaciones de estilo.
SELECTOR DESCENDIENTE (DESCENDANT SELECTORS)
 El color definido para la escritura en
general ha sido el negro. Por eso,
hemos creado una clase especial para
este caso concreto: class=”rojo” y la
hemos asignado a los
correspondientes párrafos de texto:
<div id=“infoespecial”>
<p class=“rojo”>Texto
habitual</p>
<p class=“rojo”>más
texto</p>
<p class=“rojo”>más
texto</p>
</div>
En lugar de asignar una clase, asignamos
el formato de <p> en el contexto de su
elemento inmediatamente superior. Lo
que en nuestro ejemplo sería:
#infoespecial p {
color: #ff0000;
}
Eso significa que dentro del elemento con el
ID #infoespecial (y sólo ahí) todos los <p>
tendrán el color rojo (#ff0000).
SELECTOR DESCENDIENTE (DESCENDANT SELECTORS)
 El código fuente permanece igual,
sin ninguna clase especial:
<div id=”infoespecial”>
<p>Texto en general</p>
<p>más texto</p>
<p>más texto</p>
</div>
Los selectores descendientes se
pueden incrustar en más niveles.
Supongamos que ha definido el
subrayado para los vínculos que
aparecen en el contexto de un
elemento cuyo ID es #contenido:
#contenido a {
text-decoration: underline;
}
ÍNDICE DE REGLA
.

INDICE DE REGLA

Regla-at: Declaración CSS que comienza con ‘@’, seguido por un identificador, e
incluye todo el contenido hasta el siguiente punto y coma, ';' o el siguiente bloque
CSS, lo que sea primero.

@charset.- especifica la codificación de caracteres usada en la hoja de estilos. Éste

debe ser el primer elemento en la hoja de estilos. Al no ser una declaración anidada,
no puede ser usada dentro de grupos de reglas-at condicionales.

EJEMPLO:
@charset "UTF-8"; Establece la codificación de la hoja de estilos a Unicode UTF-8
@charset 'iso-8859-15’; Establece la codificación de la hoja de estilos a Latin-9
(idiomas de Europa Occidental, con símbolo de euro)
 INDICE DE REGLA

@import.- Permite importar reglas desde otras hojas de estilo. Estas reglas deben
preceder a todos los otros tipos de reglas, excepto a las reglas @charset; como esto
no es una declaración anidada, no puede ser usado dentro de grupos condicionales
de reglas-at.

EJEMPLO:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

@namespace.- Indica al motor de CSS que todo el contenido usa como prefijo un
espacio de nombres XML.
 INDICE DE REGLA

REGLAS-AT ANIDADAS
subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como
grupos de reglas condicionadas internas.

@media.- asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una
condición definida por un media query. Puede ser usada dentro de cualquier grupo de reglas condicionales.
EJEMPLO:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
 INDICE DE REGLA

REGLAS-AT ANIDADAS
@document.- Un grupo de reglas condicionadas que aplicará su contenido si el
documento donde se aplica la hoja de estilos cumple los criterios de la condición
dada. (diferida al Nivel 4 de la Especificación CSS)

EJEMPLO:
@document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org) {
body {
color: purple;
background: yellow;
}
}
 INDICE DE REGLA

REGLAS-AT ANIDADAS
@page.- Es usada para modificar algunas propiedades CSS cuando se va a imprimir
una página web. No se pueden cambiar todas las propiedades CSS con @page, solo
los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de
cambiar otra propiedad será ignorada.

EJEMPLO:
@page :first {
margin-left: 50%;
margin-top: 50%;
}
 INDICE DE REGLA

<html>
REGLAS-AT ANIDADAS <head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face.- Permite al autor especificar @font-face {
fuentes online para visualizar en sus páginas font-family: "Bitstream Vera Serif Bold";
web. Al permitir a los autores proporcionar src:
url("http://developer.mozilla.org/@api/deki/files/2934/=Vera
sus propias fuentes SeBd.ttf");
}
EJEMPLO:
body { font-family: "Bitstream Vera Serif Bold", serif }
Este ejemplo simplemente especifica una </style>
fuente que puede ser descargada para utilizar, </head>
aplicando la fuente a todo el cuerpo del <body>
This is Bitstream Vera Serif Bold.
documento. </body>
</html>
 INDICE DE REGLA
REGLAS-AT ANIDADAS
@keyframes.- permite controlar los pasos intermedios en una secuencia de
animación CSS mediante el establecimiento de keyframes.

@viewport.- Describe los aspectos del viewport para dispositivos de pantalla

pequeña.

@counter-style.- Define estilos de contador específicos que no son parte de los

conjuntos de estilos predeterminados.

@font-feature-values (junto con @swash, @ornaments, @annotation,

@stylistic, @styleset y @character-variant).- Define nombres comunes para
la propiedad font-variant-alternates.
 INDICE DE REGLA

GRUPO DE REGLAS CONDICIONALES

Las regla-at reglas pueden ser agrupadas en categorías especiales, llamadas conditional group rules. Estas
declaraciones incluyen algún tipo de condición, que devuelve un resultado que puede ser verdadero o falso. Si el
valor de la condición resulta verdadero, todas las declaraciones del grupo serán aplicadas.
Los grupos de reglas condicionales están definidos en CSS Conditionals Level 3 y son:
@media,
@supports,
@document. (diferida al Nivel 4 de la Especificación CSS)
 INDICE DE REGLA

GRUPO DE REGLAS CONDICIONALES

@media.- Asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado

por llaves, con una condición definida por un media query. Puede ser usada no también
dentro de cualquier grupo de reglas conditionales.

Sintaxis
@media <media-query-list> {
<group-rule-body>
}
 INDICE DE REGLA

GRUPO DE REGLAS CONDICIONALES

@supports.- Asocia un conjunto de declaraciones anidadas en un bloque CSS con una

condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor,
así como conjunciones, disjunciones o negaciones abritrarias sobre ellas).

Sintaxis
@supports <supports-condition> {
<group-rule-body>
}