Guida Aspnet Lezione 7. I Fogli di Stile CSS

Introduciamo in questo capitolo un nuovo argomento ossia i CSS o detti ancora in modo piu’ familiare i Fogli di Stile.

Ma cosa sono i fogli di stile, diciamo che fondamentalmente sono una facilitazione che è stata introdotta per creare lo stile di una pagina HTML.

I fogli di stile CSS e Aspnet

Diamone subito un’esempio per comprendere subito di cosa stiamo parlando, ma vi precisiamo pero’ che noi daremo un breve sguardo per una guida completa vi rimandiamo a questo Link.

Facciamo subito un esempio pratico, nel nostro testo della pagina troveremo un testo HTML cosi’ scritto

<h1 class="headline"> Hello World!</h1>

nel body

e nell’head un collegamento al foglio di stile tipo import /Stile/Foglio.css

mentre nel file Foglio.css potremmo trovare fra le altre voci un paragramo dedicato ad headline che piu’ o meno ha la possibile seguente composizione.

.headline

{
 

text-decoratin: underline;

font-weight : bold;

color : Red;

font-family: Arial




}

Le voci riportate , sono di fatto le voci che definiscono come appaiono all’interno dell html i vari paragrafi, in questo caso come appare la scritta Hello World. Ribadiamo che questo è solamente un esempio a livello molto alto per vedere nello specifico il funzionamento riamdiamo alla guida che ribadiamo potete trovare qui.

Quindi dando per assodato che vi siate letti questa guida sui CSS aprite il progetto Personal Portal e una volta fatto aprite il solito progetto CSS andate su esplora soluzioni, come al solito cliccate su aggiungi nuovo elemento e questa volta cliccate sulla voce Foglio di stile. Chiamate questo foglio di stile PersonalPortal

a questo punto non dovete fare altro che copia incollare su questo nuovo file il seguente

.portallayout
 {
 width: 810px;
 }

.mydocsheader
 {
 width: 254px;
 height: 66px;
 background-repeat: no-repeat;
 background-image: url(Images/mydocsheader.png);
 padding-bottom: 10px;
 }
 .mymapheader
 {
 width: 210px;
 height: 66px;
 background-repeat: no-repeat;
 background-image: url(Images/mymapheader.png);
 padding-bottom: 10px;

}

.todolistheader
 {
 width: 210px;
 height: 66px;
 background-repeat: no-repeat;
 background-image: url(Images/todobanner.png);
 padding-bottom: 10px;

}

td.sidebar
 {
 width: 200px;
 padding-left:10px;
 padding-top:10px;

}


td.header
 {
 height:174px;
 background-repeat: no-repeat;
 background-color: #10377C;
 background-image: url(Images/blog-title.png);
 }

* html .header h2 {
 top: 35px;
 }
 * html .todoheader, * html .insertheader {
 height: 1%;
 }
 a, a:visited {
 text-decoration: none;
 }
 a:hover, input {
 color: #333333;
 }
 form
 {
 width: 375px;
 }
 body {
 background: #6B91C3;
 font: "Segoe UI", Segoe, sans-serif;
 margin: 0;
 padding: 18px;
 font-weight:bold;
 font-size:medium;
 }
 em {
 background: #EEEEEE;
 font-style: normal;
 }
 li {
 background: url(images/bullet_purple.gif) top left no-repeat;
 padding: 0 0 0 18px;
 }
 p {
 line-height: 18px;
 margin: 5px;
 }
 p,li, input {
 color: #333333;
 font: small "Segoe UI", Segoe, sans-serif;
 padding: 0;
 }
 ul {
 list-style: none;
 margin: 5px;
 padding: 0;
 }
 .placeholder {
 color: #003399;
 font: bold medium "Segoe UI", Segoe, sans-serif;
 height: 40px;
 }
 .content {
 float: left;
 margin: 5px 5px;
 text-align: left;
 }
 .detailsview .actions div {
 float: right;
 text-align: right;
 width: 95px;
 padding-right: 2px;
 }
 .detailsview td {
 background: #D7E6F4;
 color: #333333;
 font: small "Segoe UI", Segoe, sans-serif;
 padding: 15px 10px 10px 10px;
 }
 .detailsview td a {
 color: #0066CC;
 font: bold small "Segoe UI", Segoe, sans-serif;
 padding-right: 10px;
 }
 .detailsview td a:hover {
 font-weight: bold;
 color: #333;
 }
 .detailsview th {
 background: #4168BD;
 color: #FFFFFF;
 font: small "Segoe UI", Segoe, sans-serif;
 letter-spacing: 0;
 padding: 3px 8px 5px;
 padding: 2px;
 text-align: left;
 }
 .detailsview tr.header {
 background: #C5DBF7;
 padding: 3px 8px 5px;
 }
 .gridview .actions div {
 float: right;
 padding-right: 2px;
 text-align: right;
 width: 95px;
 }

.gridview .edit td,.gridview .create td {
 background: #DAFFCD;
 padding: 4px;
 border-bottom: solid 2px #FFFFFF;
 border-top: solid 2px #FFFFFF;
 }

