სტილის თვისებები: სურათი ფონად, ფსევდო სელექტორი :hover და float

დავიწყოთ სურათის ფონად დაყენებით. პირველ რიგში ჩვენს ძირითად ფოლდერში მოვათავსოთ რაიმე მცირე ზომის სურათი (არაუმეტეს 200X200 px ზომისა, ზომის შეცვლა ვინდოუსის "პაინტით" შეგიძლიათ). სურათს დავარქვათ სახელი image1.jpg. (საერთოდ, სახელი ნებისმიერი შეგიძლიათ დაარქვათ). წინა გაკვეთილის css კოდში, სადაც გვაქვს #parent{ ... background: #FF00AE;} შევცვალოთ შემდეგი კოდით 

background: #FF00AE url(image1.jpg) no-repeat top  center fixed;

 მივიღებთ დაახლოებით ასეთ სურათს:

 

 

 ახლა ვნახოთ თუ რა მოხდა; ბლოკის ძირითად ფონს #FF00AE დაემატა სურათი url(image1.jpg), რომელიც არ მეორდება  no-repeat და განლადებულია ბლოკის ზედა ნაწილლში top შუაში center. ხოლო fixed ნიშნავს, რომ თუ ბლოკის სიგრძე იმდენად დიდი იქნება რომ ბრაუზერის ვერტიკალური "სქროლი" დაგვჭირდება, სურათი უძრავად დარჩება. ამის შესამოწმებლად გაზარდეთ height:1500px;-მდე და ამოძრავეთ ვერტიკალური "სქროლი".

 

ჩვენ შეგვიძლია სურათი ბლოკის ნებისმიერ ადგილზე განვალაგოთ, ასევე მოვუხსნად ფიქსირება ან გავამრავლოთ იქსის და იგრეკ ღერძების გასწვრივ.

 

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

 

სურათიდან ჩანს, რომ როგორც კი მაუსი ბლოკის შიგნით შევიდა, ბლოკმა შეიცალა როგორც ფონის, ასევე ტექსტის ფერი. შეიცვალა საპირისპიროთი. ქვემოთ მოვიყვან შესაბამის კოდებს.

ეს არის HTML კოდი

<div id="parent" >
		<div class="children">
		ეს საიტის ტექსტია...<br/>
		ეს საიტის ტექსტია...<br/>
		ეს საიტის ტექსტია...
		</div>
		<div class="children">
		ეს საიტის ტექსტია...<br/>
		ეს საიტის ტექსტია...<br/>
		ეს საიტის ტექსტია...
		</div>
		</div>

ეს კი CSS კოდი

 

#parent {
		width: 600px;
		height:400px;
		margin: 0 auto;
		padding: 10px;
		border: 5px dotted #000;
		//background: #FF00AE url(image1.jpg) no-repeat top  center fixed;
		
		}
		
		
		.children{
		width: 170px;
		height:150px;
		margin: 10px 50px;
		padding-left: 15px;
		padding-top: 10px;
		border: 2px solid #544BFF;
		border-radius: 20px;
		background:  rgb(220,125,25);  #33FF0F;
		}
		.children:hover{
		color: rgb(220,125,25);
		background: #000;
		}