უნივერსალური CSS სელექტორი (*) და დოკუმენტის საწყისი სტილების გადატვირთვა

Jul 05 2007

პოსტში CSS სელექტორების მინიმიზაციის შესახებ ნაწილობრივ შევეხე უნივერსალურ სელექტორებს (*).

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

ამ ტიპის სელექტორის გამოყენება საკმაოდ მარტივია და როგორც ზემოთ ნახსენებ პოსტშია ნაჩვენები აქვს შემდეგი სახე:

მაგალითი 1

1
2
3
4

* {
font-size: 13px;
color: yellow;
}

ეს კოდი განსაზღვრავს დოკუმენტის აბსოლუტურად ყველა ელემენტის საწყისი ფონტის ზომასა და ფერს.

ხოლო შემდეგი კოდი განსაზღვრავს მხოლოდ div ელემენტების შიგნით არსებული ყველა ელემენტის ფონტის ზომასა და ფერს:

მაგალითი 1

1
2
3
4

div * {
font-size: 13px;
color: yellow;
}

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

როგორ შეიძლება გამოვიყენოთ ეს შესაძლებლობა ჩვენს სასარგებლოდ და როგორ უნდა გადავტვირთოთ დოკუმენტის საწყისი სტილები?

პირველ რიგში შევეხოთ ისეთ ელემენტებს რომლებსაც თავიდანვე განსაზღვრული აქვთ გარკვეული მახასიათებლები:

დასათაურების ტეგები: h1, h2, h3, h4, h5, h6 – მათ განსაზღვრული აქვთ როგორც ელემენტის გარე საზღვრების ზომა (margin) ასევე ფონტის ზომა;
პარაგრაფის ტეგი: p – განსაზღვრული აქვს გარე საზღვრების ზომა;
HTML ფორმის ტეგი: form - ზოგიერთ ბრაუზერში იკეთებს სივრცეს
ჩამონათვალის ტეგები: ul, ol – განსაზღვრული აქვთ როგორც გარე საზღვრების ზომა ასევე შიდა სივრცე;
ბმულების ტეგი: a – განსაზღვრული აქვთ როგორც საწყისი ფონტის ფერი ასევე ფერი უკვე მონახულებული ბმულებისათვის;

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/**
გადავტვირთოთ დოკუმენტში არსებული ყველა ელემენტის შიდა და გარე საზღვრები და ფონტის სტილები
*/
* {
margin: 0;
padding: 0;
font: normal 11px arial;
}

/**
განვსაზღვროთ ფონის ფერი
*/
body {
background-color: #FFF;
}

/**
ჩამანათვალის ტეგების ელემენტებისათვის გავაუქმოთ ტიპი
*/
ul, ol {
list-style-type: none;
}

/**
ფორმას გავუუქმოთ გვერდები და ასევე მივუთითოთ სიგანე, ეს საჭიროა IE6 - ისთვის
*/
form {
border: none;
width: 100%;
}

/**
გავუუქმოთ img ტეგს გვერდები რადგან a ტეგში მოთავსების შემთხვევაში იკეთებს მათ
*/
img {
border: none;
}

/**
აღვადგინოთ option ელემენტის მარცხენა და მარჯვენა სივრცე
*/
select option {
padding: 0 4px;
}

/**
აღვადგინოთ optgroup - ში მოთავსებული option ელემენტის მარცხენა საზღვარი
*/
optgroup option {
margin-left: 20px;
}

/**
განვსაზღვროთ სტილები a ელემენტის link, visited და active ფსევდო სელექტორებისათვის
*/
a:link, a:visited, a:active {
font: normal 12px verdana;
color: blue;
}

/**
განვსაზღვროთ სტილები a ელემენტის hover ფსევდო სელექტორისათვის
*/
a:hover {
text-decoration: none;
color: red;
}

