Cascading Style Sheets (CSS)

1. Mother.Board (Off)
[ 25 Oct 2013, 14:51 ]
css პროგრამირების ენად არ ითვლება მაგრამ დიზაინში აუცილებელი ატრიბუტია, მე შევეცდები გასწავლოთ მისი საწყისი ეტაპები, რადგან ყველაფრის ახსნა უფრალოდ შეუძლებელია.
ეს გაკვეთილები ექსკლუზიურად ეკუთვნის wapforum.ge - ს და თუ ვინმე თავის საიტზე გადატანას მოინდომებს უნდა მიუთითოთ ამ ფორუმის ლინკი და ჩემი ნიკი.
ვცეთ ერთმანეთს პატივი და მივაღწიოთ ურთიერთ ჰარმონიას

/* კომენტარი css - ში იწერება ასე */
/* ავტორი MotherBoard */

body {
background-color:#fff;
background:url(/image/image.gif);
font-family:Verdana, Geneva, sans-serif;
margin:0px auto;
padding:0px;
font-size:11px;
}

კომენტარი css ფაილში იხსნება შემდეგნაირად /* და იხურება */

body - არის css ფაილის თავი და თავი (დედა და მამა). აქ ვუწერთ იმ პარამეტრებს რაც ზოგადად ყველა კლასზე გავრცელდება, თუმცა არ უნდა დაგვავიწყდეს რომ ნებისმიერ კლასს შევუცვლით body - ით მინიჭებულ პარამეტრს.

მაგალითი: თუ ჩვენ ბოდიში მივუთითეთ შრიფტის ზომა 11 ფიქსელი

body {
background-color:#fff;
background:url(/image/image.gif);
font-family:Verdana, Geneva, sans-serif;
margin:0px auto;
padding:0px
font-size:11px;
}

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

.logo {
font-size:13px;
}

Css - ფაილში გვხვდება ძირითადად ორი ტიპის კლასი რომელსაც html - სახით ვბეჭდავთ შემდეგნაირად:

<div class="name"> </div>
<div id="name"> </div>

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

მაგალითი:

.logo {font-size:12px; color:red;}

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

მაგალითი:

#logo {font-size:12px; color:red;}

შესაბამისად html - ბეჭვდისას თუ კლასი გვაქვს შექმნილი ვუწერთ:

<div class="name"> </div>

და თუ იდი გვაქვს შექმნილი ვუწერთ:

<div id="name"> </div>

პირველი გაკვეთილის დასასრული. (ხელს ნუ შემიშლით გთხოვთ)
[Pasuxi][Cit]|
__________
bolo redaqtireba 26 Oct 2013, 20:56; sul 3 -jer

2. Mother.Board (Off)
[ 25 Oct 2013, 18:28 ]
თუ გინდათ რომ თქვენი საიტის ფონის ფერი შეცვალოთ, ან კონკრეტული სურათი დაურთოთ რომელიმე დივს ან კლასს უნდა გამოიყენოთ შემდეგი ფუნქცია

background-color:#fff;
background:url(/image/image.gif);

შეხედეთ როგორ ითარგმნება
background-color:#fff; ანუ ფონის–ფერი:#fff;

თუ გსურთ რომ სურათი იყოს ფონად უკვე სვავთ

background:url(/image/image.gif);

მაგრამ ეს არ არის საკმარისი რადგან ხდება ხოლმე სიტუაციები როდესაც საიტის ჩატვირთვის დროს სრულად არ იხსნება ეს მითითებული სურათი და რჩება ცარიელი, დიზაინის ფაქტურა კი მთლიანად იკარგება.
ეს რომ არ მოხდეს როსესაც ფონის სურათის კოდს მივუთითებთ ასევე მივუთითებთ ფონის ფერის კოდსაც და ფერს ავირჩევთ ისეთს რომელიც ფონის სურათის ფერს მიესადაგება და თუ მოხდა ისე რომ სურათი არ გაიხსნა გაიხსნება ფონის ფერი. ანუ ბრაუზერი ჯერ მოითხოვს სურათს თუ არ გაიხსნა გახსნის ფერს.

კოდი გამოიყურება ასე:

.name {

background:url(/image/image.gif);
background-color:#fff;
}

თანმიმდევრობას მნიშვნელობა არა აქვს.

background:url(/image/image.gif);

შეხედეთ ზემოთ მოცემულ კოდს აქ სიტყვა image არის საქაღალდის სახელი დასაც დევს სურათი და image.gif კი სურათის სახელი.
სლეში / არის ერთით წინ.

დავუშვათ გვავს სურათი ზომით 50 x 50 რომელიც გვინდა გავშალოთ სიგრძეზე მაგალითად 600 ფიქსელზე მან ვწერთ შემდეგ კოდს

background-repeat:repeat-x;

თუ სიგანეზე გვინდა გაზრდა, მაგალითად 100 ფიქსელზე უკვე ვწერთ შემდეგ კოდს

