perjantai 12. syyskuuta 2014

css top 20 parametrit

1.background-color
Vaihtaa taustan väriä sen mukaan minkä väri koodin pistät.
background-color:#ff0000

2.font size
Vaihtaa tekstin fontti kokoa
<p style="font-size:20px;">This text is using a font size of 20 pixels.</p>

3.relative positioning
Voit päättää minne esim jokin teksti menee. Esim meneekö reunaan muista vai keskelle
<p>moro</p>
<div style="position:relative;left:50px;background-color:yellow;width:90px;">
Tämä on keskellä.
</div>

<p>moro</p>

4.layers
Voit laittaa asioita päällekkäin
<div style="background-color:red;width:80px;height:100px;position:relative;top:10px;left:80px;z-index:2;">
</div>
<div style="background-color:yellow;width:80px;height:100px;position:relative;top:-60px;left:35px;z-index:1;">

</div>

5.font-family
Laitat fontteja siltä varalta jos joku selain ei tunnista jotain fonttia
<p style="font-family:georgia,garamond,serif;">

6.Text-shadow
määrittää tekstille varjon
h1{
  text-shadow: 4px 4px 6px red    
  }


6.Empty-cells
Määrittää näytettäänkö tyhjät lokerot
table {
   empty-cells: hide, show, inherit; 
   }

7.volume
Jos sivulla on musiikkia tämä määrittää kuinka kovalla se on
h1{
  volume: 50;}


8.outline
Määrittää reunukset
p { 
  outline: thick solid red   
  }


9.margin
siirtää koko teksti laattikkoa
p {
      padding-top: 50px;       (ylä 50px)
       padding-bottom: 50px;       (ala 50px)
       padding-right: 50px;       (oikea 50px)
  padding-left: 50px;       (vasen 50px)
  }


10.boarder
Voi tehä laattikon tekstin ympärille
div.styled {
     border:2px dotted #ff0000;
     }
   <div class="styled">


11.white-space
määritettään rivin vaihto
p {
      white-space: nowrap, normal, pre, inherit;
  }


12.float
määrittää onko teksti oikealla vai vasemalla
h1{
  float: left  
  }


13.padding
Siirtää tekstiä laatikon sisällä
p {
      padding-top: 50px;       
       padding-bottom: 50px;       
       padding-right: 50px;    
  padding-left: 50px;       
  }


14.color
määrittää taustan tai fontin tekstin
h1{
  color: red;
  color: #ff0000;

      }

15.font variant
pystyt pistään tekstiin esim joka sanan ekan kirjaimen isoksi.
<p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>

16.wildth
Määrittää jonkin objektin tai tekstin leveyden
 width: 20%;

17.height
Määrittäää jonkin objektin tai tekstiin korkeuden

18.position
Määrittää objektin tai tekstin asettamis tavan. esim kuva voidaan laittaa liikkumaan mukana vaikka rullaat sivua.
- position: stati, absolute, fixed,relative;

19word-spacink
Määrittää valkoisen alueen kirjainten väliin
- word-spacing: normal | length;

20.word-wrap
Sallii pitkien tekstien pakollisen rivin vaihdon
 word-wrap: normal | break-word;









Ei kommentteja:

Lähetä kommentti