CSS muotoiluihin

  • Kuviin on hyvä laittaa asetus min width: auto, max width:; 100% (tai 95%)
  • Että näyttää hyvältä kapeammmissakin näytöissä, tehdään erilaiset määrittelyt esim. @media(max-width:800px;{… (Näytölle joka on alle 800 px säädöt omat määritykset) -tai muu haluttu px arvo
  • Kaiki css määritykset periytyy seuraaviin css:iin, paitsi niiltä osin joihin tehdään muutokset.
  • Voi tehdä omat css-määritykset esim. max 1200 px, max 1000 px ja max 800 px leveyksiin. (=Pöytänäyttö/läppäri, tablet, känny)
  • Linkeistä yleensä määritellään pois alleviivaus: a:link {text-decoration: none;
  • Otsikoista kannattaa ottaa pois väkisinlihavointi (oletusarvoisesti lihavoi otsikot muuten ja voi näyttää tyhmältä). Esimerkiksi h1:lle font weight: 400px;    (400px on yhtä kuin älä lihavoi koska se on normivahvuus)
  • Tavutus määritellään pois tai päälle:   (Suomenkielisessä tekstissä on pitkiä sanoja, joten tavutus voi olla hyvä olla leipätekstissä varsinkin kapeissa palstoissa ja kapeissa äytöissä)
    hyphens: none;    (tavutus pois)
    hyphens: auto      (tavutus päällä)
  • Bodylle margin: 0; ->poistaa pienen oletusmarginaalin
  • Jos haluaa kaikki oletusmarginaalit ja paddingit pois heti alkuunsa, ettei tarvi jokaiseen erikseen niitä määritellä nolliksi voi laittaa css:ään:
* {
  margin: 0;
  padding: 0;
}
  • Containerin keskitys:  #container tai .container   max-width: 1200px;   (Leveys jonka haluat; 1000-1200 ok)
    margin left ja right: auto;     ja paddingia joka puolelle sopivasti
  • Perus leipä-fonttikoko 17 px, mutta kannattaa miettiä onko fonttien koot, välistykset ym. parempi olla joustavina määrittelyinä.
  • Linkkien määritykset (ettei tuu oletusvärit) link/visited/hover/active
  • Line-height eli rivin korkeus:    esim. otsikolle (h1:lle ym) 1.1, ja leipätekstille 1.2     Korjaa sen, että kapealla palstalla otsikon rivien väliin jäisi liikaa tyhjää tilaa.
  • Main:ille: display: block}       (IE:n ongelman takia, jos sitä joku vielä erehtyy käyttämään)

Div ID ja div CLASS on kaksi eri asiaa, mitä eroa

  • Div = lohkoelementti nettisivulla
  • Div-elementille annetaan yleensä nk. CLASS tai ID attribuutti(=määrittely), jolla saadaan määriteltyä elementin ulkoasu
  • Div voi olla Div ID tai Div CLASS
  • ID-selectori voittaa aina vaikka Class olisi myöhemmin, vaikka yleensä jälkimmäinen voittaa
  • Kahdella elementillä samalla sivulla ei saa olla samanarvoista ID:tä, mutta classeja voi olla monta
  • CSS-tiedostossa ID-viittaus risuaidalla #
  • CSS-tiedostossa CLASS-viittaus pisteellä .
  • PAITSI body, header, main, nav, footer ei tule koskaan mitään eteen (ei risuaitaa eikä pistettä)
    näitä on sivulla vain yksi kutakin eikä tarvita mitään classia
  • ”Itsekeksittyihin” tulee siis piste aina esim   .logo   .otsikko   .some
  • Esim. HTML:ssä     <div id”container”></div>
    jolloin CSS:ssä    #container
    Esim. HTML:ssä     <div class=”container”></div>                   
    jolloin CS:ssä .container
  • CSS:ssä oi olla erilaisia yhdistelmiä, kuten body .img:hover (=kun kursori on bodyssä olevan kuvan päällä)

Muita muotoiluja

Viivan alla erilainen alaosa (Tehtiin Aleksis Kivi -harjoituksessa)

Html:ään
<p class= ”alaosa”>haluttu teksti</p>

Css:ään
.alaosa{                font-style: italic;    border-top: 2px;   solid rgba (0,0,0,0.55);      margin-top:. 42px;   padding-top: 9px;}

Kuva oikealle (Tehtiin Aleksis Kivi -harjoituksessa)

Css:ään
.kuvitus oikealla{ float: right;       vertical align: 2px;        margin:0;      margin-left: 20px;

Kännyyn eri sääntö:
@media (max-width: 609px){     .kuvitus oikealla{float: one;    margin; 0;   }

Otsikon ja kappaleiden välisiä säätöjä

(Väliotsikon jälk. tekstikpl saadaan lähelle otsikkoa)                                          

h2, h3                (väliotsikot h2 ja h3)                 margin-top0;   (margin-top0 ottaa oletusmarginaalin pois)                             

h2 + p                (välittömästi h2-väliotsikon jälkeen tuleva tekstikappale)     margin-top0;                                                          

h2+p, h3+ul     (h2:n jälkeen tuleva kappale sekä h3:n jälkeen tuleva luettelo)             margin-top0;                                      

h2                        (h2 väliotsikot)                            margin-top 44px; margin-bottom:0px;   

h2~p                   (alaotsikkoa seuraavalta tekstikappaleelta ylämarginaali pois vaikka välissä olisi kuva)
aaltomerkki tulee alt gr- näppäin ja enterin vas. puolella oleva näppäin jossa aaltomerkki ym
– paina ensin ne molemmat ja sitten vaan se toinen …tai jotenkin niin se tulee
          margin-top0; vai periytyykö?