Waa maxay CSS? Shaqada ugu weyn ee qalabkan!

¿Waa maxay CSS? Kaalay oo ka ogow maqaalkan xiisaha leh. CSS waxay u dhalatay inay weligeed beddesho fikradda naqshadaynta iyo shaqaynta bogagga shabakadda.

¿Waa maxay CSS?

Waa luuqad qaabeysan oo loogu talagalay in lagu qeexo dhinacyada muuqaalka ee walxaha elektiroonigga ah ee la abuuray iyadoo la adeegsanayo HTML iyo XHTML, sida: midabka, cabbirka, muuqaalka, iwm. Asal ahaan, waxay isku daydaa inay magdhowdo xaddidnaanta naqshadeynta iyo kakanaanta HTML.

Had iyo jeer ma aha qaababka lagu daro mid kasta oo ka mid ah qaybo ka mid ah bogga internetka waxay buuxiyaan shuruudaha naqshadeeyaha. Si kastaba ha ahaatee, CSS ayaa ah habka ugu wanaagsan ee lagu beddeli karo sida walxaha loogu arko shaashadda, maadaama ay kala soocdo waxa ku jira iyo soo bandhigidda.

Dhinaca kale, CSS waxay u oggolaanaysaa abuurista dukumiintiyo si fiican loo qeexay, oo leh macne dhammaystiran, laakiin ka dhib yar, si sahlan loo heli karo oo si sahlan loo joogteyn karo. Intaa waxaa dheer, waxay u oggolaanaysaa in dukumiintiyadan laga daawado meel kasta ama aalad kasta.

Evolution

Dhalashada waxaa sabab u ah kor u kaca internetka iyo ballaarinta luuqadda HTML ee horumarinta dukumiintiyada elektaroonigga ah. Mabda 'ahaan, ma jirin halbeegyo lagu hagaajin karo dukumintiga noocan ah, taas oo daruuri ka dhigtay in la abuuro luuqad xaashi ah oo u oggolaanaysa qaabab kala duwan in si joogto ah loo dabaqo.

CSS waxay si rasmi ah u soo muuqatay 1995, oo ka dhalatay midowga CHSS iyo SSP, soo jeedinno loo soo bandhigay World Wide Web Consortium (W3C), iyada oo la raadinayo sidii loo gaari lahaa jaangooynta luuqadda qaababka waraaqaha ee luqadaha HTML.

Sannad ka dib, W3C waxay sii daysay talooyinkeedii rasmiga ahaa ee ugu horreeyay, oo la odhan jiray heerka CSS 1. Hase yeeshee, sannadkii 1997kii waxay go'aansatay inay kala soocdo shaqada CSS iyo shaqada DOM iyo HTML. Markaa sanadkii 1998, kooxda ka shaqaysa CSS waxay sii daysay soo jeedinteedii ugu horreysay oo gooni ah, taas oo ay ugu yeedhay heerka CSS 2.

Ku dhawaad ​​toban sano ka dib, 2007dii, cusboonaysiintii ugu dambeysay ee la yaqaanay ee heerka CSS 2 ayaa la sameeyay, oo la yiraahdo CSS 2.1. Dhab ahaantii, nuqulkan ayaa ah kan weli lagu isticmaalo daalacashada maanta.

Waxaa la ogyahay in si isbarbar yaac ah, W3C ay horumarinaysay waxa noqon lahaa talinta heerka CSS 3. Si kastaba ha ahaatee, in kasta oo xubno ka mid ah lagu daray daalacayaasha, haddana weli wax rasmi ah lagama hayo.

Waxa kale oo la og yahay in la qabsiga daalacashada, oo u xilsaaran fasiraadda HTML iyo CSS koodhka si sawirrada loogu soo bandhigo matoorkooda, ma ahayn wax fudud. Aad ayay u badan tahay in nooca koowaad ee taageerada buuxda ee CSS la daabacay sannadkii 2000. Waxay tixraacday heerka CSS 1 waxayna ka tirsan tahay biraawsarka Internet Explorer 5 ee Mac.

Marka la eego arrintan, waxay u muuqataa in xilligan, daalacashada Safari iyo Opera ay yihiin kuwa ugu dhow taageerada la doonayo ee CSS, maadaama ay ku jiraan dhinacyo ka mid ah dib -u -eegista CSS 3 ee aan la dhammayn, waxayna siiyaan taageero aad u fiican nooca 2.1. Waxaa soo raaca Firefox iyo Google Chrome, laakiin taageeradooda nooca 3 weli waa mid aad u horumarsan.