ნაჩვენები კოდი შესაძლებელია განვათავსოთ ფაილში და ყოველთვის გამოვიყენოთ ის რათა თავიდან ავირიდოთ განმეორებითი კოდის წერა. მსგავსი გლობალური ცვლილება დოკუმენტის ელემენტებისათვის ძალიან სასარგებლოა რადგან მსგავსი მიდგომა თავიდან აგვარიდებს უამრავი განმეორებითი კოდის წერას, და ყოველი დოკუმენტი გარანტირებულად ერთნაირად იმუშავებს ბრაუზერებში განსაზღვრული საწყისი სტილების მიუხედავად. მოცემული კოდიდან აღსანიშნავია სულ პირველი ინსტრუქცია სადაც გარე საზღვარი და შიდა სივრცე დაყვანილია 0 – ზე (margin: 0; padding: 0;), გამომდინარე იქედან რომ ყოველი ელემენტს გააჩნია გარანტირებულად ერთი და იგივე აღნიშნული მახასიათებელი ბევრად მარტივი ხდება მათი შემდგომი მენეჯმენტი, ასევე ამ მიდგომით IE6 – ში თავიდან ავირიდებთ margin – ის გამოთვლაში არსებულ გარკვეულ ხარვეზებს.

ტეგები: CSS

7 Responses to “უნივერსალური CSS სელექტორი (*) და დოკუმენტის საწყისი სტილების გადატვირთვა”

Giorgi says:

July 17, 2007 at 9:48 pm

gaumarjos standartizacia globalizacias ra
გოჩა says:

November 8, 2008 at 1:36 pm

ორი ფონური სურათი შეიძლება გამოყენებულ იქნეს CSS-ში?
იოსები says:

November 8, 2008 at 11:44 pm

@გოჩა

ორი ფონური სურათის მხარდაჭერა რამდენადაც მახსოვს Safari – ს გარდა არცერთ ბრაუზერს არ აქვს… Safari – ზეც ზუსტად თავს ვერ დავდებ მე პირადად ტესტი არ გამიკეთებია არასოდეს…

ერთადერთი რაც შემიძლია გირჩიო ორი ელემენტი გამოიყენო და სათითაოდ გაუკეთო ფონური სურათი:
```
<body class="bg-1">
    <div class="bg-2">
    </div>
</body>
```
გოჩა says:

November 11, 2008 at 1:25 pm

დიდი მადლობა გამოხმაურებისათვის უფრო თუ დამიკონკრეტებთ,რადგან მე მინდა,რომ ორივე სურათი repeat-y
სიბრტყეში იყოს და მარჯვნივ,მარცხნივ.დიდ მადლობას გიხდით განმეორებით გამოხმაურებისათვის.
ალეკო says:

March 21, 2009 at 3:36 am

გაუმარჯოს სოსოს
სოსოჯან ერთი რჩევა მინდა

#content table tr td{
padding:3px;
}

მარტივად მიხვდები რომ css სელექციისას სტილის ასეთი გზით მინიჭებისას ვიგულისხმე რომ
ელემენტ #content -ში არსებულ table-ს tr-ების td-ებს
padding ჰქონდეთ 3px. შედეგი კი მივიღე, მაგრამ ამ სტილმა იმუშავა ყველა შემდეგი child Table-ებზეც, ანუ მე მინდა #content-ში არსებულ Table გასტილოს რომელიც Xpath-ით მივუთითე, ერთგვარად Xpath ვერ ვიყენებ სრულყოფილად CSS-ში. რამეს მირჩევ? იქნება რაღაცეები ამერია და ყველაფერი უფრო მარტივია ვიდრე მგონია??
იოსები says:

March 21, 2009 at 6:40 am

@ალეკო

კი არის გამოსავალი, ე.წ child selector უნდა გამოიყენო ანუ “>” რომ მხოლოდ უშუალო შვილს შეეხოს სელექტორი.

ანუ შენი სელექტორის ასე გადაკეთება მოგიწევს:
```
#content > table > tr > td {
   padding: 3px;
}
```
ალეკო says:

March 21, 2009 at 7:28 am

@იოსები
გაიხარე დაახლოებით ეგრეც ვფიქრობდი მაგრამ სრულ აზრამდე ვერ მივედი.
კიდევ ერთხელ მადლობა

Code.ge Blog