CSS Yapısı Ve Kuralları (2. Ders Seçici { Özellik : Değer ; } ) | BilgeBank
Pazar , Ekim 22 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS Yapısı Ve Kuralları (2. Ders Seçici { Özellik : Değer ; } )

CSS Yapısı Ve Kuralları (2. Ders Seçici { Özellik : Değer ; } )

Css’in yapısına bakacak olursak Seçici { Özellik : Değer ; } Olarak komutlarımızı yazarız.

Seçici Alanı : Html sayfamızdaki id, Class değerlerimizi veya Etiketimizin ismini yazarak hangi alanda işlem yapacağımızı belirtiriz. örnek olarak html sayfamızda kullandığımız <span> etiketini tanımlamak için span  yazmamız yeterli olacaktır veya <div id=alanadi> alanımızda işlem yapacağımızı belirtmek için #alanadi yazmamız yeterlidir.  id, Class değerleri için bundan sonraki dersimizde açıklayacağız şimdilik seçicinin mantığını öğrenmeniz yeterlidir.

Özellik ve Değer Alanı : Özellik ve Değer alanı seçiciden hemen sonra {Süslü Parantezler içine yazılır} Özellik alanı seçtiğimiz alana hangi işlemi yaptıracağımızı belirler. Örnek olarak background-color: dediğimizde arka plana renk vermek istediğimizi belirleriz. Değer Alanında ise değerinin hangi renkte olacağını belirleriz { background-color: red ; } gibi tanımlamamızı yaparız. Bu komutla kısaca dedik ki seçtiğimiz alanın arka plan rengi kırmızı olsun.  Bu alanda dikkat etmemiz gereken ve alışkanlık kazanmamız gereken kısım Özellik ve Değer verdikten sonra ; Noktalı Virgül işaretini koyarak bir sonraki kodun devamının geleceğini belirtmeliyiz. Türkçedeki Virgül işareti gibi düşünebilirsiniz Mavi, Sarı, Kırmızı diye kelimeleri ayırırız.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Örneğimizi İncelersek bir span alanı oluşturduk ve bu span alanınını css de tanımlarken sadece span dedik  ve süslü parantezler içinde komutlarımız yazdık.

span Seçici alanımız belirledik.

{ süslü parantez açarak komutumuza başladık.

background-color:red; Komutu ile span alanımızın arka planının kırmızı olmasını belirledik ve noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

font-size:50px;  Komutu ile span alanımızdaki yazının 50px boyutunda olmasını istedik ve yine noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

color:#FFF; Komutu ile span alanımızdaki yazacağımız yazının renginin #FFF komutu ile yazının beyaz olmasını istedik ve yine noktalı virgül kullanıp bu komutun bittiğini ve ilerde farklı komutlar daha verebileceğimizi belirttik. En son kısımda noktalı virgül kullanmasak da olur ancak alışkanlık edinmek için mutlaka kullanmaya özen gösterin.

} süslü parantezi kapatarak komutumuzu sonlandırdık.

body { text-align:center } Komutu ile Body etiketimizde ki içeriklerin hepsinin ortalanmasını istedik farkettiyseniz tek komut verdiğimiz için noktalı virgül ile bitirmedik, bu şekilde de komut çalışır ancak bir sonraki komuta geçmek için mutlaka noktalı virgül kullanmanız gerekir.

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