Eksempler på CSS i Google Dokumenter

Cascading Style Sheets (CSS) er uunngåelig i moderne webdesign, som inkluderer Google Docs - den frie kontordokumenter suite. CSS effektiviserer siden lastetider og skiller stilelementer fra struktur, noe som gjør koding av hver enklere for designere. Tjenester som Google Dokumenter dra nytte av dette effektivisering, siden det gjør dem i stand til å utføre raskt og problemfritt for alle brukere.

identifisere CSS

Du kan enkelt identifisere CSS ved å vise en webside kilde i nettleseren din. Mens HTML bruker tastaturet symboler <og> for å åpne og lukke kode erklæringer, CSS bruker {og} i stedet. Visuelt er det din første ledetråd. Koden fungerer, men dersom CSS faktisk eksisterer på siden du viser. En av de store tingene om CSS er at designere kan lage et enkelt stilark for å definere utseendet på et helt nettsted. Hvis det er sant for den siden du ser på, vil du se en HTML-kode som kaller retninger fra en egen CSS-dokument, for eksempel <link rel = "stylesheet" type = "text / css" href = "test.css" />. Du kan identifisere dokumentet via Css filtypen.

Eksempler i Google Dokumenter

Når du åpner Google Docs hjemmeside, vises en meny på venstre side av skjermen som lar deg opprette dokumenter, organisere filer og slette noen du ikke lenger vil ha. Til høyre ser du en liste over tidligere opprettede dokumenter. Hvis du aldri har brukt tjenesten før, vil du se en tom plass der den listen vises når du oppretter nye dokumenter. Hvis du ser på siden kilden, vil du se mye av HTML. For å se siden kilden i Firefox, åpne hovedmenyen og velg "Web Developer> Vis kilde" eller bare trykke Ctrl + U. For å se siden kilden i Internet Explorer klikker COG-formet "Verktøy" -knappen på høyre side av verktøylinjen og velg "F12 Developer Tools." I første kvartal av siden, derimot, vil du legge merke til at Google Docs anrop til et eksternt stilark med linjen <link href = 'statisk / Dokumentlisten / klient / css / 1983023911-doclisthome.css' type = 'text / css "rel =" stylesheet ">. Et par linjer under det, bruker Google Docs CSS direkte på siden til å definere atferden til menyelementene. Se etter linjer som begynner med <style type = "text / css"> for å se hvordan CSS styrer separate elementer i Google Dokumenter hjemmeside.

Hva CSS gjør

HTML definerer oppsettet av strukturelle elementer som topptekster, avsnitt og tabeller. Ved hjelp av CSS gir en webside designer med en måte å kontrollere hvordan enkelte elementer oppfører seg. Angi skriftstørrelse, skrifttype, farge og plassering er alle innenfor området for CSS. Siden nettleseren bare trenger å trekke en eneste stilark for å definere hele området, sidene lastes raskere. Dette kan ikke gjøre stor forskjell for de med høyhastighets Internett-tilkoblinger, men det kan gjøre en verden av forskjell for alle som bruker en ekstern tilkobling.

betraktninger

Når du viser en webside kilde i nettleseren din, mors vanlig tekstbehandlingsprogram - for eksempel Windows Notepad eller Mac OS X Notes - vanligvis åpnes på siden. Hvis du jevnlig oppretter kode i et annet program, kan du ha det satt som standard tekstredigeringsprogram. I dette tilfellet er den kildedokumentet mest sannsynlig åpnes i det programmet. Tekst redigering programvare rettet mot koding kan være nyttig når man ser på CSS, fordi det vanligvis viser linjenumre for å hjelpe deg med å holde styr på hva du viser. Google Docs hjemmesiden har 541 linjer med kode, som kan gjøre det være lett å miste plassen.