Dhinaceeda, Internet Explorer illaa nooca 6 ayaa soo bandhigay cillado calaamad u ah taageerada uu u baahan yahay CSS 2.1.

Sidee CSS u shaqaysaa?

Asal ahaan, marka la samaynayo bogga mareegaha iyada oo la adeegsanayo luuqadaha HTML iyo HTML, waxa ku jira iyo shaqooyinka qayb kasta oo ku jira bogga waa la qeexay. Marka xigta, iyada oo loo marayo luuqadda CSS ayaa muuqaalka muuqaalka ee cunsur kasta la aasaasay, tusaale ahaan: nooca iyo cabbirka farta ee qoraalka, kala -goynta cutubyada, booska walxaha, iwm.

Qaababka

CSS waa luqad isticmaalkeedu ku dhex qarxay naqshadeeyayaasha webka. Tani waxay uga mahadcelineysaa faa'iidooyinkeeda cajiibka ah, waxaa ka mid ah:

• Waa mid dabacsan, oo bixisa habab kala duwan oo lagu fulin karo hawl isku mid ah. Tani waxay soo saartaa saddex siyood oo lagu daro CSS dukumintiga HTML ee elektaroonigga ah: dukumintiga laftiisa, faylka dibedda, iyo walxaha HTML dhexdooda.
• Qaabab kala duwan ayaa loogu qeexi karaa warbaahinta kala duwan, oo ay ku jiraan: mashruucyo, shaashado, kormeerayaal, iyo aaladaha mobilada, iwm.
• Wuxuu qeexayaa guryaha gaarka ah ee warbaahinta qaarkood, oo kuu oggolaanaya inaad wax ka beddesho qaabka bogga iyadoo ku xiran shaqeynta aaladda. Tani waxay keenaysaa jiritaanka afar xeer si loo dhiso warbaahinta loo adeegsan doono qaababka CSS: @media, @import, tag , iyo midka tixraacay isku darka warbaahinta kala duwan.
• Marka qiimaha hantida lagu saleeyo curiye, dhammaan farcankii curiyahaasi waxay dhaxlaan isku qiimo.

Elements

Qaababka xaashida CSS waxay ka kooban yihiin waxyaabaha aasaasiga ah ee soo socda:

• Xeerka: Waxay ka kooban tahay mid kasta oo ka mid ah qaababka lahaanshaha xaashida qaabka CSS. Taa baddalkeeda, waxay ka kooban tahay xullayaal iyo bayaanno.
• Xulaha: Waxaa loola jeedaa qaybta HTML ee qaabka loo adeegsan doono.
• Caddayn: Kani waa tilmaamaha qaababka lagu dabaqo canaasiirta. Wuxuu ka koobnaan karaa hal ama dhowr hanti. Iyada oo la adeegsanayo bayaannada, waxaa loo caddeeyay waxa loo baahan yahay in la qabto.
• Hantida: Waxay suurtogal ka dhigaysaa in wax laga beddelo muuqaalka hal ama dhowr xubnood.
• Qiime: Waa natiijada isbeddelka astaamaha canaasiirta.

Guud ahaan, faylka CSS wuxuu ka kooban yahay qaabab dhowr ah, oo mid walba uu ka koobnaan karo tiro badan oo ah walxo. Sidoo kale, qeexidda qaabku waxay ka koobnaan kartaa isku -dar hanti / qiime kala duwan.

Xulayaasha

Xulayaasha ayaa lagama maarmaan u ah abuurista bogagga shabakadda, maaddaama ay yihiin kuwa tilmaamaya qodobka ay tahay in la adeegsado qaabka CSS. Waxay dammaanad qaadayaan habka saxda ah ee loo sameeyo, iyagoo u oggolaanaya xulashada saxda ah ee walxaha ku jira bogga shabakadda.

In kasta oo ay jiraan dhowr nooc oo xulanaya, shanta ugu waaweyn ayaa hoos lagu magacaabi doonaa:

