# Practica 2.1 Analisis de selectores ## [Ejemplo 1](https://gsyc.urjc.es/~mortuno/at/ej001_css_integrado.html) En el css lo primero que encontramos es 5 ajustes distintos, * para todo, p para parrafo, h1 para cabecera de tipo1 y 2 clases, .feo y .inverso. - El * hace que todos los fondos sean de color beige - El p hace que todos los parrafos sea de color azul, tengal el texto a la izquierda y su fondo sea de color amarillo - El .feo hace que las letras sean rojas y el color de fondo rosa - EL .inverso hace que las letras sean blancas y el color negro - El h1 hace que las letras sean violetras, este alineado al centro y la font sea mas grande. Y dentro del body enconramos un h1, dos parrafos ( al cual uno se le aplica una clase feo y por eso aparece esa) y un div con inverso ## [Ejemplo 2](https://gsyc.urjc.es/~mortuno/at/ej003_selectores_2.html) - .españa .toledo lo que hace es que todos os hijos de la clase españa que sean toledo tengan las letras rojas - .toledo hace que las letras sean de color azul - .toledo, .cuenca lo que hace es que si es cualquiera de las dos clases se centre en el medio - .castilla-la-mancha lo que hace es subrayar el texto dentro del body encontramos primero un div con las clases "pais españa" las cuaes como tal no hacen nada dentro de esos div enconramos la clase castilla la mancha que hace que el texto dentro de el este subrayado dentro del de castilla la mancha encontramos el div de toledo, que hace que las letras sean de color rojo porque aplica ser hijo de españa y se centre en el medio. Tambien esta el div de cuenca que hace que se cetre en el medio. Por ultimo esta el de albacete que no le aplica nada A la altura del primer div hay otro div con la classe pais estado unidos, que no aplica nada, dentro de ese enconramos otro div con la clas ohio que no hace tampoco nada y por ultimo otro div dentro de ohi con la clase toledo que hace que sea eltexto de color azul y este centrado ## [Ejemplo 3](https://gsyc.urjc.es/~mortuno/at/ej004_selectores_3.html) En el css lo primero que encontramos es 4 selectores distintos, todos relacionados con el id alfa: - #alfa hace que cualquier elemento que tenga el id alfa tenga el texto de color azul. - p#alfa hace que el párrafo que tenga el id alfa tenga el tamaño de letra al 200%. Es más específico que el anterior porque indica que tiene que ser un

con ese id. - div#alfa haría que un div con id alfa tuviera el fondo amarillo, pero en este documento no hay ningún div con ese id, así que esta regla no se aplica. - div #alfa (con espacio) hace que cualquier elemento con id alfa que esté dentro de un div tenga el texto en cursiva. Dentro del body encontramos primero un div que contiene tres párrafos. El segundo párrafo tiene el id alfa, por lo que: Se pone en color azul (por #alfa). Tiene el tamaño de letra al 200% (por p#alfa). Está en cursiva (por div #alfa, ya que está dentro de un div). No tiene fondo amarillo porque no es un div#alfa, sino un p con id alfa. Después del div hay otro párrafo (Párrafo 4) que no tiene id alfa y no está afectado por ninguna regla, por lo que se muestra con el estilo por defecto. ## [Ejemplo4](https://gsyc.urjc.es/~mortuno/at/ej004_selectores_3.html) En el css lo primero que encontramos es 3 selectores de clase, .urjc, .urjc.reglamento y .urjc, .reglamento. - El .urjc hace que todos los elementos que tengan esa clase tengan el texto de color rojo (#CB0017). - El .urjc.reglamento hace que los elementos que tengan las dos clases a la vez (urjc y reglamento) estén subrayados. - El .urjc, .reglamento hace que todos los elementos que tengan la clase urjc o la clase reglamento tengan el fondo de color azul claro (lightblue). Y dentro del body encontramos varios párrafos: Primero un párrafo sin clase, al cual no se le aplica nada. Después encontramos un párrafo con las clases "reglamento urjc", al cual se le aplica: El color rojo por tener la clase urjc. El fondo azul claro por tener urjc y también reglamento. El subrayado por tener las dos clases a la vez. Luego hay un párrafo con las clases "reglamento ucm", que: Tiene el fondo azul claro por tener la clase reglamento. No tiene el texto rojo porque no tiene la clase urjc. No está subrayado porque no tiene las dos clases a la vez. Después hay un párrafo con la clase "matriculacion", que no coincide con ningún selector del css y por eso no se le aplica nada. Luego encontramos un párrafo con las clases "investigacion urjc", que: Tiene el texto rojo por la clase urjc. Tiene el fondo azul claro por la regla .urjc, .reglamento. No está subrayado porque no tiene la clase reglamento. Por último hay un párrafo con las clases "investigacion uc3m", que no coincide con ningún selector definido y por eso no se le aplica ningún estilo. # Practica 2.2 Uso de selectores En el CSS lo primero que encontramos es 5 selectores distintos: * (selector universal), h1 (cabecera nivel 1), p (párrafos), una clase .p_distinto y un selector descendente div p. El * hace que todos los elementos de la página tengan el fondo de color rgb(206, 158, 158) (un tono rosado). El h1 hace que todos los títulos de tipo 1 tengan el texto azul y el fondo amarillo. El p hace que todos los párrafos tengan el color aqua y el texto centrado. La clase .p_distinto hace que el párrafo que la tenga sea de color chocolate y que el texto esté alineado a la derecha (end). El div p afecta solo a los párrafos que estén dentro de un div, poniendo su fondo negro. Dentro del body encontramos: Un h1 con el texto “PATATA”, que aparece con fondo amarillo y letras azules. Un primer párrafo que aparece en color aqua y centrado. Un segundo párrafo con la clase p_distinto, que por eso aparece en color chocolate y alineado a la derecha. Un div que contiene un párrafo; ese párrafo tiene el fondo negro (por el selector div p) pero mantiene el color aqua del selector p, ya que no se cambia el color del texto en div p. Finalmente, hay otro div sin contenido especial, que solo mantiene el fondo general definido por el selector *.