.gridview td {
 background: #D7E6F4;
 border-bottom: solid 1px #C5DBF7;
 color: #333333;
 font: small "Segoe UI", Segoe, sans-serif;
 padding: 5px 4px;
 }
 .gridview td a{
 color: #0066CC;
 font: bold small "Segoe UI",Segoe,sans-serif;
 padding: 2px;
 text-decoration: none;
 }
 .gridview td a:hover {
 color: #333333;
 font-weight: bold;
 }
 .gridview th {
 background: #4168BD;
 color: #FFFFFF;
 font: small "Segoe UI", Segoe, sans-serif;
 letter-spacing: 0;
 padding: 4px;
 text-align: left;
 }
 .gridview th a{
 color: #FFFFFF;
 font: bold small "Segoe UI",Segoe,sans-serif;
 }
 .gridview th a:hover{
 color: #00FF00;
 }
 .gridview tr.even td,.detailsview tr.even td{
 background: #FFFFFF;
 }
 .gridview tr.header {
 background: #C5DBF7;
 }
 .gridview,.detailsview {
 width: 100%;
 }

.header h1 {
 color: #10377C;
 font: bold xx-large "Segoe UI", Segoe, sans-serif;
 margin: 0px;
 }
 .header h2 {
 color: #666666;
 font: x-small "Segoe UI", Segoe, sans-serif;
 position: absolute;
 top: 28px;
 }
 .header h2 a {
 color: #6600CC;
 font-weight: normal;
 }
 .insert {
 width: 300px;
 }
 .insert span {
 font-family: "Segoe UI", Segoe, sans-serif;
 }
 .insertheader
 {
 color: Silver;
 background: #10377C url(images/add.gif) 6px 50% no-repeat;
 margin-top: 25px;
 padding-left: 25px;
 position: relative;
 font-size:medium;
 font-weight:bold;

}
 .insertheader a {
 color: #FFFFFF;
 font: bold medium "Segoe UI", Segoe, sans-serif;
 margin-left: 20px;
 }




.menu {
 border-width: 1px;
 float: left;
 margin: 20px 5px;
 width: 150px;
 }
 .progress {
 color: #FFFF99;
 float: right;
 font: bold x-large "Segoe UI", Segoe, sans-serif;
 margin-top: -20px;
 }
 .rss {
 margin-top: 20px;
 }
 .todoheader
 {
 color: Silver;
 background: #10377C;
 position: relative;
 font-weight:bold;
 font-size:medium;
 }

.todoheader h2
 {
 /*background: url(images/corner.gif) top right no-repeat; */
 color: #FFFFFF;
 font: bold large "Segoe UI", Segoe, sans-serif;
 margin: 0;
 padding: 8px 5px 5px 5px;
 }
 .insertheader h2 {
 color: #FFFFFF;
 font: bold medium "Segoe UI", Segoe, sans-serif;
 margin: 0;
 padding: 8px 5px 5px 5px;
 }
 .updateprogress {
 color: #FFFFFF;
 font: bold large "Segoe UI", Segoe, sans-serif;
 }

Andare su Personal Portal e cliccare su Visualizza e da li Applica Stili, dovrebbe essere apparsa una nuova schermata sulla toolblox di sinistra da li cliccate su associa Foglio di stile e nella successiva finestra che vi si apre cliccate sul foglio di Stile PersonalPortal.css

Se andate sulla pagina PersonalPortal.master potrete notare l’aggiunta di nuovi colori e se andate nella vista codice potrete vedere che nell’head è apparso un link di collegamento che è

<link href=”../PersonalPortal.css” rel=”stylesheet” type=”text/css” />

Andiamo su Visualizza e da qui gestisci Stili, fatto questo possiamo andare sul body sulla toolbox di sinistra e cliccare sul body e vediamo alcune cose ossia

il il background che è quello che ha dato il colore blu alla pagina, potete vedere anche il Font che in pratica è il carattere con cui vedete le scritte nella pagina e le dimensione con cui viene scritte , quindi in questo caso il size è impostato su medium.

Ora cliccate sulle varie voci del personalportal.css dalla pagina PersonalPortal.master per esempio td.sidebar sulla sinistra fate con il tasto destro del mouse click sulla voce applica stile, il cerchio verde verra’ cosi’ circondato da un cerchio di colore grigio. Fatto quella classe è attivata.

Se andiamo a vedere la classe td.header com’e’ fatta potrete vedere che essa fa anche dei riferimenti a dei file immagine nella cartella Images che ovviamente abbiamo introdotto noi a nostro piacimento, vi invitiamo a fare altrettanto per esercizio.

td.header
 {
 height:174px;
 background-repeat: no-repeat;
 background-color: #10377C;
 background-image: url(Images/blog-title.png);
 }

Andate sul Run ed il risultato dovrebbe essere qualcosa del tipo.

Adesso il concetto dovrebbe essere abbastanza chiaro, facciamo cmq un UpGrade , andiamo su PersonalMaster.Css e selezioniamo lo spazio fra due tr tenendolo selezioniato, una cosa del genere per intendersi…

<tr>

codice contenuto

</tr>

andiamo su Progettazione e con questo sottolineato ci spostiamo sulla casella di destra e per esempio andiamo su mymapheader e la attiviamo.

Ripetiamo questa operazione per due tr successivi e questa volta per esempio gli associamo todolistheader

In pratica con questo meccanismo è possibile associare ciasuna voce del foglio di stile a nostro piacimento e ottenere cosi’ una grafica personalizzata, anche se bisognerebbe essere un po’ piu’ precisi altrimenti dgt Run si corre il serio rischio di ritrovarsi di fronte ad una babele del genere…

In parole molte povere prima di imparare a programmare , dovete imparare a progettare…pensate solamente che nelle grandi case di software i programmatori veri e propi sono una figura ben distinta rispetto a quelli che progettano il sito.