[Гуляе музыка] 

Даг Lloyd: Так што давайце яшчэ адзін відэа, каб гаварыць пра больш адной мовы. На гэты раз мы пагаворым аб CSS. Так CSS, што з'яўляецца абрэвіятурай Каскадныя табліцы стыляў, яшчэ адну мову мы выкарыстоўваем пры пабудове вэб-сайтаў. Падумайце пра гэта, як гэта. Калі HTML-гэта тое, што мы выкарыстоўваем, каб арганізаваць Змест мы хочам паставіць на нашай старонцы, CSS з'яўляецца інструментам, які мы звычайна выкарыстоўваем наладзіць, як нашы сайты выглядаюць, і як карыстацкі досвед на самай справе гэта, узаемадзейнічаючы з нашым сайтам. 

Падобна HTML, CSS з'яўляецца не з'яўляецца мовай праграмавання. Ён не мае логіку. Ён не мае зменныя. Ён не мае якіх-небудзь, што цячы, звязаныя рэчы, якія робіць C. Гэта мова стыль. І яго сінтаксіс даволі проста, і проста апісаны як элементы нашага старонка ёсць пэўныя HTML Элементы павінны быць змененыя. Для гэтага, калі ў вас значыць не пакуль глядзеў наша відэа на HTML, ці не знаёмыя з HTML, як правіла, вам можаце зірнуць на што першае, таму што гэта абмеркаванне CSS будзе залежаць ад некаторыя веды HTML. 

Дык вось на самай справе проста CSS стыляў. Нават калі вы ніколі не праграмуецца з дапамогай CSS і перш, Я ўпэўнены, што вы можаце высветліць, менавіта тое, што гэты стыль робіць. Што ён робіць? Ну, прыкладзеных да цела нашай сеткі старонка, усе тэгі цела паміж на нашым HTML, і ўстанаўлівае Колер фону гэтай старонцы на сіні. Ну, гэта вельмі проста стыляў. Гэта на самай справе вельмі чалавечы прыязны мова, CSS. Такім чынам, нават калі вы ніколі не выкарыстоўвалі яго, перш чым, Вы, верагодна, мог здагадацца, што гэта зрабіў. На самай справе, калі мы загрузілі старонку, дзе гэты стыль быў убудаваны так ці інакш, колер фону нашай старонцы будзе быць блакітны, а не стандартны белы. 

Так як мы будуем стыляў? Ну па-першае, мы павінны вызначыць селектар. У апошнім прыкладзе, што селектар быў цела. Тады ў нас ёсць адкрыты фігурная дужка, і мы збіраецца пачаць, вызначальная стыляў для гэтага селектара. Паміж фігурнымі дужкамі, мы проста ёсць спіс пар ключ-значэнне. Папярэдні пара значэнне было Колер фону сіні коскі, але мы маглі б зрабіць больш і больш з іх. Вы можаце мець некалькі рэчаў, ужываючы у гэтым тэгу, то цела селектара. Кожны з іх будуць падзеленыя кропка з коскі, і мы называем кожны з іх дэкларацыя, дэкларацыя CSS. Калі мы скончым з усім кладкі мы Каб прымяніць да гэтай канкрэтнай тэга, мы проста павінны закрывае фігурнай рыхтавацца, каб скончыць стыляў, і мы зрабілі вызначэнні стыляў для гэтага канкрэтнага выбару. 

Якія агульныя ўласцівасці CSS? Ну, можа быць, вы хочаце, каб пакласці мяжа вакол чагосьці. Такім чынам, вы можаце сказаць: мяжа, што б ваш ключ, і тады вашы каштоўнасці будзе, які стыль, колер і шырыня Вы хочаце, каб гэта было. Такім чынам, стыль можа быць цвёрдым лінія, пункцірнай лінія, пункцірнай лінія, хрыбет лінія, якая будзе хвалістая лінія. Можа быць, вы хочаце, каб ён быць сінім або чорным або зялёным. Можа быць, вы хочаце, каб ён 1 або 2 ці 10 пікселяў у шырыню. Вы можаце паказаць усе гэтыя рэчы. Можа быць, вы хочаце, каб усталяваць фон Колер вашай старонцы ў асаблівым чынам. Мы ўжо бачылі, што, усталяваўшы фон цела, каб быць сінім. 

