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 ...

Código CSS Fondo de página Tutoriales CSS

Cambiar fondo de página en CSS

El fondo de una página web es algo que tenemos que aprender siempre a personalizar. Hay diferentes formas, pero si lo que deseamos es poder hacerlo utilizando código CSS, entonces hay que dedicarle un poco de tiempo a esta línea de código y cómo crearla. En el pasado esto se podía hacer en HTML, pero desde que se separó para darle estructura al HTML y el CSS para elementos de diseño, la tarea es s ...

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

Hojas de estilo CSS Editar web ...

CSS, creando hojas de estilo enlazadas

Las hojas de estilo son un elemento básico del desarrollo de una página web. Permiten modificar distintos parámetros de formato, que van desde el tamaño de fuente hasta el color del fondo o el tipo de fuente, entre otros. Se trata de archivos con extensión CSS (Cascading Style Sheets) y van componiendo diferentes aspectos dentro de una página HTML. La principal ventaja al usar hojas de estilo, es ...

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 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 ...

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 ...

Código CSS Cascading Style Sheets CSS ...

¿Qué es el código CSS y para qué lo utilizan?

En el mundo del desarrollo web existen algunos términos que se repiten constantemente. Quizás algunos ya los conozcas, pero no termines de saber a qué hacen referencia realmente. Por eso, hoy empezamos una serie de posts acerca de las bases del desarrollo de páginas web y terminología relacionada. Lo primero que aprenderemos es acerca del CSS, qué es y para qué sirve. ¿Qué es el código CSS y para ...