CSS Abans i CSS Després: com s'utilitza la propietat de contingut

Bloc

CSS Abans i CSS Després: com s'utilitza la propietat de contingut

El content La propietat de CSS defineix el contingut d'un element. Potser heu sentit a dir que aquesta propietat només s'aplica al ::before i ::after pseudo-elements. En aquest article, explorarem diversos casos d’ús del content propietat, inclòs fora dels pseudo-elements.

Valors acceptats

En primer lloc, fem una ullada a tots els valors acceptats del content propietat.

  • normal: Aquest és el valor per defecte. Computa a none quan s’utilitza amb pseudo-elements.
  • none: No es generarà un pseudo-element.
  • : Estableix el contingut a la cadena especificada. Aquesta cadena pot contenir seqüències d'escapament Unicode. Per exemple, el símbol de copyright:

    El content La propietat de CSS defineix el contingut d'un element. Potser heu sentit a dir que aquesta propietat només s'aplica al ::before i ::after pseudo-elements. En aquest article, explorarem diversos casos d’ús del content propietat, inclòs fora dels pseudo-elements.

    Valors acceptats

    En primer lloc, fem una ullada a tots els valors acceptats del content propietat.

    • normal: Aquest és el valor per defecte. Computa a none quan s’utilitza amb pseudo-elements.
    • none: No es generarà un pseudo-element.
    • : Estableix el contingut a la cadena especificada. Aquesta cadena pot contenir seqüències d'escapament Unicode. Per exemple, el símbol de copyright: \000A9.
    • : Estableix el contingut en una imatge o degradat mitjançant url() o linear-gradient().
    • open-quote | close-quote: Estableix el contingut en el caràcter de cita adequat a què fa referència el quotes propietat.
    • no-open-quote | no-close-quote: Elimina una cita de l'element seleccionat, però encara augmenta o disminueix el nivell de nidificació a què fa referència el quotes propietat.
    • attr(*attribute*): Estableix el contingut com a valor de cadena dels atributs seleccionats dels elements seleccionats.
    • counter(): Estableix el contingut com el valor d'un counter, normalment un número.

    Corda

    Un dels exemples més bàsics seria l’ús d’afegir corda contingut abans o després d’un element. En aquest exemple, afegirem un símbol d’enllaç abans d’un enllaç i afegirem l’URL de l’enllaç després d’aquest.

    a::before { content: '\1F517 '; } a::after { content: ' (' attr(href) ')'; }

    Fixeu-vos en l'espai després del caràcter Unicode a ::before pseudo-element i abans del primer parèntesi a ::after pseudo-element. Això crearà espai entre aquests i l'element pare.

    Com a alternativa, podeu afegir padding o margin als pseudo-elements per afegir separació.

    Pressupostos bàsics

    Amb el content propietat, podeu afegir cometes abans i / o després d’elements. Ara, en HTML, tenim el etiqueta. Això també afegirà cometes al voltant del seu contingut. Tanmateix, amb el content propietat, podem tenir més control sobre la implementació.

    Aquí teniu l’exemple més bàsic d’afegir cometes:

    També ho podeu fer mitjançant l'etiqueta HTML . Però potser volem donar un estil diferent a la cita. Així doncs, afegim només la cita inicial i no la cita final. I també estilitzem la cita inicial.

    p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) }

    El resultat:

    Imatge que mostra una cita d'estil únic a la part superior esquerra del paràgraf

    Pressupostos avançats

    També podem especificar on fem no vol pressupostos. Per exemple, és possible que citi algú que cita una altra persona. Per tant, tindríeu cometes entre cometes, que poden resultar confuses per al lector.

    A la part inferior del codi, fem servir HTML etiquetes, i després especifiqueu quines etiquetes no han de mostrar les cometes.

    A primera vista, podeu pensar que només hauríem d’eliminar el etiqueta on calgui. Però si especifiqueu on una cita no hauria de ser encara incrementa o disminueix el nivell de nidificació a què fa referència el quotes propietat.

    Per explicar-ho, hem d’entendre el quotes propietat. Això és simplement un conjunt de caràcters que s’han d’utilitzar a l’hora de citar. Aquí teniu un exemple:

    q { quotes: '' '' '‘' '’' '' ''; }

    Aquests són conjunts de cometes. El primer conjunt s'utilitzarà per al nivell superior de les cometes. El segon conjunt s'utilitzarà per a la primera cita imbricada. I el tercer conjunt s'utilitzarà per a la segona cita imbricada. I així successivament, si hi hagués més conjunts inclosos.

    Ara que entenem el quotes propietat, puc explicar com | | + _ | i no-open-quote les propietats funcionen.

    Per a cada nivell de cometes, podem assignar diferents conjunts de caràcters a utilitzar per a les cometes. Especificant on una cita no hauria de ser encara incrementa o disminueix el nivell de nidificació a què fa referència el no-close-quote propietat.

    Mireu l’exemple següent. Veureu que el segon nivell de cometes s’omet.

    #css # desenvolupament web # desenvolupador

    www.freecodecamp.org

    CSS Abans i CSS Després: com s'utilitza la propietat de contingut

    Explorarem diversos casos d’ús de la propietat de contingut, inclosos els pseudoelements. La propietat de contingut de CSS defineix el contingut d'un element. Potser heu sentit a dir que aquesta propietat només s'aplica als pseudo-elements :: before i :: after.

    0A9
    .
  • : Estableix el contingut en una imatge o degradat mitjançant url() o linear-gradient().
  • open-quote | close-quote: Estableix el contingut en el caràcter de cita adequat a què fa referència el quotes propietat.
  • no-open-quote | no-close-quote: Elimina una cita de l'element seleccionat, però encara augmenta o disminueix el nivell de nidificació a què fa referència el quotes propietat.
  • attr(*attribute*): Estableix el contingut com a valor de cadena dels atributs seleccionats dels elements seleccionats.
  • counter(): Estableix el contingut com el valor d'un counter, normalment un número.

