CSS’in Yapısı

  • user warning: Table './hor_hanciorg/captcha_sessions' is marked as crashed and should be repaired query: INSERT into captcha_sessions (uid, sid, ip_address, timestamp, form_id, solution, status, attempts) VALUES (0, 'lojmubdb569cpdd5sc2quli202', '34.238.190.122', 1590369681, 'comment_form', '969f68ecc43b7d2f0eebad50b526b3a3', 0, 0) in /home/hanci/domains/hanci.org/public_html/modules/captcha/captcha.inc on line 99.
  • user warning: Table './hor_hanciorg/captcha_sessions' is marked as crashed and should be repaired query: UPDATE captcha_sessions SET token='0a0588be2f0184e7dc44946056a6e508' WHERE csid=0 in /home/hanci/domains/hanci.org/public_html/modules/captcha/captcha.module on line 216.
  • user warning: Table './hor_hanciorg/captcha_sessions' is marked as crashed and should be repaired query: SELECT status FROM captcha_sessions WHERE csid = 0 in /home/hanci/domains/hanci.org/public_html/modules/captcha/captcha.inc on line 129.
  • user warning: Table './hor_hanciorg/captcha_sessions' is marked as crashed and should be repaired query: SELECT status FROM captcha_sessions WHERE csid = 0 in /home/hanci/domains/hanci.org/public_html/modules/captcha/captcha.inc on line 129.
  • user warning: Table './hor_hanciorg/captcha_sessions' is marked as crashed and should be repaired query: UPDATE captcha_sessions SET timestamp=1590369681, solution='dA548' WHERE csid=0 in /home/hanci/domains/hanci.org/public_html/modules/captcha/captcha.inc on line 111.
  • user warning: Table './hor_hanciorg/cache_form' is marked as crashed and should be repaired query: UPDATE cache_form SET data = 'a:21:{s:6:\"choice\";a:3:{s:5:\"#type\";s:6:\"radios\";s:14:\"#default_value\";i:-1;s:8:\"#options\";a:7:{i:0;s:35:\"Sitede var olan içerik ve yazılar\";i:1;s:38:\"Sitenin görsel tasarımı ve renkleri\";i:2;s:54:\"Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\";i:3;s:46:\"Sitenin adresi ve arama motorunda listelenmesi\";i:4;s:73:\"İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\";i:5;s:44:\"Sitenin arkaplan yazılımı ve alt yapısı\";i:6;s:47:\"Ben farklı şeyler düşünüyorum yazacağım\";}}s:4:\"vote\";a:3:{s:5:\"#type\";s:6:\"submit\";s:6:\"#value\";s:6:\"Oy ver\";s:7:\"#submit\";a:1:{i:0;s:9:\"poll_vote\";}}s:5:\"#node\";O:8:\"stdClass\":37:{s:3:\"nid\";s:2:\"72\";s:4:\"type\";s:4:\"poll\";s:8:\"language\";s:2:\"tr\";s:3:\"uid\";s:1:\"1\";s:6:\"status\";s:1:\"1\";s:7:\"created\";s:10:\"1266655218\";s:7:\"changed\";s:10:\"1574865391\";s:7:\"comment\";s:1:\"2\";s:7:\"promote\";s:1:\"0\";s:8:\"moderate\";s:1:\"0\";s:6:\"sticky\";s:1:\"0\";s:4:\"tnid\";s:1:\"0\";s:9:\"translate\";s:1:\"0\";s:3:\"vid\";s:2:\"72\";s:12:\"revision_uid\";s:1:\"1\";s:5:\"title\";s:37:\"Web sitesinde hangisi daha önemlidir\";s:4:\"body\";s:0:\"\";s:6:\"teaser\";s:358:\"* Sitede var olan içerik ve yazılar\n* Sitenin görsel tasarımı ve renkleri\n* Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\n* Sitenin adresi ve arama motorunda listelenmesi\n* İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\n* Sitenin arkaplan yazılımı ve alt yapısı\n* Ben farklı şeyler düşünüyorum yazacağım\n\";s:3:\"log\";s:0:\"\";s:18:\"revision_timestamp\";s:10:\"1574865391\";s:6:\"format\";s:1:\"0\";s:4:\"name\";s:5:\"hayat\";s:7:\"picture\";s:0:\"\";s:4:\"data\";s:120:\"a:3:{s:7:\"contact\";i:0;s:18:\"admin_compact_mode\";b:1;s:13:\"form_build_id\";s:37:\"form-5bb20dab86db6430977269d8df6a74bb\";}\";s:7:\"runtime\";s:1:\"0\";s:6:\"active\";s:1:\"1\";s:6:\"choice\";a:7:{i:0;a:3:{s:6:\"chtext\";s:35:\"Sitede var olan içerik ve yazılar\";s:7:\"chvotes\";s:4:\"6223\";s:7:\"chorder\";s:1:\"0\";}i:1;a:3:{s:6:\"chtext\";s:38:\"Sitenin görsel tasarımı ve renkleri\";s:7:\"chvotes\";s:3:\"309\";s:7:\"chorder\";s:1:\"1\";}i:2;a:3:{s:6:\"chtext\";s:54:\"Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\";s:7:\"chvotes\";s:3:\"212\";s:7:\"chorder\";s:1:\"2\";}i:3;a:3:{s:6:\"chtext\";s:46:\"Sitenin adresi ve arama motorunda listelenmesi\";s:7:\"chvotes\";s:3:\"182\";s:7:\"chorder\";s:1:\"3\";}i:4;a:3:{s:6:\"chtext\";s:73:\"İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\";s:7:\"chvotes\";s:3:\"216\";s:7:\"chorder\";s:1:\"4\";}i:5;a:3:{s:6:\"chtext\";s:44:\"Sitenin arkaplan yazılımı ve alt yapısı\";s:7:\"chvotes\";s:3:\"208\";s:7:\"chorder\";s:1:\"5\";}i:6;a:3:{s:6:\"chtext\";s:47:\"Ben farklı şeyler düşünüyorum yazacağım\";s:7:\"chvotes\";s:3:\"413\";s:7:\"chorder\";s:1:\"6\";}}s:10:\"allowvotes\";b:1;s:4:\"vote\";i:-1;s:4:\"path\";s:47:\"anket/web-sitesinde-hangisi-daha-onemlidir.html\";s:22:\"last_comment_timestamp\";s:10:\"1266655218\";s:17:\"last_comment_name\";s:0:\"\";s:13:\"comment_count\";s:1:\"0\";s:8:\"taxonomy\";a:0:{}s:5:\"files\";a:0:{}s:8:\"readmore\";b:0;s:5:\"links\";a:3:{s:11:\"comment_add\";a:4:{s:5:\"title\";s:15:\"Yeni yorum ekle\";s:4:\"href\";s:16:\"comment/reply/72\";s:10:\"attributes\";a:1:{s:5:\"title\";s:31:\"Bu sayfaya yeni bir yorum ekle.\";}s:8:\"fragment\";s:12:\"comment-form\";}i:0;a:3:{s:5:\"title\";s:13:\"Eski anketler\";s:4:\"href\";s:4:\"poll\";s:10:\"attributes\";a:1:{s:5:\"title\";s:43:\"Sitedeki anketlerin listesini görüntüle.\";}}i:1;a:3:{s:5:\"title\";s:9:\"Sonuçlar\";s:4:\"href\";s:15:\"node/72/results\";s:10:\"attributes\";a:1:{s:5:\"title\";s:28:\"Güncel anketi görüntüle.\";}}}}s:6:\"#block\";b:1;s:6:\"#cache\";b:1;s:6:\"#theme\";s:9:\"poll_vote\";s:11:\"#parameters\";a:4:{i:0;s:16:\"poll_view_voting\";i:1;a:3:{s:7:\"storage\";N;s:9:\"submitted\";b:0;s:4:\"post\";a:0:{}}i:2;r:18;i:3;b:1;}s:9:\"#build_id\";s:37:\"form-ae6efe646c76455084e55059258e149a\";s:5:\"#type\";s:4:\"form\";s:11:\"#programmed\";b:0;s:13:\"form_build_id\";a:4:{s:5:\"#type\";s:6:\"hidden\";s:6:\"#value\";s:37:\"form-ae6efe646c76455084e55059258e149a\";s:3:\"#id\";s:37:\"form-ae6efe646c76455084e55059258e149a\";s:5:\"#name\";s:13:\"form_build_id\";}s:7:\"form_id\";a:3:{s:5:\"#type\";s:6:\"hidden\";s:6:\"#value\";s:16:\"poll_view_voting\";s:3:\"#id\";s:21:\"edit-poll-view-voting\";}s:3:\"#id\";s:16:\"poll-view-voting\";s:12:\"#description\";N;s:11:\"#attributes\";a:0:{}s:9:\"#required\";b:0;s:5:\"#tree\";b:0;s:8:\"#parents\";a:0:{}s:7:\"#method\";s:4:\"post\";s:7:\"#action\";s:32:\"/css-dersleri/css-in-yapisi.html\";s:9:\"#validate\";a:1:{i:0;s:25:\"poll_view_voting_validate\";}}', created = 1590369681, expire = 1590391281, headers = '', serialized = 1 WHERE cid = 'form_form-ae6efe646c76455084e55059258e149a' in /home/hanci/domains/hanci.org/public_html/includes/cache.inc on line 112.

