CSS ID Kullanımı

6 Mart 2021 892 kez okundu

HTML kodlarımızın içerisinde CSS ile özelleştirmeler yaptığımız zaman, özelleştirme bölümlerini tanımlamak için iki tane öznitelik kullanmaktayız. Bunlardan birincisi: Class özniteliği , ikincisi: ID özniteliğidir.
ID, CSS sınıfında kimlik anlamına gelmektedir. Bir öğrenin benzersiz kimliğini belirtmek amacıyla kullanılır. ID’nin benzeri bulunmaz. Kod içerisinde aynı ID sahip birden fazla etiket olamaz.

<p id="paragraf">Merhaba ! Bu bir class bölümüdür.</p>

1	<p id="paragraf">Merhaba ! Bu bir class bölümüdür.</p>

<style> … </style> etiketlerinin içerisinde ( # ) hastag işaretiyle belirtilir.

Önerilen Yazı
CSS Class Kullanımı

Birden fazla örnek ile ID kullanımının nasıl olduğuna ayrıntılı bir şekilde bakalım.

İçindekiler

1ID bölümü oluşturmak ve özelleştirmek

İlk olarak body içerisinde h1 etiketiyle bir id oluşturalım.

<html> 
 <head> 
  <title>CSS | ID Kullanımı | KodKampusu.COM</title> 
 <head>

 <body>
   <h1 id="baslik1">CSS ID Kullanımı</h1> <!-- h1 etiketinde bir id bölümü oluşturduk -->
 </body>

</html>

<html>

<head>

<title>CSS | ID Kullanımı | KodKampusu.COM</title>

<head>

<body>

<h1 id="baslik1">CSS ID Kullanımı</h1>

</body>

</html>

Ardından CSS özelleştirmelerini yapmak için, <head> … </head> bölümü içerisinde
<style> … </style> bölümü açalım.

<html> 
 <head> 
  <title>CSS | Class Kullanımı | KodKampusu.COM</title> 
   <style> 
         /*CSS Kodlarının yazılacağı bölümü oluşturduk*/
   </style>
 <head>

 <body>
   <h1 id="baslik1">CSS ID Kullanımı</h1>
 </body>

</html>

<html>

<head>

<title>CSS | Class Kullanımı | KodKampusu.COM</title>

<style>

/*CSS Kodlarının yazılacağı bölümü oluşturduk*/

</style>

<head>

<body>

<h1 id="baslik1">CSS ID Kullanımı</h1>

</body>

</html>

Şimdi oluşturduğumuz style bölümü içerisinde, h1 başlığımızın özelleştirmelerini yapalım.

<html> 
 <head> 
  <title>CSS | ID Kullanımı | KodKampusu.COM</title> 
   <style> 
         #baslik1 {
           color: cyan;
           background-color: Tomato;
           text-align: center;
           font-size:30px;
           text-shadow: 2px 2px black;
           outline-width: 5px;
           outline-style: solid;
           outline-color: gold;  

                  }
   </style>
 <head>

 <body>
   <h1 id="baslik1">CSS ID Kullanımı</h1>
 </body>

</html>

<html>

<head>

<title>CSS | ID Kullanımı | KodKampusu.COM</title>

<style>

#baslik1 {

color: cyan;

background-color: Tomato;

text-align: center;

font-size:30px;

text-shadow: 2px 2px black;

outline-width: 5px;

outline-style: solid;

outline-color: gold;

}

</style>

<head>

<body>

<h1 id="baslik1">CSS ID Kullanımı</h1>

</body>

</html>

CSS ID Kullanımı

2Birden fazla farklı etiketlere ID tanımlama

Kod yapısı içerisinde birden fazla etiket üzerinde id tanımlaması yapılabilir.
<html> <head> <title>CSS | ID Kullanımı | KodKampusu.COM</title> <style> /*CSS Kodlarının yazılacağı bölüm*/ </style> <head> <body> <h3 class="merhaba">Merhaba dostum!</h3> <p class="merhabaicerik">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p> <img src="https://www.kodkampusu.com/wp-content/uploads/2020/12/yenilogo.png" id="resim"></img> <h4 class="selam">Selam dostum!</h4> <p class="selamicerik">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p> </body> </html>
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
<html>
<head>
  <title>CSS | ID Kullanımı | KodKampusu.COM</title>
   <style>
         /*CSS Kodlarının yazılacağı bölüm*/
   </style>
<head>

<body>
   <h3 class="merhaba">Merhaba dostum!</h3>
      <p class="merhabaicerik">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
      non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
      augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p>

<img src="https://www.kodkampusu.com/wp-content/uploads/2020/12/yenilogo.png" id="resim"></img>

   <h4 class="selam">Selam dostum!</h4>
      <p class="selamicerik">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
      Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
      ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
      euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p>

</body>

</html>
Şimdi bu içeriğimizi özelleştirmek için CSS kodlarımızı yazalım.
<html> <head> <title>CSS | ID Kullanımı | KodKampusu.COM</title> <style> #merhaba { color: white; background-color: LimeGreen; outline-width: 7px; outline-style: dotted; outline-color: DarkGray; text-align: right; font-size:medium; } #merhabaicerik { color: Tan; background-color: DarkSlateGray; text-align: center; } #resim { border: 5px solid green; width:300px; height:80px; border-radius:8px; padding:15px; opacity:0.3; } #selam { background-color: Chocolate; text-align: center; font-size:large; } #selamicerik { color: LightCyan; background-color: RosyBrown; text-align: right; } </style> <head> <body> <h3 class="merhaba">Merhaba dostum!</h3> <p class="merhabaicerik">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p> <img src="https://www.kodkampusu.com/wp-content/uploads/2020/12/yenilogo.png" id="resim"></img> <h4 class="selam">Selam dostum!</h4> <p class="selamicerik">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p> </body> </html>
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
<html>
<head>
  <title>CSS | ID Kullanımı | KodKampusu.COM</title>
   <style>
         #merhaba {
           color: white;
           background-color: LimeGreen;
           outline-width: 7px;
           outline-style: dotted;
           outline-color: DarkGray;
           text-align: right;
           font-size:medium;
                   }

         #merhabaicerik {
           color: Tan;
           background-color: DarkSlateGray;
           text-align: center;
                   }

         #resim {
           border: 5px solid green;
           width:300px;
           height:80px;
           border-radius:8px;
           padding:15px;
           opacity:0.3;
               }

         #selam {
           background-color: Chocolate;
           text-align: center;
           font-size:large;
                }

         #selamicerik {
           color: LightCyan;
           background-color: RosyBrown;
           text-align: right;
                      }
   </style>
<head>

<body>
   <h3 class="merhaba">Merhaba dostum!</h3>
      <p class="merhabaicerik">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
      non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
      augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p>

<img src="https://www.kodkampusu.com/wp-content/uploads/2020/12/yenilogo.png" id="resim"></img>

   <h4 class="selam">Selam dostum!</h4>
      <p class="selamicerik">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
      Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
      ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
      euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p>

</body>

</html>
Merhaba dostum!
Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.

Selam dostum!
Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat
Post Views: 892