12 – Righe e bordi

 

Punto di controllo di questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio quando un documento HTML è reso senza i CSS associati, deve essere sempre possibile leggere il documento. [Priorità 1].

Le righe ed i bordi possono esprimere il concetto di “separazione” agli utenti in grado di vedere, ma questo concetto non può essere seguito fuori di un contesto visuale.

Usare queste proprietà dei CSS per specificare gli stili del bordo:

  • border, border-width, border-style, border-color
  • border-spacing, border-collapse,  per le tabelle.
  • outline, outline-color, outline-style, outline-width, per i contorni dinamici.

Gli autori dovrebbe usare i CSS per creare righe e bordi.

Esempio:

In questo esempio, l’elemento H1 avrà un bordo superiore spesso 2px, rosso, e separato dal contenuto da 1em:

  <html>
  <head>
  <title>Bordo rosso con i CSS</title>
  <style type="text/css">
      h1 { padding-top: 1em; border-top: 2px red; }
  </style>
  </head>
  <body>
  <h1>Capitolo 8 - Riassunto</h1>
  </body>

 

Se un elemento (per esempio HR) è usato per indicare la struttura, essere sicuri di indicare la struttura in una maniera non-visuale. (Per esempio usando il markup strutturale).

Esempio:

In questo esempio l’elemento DIV è usato per creare una barra di navigazione, che include un separatore orizzontale.

  <div class="navigation-bar">
  <hr>
  <a rel="Next" href="next.html">[Prossima pagina]</a>
  <a rel="Previous" href="previous.html">[Pagina Precedente]</a>
  <a rel="First" href="first.html">[Prima pagina]</a>
  </div>

Potrebbero interessarti anche i seguenti articoli

  • 13 – Usare i CSS ed il markup di posizione per una trasformazione elegante13 – Usare i CSS ed il markup di posizione per una trasformazione elegante   Punto di controllo di questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio quando un documento HTML è reso […]
  • 10 – Fornire informazioni contestuali nelle liste HTML10 – Fornire informazioni contestuali nelle liste HTML Punti di controllo in questa sezione: 3.6 Marcare le liste ed elencare i suoi elementi in modo appropriato. [Priorità 2] 13.2 Fornire dei metadata per […]
  • 3 – Unità di misura3 – Unità di misura Punti di controllo in questa sezione: 3.4 Usare unità di misura relative al posto delle unità di misura assolute sia negli attributi HTML, sia nei valori delle […]
  • 4 – Contenuto generato dai CSS4 – Contenuto generato dai CSS Punti di controllo in questa sezione: 3.1 Se esiste il modo di usare il testo in modo appropriato, usare questo al posto delle immagini per veicolare le […]
  • 15 – CSS sonori15 – CSS sonori   Punti di controllo in questa sezione: 11.3 Fornire agli utenti le informazioni necessarie affinchè siano adattabili secondo le loro preferenze (per esempio, la […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.