Corda

Un dels exemples més bàsics seria l’ús d’afegir corda contingut abans o després d’un element. En aquest exemple, afegirem un símbol d’enllaç abans d’un enllaç i afegirem l’URL de l’enllaç després d’aquest.

a::before { content: 'F517 '; } a::after { content: ' (' attr(href) ')'; }

Fixeu-vos en l'espai després del caràcter Unicode a ::before pseudo-element i abans del primer parèntesi a ::after pseudo-element. Això crearà espai entre aquests i l'element pare.

Com a alternativa, podeu afegir padding o margin als pseudo-elements per afegir separació.

Pressupostos bàsics

Amb el content propietat, podeu afegir cometes abans i / o després d’elements. Ara, en HTML, tenim el etiqueta. Això també afegirà cometes al voltant del seu contingut. Tanmateix, amb el content propietat, podem tenir més control sobre la implementació.

Aquí teniu l’exemple més bàsic d’afegir cometes:

com comprar pancakeswap a nosaltres

També ho podeu fer mitjançant l'etiqueta HTML . Però potser volem donar un estil diferent a la cita. Així doncs, afegim només la cita inicial i no la cita final. I també estilitzem la cita inicial.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) }

El resultat:

Imatge que mostra una cita d'estil únic a la part superior esquerra del paràgraf

Pressupostos avançats

També podem especificar on fem no vol pressupostos. Per exemple, és possible que citi algú que cita una altra persona. Per tant, tindríeu cometes entre cometes, que poden resultar confuses per al lector.

torrades reaccionar-natives

A la part inferior del codi, fem servir HTML etiquetes, i després especifiqueu quines etiquetes no han de mostrar les cometes.

A primera vista, podeu pensar que només hauríem d’eliminar el etiqueta on calgui. Però si especifiqueu on una cita no hauria de ser encara incrementa o disminueix el nivell de nidificació a què fa referència el quotes propietat.

Per explicar-ho, hem d’entendre el quotes propietat. Això és simplement un conjunt de caràcters que s’han d’utilitzar a l’hora de citar. Aquí teniu un exemple:

q { quotes: '' '' '‘' '’' '' ''; }

Aquests són conjunts de cometes. El primer conjunt s'utilitzarà per al nivell superior de les cometes. El segon conjunt s'utilitzarà per a la primera cita imbricada. I el tercer conjunt s'utilitzarà per a la segona cita imbricada. I així successivament, si hi hagués més conjunts inclosos.

Ara que entenem el quotes propietat, puc explicar com | | + _ | i no-open-quote les propietats funcionen.

Per a cada nivell de cometes, podem assignar diferents conjunts de caràcters a utilitzar per a les cometes. Especificant on una cita no hauria de ser encara incrementa o disminueix el nivell de nidificació a què fa referència el no-close-quote propietat.

Mireu l’exemple següent. Veureu que el segon nivell de cometes s’omet.

#css # desenvolupament web # desenvolupador

www.freecodecamp.org

CSS Abans i CSS Després: com s'utilitza la propietat de contingut

Explorarem diversos casos d’ús de la propietat de contingut, inclosos els pseudoelements. La propietat de contingut de CSS defineix el contingut d'un element. Potser heu sentit a dir que aquesta propietat només s'aplica als pseudo-elements :: before i :: after.