Pientä määreselitettä, mitä on ihan hyvä tietää:
- LAATIKOT:
- Margin - elementin ulkopuolella olevan "näkymätön" alue.
- pystytään määrittämään pikseleinä, prosentteina ja automaattisesti (px, %, auto)
- pystytään käyttämään top, bottom, left, right yhteydessä (esim margin-right:)
- Border - elementin näkyvä reunus.
- pystytään määrittämään leveys, väri ja tyyli
- solid - normaali viiva
- dotted - pisteitä
- dashed - katkoviiva
- double - kaksi viivaa/"kehykset"
- groove, ridge, inset, outset. Neljän viimeisen ulkonäkö riippuu reunuksen väristä, mutta ovat ns. 3D -bordereita.
- pystytään käyttämään top, bottom, left, right yhteydessä (esim border-left-style:)
- Padding - elementin ja reunuksen välinen alue, jonka väri määrittyy elementin värin mukaan.
- yhtäläinen käyttö marginin kanssa
- Element/content - Kohta jossa teksti, kuvat, yms sijaitsevat.
- ESIMERKKIKUVA, klikkaa nähdäksesi.
- TEKSTI:
- Color - määrittää tekstin värin.
- voidaan käyttää värien nimiä, rgb määreitä ja heksadesimaaliarvoja (red, (245,0,0) tai #ffffff)
- Text-align - määrittää tekstin tasauksen.
- center - teksti on keskelle tasattu
- right/left - oikealle/vasemmalle tasattu
- justify - tekstin jokaisella rivillä on sama mitta, ja jokainen rivi venytetään sen mukaan
- Text-decoration - määrittää alle- ja yliviivauksen, sekä poistaa määreet
- none - ei alleviivausta
- underline - alleviivaus
- overline - viiva tekstin yläpuolella
- line-through - yliviivaus
- blink - teksti vilkkuu
- Text-transform
- uppercase - TEKSTI ON VAIN ISOILLA KIRJAIMILLA
- lowercase - teksti on vain pienillä kirjaimilla
- capitalize - Tekstin Jokaisen Sanan Ensimmäinen Kirjain On Isolla Kirjaimella
- FONTTI:
- Font-family - määrittää fontin ja mahdollisesti sen sukulaisfontit tekstille
- Muutama fontti jotka ainakin käytössä, sillä tietokoneet ei tunnista kaikkia fontteja kuten esim. netistä ladattuja fontteja. Tarkoittaa siis sitä ettei se fontti mikä omalla koneella on, näy pakolla muilla koneilla.
- Font-style - saadaan kursiivia
- normal - ei mitään
- italic - kursiivi
- Font-size - määritetään fontin koko
- Voidaan käyttää pikseleitä tai em. 1em = 16px, 0.5em = 8px yms. Myös prosentteja voi käyttää.
- Font-weight - määritetään onko teksti boldattua vai ei
- normal - ei mitään
- bold - boldattu
- TÄRKEÄÄ:
- Muista aina minkä tahansa "määreen" yms. (esim font-color: red;) ; -merkki! Muuten ei toimi!
- HTMLssä löytyy { &} -merkkejä, älkää poistelko niitä!
Oon muuten keräilly aloituspostaukseen pari hyödyllistä linkkiä, sinne siis!
♥
SASSE
3 kommenttia:
Hei, löysin sun blogin ku googlettelin näitä html-koodauksia. Kaiken muun oonki jo löytäny ja onnistunu muuttamaan, mutta viittisitkö vähän jelppiä noissa välelehtien muokkaamisissa. Siis miten oot saanu keskitettyy noi tohon ? (Siis kaikki About Sasse,About CM ja niin edelleen) Oon koittanu jo vaikka kuinka monta erilaista html-koodia ja millään en meinaa saaha niitä keskitettyä. Kiitos jos viitsit auttaa :)
Ano
Elikkä:
*-kohdat muuta < -merkeiksi
eti kohta *b:section class='crosscol' id='crosscol'> jonka jälkeen liität koodinpätkän *b:widget id='PageList1' locked='false' title='' type='PageList'/>
*/b:section>
sitten juuri ennen ]]>*/b:skin>
*/head> -koodinpätkää lisäät tämmösen ritirimpsun:
#PageList1 {
margin-left: 10px;
margin-right: 10px;
padding-left: 180px;
font-size: 16px;
font-family:"Arial";
text-transform:none;
line-height: 2.6em;
text-align:center;
background: url('http://lisäätähänesim taustakuvaurl.jee') repeat;
padding-bottom:0px;
}
#PageList1 a:link {
color: #336666;
text-decoration: none;
font-weight: normal;
}
#PageList1 a:visited {
color: #336666;
text-decoration: none;
font-weight: normal;
}
kaikki mukaan. a -jutut muokkaa välilehden linkkiosaa (esim klikattujen linkkien väri), ylin osa sijaintia & fonttia yms. Padding-leftillä oon määrittäny sen keskelle.
osaisitko neuvoa miten saisin tekstin samalle tasolle kuvat? Tai siis yhtä keskelle. Kun jos laitan tekstin keskitetysti, se jää silti enemmän vasempaan reunaan kuin tulee juuri kuvien kanssa yksiin. Tässä blogini: http://hennankengissa.blogspot.com/
ja lisäksi tuo toiminnot, tekstin lopussa. Niin se jää aina vasempaan reunaan eikä keskity niinkuin kommentit ja tunnisteet. JA viimeiseksi mitenkä saan samanlailla kun sinulla, että siirrän hiiren tuohon kommenttien, (minulla piristyksien) päälle, että se teksti suurenee :)
SUURET kiitokset jos osaisit auttaa minua, nämä ovat olleet niin kauan jo ongelmana :D ja jos haluat auttaa niin vastaa minun blogiini =) !
Lähetä kommentti