[Powered by Google Translate] [CSS] [Jozef Ong - Universitato Harvard] [Jen CS50. - CS50.TV] 

Hodiaŭ ni parolos pri CSS aŭ Laŭtemaj Style Sheets. 

Do kio precize estas la CSS? Nu, ni rompos la termino CSS malsupren en 2 partoj: Akvofalo kaj Style Sheets. Akvofalo estas iomete pli kompleksa, kaj ĝi estas io ni kovras en alia video. Sed por komenci, Style Sheets tre aludoj je kioma CSS faras. Ĝi aldonas stilojn al la HTML de TTT-paĝo, ŝanĝi kiom la retpaĝo estetike aspektas. Tio signifas ĉio ekde la tiparon de la teksto al la pozicio de la enhavo de la paĝo al aliaj cool aĵoj kiel fari la anguloj de skatolo rondigita aŭ aldonante ombroj al teksto. Vi povas eĉ fari freneza aĵojn kiel fari tion animi en la ekrano. 

Nu do kiel ni uzas CSS kun HTML? Prenu ĉi kompatinda-aspekta loko Mi nur skribis. Se Rob estis rigardi ĉi tiun retejon ĝuste nun, li volas probable diri ion kiel, "Wow! Mia enkonduko aspektas terura. Jozef, vi estas aĉa konceptadisto." "Uzante la defaŭlta tiparo Times? Helvetica estas tiel bona." 

Do kio povus esti la plej simpla maniero apliki la stilo Rob volas? La plej evidenta maniero de multaj homoj komence skribis CSS estis meti kion ni nomas stilo deklaroj bone elemento mem uzante la HTML stilo atributo. Stilo deklaro simple konsistas la HTML elemento CSS propraĵo ni volas ŝanĝi sekvata de dupunkto sekvis la nova valoro de la bieno kaj punktokomo ĉe la fino. Ekzemple, ni diru Rob volas nigran limon ĉirkaŭ lia enkonduko. Ni unue metis la stilo atributo en Rob la div tie tiam ene duoblaj citiloj metis CSS deklaro: "Border: 1px solid black;" La 1 rastrumeroj raportas al la larĝo de la limo, la solida raportas al la stilo de la limo, kaj la koloro fine determinas kion la limo de koloro estas. 

Se ni volas multnombraj stiloj sur elemento, skribi tiujn deklarojn en vico. Ekzemple, se Rob volas lian header teksto en Helvetica kun blua fono kaj pli spaco ĉirkaŭ la teksto, ni povas fari ĉi tion: style = "font-familio: Helvetica; fono-koloro: blua; Plenigado: 5px;" La lasta punktokomo estas fakte nedeviga, sed homoj kutime konservi ĝin en por consistencia la sake. 

Ni ŝparos klarigante kelkaj el la malvarmaj kaj pli kompleksaj CSS propraĵoj por alia video. Se vi havas iun en menso, nur Googling la efekto vi volas sekvis CSS verŝajne al vi sufiĉe bonaj rezultoj. La malvarmeta estas kiu CSS estas sufiĉe larĝa, tiel malakordo estas se estas io vi volas fari - ene kialo - CSS povas probable fari ĝin. Ni nomas tiun specon de stiligante inline stilo. La elemento stilo estas, nu, akorde kun la komenco etikedo. 

Por uloj, kiuj vere ŝatas esti organizita, vi eble komenci ricevas iom peeved je kiom senorda ĉi ĉio aspektas. Imagu se vi devis fari tion por ĉiu ero en la paĝo, plus nun viajn HTML kaj CSS estas ĉiuj intermixed kaj cluttered. Malpura, ĉu ne? Ripari ĉi, personoj eventuale komencis kapti al disigi iliaj HTML HTML el iliaj CSS stilo uzante iun nomita CSS selectores. CSS selectores uzas por elekti elementojn al kiu deklaroj estas aplikita. Al selector kombinita kun listo de CSS deklaroj estas ofte referita al kiel CSS regulo. Tiuj reguloj estus metita inter malferma kaj proksima HTML stilo etikedoj, ofte en la kapo de la dokumento. 