• Universal: Waxaa lagu garto xidig. Waxay doorataa dhammaan waxyaabaha ku jira bogga, taas oo ka dhigaysa xulashada adeegsiga yar, maadaama aysan ahayn mid soo noqnoqota in qaab isku mid ah loo baahan yahay in lagu dabaqo dhammaan walxaha bogga.
• Nooca ama sumadda: Waxaa la adeegsadaa marka summada HTML ee walxaha bogga ay la jaanqaadaan qiimaha xulaha. Isticmaalkeeda, waxaa kaliya looga baahan yahay inay tilmaamto magaca sumadda la xiriirta cunsurka la xulayo. Guud ahaan, waxaa lagu dabaqaa qaybaha curyaaminta.
• Soo dega: Waxaa loola jeedaa xulashada canaasiirta u dhaxaysa furitaanka iyo xidhitaanka summadaha canaasiirta kale. Taasi waa, waxay doorataa canaasiirta ku dhex jirta xubno kale, kuwaas oo qaababka kala duwan ee CSS loo adeegsan karo, inta ay isku nooc yihiin. Waxay hubisaa saxnaanta nooca ama xulayaasha summada.
• Fasalka: Xallinta xaddidaadaha xulashada saddexda nooc ee hore ee xulayaasha, maadaama ay oggolaanayso in lagu dabaqo qaabab hal shay oo bogga ah, iyadoo si toos ah loo aqoonsanayo xeerka. Aad bay waxtar ugu leeyihiin naqshadeynta bogga adag, maaddaama isla qiimihii sifaha fasalka lagu dari karo dhowr qodob oo isla boggaas ah.
• Laga soo bilaabo Aqoonsiga: Waxay hagaajisaa hufnaanta xulashada fasalka ee ku -dabaqidda qaababka hal shay oo ku yaal bogga. Waxay shaqeysaa markaad rabto inaad ku xusho cunsur iyada oo loo marayo sifo aqoonsi. Qiimaha sifahan laguma soo celin karo wax ka badan hal element isla bogga.

Waxaa muhiim ah in la ogaado in CSS ay oggolaanayso adeegsiga isku -darka kala duwan, laga bilaabo xulayaashan aasaasiga ah.

Propiedades

Sida hore loo soo sheegay, guryaha ayaa kuu oggolaanaya inaad naqshadeyso muuqaalka bogagga HTML. Waxaa ka mid ah farsamooyinka ugu waaweyn:

• Shortland: Waxaa adeegsada dhammaan naqshadeeyayaasha webka. Waxay kuu oggolaaneysaa inaad abuurto xaashiyo qaab-dhismeed oo aad u kooban oo si sahlan loo akhriyi karo, maxaa yeelay dhexdeeda waxaad ku dejin kartaa qiimaha guryaha kala duwan waqti isku mid ah.
• HasLayout for Internet Explorer: Asal ahaan waa hagaajiye cayayaanka la xiriira CSS, kaas oo ku tiirsan astaamaha biraawsarka iyo dhiqlaha kale ee jira.
• Sabeyn nadiif ah: Waxay u oggolaaneysaa in la saxo dhibaatooyinka ay sababaan walxaha sabaynaya, oo lagu qasbo dhererka walxaha weelka.
• Qaybaha isku dhererka: Waxay isku daydaa in dhammaan tiirrada boggu ay isku dherer yihiin. Waxay ku saleysan tahay adeegsiga hantida muujinta ee CSS.
• Mawduuca: Kuwani waa farsamooyin dammaanad qaadaya in adeegsadayaashu si sax ah u arkaan farta farta loo adeegsaday qaabeynta bogga, iyadoon loo eegin font -ka la adeegsaday.

Siyaabaha loogu daro CSS HTML

Sababtoo ah dabacsanaanta CSS, naqshadeeyaha ayaa dooran kara sida ay rabaan inay ugu daraan xaashida qaabka dukumentiyada HTML. Kuwani waa:

• Isla dokumentiga HTML: Waxay ku habboon tahay markaad leedahay qaabab yar oo la qeexay ama markaad rabto inaad ku darto qaabab dhammaystiran bogga HTML ee gaarka ah. Waxaa lagu gaaraa iyadoo la adeegsanayo sumadda y sólo pueden ubicarse en la cabecera del documento.
• Faylka dibedda ah: Taag ahaan Hababka waxay ku xiran yihiin bogagga HTML iyada oo loo marayo faylka fudud ee CSS. Faylka CSS wuxuu ka kooban yahay dhammaan qaababka lagu dari doono oo boggu wuxuu oggolaanayaa iskuxirka dhammaan faylasha loo baahan yahay. Isla faylka waxaa lagu dari karaa dhowr bog oo isku mar ah, kaas oo dammaanad qaadaya isku -darka waxyaabaha ku jira dhammaantood. Waa qaabka ugu ballaaran ee maanta la isticmaalo.
• Qaybaha HTML: Waxay u baahan tahay in la qeexo qaabka walxaha kasta si gooni ah, taas oo ka dhigaysa habka ugu isticmaalka yar ee naqshadeeyayaasha HTML. Waxaa loo isticmaalaa oo kaliya in lagu daro qaab aad u gaar ah oo u dhigma hal shay oo ku jira dukumintiga.

