id, clases, pseudo-clases<\/p>\n
Conceptos b\u00e1sicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tama\u00f1o, color, fondo, bordes, etc.<\/p>\n
Importante:
\n-moz (Mozilla) o -kevit (Chrome, Safari, Opera)<\/p>\n
Son posicionados uno sobre otro hacia abajo en la p\u00e1gina. (por defecto en los navegadores).<\/p>\n
Son posicionados lado a lado, uno al lado del otro en la misma l\u00ednea, sin ning\u00fan salto de l\u00ednea a menos que no haya m\u00e1s espacio horizontal para ubicarlos.<\/p>\n
Todas las reglas que especifican la disposici\u00f3n en la que ser\u00e1 organizada una p\u00e1gina web se le denomina \u00abModelo de Caja\u00bb<\/p>\n
<p style=\u00bbfont-size: 20px>Esto es un p\u00e1rrafo<\/p><\/p>\n
Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"es\">\r\n <head>\r\n <meta charset=\"UTF-8\">\r\n <title>Elementos en bloque<\/title>\r\n <style>\r\n p { font-size: 20px }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <p>Esto es un p\u00e1rrafo<\/p>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nArchivos externos<\/h2>\n\n- Tiene m\u00e1s ventajas que el m\u00e9todo de estilos embebidos<\/li>\n
- Facilita la actualizaci\u00f3n de los extilos<\/li>\n
- Se implementa mediante la etiqueta <link><\/li>\n<\/ul>\n
<!DOCTYPE html>\r\n<html lang=\"es\">\r\n <head>\r\n <meta charset=\"UTF-8\">\r\n <title>Elementos en bloque<\/title>\r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/estilos.css\">\r\n <\/head>\r\n <body>\r\n <p>Esto es un p\u00e1rrafo<\/p>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nestilos.css<\/p>\n
p{\r\n font-size:: 20px;\r\n}\r\n<\/pre>\nSelector Universal<\/h1>\n
Este selector representa cada uno de los elementos en el cuerpo del documento, y es \u00fatil cuando necesitamos establecer ciertas reglas b\u00e1sicas<\/p>\n
*{
\nmargin: 0;
\n}
\np:nth-child(2){
\nbackground: #999999;
\n}<\/p>\n
Referencia por etiqueta
\nReferencia por la palabra clave del elemento<\/p>\n
Referencia por id<\/p>\n
Problema
\nSupongamos que desemos implementar dos estilos diferentes a una misma etiqueta
\nLa respuesta m\u00e1s simple es hacer uso de un id<\/p>\n
<body>\r\n<p id=\"articulo\">Texto para el art\u00edculo<\/p>\r\n<p id=\"aside\">Texto para el aside<\/p>\r\n<\/pre>\nestilos.css<\/p>\n
p#articulo{\r\n font-size:: 20px;\r\n}\r\n\r\np#aside{\r\n color:: red;\r\n}\r\n<\/pre>\nPara referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarado con el s\u00edmbolo # delante del valor que usamos para identificar el elemento.<\/p>\n
Notas para las referencias en id<\/p>\n
\n- Es una referencia sumamente espec\u00edfica, ya que no debe de haber m\u00e1s de un elemento con el nombre del id<\/li>\n
- Normalmente se emplean los id para elementos estructurales<\/li>\n
- Suele emplearse m\u00e1s en JavaScript<\/li>\n
- CSS3 nos proporciona referencias m\u00e1s flexibles<\/li>\n<\/ul>\n
Referencias con el atributo class<\/p>\n
\n- Este atributo es m\u00e1s flexible<\/li>\n
- Puede ser asignado a cada elemento HTML en el documento que comparte un dise\u00f1o similar<\/li>\n<\/ul>\n
Se emplea de forma similar que el id s\u00f3lo que:
\n– En HTML, en vez de colocar id se coloca class<\/p>\n
<p class=\"principal\">Texto para el art\u00edculo<\/p>\r\n<p class=\"aside\">Texto para el aside<\/p>\r\n<\/pre>\nEn CSS3, en vez de colocar #, se coloca un punto (.)<\/p>\n
.principal{\r\n font-size:: 20px;\r\n}\r\n\r\n.aside{\r\n color:: red;\r\n}\r\n<\/pre>\nUn dato
\n\u00bfporqu\u00e9 colocar un punto antes de la referencia?
\nLa raz\u00f3n es que con las clases podemos construir referencias m\u00e1s complejas<\/p>\n
p.principal{\r\n font-size:: 20px;\r\n}\r\n\r\np.aside{\r\n color:: red;\r\n}\r\n<\/pre>\nDe esta manera, s\u00f3lo las etiquetas <p>, se ver\u00e1n afectadas por esta clase.<\/p>\n
Referenciando por cualquier otro atributo<\/p>\n
\n- Las nuevs especificaciones de CSS3 nos permite referenciar por cualquier otro atributo:
\n<p name=\u00bbespecial\u00bb>Referencia por cualquier otro atributo<\/p><\/li>\n - El CSS3 ser\u00eda:\n
p[name=\"especial\"] {\r\n font-size: 20px;\r\n color: red;\r\n }<\/pre>\n<\/li>\n<\/ul>\nReferencias locas<\/p>\n
p[name^=\"mi\"] {\r\n font-size: 20px\r\n}<\/pre>\n(^) Ser\u00e1 asignada a todo elemento <p> que contenga un atributo name con un valor comenzado en \u00abmi\u00bb.<\/p>\n
p[name$=\"mi\"] {\r\n font-size: 40px\r\n}<\/pre>\n(^) Ser\u00e1 asignada a todo elemento <p> que contenga un atributo name con un valor finalizado en \u00abmi\u00bb.<\/p>\n
p[name*=\"mi\"] {\r\n font-size: 60px\r\n}<\/pre>\n(^) Ser\u00e1 asignada a todo elemento <p> que contenga un atributo name con un valor que incluye el texto \u00abmi\u00bb.<\/p>\n
Referenciando con pseudo clases<\/p>\n
Consideremos el siguiente c\u00f3digo<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"es\">\r\n <head>\r\n <meta charset=\"UTF-8\">\r\n <title>Estilos con pseudo clases<\/title>\r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/estilos.css\">\r\n <\/head>\r\n <body>\r\n <div id=\"wrapper\">\r\n <p class=\"miestilo1\">P\u00e1rrafo1<\/p>\r\n <p class=\"miestilo2\">P\u00e1rrafo2<\/p>\r\n <p class=\"miestilo3\">P\u00e1rrafo3<\/p>\r\n <p class=\"miestilo4\">P\u00e1rrafo4<\/p>\r\n <\/div>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nLa etiqueta <div> agrupa a varias etiquetas <p>.
\nLa etiqueta <div> se considera una etiqueta padre.
\nLas etiquetas <p> son hijos de la etiqueta <div> y hermanos entre si.<\/p>\n
Las pseudo clases nos permiten hacer referencias considerando la estructura del documento<\/p>\n
p:nth-child(2)
\n{
\nbackground: #999999;
\n}<\/p>\n
En este caso p es el elemento clave
\nLa referencia nth-child() nos permite encontrar un hijo espec\u00edfico
\nEl 2 nos indica a que elemento hermano nos referimos
\nA continuaci\u00f3n se coloca el estilo que queramos utilizar<\/p>\n
Odd – even<\/p>\n
Son dos palabras reservadas.<\/p>\n
Odd afecta a los elementos hijos que poseen un n\u00famero impar.
\nEven afecta a los elementos hijos que poseen un n\u00famero par.<\/p>\n
Haciendo uso de odd y even, se facilita much\u00edsimo la tarea de alternar estilos en una serie de elementos cont\u00ednuos.<\/p>\n
*{
\nmargin: 0px;
\n}<\/p>\n
p:nth-child(odd)
\n{
\nbackground: #999999;
\n}
\np:nth-child(even)
\n{
\nbackground: #cccccc;
\n}<\/p>\n
Otras pseudo clases<\/p>\n
Existen otras importantes pseudo clases relacionadas con esta \u00faltima, como<\/p>\n
\n- firstchild – Referencia s\u00f3lo al primer hijo<\/li>\n
- last-child – Referencia al \u00faltimo hijo<\/li>\n
- only-child – Referencia a elementos padres que s\u00f3lo tienen un hijo<\/li>\n<\/ul>\n
Pseudo clase not()<\/p>\n
\n- Se emplea para realizar una negaci\u00f3n<\/li>\n
- Tiene el mismo alcance que un selector universal
\n*{
\nmargin: 0px;
\n}
\n:not(p){
\nmargin: 0px;
\n}<\/li>\n - Dentro de los par\u00e9ntesis podemos colocar la referencia que queramos<\/li>\n<\/ul>\n
En este caso estamos indicando con un selector universal * un margen de 0px (es decir sin margen) a todos los elementos de la p\u00e1gina.
\nCon la pseudo clase :not(p) le indicamos que a los elementos p no les afecte el margen de 0px, de tal manera que utilizar\u00e1n las caracter\u00edsticas por defecto del navegador o las que nosotros deseemos.<\/p>\n
Nuevos selectores<\/p>\n
Estos selectores usan los s\u00edmbolos <, + y div>p.mitexto2{
\ncolor: #990000;
\n}
\nLe decimos es este elemento( p.mitexto2) sea afectado siempre que tenga como padre un elemento div<\/p>\n
p.mitexto2 + p{
\ncolor: #990000;
\n}
\nEl elemento <p> inmediatamente inferior al elemento p con la clase (mitexto), se ver\u00e1 afectado por los estilos.<\/p>\n
p.mitexto2 ~ p{
\ncolor: #990000;
\n}<\/p>\n
El estilo ser\u00e1 aplicado a todos los elementos <p> que son hermanos y se encuentran luego del elemento <p> identificado con el valor mitexto2 en su atributo class.<\/p>\n","protected":false},"excerpt":{"rendered":"
id, clases, pseudo-clases Conceptos b\u00e1sicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tama\u00f1o, color, fondo, bordes, etc. Importante: -moz (Mozilla) o -kevit (Chrome, Safari, Opera) Estructura en Bloque … Continue reading