|
|
 |
Inhoud van deze pagina: Werken met CSS | Handleidingen CSS | CSS opnemen in sitestyle | CSS tags in QwikZite | Hulpmiddelen
Werken met CSS (Cascading Style Sheets)
Handleidingen CSS
Het is een onbegonnen zaak om op qwikzite.net alle ins en outs van CSS te behandelen. En er bestaan op het web al genoeg goede CSS handleidingen, waaruit je zaken kunt plukken om binnen QwikZite te gebruiken.
Een aanrader voor het nederlandstalige taalgebied is de CSS sectie van de uitstekende Handleiding HTML van Hans de Jong.
Veelgebruikte engelstalige 'naslagsites' om specifieke zaken op te zoeken zijn de sites van W3Schools en HTMLSource.
Een uitgebreide lijst van handleidingen en naslaggidsen in diverse talen is te vinden op de site van het Open Directory Project.
CSS opnemen in sitestyle
Een CSS style sheet kun je invoeren via het Menu Sitestyle. Op dezelfde manier als je met meerdere 'klassieke' QwikZite sitestylen kunt werken en je pagina's kunt koppelen aan een specifieke sitestyle, kun je dus ook werken met meerdere CSS style sheets en pagina's koppelen aan specifieke style sheets.
Je kunt zelfs een CSS style sheet toevoegen aan een reeds bestaande sitestyle. Na het activeren van het style sheet (via de optie 'Gebruik CSS') worden op een enkele uitzondering na alle overige settings in het menu sitestyle genegeerd. Inactiveren van het style sheet resulteert in herstel van de oorspronkelijke sitestyle.
CSS tags in QwikZite
| | Voorbeeld: | <!--
/* body */
body {
border: 4px dashed black;
}
/* site area */
.site_area {
border: 4px dotted yellow;
}
/* top area */
.top_area {
border: 4px solid black;
height: 40px;
}
/* top divider */
.top_div {
border: 4px solid red;
height: 90px;
}
.top_div li {
list-style: none;
display: inline;
}
/* events */
.event_date {
font-size: 10pt;
padding-right: 1em;
}
.event_title {
font-size: 14pt;
padding-right: 3em;
}
/* left divider */
.left_div {
border: 4px solid black;
height: 40px;
}
/* text area */
.text_area {
border: 4px dotted blue;
}
.page_content {
}
.page_foto {
}
/* right divider */
.right_div {
border: 4px solid black;
height: 40px;
}
/* button area */
.button_area {
border: 4px solid blue;
}
.button_area ul {
}
.button_area ul li {
}
.button_down {
}
.button_down a {
}
.button_up {
}
.button_up a {
}
/* link area */
.link_area {
border: 4px solid red;
height: 40px;
}
.link_area ul {
}
.link_area ul li {
}
.link_area_foto {
}
.link_area_foto a {
}
.link_area_foto a img{
}
.link_area_title {
}
.link_area_title a {
}
/* news area */
.news_area {
border: 4px dashed blue;
height: 40px;
}
.news_area ul {
}
.news_area ul li {
}
.news_area_title {
background: red;
}
.news_area_title a {
}
.news_area_description {
background: green;
}
.news_area_date {
background: blue;
}
.news_area_readmore{
background: orange;
}
.news_area_readmore a {
}
/* long news area */
.long_news_area{
border: 4px dashed black;
}
.long_news_area ul {
}
.long_news_area ul li {
}
.long_news_title{
}
.long_news_date{
}
.long_news_content{
}
.long_news_foto{
}
/* short news area */
.short_news_area{
border: 4px dashed black;
}
.short_news_area ul{
}
.short_news_area ul li{
}
.short_news_date{
}
.short_news_title{
}
.short_news_link{
}
-->
|
Een demonstratie met nadere uitleg wordt gegeven op http://112.suares.an
Hulpmiddelen
Web Developer
Naast zeer vele andere mogelijkheden, geeft de 'Edit CSS' optie van de Firefox-plugin Web Developer je de gelegenheid om wijzigingen in je CSS uit te proberen zonder elke keer te moeten uploaden en de pagina te verversen. Bovendien kun je deze wijzigingen zelfs lokaal op je pc opslaan.
De plugin is te installeren in Firefox via de optie Extra - Add-ons - Extensies verkrijgen (Tools - Add-ons - Get extensions) of kan gedownload worden van bovenvermelde link.
Ga naar top | Handleidingen CSS | CSS opnemen in sitestyle | CSS tags in QwikZite | Hulpmiddelen
|
|
|