[Powered by Google Translate] [CSS] [Joseph Ong - Harvardin yliopisto] [Tämä on CS50. - CS50.TV] 

Tänään me puhua CSS tai Cascading Style Sheets. 

Joten mitä tarkalleen on CSS? No, katsotaanpa murtaa termi CSS alas 2 osaan: Cascading ja Style Sheets. Cascading on hieman monimutkaisempi, ja se on jotain me kattamaan toinen video. Mutta alkajaisiksi, Style Sheets paljon vihjeitä, mitä CSS tekee. Se lisää tyylejä HTML Web-sivun, muuttamalla miten sivun esteettisesti näyttää. Tämä tarkoittaa kaiken fontin tekstin asemointia sivun sisältöön muita hienoja asioita, kuten tekee kulmat laatikko pyöristetty tai lisäämällä varjoja tekstiin. Voit jopa tehdä hulluja asioita, kuten tehdä asioita animoida näytölle. 

Joten miten me kanssa voi käyttää CSS HTML? Ota tämä huono näköinen päällä juuri kirjoitin. Jos Rob oli tarkastella tämän sivuston juuri nyt, hän luultavasti sanoa jotain, "Vau! Minun käyttöönotto näyttää kauhea. Joseph, olet kauhea suunnittelija." "Käyttämällä oletuksena Times fontti? Helvetica on niin paljon parempi." 

Joten mikä voisi olla yksinkertaisin tapa soveltaa muotoilutuotteet Rob haluaa? Ilmeisin tapa paljon ihmisiä aluksi kirjoittivat CSS oli laittaa mitä kutsumme tyyli ilmoitukset aivan itse elementin käyttäen HTML tyyliattribuutti. Tyyli julistus yksinkertaisesti koostuu HTML elementin CSS omaisuus haluamme muuttaa seuraa kaksoispiste seurasi uuden omaisuuden arvo ja puolipiste lopussa. Esimerkiksi sanokaamme Rob haluaa mustan reunuksen avauspuheenvuorossaan. Ensin laittaa tyyliin määritteen Rob div täällä Sitten sisälle lainausmerkit laittaa CSS ilmoitus: "Border: 1px solid black;" 1 pikseli viittaa leveys on kiinteä viittaa tyyli rajan, ja värin lopussa määrittää, mitä rajan väri on. 

Jos haluamme useita tyylejä elementti, kirjoittaa näiden ilmoitusten järjestyksessä. Jos esimerkiksi Rob haluaa hänen otsikon tekstin Helvetica sinisellä pohjalla ja enemmän tilaa ympärillä tekstiä, voimme tehdä tämän: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Viimeinen puolipiste on todella vapaaehtoista, mutta ihmiset yleensä pitävät sitä johdonmukaisuuden vuoksi. 

Me säästää selittää joitakin viileämpi ja monimutkaisempi CSS-ominaisuuksia toisen videon. Jos sinulla on jotain mielessä, vain Googling vaikutusta haluamasi seurasi CSS luultavasti antaa sinulle melko hyviä tuloksia. Cool juttu on, että CSS on melko laaja, joten kertoimet ovat jos on jotain haluat tehdä - kohtuuden rajoissa - CSS voi todennäköisesti tehdä sen. Kutsumme tällaista muotoilutuotteet inline tyyli. Elementti tyyli on hyvin linjassa alkutunniste. 

Ihmiset, jotka todella haluavat järjestää, voit alkaa saada hieman kiukkuinen, miten sotkuinen tämä kaikki näyttää. Kuvittele, jos oli pakko tehdä jokaisen elementin sivulla, plus nyt HTML ja CSS ovat kaikki sekoittuneet ja sekavalta. Gross, eikö? Voit korjata tämän, ihmiset lopulta alkoivat kiinni siitä erottaa niiden HTML markup niiden CSS-tyyleille käyttämällä jotain kutsutaan CSS valitsimet. CSS valitsimet käytetään valitsemaan elementtejä ilmoitusten sovelletaan. Valitsin yhdistettynä luettelon CSS ilmoitusten on usein kutsutaan CSS-sääntö. Nämä säännöt olisi laittaa välillä auki ja sulje HTML tyyli tunnisteita, usein pään asiakirjan. 

