Bawo ni lati Fi Akọsilẹ CSS kan sii

Pẹlu awọn alaye ninu koodu CSS rẹ jẹ wulo ati ki o gíga niyanju.

Oju-aaye ayelujara gbogbo wa ni awọn eroja ti o jẹ eleto (eyi ti HTML ṣe apejuwe) bakannaa bi oju-ọna ti n bẹ tabi "wo ati lero" ti aaye naa. Awọn Aṣayan Awọn Ọja Cascading (CSS) jẹ ohun ti a lo lati ṣe apejuwe irisi ojulowo aaye ayelujara kan. Awọn apejọ wọnyi ni a pa lọtọ lati ọna HTML lati gba fun irorun ti imudojuiwọn ati ifojusi si awọn ọpa ayelujara.

Pẹlú iwọn ti complexity ti ọpọlọpọ awọn aaye ayelujara loni, awọn awọ ara ti le ni kiakia di ohun gigun ati gidigidi cumbersome lati ṣiṣẹ pẹlu awọn. Eyi jẹ otitọ paapaa nigbati o ba bẹrẹ si fi kun ni awọn ibeere ibeere fun awọn oju-iwe aaye ayelujara idahun . Awọn ibeere ti igbasilẹ nikan le fi iye ti awọn titun titun ṣe si iwe CSS ati ṣiṣe ki o le ṣoro lati ṣiṣẹ pẹlu. Eyi ni ibi ti awọn ọrọ CSS le di iranlọwọ ti ko ṣe pataki lori aaye ayelujara kan.

Awọn afikun awọn ọrọ si awọn faili CSS ti aaye ayelujara jẹ ọna ti o dara julọ lati fi aaye kun si awọn apakan ti koodu naa fun oluka eniyan ti nṣe atunyẹwo iwe naa. O tun jẹ ọna itaniloju kan fun ṣiṣe iru awọn aza fun aṣoju wẹẹbu ti o le ni lati ṣiṣẹ lori ojula ni ojo iwaju - pẹlu ara rẹ!

Ni ipari, awọn afikun CSS ṣe afikun fifunni yoo ṣe rọrun ti o jẹ ara lati ṣakoso. Eyi jẹ, nitootọ, pataki fun awọn awoṣe ara ti yoo ṣatunkọ nipasẹ awọn ẹgbẹ. A le lo awọn ifitonileti lati ṣe ibaraẹnisọrọ awọn ẹya pataki ti iwe-ara si awọn ẹgbẹ ẹgbẹ ti o jẹ pe o le ma faramọ pẹlu koodu tẹlẹ. Awọn alaye wọnyi le tun jẹ iranlọwọ pupọ fun awọn eniyan ti o ti ṣiṣẹ lori ojula ṣaaju ki wọn pada si koodu lẹhin ti o ba kuro ni akoko diẹ. Mo ti ni igbagbogbo lati ṣatunkọ aaye ayelujara ti mo kọ awọn osu tabi paapaa ọdun sẹyin ati pe awọn alaye ti a ṣe akojọpọ ni HTML ati CSS jẹ iranlọwọ iranlọwọ julọ! Ranti, nitori pe o kọ aaye kan ko tumọ si iwọ yoo ranti idi ti o ṣe awọn ohun ti o ṣe nigbati o ba pada si aaye yii ni ojo iwaju! Awọn alaye le ṣe awọn ipinnu rẹ ko o ki o si mu gbogbo awọn aiyedeedeede kuro ṣaaju ki wọn paapaa ṣẹlẹ.

Ohun kan lati ni oye nipa awọn ọrọ CSS ni pe wọn ko han nigbati oju-iwe naa ba n ṣe ni awọn burausa wẹẹbu. Awọn ọrọ naa jẹ alaye alaye nikan, gẹgẹbi awọn ọrọ HTML jẹ (biotilejepe iṣeduro ti o yatọ laarin awọn meji). Awọn ọrọ CSS wọnyi ko ni ipa ni ifihan iboju ti aaye kan ni eyikeyi ọna ati pe o wa ni koodu nikan.

Fifi ọrọ CSS kun

Fifi ọrọ ọrọ CSS kun jẹ ohun rọrun. O nìkan ṣe apejuwe ọrọ rẹ pẹlu titẹye ti o tọ ati ipari ọrọ afihan ọrọìwòye:

Ohunkóhun ti o han laarin awọn afi meji wọnyi yoo jẹ akoonu ti ọrọìwòye, ti o han nikan ni koodu ko si ṣe nipasẹ ẹrọ lilọ kiri ayelujara.

Ọrọìwòye CSS le jẹ ila kan, tabi o le gba awọn ila pupọ. Eyi ni apẹẹrẹ laini kan:

div # border_red {aala: pupa to dara julọ; } / * àgbegbe aala-aala-aarọ / /

Ati àpẹẹrẹ apẹẹrẹ:

/ *********************** ********************** ****** Style fun ọrọ koodu **************************** ************ *************** /

Pipin Awọn Aṣayan Jade