background-repeat:repeat-y;

ხოლოდ თუ გვინდა რომ სურათი დარჩეს იგივე ზომებზე რაც არის და არცერთ მხარეს არ გაიშალოს ვწერთ შემდეგს

background-repeat:no-repeat;

თვითონ repeat კი ორივე მხარეს გაჩვენებთ სიგრძივითაც და სიგანითაც

სიგრძეში იგულისხმება ჰორიზონტალი, სიგანეში კი ვერტიკალი

მეორე გაკვეთილის დასასრული
[Pasuxi][Cit]|
__________
bolo redaqtireba 26 Oct 2013, 21:17; sul 7 -jer

3. Mother.Board (Off)
[ 26 Oct 2013, 15:22 ]
ალბათ იცით რომ თქვენს ტელეფონებსა თუ კომპიუტერებში არის რაღაც შრიფტების კრებული, არის სტანდარტული შრიფტები arial, verdana და სხვა. არის კიდევ სპეც შრიფტები რომლებიც უხვად არის ინტერნეტში და მათი დაინსტალირება ადვილადაა შესაძლებელი. css ის კოდში დიზაინისთვის ან მათი კონკრეტული ნაწილისთვის ფონტის მინიჭება შემდეგი კოდით არის შესაძლებელი.

მოდით გავარჩიოთ ეს კოდი:
font-family:Verdana, Geneva, sans-serif;

თუ ის body შია მინიჭებული მაშინ ჩვენს დიზაინს მიენიჭება ფონტი Verdana
თუ თქვენ გახსენით ეს საიტი სადაც Verdana არის მითითებული და თქვენს კომპში ან ტელეში ეს შრიფტი არ მოიძებნა, მაშინ გაგიხსნით შემდეგს Geneva თუ ესეც არ მოიძებნა გაგიხსნით sans-serif. ანუ ძირითადად დეფაულთ ფონტები ყველა ტელეში და კომპშია მაგრამ მაინც დაზღვევის მიზნით ვწერთ ასე.

თუ ჩვენ გვინდა დიზაინს მივანიჭოთ სპეც შრიფტი მაშინ css ფაილში უნდა მივუთითოთ შემდეგი კოდი:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

სადაც myFirstFont არის ფონტის სახელი რომელსაც შემდგომ ამ კოდში გამოიყენებთ font-family:myFirstFont,Verdana, Geneva, sans-serif;

და სადაც Sansation_Light.ttf არის შრიფტის მისამართი, რომელიც ზუსტად უნდა მივუთითოთ.

მესამე გაკვეთილის დასასრული
[Pasuxi][Cit]|

5. Mother.Board (Off)
[ 26 Oct 2013, 16:18 ]
chino, შეგეძლო პირადში მოგეწერა და თემა არ გაგეფუჭებინა, გამომრჩა და მადლობა რომ შემახსენე. ამის შემდეგ გთხოვთ რომ პირადში მომწეროთ თუ რამე გამომრჩება. მოდერატორს კი ვთხოვ რომ ორივე ზედმეტი პოსტი წაშალოს.
[Pasuxi][Cit]|

6. Mother.Board (Off)
[ 26 Oct 2013, 16:28 ]
ფუნქცია margin - ანუ ზღვარი

ეს არის ხშირად გამოყენებადი ფუნქცია, თუ გინდათ რომ ერთი დივი ან კლასი დააშოროთ მეორეს : გაწიოთ მარცხნივ,მარჯვნივ,დაბლა,მაღლა – გამოიყენეთ

margin-top:100px; დაბლა დასწევთ
margin-bottom:100px; მაღლა ასწევთ
margin-right:50px; მარჯვნივ გასწევთ
margin-left:50px; მარცხნივ გასწევთ

შეგიძლიათ ასევე გამოიყენოთ მინუსი – მაგალითად:

margin-top:–100px;

ბევრს ემართება ისე რომ დიზაინს ეკრანის ცენტრში ვერ ახვედრებს ამის მოგვარება მარტივად არის შესაძლებელი თუ body ში ჩავსვავთ კოდს

margin: 3px auto; ამ შემთხვევაში მთელი დიზაინი დაიწევს 3 ფიქსელით დაბლა და მოხვდება ცენტრში.

margin ფუნქციის ერთ ხაზზე დაწერაც არის შესაძლებელი შემდეგნაირად

margin:2px 4px 3px 4px;

ფუნქცია padding: დაახლოებით იგივე მოვალეობას ასრულებს რაც ზემოთხსენებული, ტექსტისთვის კარგი იარაღია გასწევთ მარჯვნივ მარცხნივ დასწევთ დაბლა მაღლა, გაადიდებთ დივის სისქეს სხვა

გამოიყენება იგივენაირად

padding-top:100px;

მეოთხე გაკვეთილის დასასრულუ
[Pasuxi][Cit]|

