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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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