Mērķis: Apgūt CSS lietojumu, lai izstrādātu vietnes vizuālo noformējumu

Uzdevums: Izmantojot CSS noformēt iepriekšējā praktiskajā darbā izveidoto HTML, radot vienotu stilu visām lapām.

1. Izvēlieties glītu krāsu kombināciju jūsu lapai.
   1. Idejas varat smelties no colorhunt.co paletēm, Canva vai Visme blogos utt.
2. Izveidot un noformēt galveni:
   1. Izveidot CSS datni, kas tiek iekļauta HTML dokumentā ar link taga palīdzību.
   2. Izveidot galveni izmantojot div tagu un piešķirt tai izmēru ar CSS īpašībām widht un height.
   3. Galvenē izveidot horizontālu izvēlni, izmantojot sarakstu (ul, li tagus) un list-style īpašību. Uzbīdot ar peli (pseidoklase hover) uz izvēlnes tās fona un teksta krāsai jāmainās uz pretējo. Izmantot padding un margin īpašības, izvēlnes elementu atkāpju noformēšanai.
   4. Ierāmēt galveni krāsainā rāmī - īpašība border.
3. Noformēt saturu:
   1. Uzstādīt HTML tagiem class un/vai id atribūtus, lai varētu šiem tagiem piešķirt izskatu ar CSS.
   2. Krāsot elementus izmantojot īpašības:
      1. color,
      2. background-color.
   3. Izmantot teksta stila īpašības, piemēram:
      1. font-family,
      2. font-size,
      3. font-weight,
      4. text-decoration.
   4. Uzstādīt stilu saitēm (a tagiem), lai tām nebūtu apakšsvītra un krāsa būtu tumši pelēka.
   5. Izveidot rindkopu ar tekstu, kurā ievietots attēls. Tekstam jāplūst ap attēlu izmantojot float īpašību.
   6. Izveidot katra otrā elementa fona iekrāsošana citā krāsā, piemēram. tabulas rindas, izmantojot nth-child(odd) pseidoklasi.
4. Izveidojiet drukas stilu:
   1. Jāiekļauj stils priekš lapas drukāšanas. Piemēram, lai taupīta printera tinti, drukas stilam var noņemt fona atribūtus vai paslēpt atsevišķus elementus, kā navigāciju - izmantojot atribūtus display: none; vai visibility: hidden;.

Paraugi:

CSS faila iekļaušana:

HTML:

...



...

Elementu izmērs un krāsošana:

HTML:

<div id="kvadrats">
Šis būs kvadrāts!
</div>

CSS:

#kvadrats {
	width: 150px;
	height: 150px;
	color: red;
	background-color: yellow;
}

Galvene ar linkiem:

HTML:

<div id="header">
	<ul class="navigation">
		<li>Sākumlapa</li>
		<li>Lapa 1</li>
		<li>Lapa 2</li>
		<li>Lapa 3</li>
		<li>Lapa 4</li>
	</ul>
</div>

CSS:

/* galvenes izmērs */
#header {
	width: 800px;
	height: 100px;
}
/* navigācijas linku izkārtojums */
#header li {
	list-style: none;
	display: inline;
	padding: 10px;
	margin: 0px;
}
/* linku stils */
#header a {
	color: #61C0BF;
	font-weight: bold;
	font-size: 18px;
	font-family: verdana;
}
/* linki, kad uzbrauc ar peli */
#header li:hover {
	background-color: #61C0BF;
}
#header li:hover a {
	color: white;
}
/* galvenes rāmis */
#header {
	background-color: #3b7a79;
	border: 4px dashed black;
	margin-bottom: 10px;
}

Teksta stila īpašības:

HTML:

<p class="mazs-teksts" id="paragrafs1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="izcelts">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua.</p>
<img class="attels-ar-rami attels-pa-kreisi" src="bildes/makrele.gif"/>
<p class="liels-teksts" id="paragrafs2">Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Nisi scelerisque eu ultrices vitae auctor. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
<img class="attels attels-pa-labi" src="bildes/vimba.jpg"/>
<p class="mazs-teksts"" id="paragrafs3">Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Libero enim sed faucibus turpis in. Tortor dignissim convallis aenean et tortor at. Aenean pharetra magna ac placerat vestibulum. Id eu nisl nunc mi ipsum.</p>

CSS:

p {
	font-family: helvetica;
	font-size: 14px;
	color: #351F39;
}
.mazs-teksts {
	font-size: 12px;
}
.liels-teksts {
	font-size: 18px
}
.izcelts {
	color: red;
	text-decoration: underline;
}
#paragrafs2, #paragrafs3 {
	color: blue;
}

Attēlu pludināšana ap tekstu:

HTML:

<img class="attels-ar-rami attels-pa-kreisi" src="bildes/makrele.gif"/>
<p class="liels-teksts" id="paragrafs2">Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Nisi scelerisque eu ultrices vitae auctor. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
<img class="attels attels-pa-labi" src="bildes/vimba.jpg"/>
<p class="mazs-teksts"" id="paragrafs3">Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Libero enim sed faucibus turpis in. Tortor dignissim convallis aenean et tortor at. Aenean pharetra magna ac placerat vestibulum. Id eu nisl nunc mi ipsum.</p>

CSS:

.attels-ar-rami {
	border: 2px solid orange;
}
.attels-pa-kreisi {
	float: left;
}
.attels-pa-labi {
	float: right;
}

Pseidoklases izmantošana:

HTML:

<table id="tabula1">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
	</tr>
</table>

CSS:

table, td {
	border: 1px solid black;
}
#tabula1 tr:nth-child(odd) {
	background-color: red;
}

Drukas stils:

CSS:

@media print {
	img {
		display: none;
	}
	#header {
		display: none;
	}
	#kvadrats {
		background-color: white;
	}
}

Piemērs: