| groawn | Datums: Sestdiena, 2012-02-18, 4:58 PM | Numurs # 1 |
|
Pakāpe: Moderators
Entries: 7
|
| 
Ļoti bieži laikā izkārtojumu html lapas ir noteikt kontekstu, vai elementa. Šajā nodarbībā mēs apskatīsim, kā jūs varat iestatīt fona pripomoschi CSS.
Man jāatzīmē, ka, lai radītu fonu CSS vairāk iespēju nekā HTML, un pat to, kādā var iestatīt fona HTML, principā, novecojis.
Lai strādātu ar fona CSS, ir vairākas īpašības. Apskatīsim tos kārtībā.
Fona krāsa - uzstāda fona krāsu.
Ar palīdzību šo īpašumu var norādīt fona krāsu gandrīz jebkuru elementu, vai lapas fona vai teksta bloku. Fona krāsa tiek definēts šādi: Fona-color: # CCFFCC ; kur # CCFFCC - krāsu vērtību. Lai redzētu, kā tas darbojas, izveidot html lapu, kurā šādu kodu:
Code <html>
<head>
<title> Fona CSS </ Nosaukums>
<STYLE>
ķermeņa {background-color: # CCFFCC;}
p {background-color: # FFFF99;}
</ style>
</ head>
<body> piemērs teksta novietota uz dzeltena fona </ p> </ body> </ HTML>
Šajā gadījumā, izmantojot fona krāsu īpašumu tika dota gaiši zaļā krāsā (# CCFFCC) fona lapu un dzelteno krāsu (# FFFF99) fona tekstu.
$ IMAGE1 $
Fona attēls - nosaka fona attēlu.
Ar šī īpašība, kas fona attēlu, var būt gandrīz jebkurš objekts. Definē šādi fona bildi: url ('fon.gif') ; kur url ("fon.gif") ir ceļš uz attēla ja attēls ir tajā pašā mapē, kā html lapā pati ir ceļš varētu izskatīties Šajā gadījumā, ja pats attēls, piemēram, slēpjas attēlu mapi, tad ceļš uz attēla izskatīsies šādi: url ('images / fon.gif ").
Jūs varat mēģināt saglabāt šo maz attēlu iekavās (fon), mapi, kur ir jūsu lapa (jūs noklikšķiniet ar peles labo pogu un izvēlieties "Save Image"), un jo pašā lapā, ievietojiet šādu kodu:
Code <html>
<head>
<title> Fona CSS </ Nosaukums>
<STYLE>
ķermeņa {
background-color: # CCFFCC;
fona bildi: url ('fon.gif');}
p {background-color: # FFFF99 ;}
</ style>
</ head>
<body> Piemērs no teksta, kas novietota uz dzeltena fona </ p> </ body> <html>
Tā rezultātā, jums vajadzētu būt šāds pamatojums:
$ IMAGE2 $
Fona atkārtot - tas nosaka, vai fona attēls atkārtojas, un ja pastāv veids. Šis īpašums ir šādas vērtības:
atkārtojums - attēls tiek atkārtots gan vertikāli, gan horizontāli; atkārtotu x - attēls tiek atkārtots tikai horizontāli; atkārtotu y - attēls tiek atkārtots tikai vertikāli; bez atkārtota - attēls netiks atkārtots.
Piemēram, radīt fonu, kas tiks atkārtoti vertikāli tikai attiecībā uz šo mūsu kodu, lai pievienotu šādu fona Atkārtošana: Atkārtotu y, viss tas izskatīsies šādi:
Code <html>
<head>
<title> Fona CSS </ Nosaukums>
<STYLE>
ķermeņa {
background-color: # CCFFCC;
fona bildi: url ('fon.gif');
background-repeat: Atkārtotu y;}
p {background-color: # FFFF99;}
</ style>
</ head>
<body> Piemērs no teksta, kas novietota uz dzeltena fona </ p> </ body> </ HTML>
Tā rezultātā, mūsu fons tiek parādīts šādi:
Fona Pielikums - nosaka, vai fons pārvietoties kopā ar lapu, kad ritināšanu vai ne. Kam ir šādas vērtības:
nosaka - fons paliks savā vietā, un saturs tiks pārvietots; ritiniet - fons ies kopā ar citiem satura lapām;
Šis īpašums tiek definēts kā fona pielikumu: fiksētā, visu kodu:
Code <html>
<head>
<title> Fona CSS </ Nosaukums>
<STYLE>
ķermeņa {
background-color: # CCFFCC;
fona bildi: url ('fon.gif');
background-repeat: Atkārtotu y;
Fona -Attachment: fiksēta;}
p {background-color: # FFFF99;}
</ style>
</ head>
<body> Piemērs no teksta, kas novietota uz dzeltena fona </ p> </ body> </ HTML>
Background-pozīciju - ļauj novietot fona attēlu. Ar šo īpašumu, jūs varat pārvietot attēlu attiecībā pret augšējā kreisajā stūrī posteni.
Tai ir divas nozīmes: pirmkārt, cik daudz jūsu fona attēls tiks pārvietoti no kreisās malas un 2., cik daudz tas pāriet no augšas. Lai redzētu, kā tā darbojas, saglabāt attēlu redzat virs mapē, kur savu html lapas, un lapa pati, ievietojiet šādu kodu:
Code <html>
<head>
<title> Fona CSS </ Nosaukums>
<STYLE>
ķermeņa {
background-color: # CCFFCC;
fona bildi: url ('fon.gif');
background-repeat: Atkārtotu y;}
p {background-color: # FFFF99;
fona bildi: url ('t.jpg');
background-repeat: no-repeat;
Fona-position: 30px 20px;}
</ style>
</ head>
<body> piemērs pozicionēšanas attēli <br> <br> </ p> </ body> </ HTML>
Šajā gadījumā mēs esam pievienoja tagu
attēls, kas neatkārtojas, un novirzīs to tiesības un 30px 20px no augšas. Tā vietā, jūs varat norādīt pikseļu interesi. Izrādījās šādu:
$ IMAGE3 $
Nu, šeit mēs esam apsvēruši visas īpašības, izmanto CSS strādāt ar fonu. Tagad jūs varat nodot tos praksē, veidojot savu vietnes.
 
|
| |
| |
