Anatomía de una Regla CSS: Selectores y Declaraciones

Jeyson David Vargas Crespo

La mejor....

Harrinson Quintero

Majo eres genial... Siempre grandiosas tus notas 🎉🎉🎉

Fausto Emilio Salgado Morales

Vale aclarar que el selector puede ser tanto un elemento conocido como p, h1, li, etc; como una clase, pseudo-clase, pseudo-elemento o id.

La diferencia es que a los elementos conocidos se les llama (se les inserta en CSS) mediante su propio nombre. Por ejemplo:

A las clases, pseudo-clases y pseudo-elemetos se les _llama _mediante un punto.

A los id se les _llama _mediante un numeral.

María José Ledesma

graciassss

Freddy Zanazzo

según lo que entendí esto no es asi; A las clases, pseudo-clases y pseudo-elemetos se les _llama _mediante un punto.

A las clases se le llama con un punto ejemplo: .main-nav__item a {}

A las pseudo clases se le llama con : ejemplo: .main-nav__item a:hover {}

A los pseudo elementos se les llama con :: ejemplo: .main-nav__item a::first-line {}

Sebastian Hernandez Matiz

creo que esta clase debia ir antes de la clase pasada.

Adrian Ferney Rivera Mantilla

Opino lo mismo, esta explicación es mas útil antes de la clase que mencionas.

Joel Dominguez Merino

También creería que seria el orden correcto. Pero platzi hace muy bien su planificación y por algo decidieron hacerlo así. También es verdad que verlo implementado primero es muy útil por que ya con este vídeo realmente terminas de entender la idea que te dieron en el anterior vídeo. Con este ya dices. aaaa ya entiendo como es la estructura de la regla.

Obed Paz

La estructura CSS se basa en reglas que tienen el siguiente formato:

Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto.

Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS para dar estilos.

Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.

Cada una de estas reglas se terminará con el carácter punto y coma (;).

Con todo esto le iremos indicando al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.

Matías Wasiak

Buen aporte!

Reynaldo Fuentes Garcia

Gracias por el aporte

Donny Daniel Vásquez Ramos

Miren cómo me quedó el header con mis links: https://donnyvasquez.github.io/Curso-definitivo-de-HTML-y-CSS/clasePseudoClases/

Carlos Adrian PACHECO PINILLA

great job, don´t stop to learn.....

Jonnier Martinez

Te quedo muy chévere

Carlos Eduardo Gomez García

El ";" en CSS es opcional cuando solamente estás aplicando una única regla CSS, de hecho incluso a veces se suele escribir en línea al ser una sola regla, lo comento para que no se sorprendan al ver que a veces hay reglas sin ";" en CSS

Diego Alejandro Moreno Pedroza

Aplicarlo siempre hace parte de las buenas prácticas, verdad?

Markin Piero Pulache Guarniz

me pregunto lo mismo diego porque algunas enpresas lo hacen asi con una sola linea, mejorara el rendimiento?

Yeisson Stik Gutierrez Rivera

Kevin Alonso Morán

Perfecto, la misma que aplica el profesor pero en español.

Gonzalo Vidal

Muchach@s para que no mezclen o confundan conceptos:

Fabiola Vanesa Castro Juárez

Jimmy Buriticá Londoño

Muy buen esquema

Reynaldo Fuentes Garcia

te quedo muy bien la explicación

Brayan Garcia Cuellar

Las reglas de CSS están conformadas de: Selectores Declaraciones Propiedades Valores

Existen varios tipos de selectores Selector de etiqueta Selector descendiente Selector de id: Selector de class:

Existen varios tipos de propiedades color: text-transform: align-items: font-weight:

Existen varios tipos de propiedades de valores #277cea; uppercase; center; 600;

Jonnier Martinez

Excelente aporte 🤖

Emanuel Salazar

Fabian Flores

Notas de la clase

Kevin Alonso Morán

Lo dejo escrito ya que muchos de mis compañeros han aportado imágenes:

Todo nuestro archivo de .CSS son reglas de estilos.

Estas se componen de ciertas cosas específicas • Primero tenemos el selector, pseudo selectores, pseudo clases o pseudo elementos. El selector es decirle a CSS qué elemento queremos modificar.

• Pondremos los dos Brackets {} y dentro de los mismos es donde introducimos la declaración del estilo. Se compone de una propiedad que es el estilo que vamos a aplicar, finalizado con dos puntos “:” y el valor que le vamos a aplicar finalizado con punto y coma “;” la cual aplicaremos al final de cada línea de esta declaración que estamos generando. Si no ponemos al final el punto y coma los estilos no funcionarán, lo mismo pasa al cerrar los Brackets.

Gianpierre Novoa Adrianzén

gracias compañero!

Pascual Rafael Lopez

para mi opionion esta clase, la tenia que impartir antes de la clase: pseudoclase y pseudoelementos.

Erick Ulises González Madriz

Estoy de acuerdo

Felix Manuel Figueroa Araujo

Entiendo por selector de elemento tres tipos:

- Selector Universal.
. Selector de clase.
Selector de id.

Roger Carlos Ariel Alba

Hola,

Realmente el resto también son selectores, más avanzados y menos usados, pero a veces te salvan la vida.

Irving Juárez

Si, de hecho el > es muy útil para saber con presión a que etiqueta uno se esta refiriendo.

Josue Granados

De hecho se pueden seleccionar varios elementos a la vez usando comas:

.header-top, .important-paragraph, a {
	background-color: aqua;
	color: white;
}

Usuario anónimo

User

✨ Una regla CSS siempre tiene un selector y una declaración.

Usuario anónimo

User

me parecen buenas imagenes:

Henry Alexander Velásquez Rosas

Cool! 😊

Efrain Montealegre Raga

Super!!!

Danilo Fernandez

Genial este curso, estoy aprendiendo mucho.

Joel Dominguez Merino

Ya tienes pensado un proyecto donde aplicar dichos conocimientos? Es importante que lo aprendido este aplicado para pulir cada detalle! Saludos ;D

Julio Bernaola Lozano