Затым вы можаце выкарыстоўваць ключавое слова, так CSS мае пэўныя колеру якія ўбудаваныя ў яго, сіні, зялёны, чорны, вельмі простыя колеру, якія мы ведаем. Але вы таксама можаце паказаць любы шасціграннай колер, які вы хацелі б. Нагадаем, што колеры могуць быць вызначаны наборам шасьцікутных лікаў трох ад 0 да 255, RG і В, чырвоны, зялёны і сіні кампанент. І так мы можам паказаць любы колер мы хочам ад, замест сіняга, зялёнага або чорнага колеру, выкарыстоўваючы фунт, а затым шэсць лічбаў шаснаццатковым, і што дасць нам шэсць лічба колер. Дык вось колер фону. 

У нас таксама ёсць пярэдні план Колер, які, як правіла, будзе тэкст на старонцы. А вы маглі б гэтак жа зрабіць з ключавым словам і лічбамі ці шэсць шаснаццатковай. Такім чынам, вы можаце паказаць любы колер вы хачу для тэксту вашай старонкі у дачыненні да канкрэтнага колер фону, наверсе. Вы таксама можаце змяніць і справа шрыфтам, і шляхі тэкст аказваецца на старонцы. 

Такім чынам, вы можаце змяніць памер шрыфта. Вы можаце выкарыстоўваць ключавыя словы, такія як дадатковы, Вельмі дробны, або хх мала, ці сярэдні, вялікі, і гэтак далей. Вы можаце выкарыстоўваць фіксаваныя пункту, 10 Кропка, кропка 12, і гэтак далей. Вы можаце выкарыстоўваць працэнты, 80%, 20%, дзе 100% з'яўляецца шрыфт па змаўчанні памер, які звычайна збіраецца нешта накшталт 11 ці 12 ачкоў. Ці вы можаце нават засноўваюць яго самай апошняй памеру шрыфта. Калі вы толькі што напісалі нешта, і вы ведаеце тое, што вы хочаце, каб ён быў менш, але вы не ведаеце дакладна, які памер вам хачу, каб, ну, вы можаце проста сказаць, Памер шрыфта менш. І гэта будзе засноўваць прэч, толькі наверсе, гэта памер шрыфта. І вы можаце атрымаць больш ці менш. Такім чынам, ёсць шмат розных спосабы паказаць памер шрыфта. 

Вы таксама можаце паказаць, што сямейства шрыфтоў вы хочаце. Калі ў вас ёсць канкрэтны імя, ці ёсць спосаб у CSS-- мы не збіраемся казаць пра гэта here-- вызначыць вельмі канкрэтны шрыфт і ўстаўляць яго ў вашай старонцы. Вы таксама можаце выкарыстоўваць радавыя імёны. Там шмат вэб-бяспечных шрыфтоў якія папярэдне вызначаны ў CSS. І калі вы з'яўляецеся карыстальнікам Microsoft Офіс у апошнія 20 гадоў, Вы, напэўна, знаёмыя з многія з гэтых вэб-бяспечных шрыфтоў ўжо Times New Roman, Arial, Courier New, Грузію, Tahoma, Verdana, і гэтак далей. Тыя, усе яны лічацца бяспечнымі вэб-шрыфты. А на самай справе, частка з Прычына яны прыйшлі, каб быць быў выкарыстоўвацца, каб зрабіць кожную старонку web-- што доступ да гэтай змаўчанні набор шрыфтоў з рознымі засечак, і ўсё гэта шрыфта рэчы, якія мы не патрапіць, але яны, як правіла даступныя ў вашым CSS, нават калі вы не у адваротным выпадку вызначыць шрыфты. Нарэшце, вы можаце выраўнаваць тэкст, замест гэтага быцця, па змаўчанні, выраўнаваны налева, вы маглі б выраўнаваць яго направа, ці вы маглі б выраўнаваць яго па цэнтры, або апраўдана, так што ён ударыў абодвух палёў. Так што тыя усе варыянты, якія можна выкарыстоўваць каб змяніць тое, што ваш тэкст выглядае, і як яна адлюстроўваецца на вашай старонцы. 