On paljon helpompi nähdä esimerkiksi, joten aloitetaanpa luomalla yksinkertainen CSS-sääntö. Ensimmäinen, nyt laittaa tyyliin tageja pää osiosta HTML. Seuraavaksi valitsin. Aloitamme pois jollakin yksinkertaisin valitsimet, hash symboli, joka valitsee HTML-elementti sen tunnus-määritteen. Tässä tapauksessa me valita div joka edustaa Rob käyttöönoton kirjoittamalla hash symboli seurasi div tunnus, Rob. Nyt ilmoitukset. Lisäämme auki ja kiinni henkselit ja siirtää aikaisemmassa inline ilmoituksia Rob div sisällä näitä housunkannattimet, virkistää, ja, viileä, Rob intro on edelleen musta reunus se miinus sotkuinen inline rumuus. 

Nyt, mitä jos me halusimme valita H1 sisäpuolelta Rob intro? Saatat ajatella, "Laitetaan tunnus sitä ja sitten siirtyä aiempien tyylejä." Se toimii, mutta CSS on muita keinoja joten voit valita elementtejä käyttäen mitä kutsumme combinators sekoittaa yksinkertainen valitsimia. Esimerkiksi välilyönti luonnetta voidaan käyttää combinator määrittää kaikki esiintymät 1 valitsin elävät sisällä toisen valitsimen. Se kuulostaa paljon monimutkaisempi kuin se todellisuudessa on. Tässä esimerkki. Me tyyppi # ryöstää, välilyönti, ja seurata sitä H1, Toinen yksinkertainen valitsin kutsutaan tag valitsin, joka valitsee eri elementtien kuten divs tai kohdat. Tila yhdistää meidän 2 yksinkertaisia ​​valitsimet, soveltamalla kaikkia CSS ilmoitukset ja aaltosulkeita H1 tageja, jotka elävät sisällä elementin id = "ryöstää". Vain vakuuttaa teille, että se toimii, minä vaihtaa fontin väriä valkoinen, virkistää, ja, katso, Rob otsikko on nyt valkoinen. 

Kaikki tämä työ osoittaa, että käyttämällä sen sijaan, että rivinsisäistyylejä saamme paljon puhtaampaa koodia. Itse asiassa, jos tämä tyyli lohko alkaa saada hieman suuri, Voin jopa vetää näitä tyylejä ulos eri tiedosto kokonaan. 

Jotta tämä uusi tiedosto CSS Tässä asiakirjassa minä vain käyttää HTML: n linkkiä tag. Täällä minä kerron sen, että olen linkittämisen ulkoinen tyylisivu, rel-määritteen ja täsmennetään tiedoston polku minun href attribuuttia. Nyt minun HTML markup ja CSS järjestetään hienosti täysin erillisinä tiedostoina, joka on lähes aina tavalla suunnittelijat haluavat työskennellä HTML ja CSS. 

Vuonna Jos mietit, yksinkertainen valitsimet ovat ID valitsimet ja tag valitsimet kaltaisia ​​me juuri näimme sekä luokan valitsimet valittaessa elementtejä tietyn luokan, attribuuttivalitsimet valitaan elementit muita määritteitä kuten type = "radio" varten valintanappi tuloa, ja pseudoselectors kuten hääriä ja keskittyä spesifioimiseksi muotoilu kun vuorovaikutus like Hiiritehosteiden yli elementti esiintyy. 

Yhteinen combinators sisältävät välilyönnillä kaikille lapsille ja pilkut erottaa valitsimia. Toiset saatat kohdata sisältää nuolen suoraan lapsille vain, tilde kaikki sisarukset, jotka tapahtuvat sen jälkeen elementti, ja plus merkki 1 sisarus, joka tulee heti elementin. 

Yhdistämällä nämä valitsimet ja combinators, voit laajentamaan styling voit saavuttaa tietyllä sivun ja kirjoittaa CSS tehokkaammin. Vain pari riviä CSS näet minut kirjoittaa tänne, Voin tehdä nopeasti jotain tällaista näyttää jotain tällaista. 

Olen Joseph, ja tämä on CS50. 

[CS50.TV] 

Uh, missä voin aloittaa? Anna minun tehdä se ilman - [nauraa] ​​Okei. Lisää - Haluan muuttaa tätä sanamuotoa. Ooh. Anteeksi.