Estas multe pli facile vidi kun ekzemplo, do ni komencu per la kreado de simplaj CSS regulo. Unue, ni kunigu stilo etikedoj en la kapo sekcio de nia HTML. Tuj poste, la selector. Ni dividas uzante unu el la plej simplaj selectores, la hash simbolo, kiuj selektas HTML elemento de lia ID atributo. En ĉi tiu kazo ni elektu la div kiu reprezentas Rob la enkonduko tajpante la hash simbolo sekvas la div la ID, ŝteli. Nun la deklaroj. Ni aldonu malfermo kaj fermo streĉaj kaj ŝanĝi nian frua inline deklaroj sur Rob la div ene de tiuj krampoj, refresh, kaj, cool, Rob de intro ankoraŭ havas nigran limon ĉirkaŭ ĝi minus la senorda inline malbeleco. 

Nun, kio se ni volis elekti la h1 ene de Rob la intro? Vi eble opinias, "Ni metis ID sur ĝi kaj poste movi nia pli frua stiloj." Kiu funkcias, sed CSS havas aliajn manierojn de lasi vin elekti elementoj uzante kion ni nomas combinators miksi simpla selectores. Ekzemple, spaceto, karaktero povas esti uzata kiel kombinilo specifi cxia okazoj de 1 selector kiuj vivas ene de alia selector. Tio sonas multe pli komplika ol ĝi vere estas. Jen ekzemplo. Ni tajpi # ŝteli, aldonu spaco, kaj sekvu ĝin kun h1, alia simpla selector nomata etikedo selector kiu selektas tipoj de eroj kiel divs aŭ alineojn. La spaco kombinas nia 2 simplaj selectores, aplikante ĉiujn CSS deklaroj kaj la krispa krampoj al h1 etikedoj kiuj vivas ene de la elemento kun id = "ŝteli". Nur konvinki vin ke ĝi funkcias, mi ŝanĝas la tiparon koloron al blanka, refresh, kaj, rigardu, Rob la kaplinio estas nun celo. 

Ĉiuj de ĉi tiu verko montras ke, per la uzo de reguloj anstataŭ inline stiloj ni povas akiri multe pli pura kodo. Fakte, se ĉi tiu stilo bloko komencas atingi iom granda, Mi povas eĉ tiri tiujn stilojn el en malsaman dosieron aro. 

Inkludi tiu nova dosiero CSS en ĉi tiu dokumento mi nur uzas HTML de ligilon etikedo. Jen Mi diras, ke mi kunigas en ekstera stilo folio, la rel atributo, kaj preciziganta la pado al la dosiero kun mia href atributo. Nun mia HTML HTML kaj CSS estas organizitaj bele en tute apartaj dosieroj, kiu estas preskaŭ ĉiam la vojo diseñadores preferas labori kun HTML kaj CSS. 

En kazo vi demandante, la simpla selectores inkluzivas ID selectores kaj etikedo selectores kiel tiuj ni ĵus vidis tiel kiel klaso selectores por elekti elementojn kun ia klaso, atributo selectores por elekti elementojn de aliaj atributoj kiel speco = "radio" por radiobutono enigoj, kaj pseudoselectors kiel ŝvebi kaj enfokusigi por preciziganta stilo kiam interagoj kiel mousing super ero okazi. 

La komuna combinators inkluzivas spaceto por ĉiuj infanoj kaj komojn por distingi selectores. Aliaj vi eble renkontos inkluzivas la sago por rekta infanoj nur, la supersigno por ĉiuj gefratoj kiuj okazas post la ero, kaj la pli signo por la 1 frato kiu venas tuj post la ero. 

Kombinante tiujn selectores kaj combinators, vi povas plivastigi la gamon de stilo vi povas atingi sur donita retpaĝo kaj skribu CSS pli kompetente. Kun nur paro de linioj de CSS vi vidos min tajpi tie ĉi, Mi povas rapide fari ion kiel tio aspektas kiel io tiamaniere. 

Mi estas Jozef, kaj ĉi tiu estas CS50. 

[CS50.TV] 

Uh, kie mi komencu? Lasu min fari tion sen - [ridas] Okay. Aldoni - Lasu min ŝanĝi tion vortumon. Ooh. Pardonu.