Qeexitaanka macnaha

Aaladaha ugu waaweyn ee loo tixgeliyey adeegsiga xaashida qaabka CSS waa: daabacayaasha, shaashadaha, mashruuciyeyaasha, telefishannada, aaladaha mobilada, iyo kuwo kale. Mid kasta oo iyaga ka mid ah waxaa jira sharraxaad gaar ah oo u oggolaanaysa qeexidda qaabka. Inta badan la isticmaalo waa shaashadda, si loo dhiso muuqaalka dukumintiga shaashadda; daabac, oo tixraacaya muuqaalka dukumintiga marka la eego daabacaadda; iyo gacmo -gacmeed, u jihaysan daawashada dukumiintiyada aaladda mobilada.

Hadda, sidaan hore u soo sheegnay, CSS waxay oggolaanaysaa in wax laga beddelo qaabka dukumintiga iyada oo ku xidhan shaqaynta dhexdhexaadka, ama aaladda, loo adeegsaday in lagu muujiyo. Sidan, waxaa jira xeerarka qeexitaanka warbaahinta ee soo socda:

• Qaabka @Media: Wuxuu kuu oggolaanayaa inaad si dhakhso leh oo toos ah u aqoonsato dhexdhexaadka kaas oo ah qaabka ka kooban xeerka lagu dabaqi doono. Magaca tan waxaa isla markiiba la qoraa @media. Haddii ay jiraan warbaahin dhowr ah oo isku qaab ah, magacyada dhammaantood waa la qoray, oo lagu kala tagay koomas. Tusaale ahaan qeexitaanka noocan ah waa: @media screen {body {font - size: 13px}}, taas oo macnaheedu yahay in cabbirka muujinta font -ka shaashadda uu ahaado 13 pixels.
• @import: Waxaa la adeegsadaa marka lagu xirayo feylasha dibadda iyo dukumiintiyada HTML. Si tan loo sameeyo, ka dib marka la qoro @import, URL -ka faylka CSS waa la qeexay, waxaana ku xiga magaca dhexdhexaadiyaha kaas oo loo adeegsan doono qaabka. Tusaale ahaan: @import url ("printer_styles.css") daabac. Taas macnaheedu waa marka dukumintiga la daabaco, qaababka ku jira faylka CSS ee dibedda waa in la raraa. Warbaahin badan, waa in magacyadooda lagu kala saaraa koomas. Haddii warbaahintu aan lagu qeexin xeerka, biraawsarku wuxuu fahamsan yahay in qaabka loo baahan yahay in loo adeegsado warbaahinta oo dhan si isku mid ah.
• <link>: Waxaa sidoo kale loo adeegsadaa marka aad rabto inaad ku darto qaababka ku xiran faylasha CSS ee dibedda ee kala duwan. Qaab dhismeedkeedu wuu yara murugsan yahay, maadaama ay u baahan tahay in lagu daro sifo warbaahineed mid kasta oo ka mid ah qaababka fayl kasta. Qaabkeeda aasaasiga ahi waa sida soo socota: <link rel = "stylesheet" type = "text / css" media = "screen" href = "basic.css" />. Kaas oo tilmaamaya in marka dukumintiga lagu arko shaashad, qaababka ku jira faylka CSS waa in la tixgeliyaa.
• Isku daridda hababka: Asal ahaan, waxay u oggolaanaysaa qeexidda macnaha iyada oo la isku darayo mid kasta oo ka mid ah saddexdii dariiqo ee hore. @import url ("section_styles.css") shaashadda; daabacaadda @media { / * Daabacaha qaababka gaarka ah * /}. Tani waxay ka dhigan tahay in qaababka shaashadda lagu muujiyo ay ka yimaadaan fayl ku xiran <link> tag oo lagu daray xeerka @import. Intaa waxaa dheer, qaabka daabacaadda waxaa qeexaya xeerka @media.