Innholdsfortegnelse:
- La brukerne kontrollere skriftstørrelsen
- Sørg for at grensene dine kommer opp
- Pass på fargekollisjoner
- Timing uskarphet og andre effekter
- Dette er en sløret effekt over tid.
- Finn en liste Apart
- Bruke dine egne kuler i lister
- Angi grafiske steder
- Kombinere klasser
Video: 8 CSGO PRO TIPS - Counter-Strike Global Offensive 2024
En del av CSS Web Design for Dummies Cheat Sheet
Selv når du bruker Cascading Style Sheets CSS), å bygge en funksjonell (men fortsatt attraktiv) nettside krever nøye gjennomføring og planlegging. Her er noen tips som gjør at nettstedet ditt skiller seg ut.
La brukerne kontrollere skriftstørrelsen
Prøv å unngå å spesifisere kroppens skriftstørrelse. Ikke gjør dette, for eksempel:
body {font-size: 24px;}
Folk har angitt nettleserens alternativer til en tekststørrelse som er lesbar for dem. Du vet ikke om de har en pikseloppløsning på 1680 × 1050 eller 800 × 600 piksler. Det gjør en forskjell. Brukeren bør være den som bestemmer hvor stor de vil ha sin tekst, ikke du.
Sørg for at grensene dine kommer opp
Her er en vanlig CSS programmeringshode-scratcher:
p {border: 12px;}
Til tross for denne regelen du skrev, nei grensen vises rundt avsnittene. Du vil logisk tenke at ved å spesifisere en grenseverdi, ser du en grense. Ikke så. Med mindre du også angir en grense stil , får du ikke en ramme. Standardstilen er ingen, så endre den til å inkludere en stil:
p {grense: solid 12px;}
Pass på fargekollisjoner
Hva om du angir en tekstfarge, men klarer ikke å angi en bakgrunnsfarge? Høres ufarlig, men det kan være et problem. Enkelte brukere bruker personlige stilark, inkludert deres favorittfarger. Hva skjer hvis en bruker spesifiserer brun for bakgrunnen og hvitt for teksten sin? Si at du spesifiserer brun for teksten din:
BODY {color: brown;}
Brukeren vil ikke se teksten i det hele tatt fordi bakgrunnsfargen og forgrunnsfargen din er identisk. Løsningen? Alltid angi en bakgrunn hvis du skal farge teksten. Da har du kontroll over hvordan teksten ser ut mot den bakgrunnen:
BODY {farge: brun; bakgrunnsfarge: gul;}
Timing uskarphet og andre effekter
Kombiner timere, skript og filtre for å skape mange dynamiske visuelle effekter. Prøv denne kule effekten i Internet Explorer:
dim counter funksjon startTimer () timerhandle = setInterval ("sizeit", 130) sluttfunksjon funksjon stopTimer () clearTimeout (timerhandle) sluttfunksjon funksjon sizeit () counter = counter + 1 hvis counter> 49 deretter counter = 1 n = "uskarphet (add = 1, direction = 125, strength =" & counter & ")" divider. stil. filter = n sluttfunksjon div {posisjon: absolutt; filter: uskarphet (legg til = 1, retning = 15, styrke = 90 ";}
Dette er en sløret effekt over tid.
Prøv å variere hastigheten på filteret ved å justere verdien 130 i denne linjen:
timerhandle = setInterval ("sizeit", 130 )
Finn en liste Apart
En kilde For gode ideer, eksempler og artikler - levert av noen av de mest talentfulle webdesignerne rundt - er A List Apart, som har et forum dedikert til CSS.
Bruke dine egne kuler i lister
Med CSS, er det enkelt å designe tilpassede kuler i et grafikkprogram, og deretter tilordne dem til listeoppføringer. Følgende kode gir resultatet som vises i figuren som umiddelbart følger den.
ul { listestil-bilde: url ("mybullet. Jpg") ; font: 32px;}
- første
- andre
- tredje
Angi grafiske steder
Hvis du lagrer en grafikkfil i samme mappe som din. htm eller. html-fil, trenger HTML-koden bare navnet på grafikkfilen, slik som dette:
listestil-bilde: url ("mybullet. jpg")
Men hvis filen er på et annet sted, må du gi banen til den plasseringen, og gjør noen bisarre tegnsetting også - legge til en ///, av en eller annen grunn. Dette neste eksempel finner denne filen i rotkatalogen av c: stasjonen:
listestil-bilde: url ("fil: /// C: mause.jpg" )
Her er en fil som ligger i fotokatalogen av f: stasjonen:
listestil-bilde: url ("file: /// F: Photosmause. jpg")
Her er den ekstra bizarre tegnsetningen (///) du må legge til for et lokalt nettverkssted:
listestil-bilde: url ("file: /// HpservrPHOTOSmause. jpg")
Hvis du beholder dine grafiske filer på et nettsted, må du oppgi nettadressen adresse.
Til slutt, hvis grafikkfilen din er lagret i romfergen, bruk denne tegnsetting:
"fil: /// \ / ^^^ outerspaceservrPHOTOSmause. Jpg"
Samme tegnsetting og konvensjoner er brukes når du angir src = attributtet for å laste inn en grafikk i et HTML
Du kan ikke se noen av grafikkene dine når du flytter nettsidene dine fra din lokale datamaskin til en server for å sende dem på Internett. Hvis det skjer, sjekk filbaner for å sikre at grafikkfilene er plassert der koden sier at de er. Den enkleste taktikken er å bare beholde alle avhengighetsfiler (for eksempel grafikkfiler) i samme katalog som din. htm og. css-filer. På den måten kan du bruke relative baner, noe som betyr at du ikke spesifiserer noen vei i det hele tatt i koden din, bare filnavnet. Nettleseren forstår at den skal se etter grafikken din på samme måte som den fant HTML-filen.
Kombinere klasser
Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv. Si at du vil ha noen av avsnittene innrammet i grønt, noen i blått og andre i rosa. Du kan opprette en egen klasse for hver type avsnitt, eller du kan være smart og lage en generell grensesnittklasse og tre tilleggsklasser for fargen. Slik fungerer det. Først lager du fire stiler, og så kombinerer du klassenavnene i HTML-elementene når du bruker klassen = attributt:
.innrammet { border: solid 3px rød; polstring: 6px;}. rosa {bakgrunnsfarge: rosa;}. blå {bakgrunnsfarge: blå;}. grønn {bakgrunnsfarge: grønn;}
class = "innrammet grønn" >> Du kan spare deg litt tid og problemer ved å definere klasser som kombineres senere, som adjektiver kombinere med substantiv. class = "framed blue" >> Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv.
class = "framed pink" >> Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv.