CSS’in Yapısı

CSS’in yapısı iki ana
kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration
Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Not

XML de Seçiciler HTML
elementleri dışında yeni oluşturulan elementlerde olabilir.

Tüm HTML elementleri
potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML
seçilen element anlamındadır.

Bildirim bloğu süslü
parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı
virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

  1. h1 {font: medium Arial;}

şeklinde arada boşluk
verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu
ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı
gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır
örnek aşağıda:

  1. h1 {font: medium/120%
    Arial;}

Burada ” / ” Seçicinin
font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)

Gruplama

Yukarıda hep bir
Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla
HTML elementine de atama yapabilirz, buna gruplama
denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de
yapılabilir.

  1. p, h3 {font-family:
    Arial;}

Not

CSS2 ile birlikte
Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır,
” * ” ile gösterilir.

* {color: red;}

tüm elementleri kırmızı
yapar. Bir anlamda gruplama yapar.

Burada düküman içindeki
paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek
bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” ,
” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama
tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de
gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya
daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

  1. p, h3

  2. {

  3. font-family: Arial;

  4. font-size:2;

  5. font-weight: bold;

  6. }

Seçiciler ikiye ayrılır.
Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda
başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi
Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicisi(Class
Selector)

Aynı HTML elementine
farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek
verecek olursak; hazırlayacağımız dökümanda iki adet paragraf
tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı,
diğeri ise ortalı olmasını istiyoruz

  1. p.sagadaya {text-align:
    right}

  2. p.ortala {text-align:
    center}

