torstai 17. syyskuuta 2015

Tärkeimmät CSS-parametrit

Saimme tehtäväksi koota CSS parametreista 20 tärkeimmäksi katsomaamme blogiin. Tässä ovat minun valintani.

background-color
Tämä parametri määrittää taustavärin
{background-color:#15AE7A}

font-family
Tämä määrittää fontin, tai fonttiperheen.
h1 {font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif}

image-resolution
Määrittää kuvan resoluution elementissä.
image-resolution: [value];

text-align
Määrittää tekstin linjauksen elementissä.
Esim:
text align: center;
text align: end;

transition-delay
Tällä parametrillä määrität milloin transitio tarkalleen alkaa.
transition-delay: <time>;

color
Tällä parametrillä määrität tekstin värin elementissä.
color: blue;
color: #6486FT;
color: #CCC;
color: rbga (28, 28, 28, 0.5)

image-orientation
Tällä parametrillä määrität sen, missä kulmassa jokin kuva elementissä on.
image-orientation: 90deg;

voice-balance
Tällä parametrillä määrität elementin tasapainon oikean ja vasemman audiokanavan välillä.
voice-balance: [-100-100]

color-profile
Tällä parametrillä määrität elementin väriprofiilin.
color-profile:auto/sRGB/<name>/<uri>/inherit

font-variant
Tällä parametrillä määrität fontin kasvot
font-variant: normal/small-caps;

font-size
Tällä parametrillä määrität fontin koon.
font-size: 20px;

visited-link/unvisited-link
Tällä parametrillä voit asettaa eri värit klikatuille ja klikkaamattomille linkeille.
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;

border-outline
Tällä parametrillä voit laittaa elementille rajat.
p {
    border: 1px solid red;
    outline: green dotted thick;
}

h1.hidden
Tällä parametrillä saat piilotettua elementin. Siitä kuitenkin jää tyhjä tila näkyviin.
h1.hidden {
    visibility: hidden;
}

center-align
Tällä parametrillä saat marginin tasaamaan keskustan kanssa.
.center {
    margin: auto;
    width: 60%;
    border:3px solid #8AC007;
    padding: 10px;
}

background-attachment
Tällä parametrillä määrität sen, tuleeko background kuva scrollaamisen mukana, vai onko se koko ajan samassa paikassa.
body {
    background-image: url("w3css.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}


font-language-override
Tällä parametrillä määrität kielikohtaisten merkkien käytön määrittämällä elementin sisältökielen.
font-language-override: normal/<string>;

text-combine-upright
Tällä parametrillä voit laittaa useita kirjaimia yhden kirjaimen tilan sisään. Esim.
text-combine-upright: [2]

min-height
Määrittää elementin minimikorkeuden.
min-height: 200px;

line-height
Tällä parametrillä määrität kuinka paljon tilaa rivien välissä on.
line-height: 100%;

word-spacing
Tämä parametri määrittää kuinka paljon väliä sanoilla on tekstissä.
word-spacing: 35px;



Ei kommentteja:

Lähetä kommentti