სტილის თვისებები: სურათი ფონად, ფსევდო სელექტორი :hover და float
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;
}