[Powered by Google Translate] [સીએસએસ] [જોસેફ ઓન્ગ - હાર્વર્ડ યુનિવર્સિટી] [આ CS50 છે. - CS50.TV] 

આજે આપણે સીએસએસ વિશે વાત કરવામાં આવશે અથવા કેસ્કેડીંગ સ્ટાઇલ શીટ્સ. 

જેથી ચોકકસ શું સીએસએસ છે? વેલ, જે 2 ભાગમાં નીચે શબ્દ સીએસએસ તોડી દો: કેસ્કેડીંગ સ્ટાઇલ શીટ્સ અને. અસ્ખલિત થોડો વધુ જટિલ હોય છે, અને તે કંઈક બીજી વિડિઓ માં આવરી શકે છે. પરંતુ શરુ માટે, સ્ટાઇલ શીટ્સ સીએસએસ શું કરે અંતે ઘણો સંકેતો. તે વેબ પેજની એચટીએમએલ માટે શૈલીઓ ઉમેરે છે, બદલવાથી કેવી રીતે વેબ પાનું સૌંદર્યલક્ષી જુએ છે. આ પાનાં પર લખાણ ફૉન્ટ ના સામગ્રી સ્થિતિ માટે બધું અર્થ થાય છે એક ગોળાકાર બોક્સની ખૂણાઓ કરીને અથવા લખાણ પડછાયાઓ ઉમેરવા જેવી અન્ય રસપ્રદ વસ્તુઓ છે. તમે પણ ઉન્મત્ત જેવી બાબતો બનાવવા વસ્તુઓ સ્ક્રીન પર સજીવ કરી શકો છો. 

કેવી રીતે અમે HTML સાથે નથી સીએસએસ ઉપયોગ કરો છો? આ સાઇટ ગરીબ દેખાવ હું હમણાં જ લખ્યું લો. જો રોબ આ સાઇટ પર હમણાં જોવા હતા, તે કદાચ કંઈક જેમ કહેવું હો, "વાહ મારા પરિચય! ભયંકર લાગે છે. જોસેફ, તમે એક ભયાનક ડિઝાઇનર કરી છે." "મૂળભૂત ફોન્ટ ટાઇમ્સ મદદથી Helvetica? ખૂબ જ સારું છે." 

તેથી શું સરળ કરવા માટે સ્ટાઇલ રોબ માંગે લાગુ રીતે હોઈ શકે? સૌથી દેખીતો લોકો માર્ગ ઘણાં શરૂઆતમાં સીએસએસ લખ્યું હતું માટે તત્વ પોતે મૂકી આપણે શું શૈલી જાહેરાતો અધિકાર કહી હતી તે HTML શૈલી લક્ષણની મદદથી. એક શૈલી જાહેરાત માત્ર HTML ની ​​તત્વ સીએસએસ મિલકત સમાવે અમે બદલવા માંગો છો એક અને ઓવરને અંતે અર્ધવિરામ મિલકત નવી કિંમત દ્વારા અનુસરવામાં પડેલ છે. ઉદાહરણ તરીકે, આપણે કહેવું રોબ તેની રજૂઆત આસપાસ કાળા સરહદ માંગે છે. અમે પ્રથમ રોબ div પર શૈલી લક્ષણ અહીં મૂકો પછી બે અવતરણચિહ્નો ની અંદર એક સીએસએસ જાહેરાત મૂકી: "સરહદ: 1px ઘન કાળા;" આ 1 પિક્સેલ સરહદ પહોળાઇ ઉલ્લેખ કરે છે, જે ઘન સરહદ ના શૈલી ઉલ્લેખ કરે છે, અને અંતે રંગ નક્કી કરે છે તે સરહદ રંગ શું છે. 

જો આપણે એક તત્વ પર અનેક પ્રકારો માંગો છો, ક્રમ આ જાહેરાતો લખો. ઉદાહરણ તરીકે, જો રોબ વાદળી પૃષ્ઠભૂમિ સાથે તેમના Helvetica માં હેડર લખાણ માંગે છે અને લખાણ આસપાસ વધુ જગ્યા, અમે આ કરી શકો છો: સ્ટાઇલ = "ફોન્ટ પરિવાર: Helvetica; બેકગ્રાઉન્ડ કલર: વાદળી; padding: 5px;" છેલ્લા અર્ધવિરામ ખરેખર વૈકલ્પિક છે, પરંતુ લોકો સામાન્ય રીતે તે સુસંગતતા ખાતર રાખો. 