7. Mother.Board (Off)
[ 26 Oct 2013, 20:25 ]
როგორ უნდა ვაკონტროლოთ შრიფტის ზომა ჩვენს კოდში? მარტივად

შრიფტის ზომის კონტროლის კოდი

font-size:10px;
font: 10px arial,verdana,comic sans ms;

როგორ ვაკონტროლოთ შრიფტის სისქე?

font-weight:bold; - ან bolder, inherit, lighter, normal 100, 200, 300, 400 . . . მაგრამ ყველაზე ხშირად გამოიყენება

font-weight:bold;
font-weight:normal;

ბევრგან მინახავს რომ სკრიპტის თარგმნისას ან დიზაინის დახატვისას ვაპ მასტერები პირველ ასოს დიდი ასოთი იწყებენ შემდეგ სიტყვასაც დიდი ასოთი, ეს აღარ მოგიწევთ თუ ჩასვავთ css ში შემდეგ კოდს

text-transform:capitalize;

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

ეს კოდი კი პირიქით არის

text-transform:lowercase;

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

text-transform:uppercase; ამ კოდის შემთხვევაში კი ყველგან დიდი ასოებით დაიწერება.

როგორ უნდა გავწიოთ ტექსტი შუაში? ან მარცხნივ? ან მარჯვნივ?

როგორ და შემდეგი კოდების დახმარებით

text-align:left; მარცხნივ
text-align:right; მარჯვნივ
text-align:center; შუაში

ჩვენ ასევე შეგვიძლია ტექსტს მივანიჭოთ ჩრდილი შემდეგი კოდის დახმარებით

text-shadow:1px 1px 1px 1px #000;

და ასევე შეგვიძლია ფერი rgb თიც დავბეჭდოთ

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

გავუსვათ ტექსტს ხაზი ქვემოდან

text-decoration:underline;

ან გადავუსვათ შუაში ხაზი
text-decoration:line-throug;

ანდაც ზემოდან გადავუსვათ ხაზი

text-decoration:overline;

თუ გამომრჩა რამე შემახსენეთ

მეხუთე გაკვეთილის დასასრული
[Pasuxi][Cit]|

8. Mother.Board (Off)
[ 26 Oct 2013, 20:53 ]
მოდით ვისწავლოთ ლინკები რადგან თუ ლინკი არ გავალამაზეთ რა აზრი აქვს CSS ის დაწერას? არაფერი!

ლინკის კოდი იწერება შემდეგნაირად

a:link,a:active,a:visited { color:#000;text-decoration: none; }

მოდით ეხლა გავარჩიოთ

თუ მე დავწერ მხოლოდ ასე

a:link { color:#000;text-decoration: none; }

მივანიჭებ მხოლოდ აქტიურ ლინკს ფერს, ანუ a:link არის ლიკი რომელსაც ჯერ არ შევხებივართ მაუსით და მისი ფერი იქნება შავი.

a:active ნიშნავს რომ მე უკვე დავაჭირე ლინკს მაუსი და რა ფერსაც მიიღებს ლინკი ის არის a:active – ე.

a:visited კი როდესაც მე დავაჭირე ლინკს მაუსი მოვინახულე ლინკი და შემდეგ დავბრუნდი უკან ვხედავ რომ ლინკი რომელსაც დავაჭირე არის სხვა ფერის ან იგივე ფერის, ფერის მართვა კი შეგიძლიათ ასე

a:visited { color:#000;text-decoration: none; }

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

როგორ უნდა გავაკეთოთ ისე რომ როდესაც ლინკზე მივიტანთ მაუსს ფერი შეიცვალოს? (ამ შემთხვევაშიც მხოლოდ ფერზე მომყავს მაგალითი) ეს ადვილია და შესაძლებელია შემდეგი კოდსი დახმარებით

a:hover,a:focus { color: red };

ესეიგი გამოვიდა რა. ლინკი გვაქვს შავი და როდესაც მაუსს მე მივიტან ლინკთან ის გაწითლდება

აქვე დავწერ img ტეგს.

დიზაინში თუ გექნებათ სურათი მაგალითად icon რომელიც ლინკის გასწვრივ არის ხოლმე ძირითადად ამ სურათს შეგვიძლია მივანიჭოთ css ში ჩვენი პარამეტრი. თუ body ში ჩავუწერთ პარამეტრს იმოქმედებს ყველა სურათზე რაც დიზაინში გვაქვს, კოდი კი დაიწერება ასე

img {vertical-align:middle;} ამ შემთხვევაში

vertical-align:middle; – ს საშუალებით სურათი გაუსწორდება ლინკს, რადგან ხშირად ხდება ხოლმე რომ სურათი დაბლაა დაწეული ან მაღლა და ეს კოდი ძალიან გამოსადეგარია.

მეექვსე გაკვეთილის დასასრული
[Pasuxi][Cit]|