Ọkan ninu awọn ọna ti mo maa n lo awọn ọrọ CSS ni lati ṣaṣe iruwe ara mi ni kekere, diẹ sii awọn chunks disgestible. Mo fẹ lati ni anfani lati wo awọn apakan wọnyi ni iṣọrọ nigba ti mo ba lo faili naa nigbamii. Lati ṣe eyi, Mo maa n sọ awọn ọrọ pupọ pẹlu ọpọlọpọ awọn hyphens ninu wọn ki wọn pese awọn pipin ti o tobi, ti o han kedere ni oju-iwe ti o rọrun lati ri bi mo ṣe yarayara kiri nipasẹ koodu naa. Eyi jẹ apẹẹrẹ:

/ * ------------------------ Awọn Akọle Akọle ------------------------- ------- * /

Nigbati mo ba ri ọkan ninu awọn ọrọ wọnyi ninu koodu mi, Mo mọ pe o jẹ ibẹrẹ ti apakan titun ti iwe naa, o fun mi laaye lati ṣe iṣọrọ sii ati lati lo koodu naa.

& # 34; Ọrọìwòye Jade & # 34; Koodu

Awọn afiwe ọrọ igbaniwọle tun le wulo ninu ilana gangan ti ifaminsi ati n ṣatunṣe oju-iwe kan. Awọn alaye le ṣee lo lati "ṣafihan" tabi "pa" awọn agbegbe ti koodu naa lati wo ohun ti o ṣẹlẹ ti abala naa ko ba jẹ apakan ninu oju-iwe naa.

Nitorina bawo ni iṣẹ yii ṣe ṣe? Daradara, nitori awọn ọrọ afiye ọrọ sọ fun aṣàwákiri lati foju ohun gbogbo larin wọn, o le lo wọn lati mu awọn ẹya ara CSS kan kuro ni igba diẹ. Eyi le jẹ ọwọ nigbati n ṣatunṣe aṣiṣe, tabi nigbati o ba ṣatunṣe oju iwọn oju-iwe ayelujara.

Lati ṣe eyi, iwọ yoo fi ọrọ ọrọ idanimọ ṣiṣi silẹ nikan ni ibiti o fẹ ki koodu naa bẹrẹ si ni alaabo ati lẹhinna gbe ibi ti o fi opin si ibi ti o fẹ apakan ipinnu lati pari. Ohun gbogbo ti o wa laarin awọn afiwe wọnyi kii yoo ni ipa ni ifihan oju-aye ti aaye kan, ti o jẹ ki o dabu CSS lati wo ibi ti isoro kan le ṣẹlẹ. O le lẹhinna lọ ki o ṣe atunṣe ọrọ yii nikan ki o yọ awọn ọrọ lati koodu naa.

CSS Ọrọìwòye Awọn italolobo

Gẹgẹbi atunṣe atunṣe, nibi ni diẹ ninu awọn imọran lati ranti fun lilo awọn ọrọ ninu CSS rẹ:

  1. Awọn ifọrọranṣẹ le gba awọn ila ọpọlọ.
  2. Awọn ifitonileti le ni awọn ero CSS ti o ko fẹ ṣe nipasẹ aṣàwákiri kan, ṣugbọn kii ṣe fẹ lati pa patapata. Eyi jẹ ọna ti o dara julọ lati daabobo awọn oju-ara ti aaye ayelujara kan - kan rii daju lati yọ awọn aza ajeku (bi o lodi si sisọ wọn ṣe apejuwe) ti o ba pinnu pe o ko nilo wọn lori aaye ayelujara.
  3. Lo awọn igbasilẹ nigbakugba ti o ba kọ CSS idiju lati fikun imọran ati lati sọ fun awọn oludasilẹ iwaju, tabi ara rẹ ni ojo iwaju, nipa awọn nkan pataki ti wọn yẹ ki o mọ. Eyi yoo gba akoko idagbasoke fun ojo iwaju fun gbogbo awọn ti o ni ipa.
  4. Awọn ifitonileti le tun ni awọn alaye meta bi:
    • onkowe
    • ọjọ ṣẹda
    • alaye aṣẹ lori ara

Išẹ

Oro le jẹ iranlọwọ, ṣugbọn jẹ akiyesi pe awọn alaye diẹ ti o fi kun si aṣọ ti ara, oluṣowo naa yoo di, eyi ti yoo ni ipa lori iyara ati iṣẹ-ṣiṣe ti ojula kan. Eyi jẹ ibanujẹ gidi, ṣugbọn o yẹ ki o ṣiyemeji lati fi awọn ọrọ ti o wulo ati ẹtọ fun irọlẹ fun iberu pe išẹ yoo jiya. Awọn koodu ti CSS ko fi iwọn nla kan kun si iwe-ipamọ kan. Iwọ yoo nilo lati fi TONS awọn ila ti ọrọ ṣe afikun lati ṣe ipa nla lori iwọn faili CSS. Fikun ikunwọ awọn ọrọ ti o wulo sinu CSS rẹ ko yẹ ki o fun ọ ni ipa ikolu ti n bẹ lori iyara oju-iwe.

Ni ipari, iwọ yoo fẹ lati wa idiyele laarin awọn alaye iranlọwọ ati awọn ọrọ pupọ lati gba awọn anfani ti awọn mejeeji ninu awọn iwe CSS rẹ.

Atilẹkọ article nipasẹ Jennifer Krynin. Edited by Jeremy Girard lori 7/5/17