અમે ઠંડી અને વધુ જટિલ સીએસએસ પ્રોપર્ટીઝ કેટલાક સમજાવીને સાચવીશું અન્ય વિડિઓ માટે. જો તમે ધ્યાનમાં કંઈક છે, ફક્ત અસર તમે કરવા માંગો છો સીએસએસ દ્વારા અનુસરવામાં Googling કદાચ તમે ખૂબ સારા પરિણામો આપશે. ઠંડા બાબત એ છે કે સીએસએસ ખૂબ વ્યાપક છે, કારણ અંદર - તેથી મતભેદ જો કોઈ બાબતની કરવા માંગો છો છે - સીએસએસ કદાચ કરી શકે છે. અમે ઇનલાઇન સ્ટાઇલ સ્ટાઇલ આ પ્રકારની કૉલ કરો. આ તત્વ શૈલી છે, સારી શરૂઆત ટેગ સાથે વાક્ય માં. 

લોકો જે ખરેખર આયોજન કરવામાં માંગો માટે, તમે એક અવ્યવસ્થિત કેવી રીતે આ દેખાય અંતે peeved થોડું મેળવવાનું શરૂ કરી શકે છે. કલ્પના જો તમે પૃષ્ઠ પર દરેક તત્વ માટે આમ કર્યું હતું, વત્તા હવે તમારા HTML અને CSS તમામ અને પરસ્પર મિશ્ર થઇ જાય cluttered. ગ્રોસ, અધિકાર? આ ઠીક, લોકો છેવટે તેમના HTML માર્કઅપને અલગ પર મોહક શરૂ સીએસએસ પસંદગીકારોએ કહેવાય કંઈક ઉપયોગ કરીને તેમના સીએસએસ સ્ટાઇલ છે. સીએસએસ પસંદગીકારો તત્વો જે જાહેરાતો લાગુ પડે છે પસંદ કરવા માટે વપરાય છે. એક સીએસએસ જાહેરાતો યાદી સાથે સંયુક્ત પસંદગીકાર ઘણીવાર સીએસએસ નિયમ તરીકે ઓળખવામાં આવે છે. આ નિયમો ઓપન અને બંધ HTML શૈલી ટૅગ્સ વચ્ચે મૂકવામાં આવે છે, ઘણીવાર દસ્તાવેજ વડા છે. 

તે ખૂબ સરળ છે ઉદાહરણ સાથે જુઓ, તેથી સરળ સીએસએસ નિયમ બનાવીને ચાલો શરૂ કરો. પ્રથમ, ચાલો અમારા HTML ની ​​માથા વિભાગમાં શૈલી ટૅગ્સ મૂકો. આગળ, પસંદગીકાર. અમે બોલ સરળ પસંદગીકારોએ ઓફ માટે, હેશ પ્રતીક મદદથી દ્વારા શરૂ કરી શકશો, જે તેના ID ને લક્ષણ દ્વારા એક HTML તત્વ પસંદ કરે છે. આ કિસ્સામાં અમે div કે રોબ પરિચય પ્રતિનિધિત્વ પસંદ પડશે હેશ જે div ID ને, ધાડ પાડવી દ્વારા અનુસરવામાં પ્રતીક લખીને. હવે જાહેરાતો. અમે ઓપન અને બંધ કૌંસ ઉમેરો અને રોબ div પર અમારી અગાઉ ઇનલાઇન જાહેરાતો પાળી આ કૌંસ ની અંદર ફરી તાજું કરો, અને, ઠંડી, માતાનો રોબ પ્રસ્તાવના હજુ પણ તેની આસપાસ એક કાળા સરહદ બાદ આ અવ્યવસ્થિત ઇનલાઇન કદરૂપું છે. 

હવે, જો આપણે માટે રોબ પ્રસ્તાવના ના h1 અંદર પસંદ કરો માગે છે? તમને લાગે છે કે, "ચાલો, તેના પર એક ID મૂકી અને પછી અમારી અગાઉ શૈલીઓ ખસેડો." હોઈ શકે છે કે કામ કરે છે, પરંતુ સીએસએસ ભાડા તમે તત્વો પસંદ અન્ય રીતો છે મદદથી આપણે શું combinators સરળ પસંદગીકારોએ મિશ્રણ માટે કૉલ દ્વારા. ઉદાહરણ તરીકે, સફેદજગ્યાના પાત્ર combinator તરીકે વાપરી શકાય છે માટે 1 પસંદગીકાર કે અન્ય પસંદગીકાર ની અંદર રહે તમામ ઘટકોને સ્પષ્ટ કરો. કે ઘણો વધુ જટિલ વાસ્તવમાં છે તેના કરતા લાગે છે. અહીં એક ઉદાહરણ છે. અમે # લૂંટ, એક જગ્યા ઉમેરી શકે છે, અને તે h1 સાથે અનુસરો લખો કરશે, અન્ય સરળ પસંદગીકાર ટેગ પસંદગીકાર કે તત્વો પ્રકારો પસંદ કહેવાય divs અથવા ફકરા જેવી. આ જગ્યા અમારી 2 સરળ પસંદગીકારોએ જોડે, બધા સીએસએસ જાહેરાતો અરજી અને h1 ટૅગ્સ કે = "લૂંટવું" id સાથે તત્વ ની અંદર રહે છે માટે સર્પાકાર કૌંસ. હમણાં જ તમને મનાવવા માટે છે કે તે કામ કરે છે, હું સફેદ, તાજું કરવા માટે ફૉન્ટ રંગ બદલવા પડશે, અને જુઓ, માતાનો રોબ હેડર હવે સફેદ. 

