[Powered by Google Translate] [CSS] [Jozef Ong - Universitato Harvard] [Ĉi tiu estas CS50. - CS50.TV] 

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

Do kio precize estas la CSS? Nu, ni rompas la termino CSS malsupren en 2 partoj: Akvofalo kaj Style Sheets. Akvofalo estas iomete pli kompleksa, kaj ĝi estas io ni kovros en alia video. Sed por komenci, Style Sheets tre aludoj je kio CSS faras. Ĝi aldonas stilojn al la HTML de TTT-paĝo: ŝanĝas kiel la retpaĝo estetike aspektas. Tio signifas, ĉion de la tiparo de la teksto al la investon de la enhavo de la paĝo al aliaj malvarmeta aĵoj kiel fari la anguloj de skatolo rondigita aŭ aldonante ombrojn 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 ĵus skribis. Se Rob estis por rigardi tiun retejon ĝuste nun, li estis probable dirus ion kiel, "Wow! Mia enkonduko aspektas terura. Jozef, vi estas terura 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 multaj personoj komence skribis CSS estis meti kion ni nomas stilo deklaroj rajton en la elemento mem uzante la HTML stilo atributo. Stilo deklaro simple konsistas la HTML elemento CSS proprieto ni volas ŝanĝi sekvata de dupunkto sekvis la nova valoro de la bieno kaj punktokomo ĉe la fino. Ekzemple, diru Rob volas nigran limon cxirkaux lia enkonduko. Ni unue metis la stilo atributo de Rob La div tie tiam ene citiloj metis CSS deklaro: "Border: 1px solid black;" La 1 rastrumero 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 kapon teksto en Helvetica kun blua fono kaj pli da 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 konsekvenco la sake. 

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

Por uloj, kiuj vere ŝatas esti organizita, vi povus komenci ricevas iom peeved je kiom senorda tio cxiuj aspektas. Imagu se vi devis fari tion por ĉiu elemento en la paĝo, alpago nun via HTML kaj CSS estas ĉiuj intermixed kaj cluttered. Malpura, ĉu ne? Por solvi tiun, personoj eventuale komencis kapti al disigante siajn 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 metus 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 dividi uzante unu el la plej simplaj selectores, la hash simbolo, kiuj selektas HTML elemento por lia ID atributo. En tiu kazo ni elektu div kiu reprezentas Rob la enkonduko tajpante la hash simbolo sekvas la div la IRU, ŝteli. Nun la deklaroj. Ni aldonas malfermo kaj fermo streĉaj kaj ŝanĝi nian frua inline deklaroj sur Rob La div ene de tiuj krampoj, refreŝigi, kaj, malvarmeta, Rob de intro ankoraŭ havas nigran limon ĉirkaŭ ĝi minus la senordaj inline malbeleco. 

Nun, kio se ni volis elekti la h1 ene de Rob de intro? Vi povus pensi, "Ni metis ID sur ĝi kaj poste movi niajn antaŭaj stiloj." Tio 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 ĉiuj petskriboj 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 identigilo = "ŝteli". Nur konvinki vin ke ĝi funkcias, mi ŝanĝas la tiparon koloron al blanka, refreŝigi, kaj, rigardu, Rob la kaploko nun estas blanka. 

Ĉio ĉi laboro 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 malsama dosiero entute. 

Inkludi tiu nova dosiero CSS en ĉi tiu dokumento mi nur uzi HTML estas ligas etikedo. Jen mi diras al ĝi 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 vidis tiel kiel klaso selectores por selekti elementoj kun certa klaso, atributo selectores por selekti elementoj 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 la rekta infanoj nur, la supersigno por ĉiuj gefratoj, kiuj okazas post la elemento, kaj la signo por la 1 frato kiu venas tuj post la ero. 

Por kombini tiujn selectores kaj combinators, vi povas plivastigi la gamon de stilo vi povas atingi sur donita retpaĝo kaj skribi CSS pli efike. Kun nur paro de linioj de CSS vi vidas min tajpi ĉi tie, 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? Permesu al mi fari tion sen - [ridas] Okay. Aldoni al - Lasu min ŝanĝi tion vortumon. Ooh. Pardonon.