Klas ak idantifikasyon Èd Pwolonje CSS ou
Bati sou sit wèb sou entènèt la jodi a mande pou yon konpreyansyon pwofon nan CSS (Cascading Style Dra). Sa yo se enstriksyon yo ke ou bay yon sit entènèt detèmine ki jan li pral Layout nan fenèt la navigatè. Ou aplike yon seri de "Styles" nan dokiman HTML ou ki pral kreye gade nan epi santi w nan Paj Web ou.
Gen plizyè fason pou aplike estil sa yo susmansyone atravè yon dokiman, men souvan ou vle itilize yon style sou sèlman kèk nan eleman ki nan yon dokiman, men se pa tout sikonstans sa a eleman.
Ou ka vle tou kreye yon style ke ou ka aplike nan eleman plizyè nan yon dokiman, san yo pa gen repete règ la style pou chak egzanp endividyèl elèv yo. Pou yo rive nan estil sa yo vle, ou pral sèvi ak klas la ak HTML atribi attributes. Sa yo atribi yo se atribi mondyal ki ka aplike nan prèske chak HTML tag .Sa vle di ke si ou se divizyon manier, paragraf, lyen, lis oswa nenpòt nan moso yo lòt kote nan HTML nan dokiman ou, ou ka ale nan klas ak ID atribi nan ede ou akonpli travay sa a!
Gwoup selektè
Sèlktè klas la pèmèt ou mete plizyè estil pou menm eleman oswa tag nan yon dokiman. Pou egzanp, ou ta ka vle gen kèk seksyon nan tèks ou rele soti nan yon koulè diferan nan rès la nan tèks la nan dokiman an. Seksyon esansyèl sa yo ta ka yon "alèt" ke ou ap mete sou paj la. Ou ka bay paragraf ou yo ak klas tankou sa a:
p {koulè: # 0000ff; }}
p.alert {koulè: # ff0000; }}
Estil sa yo ta mete koulè a nan tout paragraf nan ble (# 0000ff), men nenpòt paragraf ki gen yon atribi klas nan "alèt" ta olye pou yo estile nan wouj (# ff0000). Sa a se paske atribi nan klas la gen yon espesifik ki pi wo pase règ la CSS premye, ki itilize sèlman yon selektè tag.
Lè w ap travay avèk CSS, yon règ ki pi espesifik pral pase sou yon mwens espesifik. Se konsa, nan egzanp sa a, règ la pi jeneral etabli koulè a nan tout paragraf, men dezyèm, règ la plis espesifik pase deegran ki mete sèlman sou kèk paragraf.
Men ki jan sa a te kapab itilize nan kèk markup HTML:
Paragraf sa a ta dwe parèt nan ble, ki se default la pou paj la.
Paragraf sa a ta tou nan ble.
Ak paragraf sa a ta dwe parèt nan wouj depi atribi nan klas ta recouvrir estanda koulè ble a soti nan eleman nan seleksyon eleman.
Nan egzanp sa a, style la nan "p.alert" ta sèlman aplike nan eleman paragraf ki itilize ke "alèt" klas.Si ou te vle sèvi ak klas sa a atravè plizyè eleman HTML, ou ta senpleman retire eleman nan HTML depi nan konmansman an nan style rele (jis asire w ke ou kite peryòd la (.) nan plas), tankou sa a:
.alert {background-color: # ff0000;}
Klas sa a disponib kounye a nan nenpòt eleman ki bezwen li. Nenpòt moso nan HTML ou ki gen yon valè atribi klas nan "alèt" pral kounye a jwenn sa a style. Nan HTML ki anba a, nou gen tou de yon paragraf ak yon nivo 2 ki itilize klas "alèt" la. Tou de nan sa yo ta gen yon background-koulè nan wouj ki baze sou CSS la nou jis te montre.
Paragraf sa a ta ekri nan wouj.
Lè sa a h2 ta tou wouj.
Sou sit entènèt jodi a, atribi klas yo souvan itilize sou pifò eleman paske yo pi fasil yo travay avèk soti nan yon pèspektiv espesifik ke IDs yo. Ou pral jwenn paj ki pi aktyèl HTML yo dwe ranpli ak atribi klas yo, kèk nan yo repete plizyè fwa nan yon dokiman ak lòt moun ki ka parèt sèlman yon fwa.
ID selektè
Selektè ID a pèmèt ou bay yon non nan yon style espesifik san asosye li ak yon tag oswa lòt HTML eleman . Di ou te gen yon divizyon nan makiyaj HTML ou ki gen enfòmasyon sou yon evènman.
Ou ta ka bay divizyon sa a yon atribi ID nan "evènman", ak Lè sa a, si ou te vle dekri ke divizyon ak yon 1-pixel lajè fwontyè nwa ou ekri yon kòd ID tankou sa a:
#event {fontyè: 1px solid # 000; }}
Defi a ak selektè ID se yo ke yo pa ka repete nan yon dokiman HTML. Yo dwe inik (ou ka itilize ID a menm sou paj miltip nan sit ou, men se sèlman yon fwa nan chak dokiman HTML endividyèl). Se konsa, si ou te gen 3 evènman ke tout bezwen fwontyè sa a, ou ta bezwen ba yo id atribi nan "event1", "event2" ak "event3" ak style chak nan yo. Li ta, Se poutèt sa, yo dwe pi fasil yo sèvi ak atribi nan klas susmansyone nan "evènman" ak style yo tout nan yon fwa.
Yon lòt defi ak atribi ID yo se yo ke yo gen yon espesifik ki pi wo pase atribi klas yo. Sa vle di ke si ou bezwen gen CSS ki deplase yon style ki deja etabli, li kapab difisil pou fè sa si ou te konte twò lou sou IDs. Li se pou rezon sa anpil devlopè entènèt yo te deplase lwen lè l sèvi avèk idantite nan markeup yo, menm si yo sèlman gen entansyon itilize valè sa a yon fwa, epi yo olye tounen nan atribi yo klas mwens-espesifik pou prèske tout estil.
Zòn nan yon sèl kote atribi ID antre nan jwe se lè ou vle kreye yon paj ki gen nan-paj jete lank. Pou egzanp, si ou gen yon sit entènèt style parallax ki gen tout kontni an sou yon sèl paj ak lyen ki "so" nan divès pati nan paj sa a. Sa a se fè lè l sèvi avèk atribi ID ak lyen tèks ki itilize sa yo jete lank.
Ou ta senpleman ajoute valè a nan atribi sa a, anvan pa # senbòl la, nan atribi a href nan lyen an, tankou sa a:
Sa a se lyen la
Lè klike oswa manyen, lyen sa a pral so nan paj la ki gen sa a atribi ID. Si pa gen okenn eleman nan paj sa a itilize valè ID sa a, lyen an pa ta fè anyen.
Sonje, si ou vle kreye nan-paj ki lye ak sou yon sit, yo pral mande pou yo itilize idantite ID, men ou ka toujou ale nan klas pou objektif jeneral CSS. Sa a se ki jan mwen make paj jodi a - Mwen itilize selektè klas otan ke posib epi sèlman vire nan IDs lè mwen bezwen atribi a aji pa sèlman kòm yon zen pou CSS, men tou kòm yon lyen nan paj.
Original atik pa Jennifer Krynin. Edited pa Jeremy Girard sou 8/9/17