css

...now browsing by tag

 
 

#GGM10 – CSS intermediate

Sunday, May 23rd, 2010

@annika, Annika Lidne från Disruptive Media berättar mer för oss om CSS.
Block: div, h1, h2, ul, ol, dl, blockquote, p osv.
Inline: span, strong, em, a, img, cite, q osv.
<h2><span>Hej</span></h2>
Skulle man skriva <div>istället för <span> så blir det en ny rad, eftersom div är ett block.

Använd de html koder som finns. Google kommer inte indexera <div id=”headline”> som en rubrik. Använd hellre <h1>. Använd de html element som är där för att användas.
Lär dig hantera html, och sidan bör ha en bra struktur utan CSS. Listor där det ska vara listor. Och så vidare. Ett välstrukturerat html dokument.

Med dålig sourceordering kan det bli jättejobbigt att surfa in på sidan om man inte använder en vanlig dator som kan hantera allt.
Tänk på sourceordningen!
1, 2, 3, 4, 5.
Sortera om source ordering så att det viktigaste är först.

Vanligt när allt “pajjar” i CSS så har man tappat en liten tag någonstans, en ; eller liten tagg.

Plugin: Web Developer, Tools, Validate Kod.
Det är lätt att tappa smågrejer. Enklare att hantera och hitta det man saknar.

Stylesheets:
Media= -all
- screen
handheld
- print
tv
projector
aural

När man börjar göra egna layouter är det vanligaste att man avänder ett css framework. Blueprint var ett av de största, till att börja. 960 Grid System, Fluid 960 Grid System. YUI 2: Grids CSS (Yahoo).

Börja jobba med frameworks, så sparar ni mycket tid. Gridsystemgenerator.com. Layoutgala. Inte bloated, lätt och enkel.
Blueprint Wordpress Theme.
Liknande i Drupal.

IE7.js IE8.js, selective comments. Conditional Comments, googla på det så hittar ni precis vad man behöver skriva för olika IE versioner.
Man kodar för de moderna browserna. En bra upplevelse för FF, Safari, Chrome.

CSS Tools: Reset CSS.
Lägg alltid det först i din CSS-kod.

CSS guru Meyer

CSS3 har kod för runda hörn. Gör sidan lite mjukare och mysigare.
CSS3 round corners, CSS3 Box Shadow.

@font-face, ladda in ett typsnitt. Finns generatorer som laddar upp till olika browsrar.
Typeface generator
Google har nyligen släppt ett typ bibliotek, Open-source.
Fontsquirrel.com/fontface/generator

CSS3.com CSS3.info

#GGM10 – CSS, basics

Saturday, May 22nd, 2010

@annika, Annika Lidne, gav oss en basic genomgång av CSS. Det är ju mycket bloggare, aspirerande bloggare och folk som är allmänt intresserade av att stylea sin sida.

Det första tipset hon gav: Använd inte Internet Explorer, när du utvecklar utseendet på din sida. Det är ej bakåtkompatibelt.
Kort lista av rekommenderade plugins för att jobba design i Firefox:

  • Webdeveloper toolbar
  • Firebug
  • Colorzilla
  • Hon beskrev på ett bildligt intressant sätt kaskadeffekten som används inom hela :n. Det börjar uppifrån och “rinner neråt”.

    Hon berättad kort om p, a och body. Men det blev lite snurrigt. Så jag vet inte vad jag fick med för anteckningar. I sin helhet skrev jag detta:

    p, all text. All brödtext ska vara svart, och ett visst ställe ska vara vitt. Sätta klasser på

    #hej .p
    Ett id/sida. klasser kan man gödsla med!

    a, alla länkar

    body
    innehåll, allt tricklar ner, och kaskad neråt. Fortsatt referens.

    Hon beskrev även för oss hur man skriver CSS-kod som så. CSS skrivs på ett speciellt sätt.
    body {
    color: #färgkod svart = #000000; vit = #FFFFFF
    }

    När man börjar skriva CSS på riktigt, Handkodning ftw!
    Med CSS idag kan man egentligen ändra allting på hela sidan! Vi kan påverka de små detaljerna i ett tema, för att tweaka det som vi vill ha det

    De attribut mellan måsvingarna som man behöver tänka på egentligen är

    Background-color:#
    background;
    color:
    border:

    Sen började hon visa varför hon rekommenderar att man använder Firebug.
    Firebug verkar som ett mycket bra verktyg. Mycket lätt att hitta, var det är man vill ändra i koden. Hon visar hur man enklare redigerar i sin CSS kod med verktyget. Bra och pedagogiskt.
    KASKAD! Glöm inte!!

    Header: norepeat, repeat-y, repeat-x
    Olika stylesheets