આ કામ બધા બદલે નિયમો ઇનલાઇન શૈલીઓનો ઉપયોગ કરી દ્વારા માટે દર્શાવે છે કે આ બોલ પર અમે ખૂબ ક્લીનર કોડ મેળવી શકો છો. હકીકતમાં, જો આ શૈલી બ્લોક શરૂ થાય થોડો મોટો બની રહ્યો, હું પણ આ પ્રકારો ખેંચી બહાર કરી શકો છો એકસાથે અલગ ફાઇલમાં. 

આ દસ્તાવેજમાં સીએસએસ તરીકે આ નવી ફાઈલ સમાવેશ થાય છે હું ફક્ત HTML કડી ટૅગ વાપરો પડશે. અહીં હું તે જણાવું છું કે હું એક બાહ્ય શૈલી શીટ માં લિંક છું, એ rel, લક્ષણ અને મારા href લક્ષણ સાથે ફાઈલ પાથ સ્પષ્ટ. હવે મારી HTML માર્કઅપને અને CSS સરસ રીતે સંપૂર્ણપણે અલગ ફાઈલોમાં યોજવામાં આવે છે, જે લગભગ હંમેશા માર્ગ ડિઝાઇનર્સ HTML અને CSS સાથે કામ પ્રાધાન્ય છે. 

કિસ્સામાં તમે આશ્ચર્ય પામી રહ્યા છીએ, સરળ પસંદગીકારોએ ID ને પસંદગીકારોએ સમાવેશ થાય છે અને જેના અમે જોયું જેવા ટેગ પસંદગીકારો તેમજ અમુક ચોક્કસ વર્ગ સાથે તત્વો પસંદ કરવા માટે વર્ગ પસંદગીકારો પ્રકાર જેવા અન્ય લક્ષણો દ્વારા તત્વો પસંદ કરવા માટે લક્ષણ પસંદગીકારોએ = "રેડિયો" રેડિયો બટન ઇનપુટ્સ, અને જેમ pseudoselectors માટે હૉવર અને ધ્યાન કેન્દ્રિત સ્ટાઇલ સ્પષ્ટ ત્યારે ક્રિયાપ્રતિક્રિયાઓ એક તત્વ થાય છે ઉપર માઉસિંગ જેવા છે. 

સામાન્ય combinators તમામ બાળકો માટે સફેદજગ્યાના સમાવેશ થાય છે અને કોમા પસંદગીકારોએ ઓળખાયું. અન્ય તમે અનુભવી શકે છે સીધા માત્ર બાળકો માટે તીર સમાવેશ થાય છે, બધા સગાઓ કે તત્વ પછી ઉદ્ભવે માટે ઝૂલતો ડેશ, અને 1 બહેન છે કે તત્વ પછી તરત જ આવે છે માટે વત્તા ચિહ્ન. 

આ પસંદગીકારો અને combinators સંયોજન દ્વારા, તમે સ્ટાઇલ ઓફ શ્રેણી તમે આપેલ વેબ પૃષ્ઠ પર મેળવી શકો વિસ્તૃત કરી શકો છો અને CSS વધુ કાર્યક્ષમ રીતે લખો. માત્ર સીએસએસ રેખાઓ તમે મને અહીં લખીને જુઓ એક દંપતી સાથે, હું ઝડપથી આ કંઈક જેમ આ દેખાવ કંઈક કરી શકો છો. 

હું જોસેફ છું, અને આ CS50 છે. 

[CS50.TV] 

ઉહ, જ્યાં હું શરૂ કરું? મને વગર કે કરવું - [laughs] ઠીક. એક ઉમેરો - દો મને કે શબ્દરચના બદલો. Ooh. માફ કરશો.