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

Tänään me puhua CSS tai CSS. 

Joten mitä on CSS? No, katsotaan murtaa aikavälin CSS alas 2 osaan: CSS ja Style Sheets. CSS on hieman monimutkaisempi, ja se on jotain, me kattaa toisessa video. Mutta alkajaisiksi, Style Sheets paljon vihjeitä, mitä CSS tekee. Se lisää tyylejä HTML web-sivulla, muuttuvat miten sivun esteettisesti näyttää. Tämä tarkoittaa kaikkea fontin tekstin asemointi sivun sisältöön muita hienoja asioita, kuten tekee kulmat laatikko pyöristetty tai lisäämällä varjoja tekstiä. Voit jopa tehdä hulluja asioita, kuten tehdä asioita animoida ruudulla. 

Miten siis käyttää CSS HTML? Ota tämä huono näköinen sivusto juuri kirjoitti. Jos Rob katsoisi tällä sivustolla juuri nyt, hän luultavasti sanoa jotain, "Wow! My 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 muotoilu Rob haluaa? Ilmeisin tapa paljon ihmisiä aluksi kirjoitti CSS oli laittaa mitä kutsumme tyylikuvauksien aivan itse elementin käyttämällä HTML tyyliattribuutti. Tyyli julkilausuman yksinkertaisesti koostuu HTML elementin CSS omaisuutta haluamme muuttaa seuraa kaksoispiste uuden omaisuuden arvo ja puolipiste. Esimerkiksi sanokaamme Rob haluaa musta reunus avauspuheenvuorossaan. Olemme ensimmäistä kertaa tyyliattribuutti Rob n div täällä sitten sisällä lainausmerkkeihin laittaa CSS ilmoitus: "Border: 1px solid black;" 1 pikseli viittaa leveys rajan, kiinteä viittaa tyyliin rajan ja väri lopussa määrittää, mitä rajan väri on. 

Jos haluamme useita tyylejä elementti, kirjoittaa näitä ilmoituksia järjestyksessä. Jos esimerkiksi Rob haluaa hänen otsikon tekstin Helvetica sinisellä taustalla ja enemmän tilaa tekstin ympärille, voimme tehdä tämän seuraavasti: 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 jäähdytin ja monimutkaisempia CSS-ominaisuuksia toisen videon. Jos sinulla on jotain mielessä, vain Google-hakuja vaikutusta haluat seurasi CSS luultavasti antaa sinulle melko hyviä tuloksia. Viileä asia on, että CSS on melko laaja, niin kertoimet ovat, jos on jotain haluat tehdä - kohtuuden rajoissa - CSS voi todennäköisesti tehdä sen. Kutsumme tällaista muotoilu inline muotoilu. Elementti tyyli on hyvin, mukaisesti alkutunnisteen. 

Ihmisiä, jotka todella haluavat järjestää, saatat alkaa saada hieman ärtynyt, miten sotkuinen tämä kaikki näyttää. Kuvittele, jos olisit tehdä tämän jokaisen elementin sivulla, plus nyt HTML ja CSS ovat kaikki keskenään sekoitetut ja sekavaa. 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 valita elementtejä ilmoitusten sovelletaan. Valitsin yhdistettynä luettelo CSS-ilmoituksia on usein kutsutaan CSS-sääntö. Nämä säännöt olisi laittaa avoimen ja sulje HTML tyyli tunnisteet, usein pään asiakirjan. 

On paljon helpompi nähdä esimerkiksi joten aloitamme luomalla yksinkertainen CSS sääntö. Ensimmäinen, nyt laittaa tyyliin tageja head osiosta HTML. Seuraavaksi valitsin. Aloitamme jollakin yksinkertaisin valitsimet, hash symboli, joka valitsee HTML-elementti sen tunnus-määritteen. Tässä tapauksessa me valita div, joka edustaa Rob käyttöönottoa kirjoittamalla hash symboli ja sen jälkeen div: n tunnus, Rob. Nyt ilmoitukset. Lisäämme avata ja sulkea henkselit ja siirrämme aiemmin inline ilmoituksia Rob div sisällä näitä henkselit, virkistää, ja viileä, Rob intro on edelleen musta reunus se miinus sotkuinen inline rumuus. 

Nyt, mitä jos halusimme valita H1 sisällä Rob intro? Saatat ajatella, "Laitetaan ID sitä ja sitten siirtyä aiempien tyylejä." Se toimii, mutta CSS on muita tapoja jolla voit valita elementtejä käyttämällä mitä kutsumme combinators sekoittaa yksinkertainen valitsimia. Esimerkiksi välilyönti merkki voidaan käyttää combinator määrittää kaikki esiintymät 1 valitsin, jotka elävät sisällä toisen valitsin. Kuulostaa paljon monimutkaisempi kuin se todellisuudessa on. Tässä on esimerkki. Aiomme kirjoittaa # ryöstää, lisää tilaa, ja seurata sitä H1, toinen yksinkertainen valitsin kutsutaan tag valitsin, joka valitsee eri elementtien kuten divs tai kappaleissa. Tila yhdistää meidän 2 yksinkertainen valitsimen soveltaa kaikkia CSS ilmoitukset ja aaltosulkeiden H1 tageja, jotka elävät sisällä elementin id = "ryöstää". Vain vakuuttaa teille, että se toimii, minä muuttaa fontin väriä valkoinen, virkistää, ja katso, Rob otsikossa 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 iso, 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 link tag. Täällä kerron sen, että olen linkitys ulkoisen tyylitiedoston, suht ominaisuus, ja täsmennetään tiedoston polku minun href. 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. 

Jos olet mietit, yksinkertainen valitsimiin kuuluu ID valitsin ja tag valitsimet, kuten niitä me juuri näki sekä luokkavalitsimien valittaessa elementtejä tietyn luokan, attribuuttivalitsimet valitaan elementit muita ominaisuuksia, kuten type = "radio" radio-painiketta tuloa, ja pseudoselectors kuin leijuvat ja keskittyä määrittämisestä muotoilu, kun vuorovaikutus like mousing yli elementin esiintyä. 

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

Yhdistämällä nämä valitsimet ja combinators, voit laajentamaan muotoilu voit saavuttaa tietyllä web-sivun ja kirjoittaa CSS tehokkaammin. Vain pari riviä CSS näet minut kirjoittamalla täällä, En voi nopeasti tehdä jotain tällaista näyttää jotain tällaista. 

Olen Joseph, ja tämä on CS50. 

[CS50.TV] 

Uh, mistä aloitan? Anna minun tehdä, että ilman - [nauraa] ​​Okei. Lisää - Haluan muuttaa sen sanamuotoa. Ooh. Anteeksi.