Вашы селектары ня павінны быць толькі пазнакі. Мы раней бачылі цела тэга Селектар, і селектар тэгаў выглядае так жа, як, што. Вы называеце тэг, а затым вам вызначыць стыляў для гэтага тэга. Але вы таксама можаце зрабіць нешта называецца селектар ID. Ідэнтыфікатар селектара выглядае даволі падобныя. Але адзначаюць, што ў цяперашні час я не выкарыстоўваю HTML-тэгі, я выкарыстоўваю, у гэтым выпадку, #unique або хэшавання. Калі вы памятаеце з нашага відэа на HTML, мы гаварылі пра тое, як пазнакі могуць мець атрыбуты. 

І адзін атрыбут, які ўжываецца у амаль усіх HTML-тэгі, але мы не гаворым пра гэта, тое, што называецца ідэнтыфікатар тэга. Такім чынам, гэта будзе асабліва CSS прымяняюцца толькі да HTML тэга, які мае вельмі спецыфічная ID, што Вы назвалі. Так што, калі ў вас ёсць дзе-то у кодзе, дзе у HTML файл, тэг і вы паказаць у якасці атрыбуту гэтага тэга, ID роўны унікальным, гэта прыватнасці стыляў тут будзе прымяняцца толькі паміж што тэг з ідэнтыфікатарам ўнікальныя. 

Вы таксама можаце зрабіць нешта называецца селектарам класа. Такім чынам, у дадатак да наяўнасці ID атрыбуты, вы таксама можаце дадаць атрыбут класа, каб HTML-тэгі. І калі вы выкарыстоўваеце атрыбут класа, яна можа быць прыменена да некалькіх тэгах. Так што, калі ў вас ёсць некалькі рэчаў, якія аналагічныя, можа быць, вы хочаце сказаць адкрыты тэг бла, бла, бла, бла, клас роўны студэнтаў. І тады гэты канкрэтны стыляў будзе прымяняцца да кожнага тэгу, чый клас студэнтаў. У гэтым выпадку, мы ўсталюеце Колер фону на жоўты, і мы ўсталёўваем непразрыстасць, якая гэта тэг, які нам няма пра што пагаварыць, але толькі мае справу з празрыстай, як нешта, да 70%, у гэтым выпадку. 

Там жа два варыянты Напісанне стыляў. Вы можаце напісаць іх непасрэдна ў HTML шляхам размяшчэння стыляў у паміж тэгамі стылі. І гэтыя пазнакі ў стылі пайсці ўнутры галаўныя тэгі вэб-старонкі. , Магчыма, больш пераважны спосаб зрабіць гэта напісаць асобны файл .css, а затым звязаць яго ў свой дакумент, выкарыстоўваючы спасылку метак. Тэгі Link, зноў жа, з'яўляюцца адрозніваецца ад гіперспасылак, калі вы памятаеце з нашага відэа ў HTML. І спасылка тэгі, як мы цягнуць у асобных файлах. Гэта накшталт як эквівалент дапамогай #include для вэб-праграмавання. 

Такім чынам, давайце зірнем на table.HTML. Калі вы памятаеце з нашага HTML-відэа, я паказаў прыклад вельмі простае множанне табліца, выглядаў даволі непрыгожа, і, магчыма, ёсць спосаб зрабіць гэта лепш з CSS, каб зрабіць гэта на самай справе выглядаюць больш як множанне стол, ці нешта Гэта не проста злепленыя з не фактычнае падзел паміж радамі і калонамі. Такім чынам, давайце над галавой CS50 IDE, і зірнуць на тое, як CSS можа, накшталт, налады тое, што мы пачалі з раней, і зрабіць што-то нашмат лепш. 

