Si Të Krijoni Blloqe Në CSS

Përmbajtje:

Si Të Krijoni Blloqe Në CSS
Si Të Krijoni Blloqe Në CSS

Video: Si Të Krijoni Blloqe Në CSS

Video: Si Të Krijoni Blloqe Në CSS
Video: Si te krijoni nje website FALAS dhe THJESHTE? 2024, Mund
Anonim

CSS është një fletë stili kaskadë, e cila është një gjuhë për të përshkruar pamjen e faqeve të internetit. Një nga përparësitë kryesore të CSS është aftësia për të zëvendësuar paraqitjen e tryezës me paraqitjen e bllokut.

Si të krijoni blloqe në CSS
Si të krijoni blloqe në CSS

Është e nevojshme

Redaktues i kodit HTML

Udhëzimet

Hapi 1

Krijoni bllokun e parë. Në formë HTML, do të duket si një etiketë div me id 'block01'. Këtu, identifikuesi block01 tregon që në përshkrimin e CSS, të gjitha vetitë e këtij blloku janë specifikuar për zgjedhësin # block01.

Hapi 2

Përshkruani bllokun në CSS. Në stilet e CSS, specifikoni emrin e identifikuesit (# block01) dhe në kllapa kaçurrela përshkruani parametrat e tij - gjerësia, pozicionimi, zhvendosja, ngjyra e sfondit, etj. Për shembull, mund të duket kështu: # block01 {width: 150px; lartësia: 150px; pozicioni: absolut; maja: 0px; majtas: 0px; ngjyra e sfondit: rozë}. Ky përshkrim supozon se kutia do të jetë 150 pixel e gjatë dhe 150 pixel e gjerë, ajo do të pozicionohet në mënyrë të ngurtë në këndin e sipërm të majtë të dokumentit dhe sfondi i saj do të jetë me ngjyrë rozë.

Hapi 3

Jepni bllokut një pozicionim relativ. Nëse përdorni jo pozicionim absolut, por relativ në përshkrimin e CSS, atëherë mund të vendosni blloqe jo me një shkulje të ngurtë në një rrjet koordinatash, por në lidhje me blloqet e tjera tashmë ekzistuese. Për ta bërë këtë, ndryshoni pozicionin e kodit: absolut; maja: 0px; majtas: 0px nga pozicioni: relativ; maja: 200px; majtas: 100px.

Hapi 4

Jepi bllokut një rrumbullakim. Në CSS, deklarata e rrezes së kufirit është përgjegjëse për këtë. Shtoni kodin e mëposhtëm në fletën tuaj të stileve: border-radius: 8px. Blloku tani do të ketë kënde të rrumbullakosura. Nëse dëshironi të rrumbullakosni vetëm disa cepa, përshkruani rrezen veçmas për secilin prej tyre: kufiri-rrezja: 8px 8px 0px 0px.

Hapi 5

Jepi bllokut një goditje. Për të nxjerrë në pah skicën e një blloku me një vijë të hollë, shtoni kodin e mëposhtëm në përshkrimin e tij CSS: top-top: 1px e zezë e thyer. Ky udhëzim do të thotë që kufiri i bllokut do të jetë i zi dhe do të jetë një pixel me trashësi. Në këtë rast, vetë vija e konturit do të shfaqet si një vijë e ndërprerë (e ndërprerë - një vijë me pika, me pika - pika, e ngurtë - një vijë e fortë).

Hapi 6

Vendosni vetitë e mbetura të bllokut. Specifikoni në përshkrimin e CSS se çfarë shkronje duhet të përdoret për tekstin brenda bllokut, cila duhet të jetë madhësia e shkronjave, shtrirja dhe dhëmbëzimi nga skajet e bllokut. Këto veti përshkruhen në përkufizimet font-family, font-size, text-align, dhe padding.

Hapi 7

Ju mund të përdorni pronën float për të personalizuar rrjedhën e një blloku mbi tjetrin. Nëse e vendosni në "majtas", atëherë pjesa tjetër e elementeve do të rrjedhin rreth bllokut në të majtë, dhe "djathtas" - në të djathtë. Nëse vendosni vlerën e notimit si "asnjë", rreshtimi i bllokut nuk do të caktohet. Prona e pastër në CSS parandalon bllokun që të rrjedhë djathtas, majtas ose të dy anët dhe mbizotëron deklaratën float.

Recommended: