css ბლოკები (div)

 თანამედროვე საიტების აწყობა ხდება ბლოკების საშუალებით. ბლოკებს აქვს უამრავი თვისება: სიგანე, სიგრძე, ფონის ფერი, ჩარჩო და სხვ; ასევე ურთიერთ განლაგება: დაშორება სხვა ბლოკებიდან, თვითონ ბლოკში შიგთავსის განლაგება და ა.შ. ყველაფერი ამის მიღწევა შეიძლება css სტილების გამოყენებით.
თვალსაჩინოებისათვის შევქმნათ ბლოკი და მასში განვათავსოთ ორი შვილობილი ბლოკი რაიმე ტექსტით. იხილეთ კოდის ფრაგმენტი
<div id="parent" >
		<div class="children">
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		</div>
		<div class="children">
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		</div>
		</div>
როგორც ვხედავთ გვაქვს მშობელი ბლოკი იდენტიფიკატორით parent და ორი შვილობილი ბლოკი კლასით children. სანამ ამ ბლოკებს რაიმე სტილი არ აქვთ, ვერავითარ ცვლილებას ვერ შევამჩნევთ, მაგრამ როგორც კი სტილებს მივანიჭებთ, დავინახავთ  css-ის მთელ ძალას. ქვემოთ მოვიყვან  css სტილის რამდენიმე კოდს და მიღებული შედეგის სურათს:
#parent {
		width: 600px;
		height:400px;
		margin: 0 auto;
		padding: 10px;
		border: 5px dotted #000;
		background: #FF00AE;
		}
		.children{
		width: 200px;
		height:150px;
		margin: 10px 50px;
		padding-left: 15px;
		padding-top: 10px;
		border: 2px solid #544BFF;
		border-radius: 20px;
		background: #33FF0F;
		}
მიღებული შედეგი:

css ბლოკები (div)

 

ახლა განვიხილოთ, თუ როგორ მივაღწიეთ ამ შედეგს; ჩვენ პირველ რიგში მშობელ ბლოკს განვუსაზღვრეთ სიგანე (width) და სიმაღლე (height), ასევე უკანა ფონი  (background) თვალსაჩინოებისათვის. ასევე შემოვავლეთ ჩარჩო (border). ამის შემდეგ margin-ის საშუალებით ის განვათავსეთ საიტის შუაში და ბოლოს padding-ის საშუალებით მისი შვილობილი ბლოკები ნაპირიდან მოვაშორეთ 10 პიქსელით. თუმცა რეალურად ისინი მარცხნიდან 60 და ზემოდან 20 პიქსელიდ დაშორდა (ამ საკითხს შემდეგ გაკვეთილზე განვიხილავთ).

რაც შეეხება შვილობილ ბლოკებს მათ სრულიად ერთნაირი სტილები აქვთ კლასის საშუალებით. განსხვავებით მშობელი ბლოკისაგან მათ დამატებით მომრგვალებული უწყვეტი ჩარჩო აქვთ. ჩარჩოს განსხვავებული სტილების შესახებ შეგიძლიათ გაიგოთ შესანიშნავ საიტზე http://ruseller.com/shporacss.php?id=42 მაგ: dashed -ტირე, double - ორმაგი ხაზით.

ალბათ შეამჩნიეთ, რომ მიუხედავად მცირე ზომებისა, შვილობილი ბლოკები ერთმანეთის ქვეშ განლაგდა და არა ერთმანეთის გვერდით. ეს ბლოკების ერთერთი მთავარი თვისებაა: მათთვის ბრაუზერში სივრცე საიტის მთელ სიგანეზე გამოიყოფა და იქ სხვა ბლოკი ვერ განლაგდება. (შემდეგ გაკვეთილებზე მათი გადალახვის გზებს შევისწავლით).