Такім чынам, мы знаходзімся ў CS50 IDE Цяпер, калі не знаёмыя, мы падцягнуць ў гэтым табліца, HTML-старонкі. Table.HTML асноўным проста вызначае змесціва у А multiple-- ён павінен быў быць чатыры на чатыры табліца множання. Гэта даволі проста. І мы будзем думаць, што гэта было б выглядаюць даволі добра арганізаваны. Але на самой справе, калі мы праглядаць гэтую старонку, мы бачым, што гэта свайго роду пачварны, праўда? Відавочна, мы маем радкоў і слупкоў тут. Там нейкая падзелу. Але гэта не мае сэнсу падзел. Мы на самай справе не атрымаць занадта шмат інфармацыі тут. І няма ніякага падзелу паміж радкоў і слупкоў у выразе з гарызантальных ці вертыкальных правілаў. Мы маглі б зрабіць гэта шукаць трохі лепш. Так давайце паспрабуем. Так што я збіраюся зачыніць гэтую ўкладку тут. І я збіраюся зачыніць мой table.HTML, і ў мяне ёсць яшчэ адзін варыянт тут называецца table2.HTML. Мы адкрыем, што да. Цела старонцы у значнай ступені тое ж самае, але я змяніўся трохі зверху. І я буду пракручваць тут. Звярніце ўвагу, што на гэты раз, я з дапамогай убудаваных тэгаў у стылі. Я адкрыў тэг стыль, і цяпер я вызначэння CSS стыляў толькі ўнутры ад яго. У мяне ёсць табліцы стыляў, што кажа, табліцу. Гэта мой селектар тэгаў. Я не выкарыстоўваю кропку або хэш, якія я буду рабіць, калі я быў з дапамогай ID або селектар класа. У мяне ёсць селектар тэгаў here-- табліцу. Гэты стыль будзе прымяняюцца да кожнага табліцу тэгаў. Мабыць, я хачу, каб пакласці адзін Піксэл, суцэльны сіні мяжы, у маёй табліцы. Гэта гучыць, як ён, верагодна, дапамагчы сітуацыі, праўда? Мы збіраемся, каб мець рэчы выглядаюць нашмат лепш. Так што гэта нармальна. Стылістычна, я толькі што убудаваныя мой стыляў тут. Гэта, вядома, прымальны спосаб зрабіць гэта. Давайце паглядзім, як гэта выглядае. Так што я вярнуся сюды, і Я будзе папярэдні прагляд table2.HTML. Ну, гэта не зусім тое, што я хацеў, але гэта менавіта тое, што мы прасілі. Мы сказалі, што гэты стыль збіраецца звярнуцца да нашага стала. Наш стол цяпер мае адзін піксель Шырокі, цвёрды сіні мяжа вакол яго. Мы на самай справе не атрымаць у вочках табліцы. Мы проста атрымліваць да стала. Так CSS працаваў. Ён прыкладваецца стыляў да нашага стала. Але не зусім рабіць што мы хацелі гэта рабіць. Як мы можам атрымаць, каб зрабіць тое, што мы хочам гэта рабіць? 

Ну, давайце зірнем на яшчэ аднаго версія гэтага ў table3.HTML. Так што я проста зачыню гэтыя ўкладкі. Я збіраюся вярнуцца сюды, каб мой дрэва файл, і адкрыць table3.HTML. Зноў жа, гэта будзе выглядаць даволі падобна тут у пачатку. Але заўважце, на гэты раз, замест выкарыстання табліца стыляў убудаваны прама там, Я збіраюся звязаць у стыляў з дапамогай тэга спасылкі. Так што я, мабыць, звязваючы ў стыляў называецца tables.CSS, і гэта добра роўна стыляў проста азначае: добра, Што гэта за файл адносна таго, што Я doing-- з'яўляецца стыляў, што я выкарыстоўваючы для маёй старонцы. Так што, калі я сапраўды хачу паглядзець, што Я раблю з дапамогай CSS тут, Мне трэба ісці, што адкрыты table.CSS файл, а таксама. Такім чынам, мы вернемся сюды зноў у наш файл дрэва. Там гэта table.CSS. Мы поп яго адкрытым. Цяпер мы бачым, трохі ў CSS. Мяркуючы па ўсім, у мяне ёсць пара рэчаў адбываецца тут. Я, мабыць, хочуць паставіць пяць Піксэл, суцэльная чырвоная мяжа, вакол майго стала. Мы ўжо ведаем, што адбываецца проста пайсці па перыметры. Мы бачылі, што ў table2.HTML. З кожнай радку, я па-відаць, трэба паказаць што вышыня радкі 50 пікселяў. Такім чынам, для кожнай радкі, памятаеце, гэта тое, што робіць TR тэг, Я раблю гэта ў 50 пікселяў. 