Bu Seçicileri sayfamızda
uygulamak için;

  1. <p class="sagadaya">Aynı
    HTML elementine farklı özellikler atamak için Sınıf Seçicisini
    kullanırız.</p>

  2. <p class="ortala">Yukarıdaki
    bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir
tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine
değilde istediğiniz sayıda HTML elementinde bunu kullanmak
isterseniz;

  1. .ortala {text-align:
    center}

Bu tanımlamayı yaptıktan
sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

  1. <span class="ortala">
    Burada birşeyler yazar </span>

  2. <p class="ortala">Burada
    da başka bişeyler yazar</p>

Çoklu sınıflar,
birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

  1. <p class="onemli
    uyari">Ã?lkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı
    insanların hataları sonucu eydana gelmektedir.</p>

Yukarıdaki örnekte
görüldüğü gibi bir uyari Sınıfımız birde
onemli
Sınıfımız mevcut. Bazı metinlerin önemli
uyarı
olacağı düşüncesi ile böyle bir atama yapılabilir.
Bunun için kullanıcığımız kod;

  1. .onemli {font-weight:
    bold;}

  2. .uyari {font-style:
    italic;}

  3. .onemli.uyari {background:
    silver;}

onemli metinler için
kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine
birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli
uyari”
olarak atama yaparken CSS Seçicisinde .onemli.uyari
şeklinde yazıyoruz.

Id Seçecileri

Id Seçicisi Sınıf
Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente
atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi
adının başında # işareti olan Seçiciler Id Seçicisidir.

  1. #mavi

  2. {

  3. background:blue;

  4. }

  5. #kirmizi

  6. {

  7. background:red;

  8. }

  9. <p id="mavi">Bu
    yazının arkafon rengi mavi</p>

  10. <p id="kirmizi">Bu
    yazının arkafon rengi kırmızı</p>

Sınıf mı? Id mi?

Yukarıda Id Seçicisi için
her nekadar da bir sayfada sadece bir defa kullanılır desekte
tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses
çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM
scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda
hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id
Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız
elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha
kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri
küçük-büyük harfe karşı duyarlıdır;

  1. p.onemliBilgi {font-weight:
    bold;}

ve kullanımıda;

  1. <p class="onemlibilgi">Uygulama
    olmaz .</p>

Yukarıdaki kod
uygulanmayacaktır çünkü ” B ” bir yerde büyük birde
küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında
kalabilir.

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
CAPTCHA
Aşağıdaki resimde yer alan karakterleri kutucuğa doğru olarak yazınız
Image CAPTCHA
Enter the characters shown in the image.

sponsorlu bağlantılar

Anket

Web sitesinde hangisi daha önemlidir:

Son yorumlar