Campus 5.0 · Guia d'estil

Elements definits

Per a maquetar els elements definits en l'apartat Recursos gràfics d'aquesta guia i altres de generals, pots fer servir el codi que es mostra a continuació, HTML i CSS. A la columna de la dreta només s'indiquen els CSS específics, sense tenir en compte les herències. Voldríem assenyalar, de totes maneres, l'ús del class ".contingut" per a diferenciar els elements de contingut general dels altres elements que formen part de l'estructura de la pàgina: del menú, la capçalera o el peu de pàgina.

Tant els CSS com l'HTML que es faciliten en aquesta guia segueixen els estàndards que marca el W3C. Per a temes concrets es fan servir CSS3, tot i que l'Internet Explorer no les admet. Això pot fer que algun element definit en els CSS no es vegi com s'explica en aquesta guia. Obviarem aquests petits canvis, encara que garantirem la correcta visualització en aquest navegador.

Pots accedir al full d'estil complet per mitjà de l'URL http://cv.uoc.edu/stylesheet/general.css.

Text
Mostra HTML CSS específiques

Paràgraf. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus quam a libero condimentum pellentesque.

<p><strong>Paràgraf</strong>. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vestibulum tempus quam a
libero condimentum pellentesque.</p>
				
body {
  font: normal 68% Verdana,Geneva, sans-serif;
  color: #333;
} .contingut p { padding: 5px 0; } .contingut strong { color: #828282; }
Enllaç
<a href="#">Enllaç</a>
a {
  color: #2685AC;
text-decoration: none;
}
.contingut a {
text-decoration: underline;
}

Això és un h1

Això és un h2

Això és un h3

Això és un h4

Això és un h5
Això és un h6
<h1>Això és un h1</h1>
<h2>Això és un h2</h2>
<h3>Això és un h3</h3>
<h4>Això és un h4</h4>
<h5>Això és un h5</h5>
<h6>Això és un h6</h6>
h1, h2, h3, h4, h5, h6 {
font-size: 1.1em;
font-weight: bold;
color: #666;
}

.contingut h1, .contingut h2, .contingut h3, .contingut h4, .contingut h5,.contingut h6 {
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 0;
} .contingut h1 {
font-size: 1.5em;
}
.contingut h2 {
font-size: 1.4em;
}
.contingut h3 { font-size: 1.3em;
}
.contingut h4 {
font-size: 1.2em;
}
.contingut h5 {
font-size: 1.1em;
}
.contingut h6 {
font-size: 1em;
}
Taules
Mostra HTML CSS específiques
Beneficis anuals
Mes Beneficis
Gener 2.000 €
Febrer 8.000 €
<table summary="Taula dels beneficis anuals">
<caption>Beneficis anuals</caption>
<thead>
<tr>
<th scope="col">Mes</th>
<th scope="col" class="ultim">Beneficis</th> </tr>
</thead>
<tbody>
<tr>
<td>Gener</td>
<td class="ultim">2.000 €</td>
</tr>
<tr>
<td>Febrer</td>
<td class="ultim">8.000 €</td>
</tr>
</tbody>
</table>
table {
font: normal 1em Verdana, Geneva, sans-serif;
} .contingut caption {
background-color: #F5F5F5;
padding: 5px 11px;
font-weight: bold;
border-bottom: 2px solid #FFF;
text-align: left;
}
.contingut th {
background-color: #789BB3;
color: #FFFFFF;
border: 1px solid #FFF;
border-bottom-width: 2px;
padding: 5px 11px;
text-align: left;
}
.contingut th.ultim {
border-right: none;
}
.contingut td {
padding: 5px 11px;
border: 1px dotted #CCC;
border-left: none;
border-top: none;
}
.contingut td.ultim {
border-right: none;
padding: 5px;
}
Botons
Mostra HTML CSS específiques
Actiu més
<a class="boto" href="#">Actiu</a>

<a class="boto" href="#">
   <img src="/UOC/mc-icons/general/mes-boto.png" alt=""/>més
</a>
.boto {
font: normal 1em Tahoma, Verdana, Geneva, sans-serif;
color: #2685AC;
text-decoration: none;
background: #F0F0F0 url(mc-icons/boto.png)repeat-x top;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 4px 10px 5px;
text-transform: lowercase;
border: 1px solid #DDE7EC;
float: left;
margin-right: 10px;
}
Inactiu
<a class="boto inactiu" href="#">Inactiu</a>
.inactiu, .inactiu .boto, .inactiu:hover {
background: #F9F9F9;
color: #999;
border-color: #E2E2E2;
cursor: auto;
}
<input class="boto" type="submit" value="input"/>

<button class="boto">button </button>
input.boto, button.boto {
cursor: pointer;
padding: 3px 7px 5px 7px;
}
Botó més
<a class="boto semilink" href="#"> Botó</a>
<a class="boto semilink" href="#">
   <img src="general-images/mes-boto.png" alt="" />més
</a>
.semilink {
  background: none;
  border: none;
  padding: 5px 11px 7px 11px;
}
.semilink:hover {
  padding: 4px 10px 6px 10px;
  background: #E2E9F1 url(mc-icons/boto-hover.png) repeat-x left top;
}
Capes flotants
Mostra HTML CSS específiques

Text de contingut

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

<div class="flotant">
<div class="fletxa"></div>
<div class="content">
<h2>Text de contingut</h2>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry...</p>
</div>
</div>
.flotant {
position: relative;
padding-top: 11px;
}
.flotant .fletxa {
position: absolute;
width: 25px;
height: 13px;
background: url(mc-icons/flotant-fletxa.png) no-repeat top left;
top: 0;
right: 15px;
} .flotant .content {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 2px solid #666;
background: #FFF;
padding: 10px;
line-height: 1.6em; box-shadow: 3px 3px 2px #D6D6D6;
-webkit-box-shadow: 3px 3px 2px #D6D6D6; -moz-box-shadow: 3px 3px 2px #D6D6D6;
}

Text de contingut

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

<div class="flotant fbottom">
      <div class="fletxa"></div>
<div class="content">
<h2>Text de contingut</h2>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry...</p>
</div>
</div>
</div>
.fbottom {
padding-top: 0;
padding-bottom: 16px;
}
.fbottom .fletxa {
bottom: 0;
background-position: bottom;
height: 18px;
right: 10px;
top: auto;
}

Text de contingut

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

<div class="flotant flsimple">
      <div class="fletxa"></div>
<div class="content">
<h2>Text de contingut</h2>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry...</p>
</div>
</div>
.flsimple .fletxa {
background-image: url ("mc-icons/flotant-fletxa-simple.png");
}
.flsimple .content {
border: 1px solid #CCCCCC;
}
Fil d'Ariadna
Mostra HTML CSS específiques

IniciLoremDolorAdibus

<p class="fil-ariadna">
   <a class="primer" href="#">Inici</a> ›
   <a href="#">Lorem</a> ›
   <a href="#">Dolor</a> ›
   <a href="#">Adibus</a>
</p>
.fil-ariadna {
font-family: Tahoma, Geneva,
sans-serif;
color: #2685AC;
}
.fil-ariadna a {
padding: 5px;
text-decoration: none;
}
.fil-ariadna .primer {
padding-left: 0;
}
.fil-ariadna a:hover {
text-decoration: underline;
}
Formularis
Mostra HTML CSS específiques

<form action="" method="" class="formtipo formulari">
   <p>
      <label for="nom">
        <strong class="obligatori">*</strong>Nom:
      </label>
<input type="text" id="nom" />
</p>
</form>
.formulari {
line-height: 1.6em;
}
.formulari p {
padding: 5px 0;
}
.formulari .obligatori {
font-weight: bold;
} .formtipo label {
float: left;
margin: 0 10px 2px 0;
text-align: right;
} .formulari input, .formulari select, .formulari textarea {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
padding: 2px;
border: 1px solid #BBD0D9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

<form action="" method="" class="formtipo formulari">
<p>
<label for="arees"> <strong class="obligatori">*</strong>Àrees: </label>
<select id="arees">
<option>Filosofia</option>
<option>Història</option>
<option>Llengua</option>
</select>
</p>
</form>

<form action="" method="" class="formtipo formulari">
<p>
<label for="missatge"> <strong class="obligatori">*</strong>Missatge:
</label>
<textarea id="missatge" rows="2" cols="2" class="inactiu"> Text d'exemple
</textarea>
</p>
</form>
.formulari textarea {
height: 100px;
width: 350px;
} .inactiu, .inactiu .boto, .inactiu:hover {
background: #F9F9F9;
color: #999;
border-color: #E2E2E2;
cursor: auto;
}
.formulari input.inactiu, .formulari select.inactiu, .formulari textarea.inactiu {
border-color: #E2E2E2;
}
Llista
Mostra HTML CSS específiques
  • Element de llista
  • Subllista:
    • Element de subllista
    • Element de subllista
  • Element de llista
  • Element de llista
<ul class="basica">
<li>Element de llista</li>
<li>Subllista:
<ul class="subllista">
<li>Element de subllista</li>
<li>Element de subllista</li>
</ul>
</li>
<li>Element de llista</li> <li>Element de llista</li>
</ul>
.contingut ol, .contingut ul {
margin: 5px 0;
}
.contingut ul.basica, .contingut .basica ul {
border-left: 1px dotted #CCC;
padding-left: 8px;
}
.contingut .basica li {
padding: 5px 11px;
}
.contingut .basica li li {
padding: 3px 11px;
}
.subllista {
padding: 0 30px 0 40px;
}
<ul class="decorada">
<li><a href="#">Element de llista</a></li>
<li>Element de llista</li>
<li>Element de llista</li>
<li class"ultim">Element de llista</li> </ul>
.decorada li {
  border-bottom: 1px dotted #CCC;
  padding: 8px 2px;
  height: 1%;
}
li.ultim, ul.destacat li.ultim {
  border-bottom: none;
}
<ul class="decorada llistaBlock">
<li class="noLink"> Element de llista </li>
<li> <a href="#" class="link">Element de llista</a> </li>
<li> <a href="#" class="link">Element de llista</a> </li>
<li> <a href="#" class="link">Element de llista</a> </li> </ul>
.llistaBlock li, .decorada .llistaBlock {
  padding: 0;
}
.llistaBlock .link, .decorada .link, .desplegable .desplegar .link {
  display: block;
  padding: 8px 2px;
}
.llistaBlock .noLink {
padding: 8px 2px;
}
<ul class="decorada llistaBlock desplegable">
   <li>
<a href="#" class="link nodesplegable"> Element de llista </a> </li>
<li>
<a href="#" class="imatgeLlista">
<img alt="desplega" src="/UOC/mc-icons/general/baixa.png">
</a>
<a href="#" class="link">
Element de llista </a> </li>
<li>
<a href="#" class="imatgeLlista">
<img alt="desplega"src="/UOC/mc-icons/general/baixa.png">
</a>
<a href="#" class="link">
Element de llista </a>
</ul>
.desplegable li, li.desplegable, .llistacheck li, li.llistacheck {
  position: relative;
}
.desplegable .nodesplegable {
  padding-left: 2px;
}
.imatgeLlista, .llistacheck .check {
  left: 2px;
  padding: 0;
  position: absolute;
  top: 0.6em;
}
<ul class="decorada llistacheck noLink">
   <li>
      <input id="element1" class="check" type="checkbox" />
      <label for="element1">Element de llista 1</label>
         <ul class="subllista">
           <li class="ultim">
           <input class="check" id="element11" type="checkbox" />
           <label for="element11">Subelement</label>
           </li>
         </ul>
   </li>
   <li>
      <input id="element2" class="check" type="checkbox"/>
      <label for="element2">Element de llista</label>
   </li>
</ul>
  • Element de llista
  • Element de llista
  • Element de llista
  • Element de llista
<ul>
<li class="odd">Element de llista</li>
<li class="even">Element de llista</li>
<li class="odd">Element de llista</li>
<li class="even">Element de llista</li>
</ul>
.odd, .even {
padding: 5px 10px;
margin-bottom: 1px;
} .even {
background-color: #EEEDED;
}
.odd {
background-color: #F7F6F6;
}
Marcadors
Mostra HTML CSS específiques
3 de 88
<a href="#">
  <span class="marcadors">
    <span class="nous">3</span>
    <span class="amagar"> de </span>
    <span class="total">88 </span>
  </span>
</a>
.marcadors {
  font-family: Tahoma,Geneva, sans-serif;
  font-size: 1em;
}
.marcadors span {
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  float: left;
  min-height: 12px;
  min-width: 14px;
  padding: 2px 4px;
  text-align: center;
  font-weight: bold;
}
.marcadors span.nous
  background-color: #B94747;
  /* Safari Radius */
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
   /* Mozilla Radius */
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  /* KHTML Radius */
  -khtml-border-radius-topleft: 3px;
  -khtml-border-radius-bottomleft: 3px;
  /* CSS 3 Radius */
  border-radius-topleft: 3px;
  border-radius-bottomleft: 3px;
}
.marcadors span.total {
  border-left: 1px solid #FFFFFF;
  /* Safari Radius */
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  /* Mozilla Radius */
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-topright: 3px;
  /* KHTML Radius */
  -khtml-border-radius-bottomright: 3px;
  -khtml-border-radius-topright: 3px;
  /* CSS 3 Radius */
  border-radius-bottomright: 3px;
  border-radius-topright: 3px;
  background-color: #A2A2A2;
}
0 de 36
<a href="#">
  <span class="marcadors">
    <span class="nous cap">0</span>
    <span class="amagar"> de </span>
    <span class="total">36</span>
  </span>
</a>
.marcadors span.cap {
  background-color: #A2A2A2;
}
6

0
<a href="#" 
  <span class="marcadors">
    <span class="nous unic">6</span>
  </span>
</a>

<a class="" href="#">
  <span class="marcadors">
    <span class="nous unic cap">0</span>
  </span>
</a>
.marcadors .unic {
/* Safari Radius */
-webkit-border-radius: 3px;
/* Mozilla Radius */
-moz-border-radius: 3px;
/* KHTML Radius */
-khtml-border-radius: 3px;
/* CSS 3 Radius */
border-radius: 3px;
}
Missatges del sistema: avís, informació, error...
Mostra HTML CSS específiques
Això és un missatge informatiu
<div class="info">
   Això és un missatge <a href="#">informatiu</a>
</div>
.info {
background: #FFE68A;
padding: 7px 10px;
/* Safari Radius */
-webkit-border-radius: 5px;
/* Mozilla Radius */
-moz-border-radius: 5px;
/* KHTML Radius */
-khtml-border-radius: 5px;
/* CSS 3 Radius */
border-radius: 5px;
text-align: center;
}
Paginació
Mostra HTML CSS específiques
<form action="" method="" class="formulari">
  <div class="pagines" id="pagines">
<ul class="paginador">
<li> <a href="#"> <img src="/UOC/mc-icons/general/primer-ico2.png" alt="Primer" /> </a>
</li>
<li>
<a href="#"> <img src="/UOC/mc-icons/general/anterior-ico2.png" alt="Anterior" /> </a>
</li>
<li>
<label for="Paginacio" class="amagar">Pàgina</label>
<input type="text" name="1" value="1" id="Paginacio" size="2" />
de 32
</li>
<li>
<a href="#">
<img src="/UOC/mc-icons/general/seguent-ico2.png" alt="Següent" />
</a>
</li>
<li>
<a href="#">
<img src="/UOC/mc-icons/general/ultim-ico2.png" alt="Últim" />
</a>
</li>
</ul>
</div>
</form>
.pagines {
  background-color: #F0F0F0;
}
.paginador {
  text-align: center;
  white-space: nowrap;
  padding: 5px 0;
}
.paginador li, .paginador h3 {
  display: inline;
}
.paginador li a img {
  vertical-align: middle;
}
.paginador input {
  text-align: center;
}
Pestanyes
Mostra HTML CSS específiques
<ul class="pestanyes">
<li class="actiu"> <a href="#" >Activa</a> </li>
<li> <a href="#">Inactiva</a> </li>
</ul>
.pestanyes {
	min-height: 28px;
	background: url(mc-icons/pestanyes-border.png)
          repeat-x bottom;
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	overflow: hidden;
	margin-bottom: 1px;
}
.pestanyes li {
	float: left;
	margin-right: 5px;
	padding-right: 5px;
}
.pestanyes a {
text-decoration: none;
display: block;
padding: 7px 15px 6px 15px;
/* Safari Radius */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
/* Mozilla Radius */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
/* KHTML Radius */
-khtml-border-radius-topleft: 5px;
-khtml-border-radius-topright: 5px;
/* CSS 3 Radius */
border-radius-topleft: 5px;
border-radius-topright: 5px;
border: 1px solid #CCC;
border-bottom: 0;
}
.pestanyes a:hover {
/* border-color: #BBD0D9; */
background: #EFF4F8;
} .pestanyes .actiu { background: url("mc-icons/pestanya-right.png") no-repeat right top; } .pestanyes .actiu a { background: #FFF; border-bottom: 1px solid #FFF; color: #666666; font-weight: bold; height: 1%; margin-bottom: -1px; }
<ul class="pestanyes psimple">
<li class="actiu"> <a onclick="" href="#">Activa</a> </li>
<li> <a onclick="" href="#">Inactiva</a> </li>
</ul>
.psimple {
	min-height: 18px;
	font-size: 0.9em;
	text-transform: lowercase;
	padding-left: 10px;
	background-image:
	  url(mc-icons/pestanya-fons-volum.png);
}
Requadres
Mostra HTML CSS específiques

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit.

<div class="caixa">
	<h2>Lorem ipsum</h2>
	<p>Dolor sit amet, consectetur
	adipiscing elit.</p>
</div>
.caixa {
	/* Safari Radius */
	-webkit-border-radius: 5px;
	/* Mozilla Radius */
	-moz-border-radius: 5px;
	/* KHTML Radius */
	-khtml-border-radius: 5px;
	/* CSS 3 Radius */
	border-radius: 5px;
	border: 1px solid #CCCCCC;
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	line-height: 1.6em;
	padding: 5px 10px;
}

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit.

Veure tots els vídeos

<div class="caixa destacat">
   <h2>Lorem ipsum</h2>
   <p>Dolor sit amet, consectetur
      adipiscing elit.</p>
   <p>
     <a href="#">Veure tots el vídeos</a>
   </p>
</div>
.destacat {
	background-color: #F8F8F8;
	border-color: #F8F8F8;
}

Lorem ipsum

Dolor sit amet, consectetur adipiscing elit.

Vestibulum tempus

<div class="caixa destacat capcalera">
   <h2 class="titol">Lorem ipsum</h2>
   <p>Dolor sit amet, consectetur
      adipiscing elit.
   </p>
   <p>
     <a href="#">Vestibulum tempus</a>
   </p>
</div>
.capcalera .titol {
font-size: 1em;
margin: 0 -10px 5px -10px;
padding: 5px 10px;
background: #EBEBEB;
border: 1px solid #EBEBEB;
/* Safari Radius */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
/* Mozilla Radius */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
/* KHTML Radius */
-khtml-border-radius-topleft: 5px;
-khtml-border-radius-topright: 5px;
/* CSS 3 Radius */
border-radius-topleft: 5px;
border-radius-topright: 5px;
}