Нарэшце, у мяне ёсць на гэты каментар. І гэта, як мы робім у каментары CSS. Гэта вельмі падобна на блок захапіць каментары слэш зоркі. Увесь тэкст вы хочаце. Там няма слэш слэш, хоць у CSS. Для кароткіх ўбудаваных каментароў, мы павінны каб выкарыстоўваць гэтую канкрэтную фармат тут. Падобна на тое, што я раблю Шмат рэчаў у маіх тэгах тд. Запомніць TD пазнакі, або табліцу Дадзеныя, якія на самай справе проста калоны ўнутры нашы шэрагі, і, мабыць, для кожнага элемента дадзеных у маёй табліцы, я хачу, ўсталяваць колер фону чорны, колер павінен быць белым, колер колер пярэдняга плана. Так што гэта будзе тэкст маёй старонцы. Я хачу вялікі шрыфт, 22 пазначыць шрыфт, і я хачу, гэта будзе ў сям'і шрыфта, Грузія. Так што я не збіраюся ёсць шрыфт па змаўчанні. Я збіраюся задаць Грузію, з'яўляецца адным з тых вэб-бяспечных шрыфтоў што мы бачылі раней. Я хачу, каб мой тэкст быць выраўнаваны цэнтралізавана, у сярэдзіне скрынкі, Я не хачу, каб іх пакінулі ў выраўнаваны па правым краі або. І я хачу, каб мой шырыню слупка каб быць 50 пікселяў у шырыню, а таксама. Давайце зірнем на як гэта выглядае, і паглядзець, калі гэта, можа быць, паляпшэнне. Так што я збіраюся пайсці ў table3.HTML, які Нагадаем, уключае ў сябе table.CSS ў якасці злучнага звяна, і мы яго прагляду. Гэта нашмат лепш правільна? Гэта на самай справе пачынае выглядаць нашмат больш, як табліцу множання. У мяне ёсць, што чырвоная мяжа вакол майго стала, але цяпер Я таксама ўдакладніў, што кожны радок 50 пікселяў у шырыню, ці гэта 50 пікселяў tall-- апраўданне me-- кожны слупок 50 пікселяў у шырыню. Дадзеныя ў кожным слупку, і толькі дадзеныя, мае чорны фон. Дык вось, чаму тыя, белыя лініі там. Паколькі прастору паміж усімі гэтымі клеткамі, гэта не мяжа ў і само па сабе, гэта проста Я толькі запаўненне ў клеткі, якія на самай справе робіць мяжы табліцы, якія мабыць, існуе ўвесь час, гэта проста тонкія белыя лініі. Цяпер яны бачныя. Цяпер яны паліць на экране. І такім чынам, гэта вельмі просты стыляў, якія я ужыў, і цяпер мая табліца выглядае значна больш, як табліца чатыры на чатыры множання, замест проста перамяшаныя беспарадак, дзе усё ясна радкоў і слупкоў, але не супер добра арганізаваны. Мы сапраўды проста драпаць паверхню што вы можаце зрабіць з дапамогай CSS тут. На шчасце, дакументацыя CSS даволі простая. Вы будзеце выкарыстоўваць некалькі яго атрыбуты, даволі часта. Тыя, пра якія мы казалі раней у гэтым відэа. Ёсць некалькі, якія вам верагодна, не будзе выкарыстоўваць усе. І гэта нармальна, таксама. Але толькі ведаеш, што ёсць шмат дакументацыі там. Такім чынам, нават калі мы не ахопліваюць усе, вы, вядома, не пакінуў па сваім меркаванні. Але CSS сапраўды весела эксперыментаваць з. І я б настойліва раім вам гуляць з вашых вэб-старонак, і паглядзець, як вы можаце зрабіць іх выглядаць і адчуваць сябе, каб палепшыць карыстачу вопыт наведвання вашай старонкі. Я Дуг Лойд. Гэта CS50.