Bundan sonra css dili hakkında tüm bilgileri buradan öğrenebilirsiniz..!
Başlığın konsepti basit.. Amaç yardım..!
css hakkında bir sorununuz mu var?
ya da yapamadığınız ve yardim istediğiniz bir konumu var?
style sheets´iniz´de nasıl bir herhangi düzenlemeyi yapabilirsiniz?
Temel css kuralları nasıl uygulanır?
Siz sorun, Biz çözümlemesini yapalım..! Siz uygulayın.!
Saygılarımla.. Şimdi söz sizde..!
______________ Dalga geçerim ama kırmam. Ciddiye alırım ama takmam. Çevremde birçok arkadaşım olabilir ama hepsini dostum yapmam, Biz ışıklı cɑddelerin züppe çocuklɑrı değil! Biz ıssız sokɑklɑrın delikɑnlı yürekleriyiz!!! CW
En son ua1905ua tarafından 07.06.2013 22:56:18 tarihinde değiştirildi, toplam 2 kere değiştirildi
Başlık için teşekkürler başlıktaki tüm mesajlar ile itina ile ilgileneceğim.! ______________ Bir hadiseyi düşünebilmek için filozof olmaktan başka çare görmemek, düşünme hakkından vazgeçmek değil midir?
Başlık için teşekkürler başlıktaki tüm mesajlar ile itina ile ilgileneceğim.!
Süper.. ______________ Dalga geçerim ama kırmam. Ciddiye alırım ama takmam. Çevremde birçok arkadaşım olabilir ama hepsini dostum yapmam, Biz ışıklı cɑddelerin züppe çocuklɑrı değil! Biz ıssız sokɑklɑrın delikɑnlı yürekleriyiz!!! CW
O zaman benden ilk konu geliyor.
CSS ile resmin kenarlarını oval yapma (Ayrıca siteminde yeni CSS konusu)
CSS'nin nimetlerinden bir tanesini daha sizlere vereceğim. Biliyorsunuz ki Bir resmin kenarlarını oval yapıp uplaod ettikten sorna katmana eklemek bazen bizi yorabilir. Ancak bunu CSS ile yaptığımız iş daha kolay bir hal alıyor.
Öncelikle bu işlem için yeni bir resim oluşturuyorum.
Şimdi gelelim bu resim kenarlarını ovalleştirmeye.
Öncelikle işlem için bir iki kavramı öğrenmeliyiz. Bunlar;
border-radius // tüm köşeleri aynı oranda ovalleştirmek için
border-bottom-right-radius // alt sağ köşeyi ovalleştirmek için
border-bottom-left-radius // alt sol köşeyi ovalleştirmek için
border-top-right-radius // üst sağ köşeyi ovalleştirmek için
border-top-left-radius // üst sol köşeyi ovalleştirmek için
Tüm komutlarda px, yüzde ve em değerleri kullanılabilir.
Biz bu işlemi div katmanına eklediğimiz bir resimde yapıyoruz.
Yani tüm uygulamalarda katman olarak CSS kodundakini aldık.
Arkadaşlar tekniği şöyle örnekleyeyim , bir yazı yazıyorsunuz ve bu yazı çok uzun. Dolayısıyla bu yazı taşıyor. İşte tam burada overflow tekniği devreye giriyor.. Yazınızı istediğiniz yükseklikte sabitliyorsunuz ve arta kalan kısım için bir scrollbar oluşuyor.
Örnek resim :
Şimdi türlerini tanıyalım..
1) Overflow:auto tekniği
Tekniğin amacı; Yazınıza belli bir yükseklik belirlersiniz, yazınız bu yüksekliği geçer ise kaydırma çubuğu çıkar. Ve o yükseklik doğrultuusnda, kaydırma çubuğu vasıtası ile yazı kaydırılır.
Tekniğin amacı; Belli bir yükseklik belirlersiniz. O yüksekliği geçen yazılar için hem dikey, hem de yatay kaydırma çubuğu çıkıyor. Overflow:autodan tek farkı; yatay çubuk çıkmasıdır.
CSS dediğimizde aklımıza o kadar karışık kodlar gelmemelidir. Çünkü CSS o kadar karışık bir konu değildir. Eğer temel konuları kavrayabilirsek CSS bize çok olay gelecektir.
Css Kullanmanın Avantajları
1 CSS kullanırsak kısa yoldan sitemize veya bir yazıya güzel görünüm verebiliriz
Ör: <h1>Tumhepsiburada</h1> <h1></h1> tagları arasında yer alan yazıyı CSS ile biçimlendirmek mümkündür ve bunu web sitemizin tümünde böyle kılabilmekteyiz Bu <h1></h1> tagları arasındaki yazıya CSS ile şu şekilde yeni bir görünüm sağlayabiliriz:
h1{ : CSS kodumuzu isimlendirdik ve CSS parantezimizi açtık
Color : Bu bize renk açısından her zaman CSS de lazım olacaktır.. CSS bir şeye renk vermek istersek CSS kodumuz içine Color:u ekler sonra rengin İngilizce yazımı ile rengi yazar ya da o rengin # ile başlayan ve rakam harflerden oluşan kodunu yazar ; (noktalı virgül) koyarız
Font : Tumhepsiburada yazısının fontunu, font biçimini, font büyüklüğü gibi unsurlarını belirlemede yardımcı olacaktır. CSS kodumuzun içine Font: kısmını ekledikten sonra biçim, yazı tipi, yazı büyüklüğünü ekleyerek yazının biçimlerini ayarlamış oluruz
border : Tumhepsiburada yazısında kenar eklemek için kullanılır. border:i kodumuza ekledikten sonra yazıya ekleyeceğimiz kenarlığın kalınlığı px olarak yazılır sonra biçim girilir ve son olarak İngilizce renk veya renk kodu eklenir
2 Kullanım Kolaylığı
HTML de her etikete artı özellikler eklemek için başka bir etiket ve/veya
özellik eklememiz gerekmektedir. Bu işlemi geniş çaplı bir sitede
yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini
göreceksiniz.
<h1><font color="blue">Baslık</font></h1>
Bunun gibi onlarca veya yüzlerce baslığınız olduğunu düşünün, gerçekten
çok zor. CSS de aynı işlem için
h1 {color: blue}
Kodunu yazmamız yeterli. Bu elemanın özelliklerinde değişiklik yapmak
istediğimizde sadece burada değiştirerek tüm sitede bu elemanın
özelliklerini değiştirmiş olacağız. Ayrıca bu işlemi sadece bu etiket için
değil diğer etiketlere de uygulayabiliriz.
h1, h2 {color: blue}
Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web
kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik
yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.
3 Tasarım tutarlılığı
Tasarım konusunda size oldukça yararlı olacağından eminim Çünkü bir CSS ile HTML tasarım arasında dağlar kadar fark vardır ama ikisi birleşince imkansızları bile başarmanız mümkünüdür. Örnek verecek olursak bir HTML tasarım yaptınız siteye yerleştirdiniz bir başlık yazısını tüm sayfalarda renk olarak ayarlamanız gerekmektedir fakat bu CSS de aynı değildir. CSS kullanılmış HTML tasarım yaptığınızda sadece
h1 {color: blue}
kodunu kullanarak bütün başlık yazılarını değiştirme imkanı sunuyor CSS
4 Daha az boyut
HTML CSS karışık oluşturulmuş bir tasarım siteyi daha az zorlamakta ve siteye girişte daha hızlılık sağlamaktadır. Ayrıca HTML de kullanacağınız tablo,resim vs elementleri CSS de bir kodda bir biçimde hallettiğiniz için tasarımınızın ve sitenizin boyutu %50ye varan oranlarda düşüş olacaktır
5 Her dilde kullanılabilmesi
CSS öyle bir dildir ki PHP , ASP , HTMLde kullanılabiliyor. Misal bir Wordpress , Joomla veya HTML tasarım indirdiniz. İndirdiğiniz dosyaların içinde CSS bulunması gerekmektedir. Çünkü CSS bütün tasarımlarda renklendirme aracı olarak kullanılmaktadır. Sadece tasarımlarda değil tabi ki de kullandığınız programlar , sitenizde kullandığınız diğer kodlarla beraberde CSS büyük bir önem kazanmaktadır
5 Gelecek vaat ediyor olması
Gelecekte HTML artık yavaş yavaş yüz tutmaya başladığını düşünürsek ki yerine XHTML geleceğini düşünürsek CSS gibi bir tümleşik standardın önemi anlaşılıyor
A
Absolute: Mutlak
Align: Hizalama
Attribute Selectors: Özellik Seçicileri
B
background: artalan images: artalan resmi, -color: artalan rengi
background-attachment: Artalan resim bağlılığı
background-color: Artalan rengi
background-image: Artalan resmi
background-position: Artalan resim konumu
background-repeat: Artalan resim yenileme
Belge Nesne Modeli: DOM
Block-level: Blok seviyesi
border: Kenar çizgisi
border-color: Kenar çizgisi rengi
border-collapse: Hücre Boşluklarını ayarlama
boder-style: Kenar çizgisi biçemi
border-spacing: Hücre Dışı boşluklarını ayarlama
border-width: Kenar çizgisi genişliği
bottom: alt
Box model: Kutu modeli
Button: Düğme
C
Cache: önbellek
Cascading Style Sheets: Stil Şablonları
caption-side: Baslık Konumu Özelliği
Class Selector: Sınıf Seçici
Check box: onay kutusu
clip: Kırpma
Color: Renk
cursor: Fare imleci
D
Dash: tire244
Declaration Block: Bildirim Bloğu
Default: Başlangıç değeri
Descendant Selectors: Torun Seçicileri
Direct Child Selectors: Çocuk Seçicileri
direction: Metin yazma yönü
dotted: noktalı
E
empty-cells: Bos hücre ayarları
F
Floating: yüzen
font: Yazıtipi
font-family: Yazıtipi ailesi
font-size: Yazıtipi boyutu
font-style: Yazıtipi stili
font-variant: Yazıtipi farklılıkları
font-weight: Yazıtipi kalınlığı
G
Grouping: Gruplama
H
Height: Yükseklik
I
Id Selector: Tekil Seçici
Italic: Eğik
Image: Resim
Inheritance: Kalıtsallık
Inline: Satır içi
L
left: sol
letter-spacing: Harfler arası mesafe
line-height: Satırlar arası yükseklik
Link: Bağ
list: Liste
list-style: Liste stili
list-style-image: Liste imleyici resmi
list-style-position: Liste imleyici konumu
list-style-type: Liste imleyici tipi
M
margin: Kenar dış boşluğu
margin-bottom: Alt kenar dışı boşluğu
margin-left: Sol kenar dışı boşluğu
margin-right: Sağ kenar dışı boşluğu
margin-top: Üst kenar dışı boşluğu
max-height: Azami yükseklik
max-width: Azami genişlik
min-height: Asgari yükseklik
min-width: Asgari genişlik
Mouse: Fare
Multiple Classes: Çoklu sınıflar
N
NameSpace: Aduzayı
Next Sibling Selector: Bitişik Kardeş Seçiciler
Nonreplaced element: Yerleştirilmeyen elemanlar
Normal flow: Normal akış
O
Outline: Dış hat çizgisi
overflow: Tasma
P
padding: Kenar iç boşluğu
padding-top: Üst kenar içi boşluğu
padding-right: Sağ kenar içi boşluğu
padding-bottom: Alt kenar içi boşluğu
padding-left: Sol kenar içi boşluğu
Positioning: Konumlandırma
position:absolute: Mutlak konumlandırma
position:fixed: Sabit Konumlandırma
position:relative: Göreceli konumlandırma
Print: yazdırmak
Printer: yazıcı
Print out: çıktı
Property: Özellik
Pseudo-Classes: Sözde sınıflar
Pseudo-Elements: Sözde elemanlar
R
Relative: Göreceli
Replaced element: Yerleştirilen elemanlar
right: sağ
Root element: Kök Eleman
S
Script: Betik
Scrollbar: Kaydırma çubuğu
Selector: Seçiciler
Simple Attribute Selection: Basit Özellik Seçicisi
Space: bosluk
Specificity: Etkinlik
System fonts: Sistem yazıtipi
System colors: Sistem renkleri
T
table: Tablo
table-layout: Tablo Planı özelliği
Text: Metin
text-align: Metin hizalama
text-decoration: Metin süsleme
text-indent: Metin Girintilime
text-shadow: Metin gölgeleme
text-transform: Harf büyüklüğü
top: üst
U
Universal Selector: Evrensel Seçiciler
User Interface: Kullanıcı ara yüzü
V
Value: Değer
vertical-align: Dikey hizalama
visibility: Görünürlük
W
Web coder: web kodlamacısı
white-space: Elemanlar arası boşluk
Width: Genişlik
word-spacing: Kelimeler arası mesafe
a: Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.BİÇİMLENDİRME:
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
Değer: background-color, background-image, back ground-repeat, background-attachment, back-ground-position, inherit
Nelere uygulanır: Bütün unsurlara.
background özelliği kişisel arkaplan özelliklerini ayarlamak için pratik bir yoldur.
Örnek:
BODY { background: red }
P { background: url("bg.png") #cecece 50% repeat fixed }
2. background-color
Değer: color, transparent, inherit
Nelere uygulanır: Bütün unsurlara.
Örnek:
table { background-color: #cecece }
3. background-image
Değer: url, none, inherit
Nelere uygulanır: Bütün unsurlara.
Bir arkaplan resmi ayarladığınız zaman eğer resim mevcut değilse bir renk belirtmeniz gerekir.
Örnek:
.title { background-image: url("images/title.gif") }
div { background-image: none }
4. background-repeat
Değer: repeat, repeat-x, repeat-y, no-repeat, inherit
Nelere uygulanır: Bütün unsurlara.
Bu özellik arkaplan resminin x veya y pozisyonunda tekrarı istendiği zaman kullanılır.
Örnek:
.content {
background: white url("bg.gif");
background-repeat: repeat-x;
background-position: center;
}
5. background-attachment
Değer: scroll, fixed, inherit
Nelere uygulanır: Bütün unsurlara.
Örnek:
.content {
background: white url("bg.gif");
background-repeat: repeat-x;
background-attachment: fixed;
}
6. background-position
Değer: percentage, length, top center bottom left center right, inherit
Nelere uygulanır: block-level ve değiştirilen unsurlar.
Örnek:
BODY { background: url("logo.jpeg") right top } /* 100% 0% */
Alıntıdır. ______________ Bir profesyonel yaptığı yardımları değil, kendisine yapılan yardımları hatırlayan'dır.
Sorunlar İçin destek( at )bedava-sitem.com Adresine mail atınız.
En son ciz-dizayn tarafından 09.08.2012 20:03:33 tarihinde değiştirildi, toplam 1 kere değiştirildi
Kenimde yapmış olduğum normalde wordpress tabanlı css tasarımı siteye tasarım üstü filan ayarlayamıyorum yardım edecek birisi msj olarak bana ulaşırsa kodları ona yollucaycam ve nolur halletsin hatayı anlatıyım
şimdi normalde üstte logo ve üst menü var ama bedava siteme ayırılmış olarak atınca yukarıdaki logo ve üst menü içerik tarafından kayboluyor bir türlü halledemedim sizlerden yardım istiyorum.Şunuda belirtiyim tasarım sitemde yüklü depil resimleri aşağıda vericem düzeltirim diyen arkadaşta özel mesajla bana ulaşsın kodları veriyim oda çabalasın..
Aslında istediğim bu şekilde olacak yani sorunsuzu bu :
Ama Bedava-sitem'deki siteme atınca bu oluyor logo ve üstmenü içerik ve yan menü tarafından yok oluyor :
Kırmızı kutu içine aldığım alt alta 2 tane çizgi var. Bu bölümü yok edemiyorum.
Yok edemiyorsam bile o çizgilerin arasına nereden içerik ekleyebilirim onu öğrenmem lazım.
Kırmızı kutu içine aldığım alt alta 2 tane çizgi var. Bu bölümü yok edemiyorum.
Yok edemiyorsam bile o çizgilerin arasına nereden içerik ekleyebilirim onu öğrenmem lazım.
Özel aramayı oraya taşıyabilirim belkide
Merhaba@
simdi kodlar elimde olmadan tam anlamiyla net bir aciklama yapamam..
Fakat kaynak dan kodlariniza baktim..
o alani olusturan katman bu sekilde..>>
Kod:
<ul id="nav"> </ul>
bunun icerisine yazdiklarin büyük ihtimal resimde gösterdiginiz yeri dolduracaktir..
Kaldirmak icin o kodlari css den kaldirin, ve html den id´leri kaldirin..
Kod:
<h2 id="nav_heading">...</h2>
üsteki verdigim kodlarda o alani aktiflestiren ola bilir..
Söyleye bilecegim tek sey kaynak kodlarina baktigimda o bölgeyi olusturan kodlar üste verdigim kodlari gösteriyor..
kurcalamaniz lazim.. Yedekleri almayi unutmayin.. ______________ Dalga geçerim ama kırmam. Ciddiye alırım ama takmam. Çevremde birçok arkadaşım olabilir ama hepsini dostum yapmam, Biz ışıklı cɑddelerin züppe çocuklɑrı değil! Biz ıssız sokɑklɑrın delikɑnlı yürekleriyiz!!! CW
ve büyük ihtimal kodlarin icersinde söyle bir kod da bulunuyor..>>
Kod:
border:1px
______________ Dalga geçerim ama kırmam. Ciddiye alırım ama takmam. Çevremde birçok arkadaşım olabilir ama hepsini dostum yapmam, Biz ışıklı cɑddelerin züppe çocuklɑrı değil! Biz ıssız sokɑklɑrın delikɑnlı yürekleriyiz!!! CW
En son ua1905ua tarafından 21.09.2012 13:32:43 tarihinde değiştirildi, toplam 3 kere değiştirildi
Çerezler küçük bilgi verici metinlerdir, bizim veya iş ortaklarımızın tarayıcınız aracılığıyla size ulaşmamızı sağlar.
Tarayıcınızdaki ayarları değiştirerek istediğiniz zaman çerez kullanımını engelleyebilirsiniz.
Genel Veri Koruma Yönetmeliği ile uyumlu aşağıdaki çerezleri kullanıyoruz:
- Temel çerezler: Web sitesinin tam olarak işlevsel olması için kesinlikle gereklidir.
- Opsiyonel Çerezler: İsteğe bağlı çerezlerdir ve web sitesini geliştirmemize yardımcı olur, ör. sizi kişisel olarak tanımlamadan web sitesindeki kullanım davranışınızın analiz edilmesi gibi.
Gizlilik politikamızdan daha fazla bilgiye ulaşabilirsiniz.
css hakkında bir sorununuz mu var?
