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

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

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

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

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

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

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

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

Гэта значна лягчэй бачыць на прыкладзе, так што давайце пачнем з стварэння простага правілы CSS. Па-першае, давайце стылі тэгі ў галаву раздзеле нашага HTML. Далей, селектары. Пачнем з дапамогай адной з самых простых селектараў, хэш-сімвала, які выбірае HTML элемент па яго ID атрыбуту. У гэтым выпадку мы абярэм спраў, якое ўяўляе ўвядзенне Адзежа , Увёўшы хэш-сімвала ідуць ID спраў, Роб. Цяпер дэкларацый. Дадамо, адкрываць і зачыняць дужкі і змяніць нашы раней убудаваныя дэкларацый аб 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] 

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