CSS ir kaskādes stila lapa, kas ir valoda, lai aprakstītu tīmekļa lapu izskatu. Viena no galvenajām CSS priekšrocībām ir iespēja aizstāt tabulas izkārtojumu ar bloku izkārtojumu.
Tas ir nepieciešams
HTML kodu redaktors
Instrukcijas
1. solis
Izveidojiet pirmo bloku. HTML formā tas izskatīsies kā div tags ar id 'block01'. Šeit block01 identifikators norāda, ka CSS aprakstā visas šī bloka īpašības ir norādītas selektoram # block01.
2. solis
Aprakstiet bloku CSS. CSS stilos norādiet identifikatora nosaukumu (# block01) un cirtainās iekavās aprakstiet tā parametrus - platumu, pozicionēšanu, nobīdi, fona krāsu utt. Piemēram, tas varētu izskatīties šādi: # block01 {width: 150px; augstums: 150 pikseļi; pozīcija: absolūta; augšdaļa: 0 pikseļi; pa kreisi: 0px; fona krāsa: rozā}. Šajā aprakstā tiek pieņemts, ka lodziņš būs 150 pikseļu garš un 150 pikseļu plats, tas tiks stingri novietots dokumenta augšējā kreisajā stūrī un tā fons būs rozā krāsā.
3. solis
Piešķiriet blokam relatīvu pozicionēšanu. Ja CSS aprakstā izmantojat nevis absolūtu, bet relatīvu pozicionēšanu, tad blokus varat ievietot nevis ar stingru uzspiešanu koordinātu režģī, bet gan attiecībā pret citiem jau esošiem blokiem. Lai to izdarītu, mainiet koda pozīciju: absolūts; augšdaļa: 0 pikseļi; pa kreisi: 0px pēc stāvokļa: relatīvais; augšdaļa: 200 pikseļi; pa kreisi: 100 pikseļi.
4. solis
Piešķiriet blokam noapaļošanu. CSS par to ir atbildīgs paziņojums par robežas rādiusu. Pievienojiet savu stila lapai šādu kodu: border-radius: 8px. Blokam tagad būs noapaļoti stūri. Ja vēlaties noapaļot tikai dažus stūrus, katram no tiem aprakstiet rādiusu atsevišķi: apmales rādiuss: 8 pikseļi 8 pikseļi 0 pikseļi 0 pikseļi.
5. solis
Dodiet blokam insultu. Lai izceltu bloka kontūru ar plānu līniju, pievienojiet CSS aprakstam šādu kodu: border-top: 1px dashed black. Šī instrukcija nozīmē, ka bloka robeža būs melna un būs viena pikseļa bieza. Šajā gadījumā pati kontūrlīnija tiks parādīta kā pārtraukta līnija (punktēta - punktēta līnija, punktēta - punktiņi, cieta - vienmērīga līnija).
6. solis
Iestatiet atlikušās bloka īpašības. CSS aprakstā norādiet, kāds burtveidols jālieto tekstam bloka iekšpusē, kādam jābūt fonta lielumam, līdzinājumam un atkāpei no bloka malām. Šīs īpašības ir aprakstītas definīcijās font-family, font-size, text-align un polsterējums.
7. solis
Varat izmantot īpašumu float, lai pielāgotu viena bloka plūsmu pār citu. Ja iestatāt to uz kreiso pusi, pārējie elementi plūdīs pa bloku kreisajā pusē, bet “pa labi” - labajā pusē. Ja iestatāt peldošo vērtību kā “neviens”, bloka izlīdzināšana netiks iestatīta. CSS notīrītais rekvizīts neļauj blokam plūst pa labi, pa kreisi vai abām pusēm un ignorē pludiņa paziņojumu.
