Awọn kilasi ati awọn ID Ṣe iranlọwọ lati ṣe afikun CSS rẹ
Awọn oju-iwe ayelujara ti o kọlu lori oju-iwe ayelujara loni nbeere agbọye jinlẹ ti CSS (Awọn Ọpa Ikọja Cascading). Awọn ilana wọnyi ti o fun aaye ayelujara kan lati mọ bi o ṣe le ṣe ifilelẹ ninu window window. O lo ọpọlọpọ awọn "aza" si iwe HTML rẹ ti yoo ṣẹda oju ati oju ti oju-iwe ayelujara rẹ.
Awọn ọna pupọ wa lati lo iru awọn aza ti a ti sọ tẹlẹ kọja iwe-ipamọ kan, ṣugbọn ọpọlọpọ igba ti o fẹ lati lo ara kan lori awọn diẹ ninu awọn eroja ti o wa ninu iwe-ipamọ kan, ṣugbọn kii ṣe gbogbo awọn igba ti nkan naa.
O tun le fẹ lati ṣẹda ara ti o le lo si awọn eroja pupọ ninu iwe-ipamọ, laisi nini atunṣe ofin ara fun apeere kọọkan. Lati ṣe aṣeyọri awọn aza wọnyi, iwọ yoo lo kilasi ati awọn ero HTML ID. Awọn eroja wọnyi jẹ awọn eroja agbaye ti a le lo si fere gbogbo awọn tag HTML .Ni o tumọ si pe boya iwọ jẹ awọn ẹya ara ẹni, paragirafi, awọn asopọ, awọn akojọ tabi eyikeyi awọn iwe miiran ti HTML ninu iwe rẹ, o le yipada si awọn kilasi ati awọn ID ID si ran o lọwọ lati ṣe iṣẹ yii!
Awọn Yan iyasọtọ
Alakoso kilasi n fun ọ laaye lati ṣeto awọn aṣa pupọ si iru kanna tabi tag ni iwe-ipamọ kan. Fun apẹrẹ, o le fẹ lati ni awọn apakan ti ọrọ rẹ ti a npe ni awọ miiran lati awọn iyokù ti ọrọ inu iwe naa. Awọn wọnyi afihan awọn apakan le jẹ "gbigbọn" ti o n ṣeto lori oju-iwe naa. O le fi ipinwe rẹ pamọ pẹlu awọn kilasi bi eleyi:
p {awọ: # 0000ff; }
p.alert {awọ: # ff0000; }
Awọn aza wọnyi yoo ṣeto awọ ti gbogbo awọn parakafa si bulu (# 0000ff), ṣugbọn eyikeyi paragira ti o ni irufẹ kilasi ti "gbigbọn" yoo dipo nipasẹ ti a ṣe ni pupa (# ff0000). Eyi jẹ nitori pe ẹda kilasi ni ẹtọ ti o ga julọ ju ofin CSS akọkọ, eyi ti o lo oluṣakoso tag nikan.
Nigba ti o ba ṣiṣẹ pẹlu CSS, ofin ti o ni pato diẹ yoo ṣẹgun ọkan pataki kan. Nitorina ni apẹẹrẹ yii, ofin alakoso ti o ṣajọ awọ ti gbogbo awọn paragilofi, ṣugbọn awọn keji, ofin diẹ sii ju awọn aṣiṣe ti o ṣeto nikan ni diẹ ninu awọn paragirafi.
Eyi ni bi a ṣe le lo eleyi ni diẹ ninu awọn ami HTML:
Abala yii yoo han ni buluu, ti o jẹ aiyipada fun oju-iwe naa.
Paragira yii yoo tun jẹ bulu.
Ati pe paragira yii yoo han ni pupa niwon pe abala ti kilasi yoo ṣe atunṣe awọ awọ bulu ti o fẹlẹfẹlẹ lati aṣiṣe onirẹri aṣiṣe.
Ni apẹẹrẹ yii, ara ti "p.alert" nikan yoo lo pẹlu awọn ipinlẹ paradagi ti o lo pe "gbigbọn" class.If o ba fẹ lati lo kilasi naa ni ori awọn eroja HTML pupọ, iwọ yoo yọ nkan HTML kuro ni ibẹrẹ ipe ara (ṣe idaniloju lati fi akoko naa silẹ (.) ni ibi), bii eyi:
.alert {awọ-lẹhin-awọ: # ff0000;}
Ipele yii wa bayi si eyikeyi ohun ti o nilo rẹ. Eyikeyi nkan ti HTML rẹ ti o ni ẹtọ kilasi kan ti "gbigbọn" yoo bayi gba yi ara. Ni HTML ni isalẹ, a ni mejeji paragirafi ati ipele ipele 2 kan ti o lo kilasi "gbigbọn". Awọn mejeeji wọnyi yoo ni awọ-awọ pupa ti o da lori CSS ti a fihan nikan.
Igbese yii yoo kọ ni pupa.
Ati h2 yii yoo tun jẹ pupa.
Lori awọn aaye ayelujara loni, awọn eroja ibẹrẹ ni a maa n lo lori ọpọlọpọ awọn eroja nitori pe o rọrun lati ṣiṣẹ pẹlu awọn ifọkansi ti o ni ID. Iwọ yoo wa awọn oju-ewe HTML ti o wa lọwọlọwọ lati kún fun awọn eroja kilasi, diẹ ninu awọn ti a tun sọ ni igba pupọ ni iwe-ipamọ ati awọn miiran eyiti o le han ni ẹẹkan.
Awọn asayan ID
Oluṣakoso ID jẹ ki o fun orukọ ni aaye kan pato lai ṣe apejuwe rẹ pẹlu aami tabi HTML miiran. Sọ pe o ni pipin ninu iyasọtọ HTML ti o ni alaye nipa iṣẹlẹ kan.
O le fun ni pipin yiya ID ti "iṣẹlẹ", lẹhinna ti o ba fẹ lati ṣe apejuwe pipin naa pẹlu ihamọ dudu ti o jẹ 1-pixel ti o kọ koodu ID kan gẹgẹbi eyi:
#event {aala: 1px lagbara # 000; }
Ipenija pẹlu awọn alakoso ID ni pe a ko le ṣe atunṣe wọn ni iwe HTML. Wọn gbọdọ jẹ oto (o le lo ID kanna ni awọn oju-ewe pupọ ti aaye rẹ, ṣugbọn ni ẹẹkan ni iwe HTML kọọkan). Nitorina ti o ba ni awọn iṣẹlẹ mẹta ti gbogbo wọn nilo agbegbe yii, iwọ yoo nilo lati fun wọn ni ero ID ti "event1", "event2" ati "event3" ati ara wọn kọọkan. Nitorina, yoo ṣe rọrun pupọ lati lo ẹda ti kilasi ti a ti sọ tẹlẹ ti "iṣẹlẹ" ki o si ṣe gbogbo wọn ni ẹẹkan.
Ipenija miiran pẹlu awọn ID ID jẹ pe wọn ni ẹtọ ti o ga ju awọn eroja kilasi. Eyi tumọ si pe bi o ba nilo lati ni CSS ti o fi agbara mu ọna iṣeto ti iṣaju tẹlẹ, o le nira lati ṣe bẹ ti o ba ni igbẹkẹle ju aifọwọyi lori ID. O jẹ fun idi eyi pe ọpọlọpọ awọn olupolowo ayelujara ti lọ kuro ni lilo awọn ID ni fifisi wọn, paapaa ti wọn ba fẹ lati lo iye naa ni ẹẹkan, ati pe wọn ti yipada si awọn eroja ti kii ṣe pato-pato fun fere gbogbo awọn aza.
Ilẹ kan ni ibi ti awọn ID ID ti o wa sinu ere ni nigba ti o fẹ ṣẹda oju-iwe kan ti o ni awọn asopọ itọka oju-iwe. Fun apeere, ti o ba ni aaye ayelujara ti o ni parallax ti o ni gbogbo akoonu ti o wa lori oju-iwe kan pẹlu awọn ìjápọ ti "fo" si awọn oriṣiriṣi ẹya ti oju-iwe yii. Eyi ni a ṣe nipa lilo awọn ero ID ati awọn ìjápọ ọrọ ti o lo awọn ìjápọ ìdákọró.
Iwọ yoo ṣe afikun iye ti ẹmi yii, ti iṣaju ti o ti ṣaju, si ẹda href ti asopọ, bi eyi:
Eyi ni ọna asopọ
Nigbati o ba tẹ tabi fi ọwọ kan, ọna asopọ yii yoo de si apakan ti oju-iwe ti o ni iru ID yii. Ti ko ba si ero lori oju-iwe ti o lo nọmba ID yii, asopọ naa yoo ko ṣe ohunkohun.
Ranti, ti o ba fẹ ṣẹda oju-ewe ti o n sopọ mọ aaye kan, lilo awọn ID ID yoo nilo, ṣugbọn o tun le yipada si awọn kilasi fun awọn idiyele CSS gbogbogbo. Eyi ni bi mo ṣe ṣe akiyesi awọn oju-iwe ni ojulowo loni - Mo lo awọn oludari awọn kilasi bi o ti ṣee ṣe ki o si yipada si awọn ID nigbati mo nilo ẹda lati sise ko nikan gẹgẹbi kio fun CSS ṣugbọn tun gẹgẹbi ọna asopọ oju-iwe.
Atilẹkọ article nipasẹ Jennifer Krynin. Edited by Jeremy Girard lori 8/9/17