[Powered by Google Translate] [CSS] [Джозэф Онг - Гарвардскі універсітэт] [Гэта CS50. - CS50.TV] 

Сёння мы будзем казаць пра CSS або каскадныя табліцы стыляў. 

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

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

Так, што можа быць самым простым спосабам, каб прымяніць стыль Роб хоча? Найбольш відавочным спосабам многія людзі першапачаткова пісаў CSS было паставіць тое, што мы называем стылем дэкларацыі прама ў сам элемент выкарыстаннем HTML атрыбут стылю. Аб'яву стылю проста складаецца з CSS ўласцівасці элемента HTML, мы хочам змяніць двукроп'е і новы кошту маёмасці і кропкі з коскі ў канцы. Напрыклад, выкажам здагадку, што Роб хоча чорнай рамкай вакол яго ўвядзення. Мы спачатку змесціце атрыбуту стылю на DIV Роба тут Затым у падвойных двукоссях пакласці дэкларацыі CSS: "Межы: 1px цвёрдых чорны;" 1 піксель ставіцца да шырыню мяжы, цвёрды ставіцца да стыль мяжы, і колер у канцы вызначае, які колер мяжы з'яўляецца. 

Калі мы хочам некалькі стыляў на элемент, напісаць гэтыя заявы ў пэўнай паслядоўнасці. Напрыклад, калі Роб хоча, каб яго тэкст загалоўка ў Helvetica з сінім фонам і больш прасторы вакол тэксту, мы можам зрабіць гэта: стыль = "сямейства шрыфтоў: Helvetica, колер фону: сіні; абіўка: 5px;" Апошняя кропка з коскі на самай справе неабавязкова, але людзі, як правіла трымаць яго ў паслядоўнасці дзеля аўтара. 

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

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

Гэта значна лягчэй ўбачыць, напрыклад, так што давайце пачнем з стварэння простага правілы CSS. Па-першае, давайце тэгі стылю ў галаве раздзеле нашага HTML. Затым селектара. Мы пачнем з дапамогай адной з самых простых селектараў, сімвал рашотка, які выбірае HTML элемента па яго ID атрыбуту. У гэтым выпадку мы абярэм DIV, які ўяўляе ўвядзенне Роба , Увёўшы сімвал рашотка наступным ID DIV аўтара, Роб. Цяпер дэкларацый. Дадамо, адкрываць і зачыняць дужкі і змяніць нашы раней ўбудаваных дэкларацый аб DIV Роба Усярэдзіне гэтых брэкетаў, абнаўлення, і, прахалодным, інтра Роба ўсё яшчэ мае чорную рамку вакол яго мінус брудную пачварнасць лінію. 

Цяпер, што калі мы хацелі, каб выбраць h1 ўнутры інтра Адзежа? Вы можаце падумаць: "Давайце пакладзем ID на ім, а затым перайсці нашых папярэдніх стыляў." Гэта працуе, але CSS мае іншыя спосабы даць вам магчымасць выбраць элементы выкарыстоўваючы тое, што мы называем камбінатар змешваць простых селектараў. Напрыклад, сімвал прабелу можа быць выкарыстаны ў якасці камбінатара пазначыць усе выпадкі 1 селектара, якія жывуць ўнутры іншага выбару. Гэта гучыць нашмат складаней, чым ёсць на самай справе. Вось прыклад. Мы будзем уводзіць # рабаваць, дадайце прабел, а пасля яго h1, яшчэ адзін просты селектар называецца тэгам селектар, які выбірае тыпы элементаў як дзівы або абзацы. Прастора аб'ядноўвае нашы 2 простых селектараў, ужываючы ўсе CSS дэкларацый і фігурныя дужкі ў тэгі H1, якія жывуць ўнутры элемента з ID = "Роб". Проста, каб пераканаць вас, што гэта працуе, я змяню колер шрыфта на белы, абнаўлення, і вось, загаловак Роба цяпер белы. 

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

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

У выпадку, калі вам цікава, простых селектараў ўключае ID селектары і селектары тэгаў, як тыя, якія мы толькі што бачылі а таксама селектараў для выбару элементаў пэўнага класа, селектары атрыбутаў для выбару элементаў па іншых прыкметах, як тып = "Радыё" для радыё кнопку ўваходу, як і pseudoselectors парыць і засяродзіць для вызначэння стылю, калі ўзаемадзеянне падабаецца каб навесьці паказальнік мышы на элемент адбыцца. 

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

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

Я Язэпу, і гэта CS50. 

[CS50.TV] 

Ну, з чаго пачаць? Дазвольце мне зрабіць гэта, не - [смяецца] Добра. Дадаць - Дазвольце мне змяніць гэтую фармулёўку. Ох. Прабачце.