CSS Alan Belirleme (3. Ders Etiket, İd, Class Alanları) | BilgeBank
Cumartesi , Ekim 21 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS Alan Belirleme (3. Ders Etiket, İd, Class Alanları)

CSS Alan Belirleme (3. Ders Etiket, İd, Class Alanları)

Css dosyamız üzerinde Html sayfamızdaki alanların seçicilerini belirlemek için 3 farklı yöntemimiz vardır.

  1. Html in bize sunmuş olduğu etiket isimlerini yazarak p, span, h1, h2 …. vb gibi hazır etiketlerin isimlerini kullanarak css de seçici alanına sade etiketi yazarak seçicisini belirleyebiliriz. h1 {  }
  2. Seçeceğimiz alana <h1 id=“buyukyazi”> gibi id değeri atayarak da biçimlendirme yapabiliriz.  İd değerini sayfanızda 1 sefer kullanmak için kullanacağınız alanlara verebilirsiniz. İd değeri atadığınız bir etikete css de seçicisine tanımlama yapmak için vermiş olduğunuz ismin başına # işareti ekleyerek tanıtabilirsiniz. #buyukyazi {  }
  3. Seçeceğimiz alana <h1 class=“mavi”> gibi class değeri atayarak da biçimlendirme yapabiliriz.  Class değerini sayfanızda 1 den fazla kullanacağınız alanlara verebilirsiniz. Class değeri atadığınız bir etikete css de seçicisine tanımlama yapmak için vermiş olduğunuz ismin başına . işareti ekleyerek tanıtabilirsiniz. .mavi {  }
<body> Etiketi temel bir etiket olduğu için Css de tanımlama yaparken seçicisine body yazmamız yeterli oldu.

{background-color:#f1ccc8} Komutu ile <body> alanının yani arka planın Pembenin tonlarından olan #f1ccc8 renk kodunda olmasını istedik.

<h1> Etiketini seçmek için seçici alanına h1 yazmamız yeterli olur ve  biliyorsunuz ki normalde h1 etiketini kullandığımızda o alana yazdığımız yazının en büyük fontlarda başlık şeklinde yazar ancak biz css de h1 etiketinde değişiklik yaptık.

font-size:12px; Komutu ile h1 etikeninin yazı fontunu 12px boyutuna düşürdük.

text-align:center; Komutu ile h1 etiketimizin yazılarını sayfanın ortasına aldık.

color:red; Komutu ile h1 etiketimizin yazı renginin kırmızı olmasını istedik.

<h1 id=“buyukyazi”> Bu şekilde değiştirmiş olduğumuz h1 etiketine id atayarak ve buyukyazi ismini ekleyerek bir id oluşturduk yukarıdaki genel h1 yapısını tamamen değiştirmiştik buyukyazi ismi ile atadığımız id ye farklı değerler atadık.

#buyukyazi : tanımlaması ile buyukyazi alanımızı # işaretini kullanarak bunun bir id alanı olduğunu Css  seçicisine tanımladık.

font-size:60px; Komutu ile <h1 id=“buyukyazi”> alanımızın yazı fontunu 60px boyutuna yükselttik.

color:green;  Komutu ile <h1 id=“buyukyazi”> alanımızın yazı renginin Yeşil olmasını istedik.

Not: İd atamış olduğumuz etiketleri sayfamızda bir sefer kullanmamız yazım kuralları için önemlidir. Aşağıdaki class değeri özelliklerine baktığınız da daha iyi anlayacaksınız.

<h1 class=“sari”> Şekilde değiştirmiş olduğumuz h1 etiketine class atayarak ve sari ismini vererek bir class oluşturduk yukarıdaki genel h1 yapısı ve <h1 id=“buyukyazi”> İd alanını tamamen değiştirmiştik sari ismi ile atadığımız class’a farklı değerler atadık.

.sari : Tanımlaması ile sari alanımızı . işaretini kullanarak bunun bir class alanı olduğunu Css  seçicisine tanımladık.

color: yellow; Komutu ile <h1 class=“sari”> etikeninin yazı rengini  sarı yaptık.

Not: Sari classını artık hangi etikette kullanırsak kullanalım o alanın yazı rengi sarı olacaktır. Örnek olarak <p> etiketi içinde bir yazı yazdık ve onun class değerine sarı dersek css de tanımlamış olduğumuz .sari alanınındaki değerleri <p> etiketimize de uygulayacaktır.

 

<h1 class=“mavi”> Şekilde bir class daha oluşturduk ve bunun içine de farklı değerler atadık css kodlarımıza aşağıdaki değerleri verdik.

.mavi : Tanımlaması ile mavi alanımızı . işaretini kullanarak bunun bir class alanı olduğunu Css  seçicisine tanımladık.

color:blue; Komutu ile <h1 class=“mavi”> etiketimizin yazı rengini  mavi yaptık.

background-color:#FFF; Komutu ile <h1 class=“mavi”> alanımızın arkasında beyaz bir arka plan olmasını istedik.

Body alanında <h4 class=mavi> adında bir <h4> etiketi oluşturduk farkettiyseniz mavi classına atadığımız özellik olan yazı rengini mavi yap ve arka planını beyaz renkte arka planı uygula komutunu başarıyla uyguladı, ancak yazımızı ortalamadı. Yazımızı sol taraftan başlattı bunun sebebi yukarı da h1 etiketine text-align:center; Komutu ile h1 etiketimizin yazılarını sayfanın ortasına almıştık. h4 etiketinde bir komut belirlemediğimiz için varsayılan olarak h4 etiketimizi sayfanın solundan  başlattı. Bunun için altında h4 etiketiyle bir alan daha oluşturduk.

Açmış olduğumuz bu h4 etiketine 3 farklı class değerleri atadık “mavi yazibuyut ortala”  isimlerini verdik class değerine birden fazla tanım ekleyebilirsiniz. Bunu pek fazla kullanmasanız da işin mantığını öğrenmeniz yeterlidir.

mavi class değeri ile yazımızın rengini mavi ve arka planını beyaz yaptık.

Css de yazibuyut isimli class komutumuza {font-size:40px;font-weight: bold; } komutlarını vererek yazı boyutunu 40px boyunda ve kalın yazı biçiminde olmasını tanımladık.

Css de ortala isimli class komutumuza {text-align:center;} Komutlarını vererek yazıların ortalanmasını istedik.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın