Tecnología

Pablo M. Francisco Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Fundamentos de CSS: Selectores

Selectores CSS: Fundamentos

Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. 

Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos.
Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducción.
Vamos al tema.
Cuando se trata se Selectores CSS, tenemos mucho para ver, puede ser un poco confuso al princípio pero te lo explicaré de forma sencilla.
Selectore no son otra cosa que los mismos elementos HTML que tenemos en nuestros documentos HTML, todas las etiquetas (tags) que usamos para estructurar nuestros documentos se convierten en Selectores CSS en nuetras Hojas de Estilo. Algunos de estos Selectores son bastante familiares para nosotros y son parte del lenguage de maquetació o armado HTML y otros son estructurados de forma diferente y son parte apenas del "lenguage" CSS.
CSS tiene diferentes versiones, cada una ha definido o introducido nuevos Selectores. Pero no es el tema deste post. Veremos aqui la lista de Selectores.
Selector Elemento
Selector Class
Selector ID
Selector Atributo
Pseudo (class) Selector Elemento

Llevan el mismo nombre que el elemento en HTML para poder manipularlo. Si tenemos un párrafo en nuestro documento HTML, este es un elemento (etiqueta), pero si lo queremos manipular en CSS entonces nuestro "p" se convierte en un Selector CSS, desta forma podemos aplicar una séria de reglas/estilos para alterarlo.

En resumen todo  elemento (etiqueta) HTML es un Selector CSS siempre que tenga un nombre predeterminado en HTML. Veamos el ejemplo:

p {text-align:center;}

Selector ==>p en html==><p></p>

Selector Class

Clases (class) son grupos de reglas que creamos y nombramos como mejor nos parezca. La ventaja de trabajar con Clases es que no les pasa lo mismo que a las IDs, pues los podemos reusar y aplicar la misma clase a varios elementos HTML, con lo que tendremos que con un Block de código afectará múltiples elementos, de esta manera simplificamos código.

Podemos nombrar las Clases como queramos pero en CSS Siempre empiezan con un Punto (.) seguido del nombre de la clase. Pueden contener caracteres especiales, mayúsculas, minúsculas y números (aunque números no son recomendables).

En el ejemplo vemos como manipulamos una clase llamada miclase.

.miclase {text-align:center;}

A tener en cuenta sobre las Clases.

Clases no son únicas.
podes atribuir una clase a varios elementos.
Podes tener elementos con múltiples clases.
Ponerle una clase a un elemento HTML no hace por defecto, necesitas atribuir reglas/estilos en CSS

Selector Id

Este usa la "iD" atribuída a un elemento HTML para seleccionarlo. Las "IDs" en HTML son únicas, podemos darle cualquier nombre pero no podemos atribuir la misma ID a mas de un elemento HTML en el mismo documento. En HTML la ID es un nombre precedido por el atributo id "id="nombre", pero en CSS la usamos precedida por # (hash). Veamos el ejemplo.

En HTML:

<div id="box1"></div>

Ahora le aplicamos las reglas/estilos en CSS

#box1 {text-align:center;}

A tener en cuenta sobre las IDs

IDs son únicas.
Cada elemento puede tener apenas una ID.
Cada documento puede tener apenas un elemento con esa ID.
Darle una ID a un elemento HTML no hace nada por defecto, necesitas atribuir reglas/estilos en CSS.
Cuidado con elementos HTML que ya tengan una ID atribuida, si la cambias pueden ocurrir errores, por ejemplo si esta ID fué asignada para disparar un Script.Por hoy hasta aqui llegamos para no dejar el post muy largo. En el próximo explicaremos sobre Atributos y Pseudo Clases.

Y como prometido, aqui les dejo los links para seguir a Maria Kovacs:

Blog: IFuckingLoveCoding

Twitter: MariaKovacs

Pablo M. Francisco

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Recomendamos

Relacionado

general

Fundamentos de CSS: Selectores Parte II

Selectores CSS: Fundamentos Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Esta es la segunda parte sobre Selectores CSS. Atributos Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes co ...

general curso blogger desde cero

Conoce el CSS de tu blog.

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

css Ejercicio CSS Cajas CSS ...

Desarrollo de Plantilla Web con CSS, Formularios HTML y PHP

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

Nuevo curso de html y css

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!! Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog. Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los ...

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

general

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

HTML: Nivel A1

Errores HTML de principiantes.

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web. El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de ...

general diseño

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...