2017-12-05 00:33:15 +03:00
---
language : css
contributors :
- [ "Mohammad Valipour" , "https://github.com/mvalipour" ]
- [ "Marco Scannadinari" , "https://github.com/marcoms" ]
- [ "Geoffrey Liu" , "https://github.com/g-liu" ]
- [ "Connor Shea" , "https://github.com/connorshea" ]
- [ "Deepanshu Utkarsh" , "https://github.com/duci9y" ]
- [ "Brett Taylor" , "https://github.com/glutnix" ]
- [ "Tyler Mumford" , "https://tylermumford.com" ]
2018-02-28 12:33:06 +03:00
filename : learncss-tr . css
2017-12-05 00:33:15 +03:00
translators :
- [ "Fatih Turan" , "http://fatihturan.com" ]
lang : tr-tr
---
Web sayfaları bir sayfanı içeriğini belirleyen HTML ile inşa edilirler . CSS ( Basamaklı Biçim Sayfaları ) ise bir sayfanı * * görünümünü * * belirleyen ayrı bir dildir .
CSS kodu statik * kurallardan * oluşur . Her kural bir ya da daha fazla * seçici * alı ve görsel * özelliklere * belirli * değerleri * verir . Sonrası bu özellikler seçiciler tarafı belirlenen sayfa unsurları uygulanı .
Bu rehber , CSS 3 ' ün yeni özellikleri ile genişletilen CSS 2 ile dikkate alı yazı ı ı .
* * NOT : * * CSS görsel sonuçlar ürettiğinden dolayı , öğrenmek için herşeyi bir CSS oyun alanı içinde ( [ dabblet ] ( http : / / dabblet . com ) gibi ) denemeniz gerekmektedir . Bu makale sözdizimi kuralları ve genel ipuçları üzerine odaklanmaktadı .
# # Sözdizimi
` ` ` css
/ * yorumlar bu satı gibi taksim-yı ı içinde görünür
CSS ' te "tek satı ı bulunmamaktadı ; bu sadece tek bir yorum yazma stilidir * /
/ * # # # # # # # # # # # # # # # # # # # #
# # SEÇİCİLER
# # # # # # # # # # # # # # # # # # # # * /
/* seçici bir sayfadaki unsuru hedeflemek için kullanı ı
seçici { ö zellik : değer ; /* daha fazla özellikler...*/ }
/ *
İşte bir örnek :
< div class = 'class1 class2' id = 'anID' attr = 'value' otherAttr = 'en-us foo bar' / >
* /
/* */
/* CSS sı ı ı ı
. class1 { }
/* veya her iki sı ı ı
. class1 . class2 { }
/* veya sadece ögenin adı ı
div { }
/* veya onun ID adı ı
# anID { }
/* veya onun aldı ı
[ attr ] { font-size : smaller ; }
/* veya onun aldı ı
[ attr = 'value' ] { font-size : smaller ; }
/* bir değer ile başlı
[ attr ^ = 'val' ] { font-size : smaller ; }
/* veya bir değer ile bitiyorsa (CSS 3)*/
[ attr $ = 'ue' ] { font-size : smaller ; }
/* veya boşlukla ayrı ı
[ otherAttr ~ = 'foo' ] { }
[ otherAttr ~ = 'bar' ] { }
/* veya tire ile ayrı ı
[ otherAttr | = 'en' ] { font-size : smaller ; }
/* Farklı ı ı ı ı
div . some-class [ attr $ = 'ue' ] { }
/* Başka bir ögenin alt ögesi olan bir ögeyi seçebilirsiniz. */
div . some-parent > . class-name { }
/* veya bir başka ögeden türeyeni seçebilirsiniz. Alt ögeler onları ı ı
div . some-parent . class-name { }
/ * Uyarı : Seçiciler arası bir boşluk bı ı aynı seçicinin başka bir anlamı olur .
Ne olduğunu tahmin edebilir misiniz ? * /
div . some-parent . class-name { }
/* Ayrı
. i-am-just-before + . this-element { }
/* veya kendisinden önce gelen herhangi bir kardeş ögeyi */
. i-am-any-element-before ~ . this-element { }
/* Yalnı ı ı ı ı ı ı
/* Örneğin, imleç bir ögenin üzerine geldiğinde */
selector : hover { }
/* veya bir bağlantı
selector : visited { }
/* veya ziyaret edilmediğinde */
selected : link { }
/* veya bir ögeye odaklanı ı ı
selected : focus { }
/* Ebeveyninin ilk alt ögesi olan herhangi bir öge */
selector : first-child { }
/* Ebeveyninin son alt ögesi olan herhangi bir öge */
selector : last-child { }
/* Sahte sı ı ı ı
/* Seçilen ögenin sanal ilk alt ögesiyle eşleşir. */
selector :: before { }
/* Seçilen ögenin sanal son alt ögesiyle eşleşir. */
selector :: after { }
/* Uygun yerlerde yı ı ı
* { } /* Bütün ögeler */
. parent * { } /* Tüm alt ögeler */
. parent > * { } /* Tüm çocuk ögeler */
/ * # # # # # # # # # # # # # # # # # # # #
# # ÖZELLİKLER
# # # # # # # # # # # # # # # # # # # # * /
selector {
/* Ölçü birimleri kesin veya göreceli olabilir.*/
/* Göreceli birimler */
width : 50 % ; /* Ebeveyn elementin yüzdesel olarak genişliği */
font-size : 2em ; /* Öğenin özgün yazı ı
font-size : 2rem ; /* veya kök ögenin yazı
font-size : 2vw ; /* Görüntüleme çerçevesinin genişliğinin %1 olarak katları
font-size : 2vh ; /* veya onun yüksekliğinin */
font-size : 2vmin ; /* Bir vh veya vw'nin hangisi küçükse */
font-size : 2vmax ; /* veya daha büyük... */
/* Kesin birimler */
width : 200px ; /* Piksel */
font-size : 20pt ; /* Nokta */
width : 5cm ; /* Santimetre */
min-width : 50mm ; /* Milimetre */
max-width : 5in ; /* İnç */
/* Renkler */
color : # F6E ; /* Kı ı ı
color : # FF66EE ; /* Uzun onaltı ı
color : tomato ; /* Bir isim verilen renk */
color : rgb ( 255 , 255 , 255 ) ; /* RGB değerleri verilen türde */
color : rgb ( 10 % , 20 % , 50 % ) ; /* RGB yüzdeleri verilen türde */
color : rgba ( 255 , 0 , 0 , 0 . 3 ) ; /* RGBA değerleri verilen türde (CSS 3) Not: 0 <= a <= 1 */
color : transparent ; /* Şeffaflı ı ı ı
color : hsl ( 0 , 100 % , 50 % ) ; /* HSL yüzdeleri verilen türde (CSS 3) */
color : hsla ( 0 , 100 % , 50 % , 0 . 3 ) ; /* HSL ile beraber şeffaflı
/* Kenarlı
border-width : 5px ;
border-style : solid ;
border-color : red ; /* background-color'ı ı ı
border : 5px solid red ; /* Bu aynı ı ı ı ı ı
border-radius : 20px ; /* Bu bir CSS3 özelliğidir */
/* Görseller ve Ögelerin Arkaplanları
background-image : url ( / img-path / img . jpg ) ; /* url() içindeki tı ı
/* Yazı
font-family : Arial ;
/* Eğer yazı ı ı ı ı
font-family : "Courier New" ;
/* Eğer ilk sı ı ı ı
font-family : "Courier New" , Trebuchet , Arial , sans-serif ;
}
` ` `
# # Kullanı
CSS dosyası ı ı ` . css ` uzantı ı ile kaydedin .
` ` ` html
< ! -- CSS dosyanı ı sayfanı içindeki < head > alanı dahil etmeniz gerekiyor . Bu önerilen yöntemdir . Bakı : http : / / stackoverflow . com / questions / 8284365 -- >
< link rel = 'stylesheet' type = 'text/css' href = 'path/to/style.css' >
< ! -- Bazı CSS kodları satı içi olarak yazabilirsiniz . -- >
< style >
a { color : purple ; }
< / style >
< ! -- Veya ögenin üzerinde CSS özelliklerini direkt ayarlayabilirsiniz . -- >
< div style = "border: 1px solid red;" >
< / div >
` ` `
# # Öncelik veya Basamak
Bir öge birden çok seçici tarafı hedef alı ve bir özellik kümesine birden fazla kez sahip olabilir . Bunun gibi durumlarda , kurallardan biri diğerlerine göre önceliklidir . Daha spesifik bir seçiciye sahip kurallar , daha az spesifik bir seçicinin önceliğini alı ve kural daha sonra stil sayfası bir önceki kuralı üzerine yazar .
Bu işleme geçiş denir ve olayı ı Geçişli / Basamaklı Stil Sayfaları adı da buradan gelmiştir .
Aşağı CSS göz önüne alı ı ı :
` ` ` css
/* A */
p . class1 [ attr = 'değer' ]
/* B */
p . class1 { }
/* C */
p . class2 { }
/* D */
p { }
/* E */
p { ö zellik : değer !important ; }
` ` `
ve aşağı biçimlendirmeyi :
` ` ` html
< p style = '/*F*/ özellik:değer;' class = 'class1 class2' attr = 'değer' >
` ` `
Stilin önceliği ise aşağı gibidir . Unutmayı , öncelik * * her bir özellik için ayrı ayrı geçerlidir * * , tüm blok için geçerli değildir .
* ` E ` ` ! important ` kelimesi yüzünden en yüksek önceliğe sahiptir . Kullanı ı kaçı ı önerilir .
* ` F ` satı stil olduğu için bir sonraki önceliğe sahiptir .
* ` A ` bir sonraki önceliğe sahiptir . Çünkü her şeyden daha "özgüdür" . 3 belirteci vardı : ` p ` ögesinin adı , sı ı ` class1 ` , bir öznitelik ` attr = 'değer' .
* ` C ` , ` B ` ile aynı özdeşliğe sahip olsa da , bundan sonra geldiğinden dolayı öncelik hakkı sahiptir .
* ` B ` bir sonraki önceliğe sahiptir .
* Sonuncu önceliğe sahip olan ` D ` ' dir .
# # Medya Sorguları
CSS Medya Sorguları , CSS 3 ' te belirli CSS kuralları ı ne zaman uygulanması gerektiğini ( örneğin bası zaman veya belirli boyutlar veya piksel yoğunluğu olan bir ekranda olduğunda ) belirlemenize izin veren bir özelliktir . Medya Sorguları , seçicilere önceliğk eklemez .
` ` ` css
/* Tüm cihazlarda kullanı
h1 {
font-size : 2em ;
color : white ;
background-color : black ;
}
/* h1 ögesini değiştirip bir yazı ı ı
@ media print {
h1 {
color : black ;
background-color : white ;
}
}
/* En az 480 piksel genişliğinde bir ekran gösterildiğinde font yüksekliğini daha büyük yap */
@ media screen and ( min-width : 480px ) {
h1 {
font-size : 3em ;
font-weight : normal ;
}
}
` ` `
Medya sorguları aşağı bu özellikleri içerebilir :
` width ` , ` height ` , ` device-width ` , ` device-height ` , ` orientation ` , ` aspect-ratio ` , ` device-aspect-ratio ` , ` color ` , ` color-index ` , ` monochrome ` , ` resolution ` , ` scan ` , ` grid ` . Bu özelliklerin birçoğunu ` min- ` veya ` max- ` öneki ile kullanabilirsiniz .
` resolution ` özelliği eski cihazlarda desteklenmediğinden ötürü ` device-pixel-ratio ` kullanı .
Eğer ` viewport ` meta etiketi sağlanmadı birçok akı ı telefon ve tabletler , sayfayı masaüstü bilgisayardaymı gibi göstermeye çalı ı .
` ` ` html
< head >
< meta name = "viewport" content = "width=device-width; initial-scale=1.0" >
< / head >
` ` `
# # Uyumluluk
CSS 2 'deki çoğu özellik (ve CSS 3' deki birçoğu ) bütün tarayı ı ve cihazlar için bulunmaktadı . Ancak yeni bir özelliği kullanmadan önce kontrol etmek her zaman iyi bir uygulamadı .
# # Kaynaklar
* [ CanIUse ] ( http : / / caniuse . com ) ( Detaylı uyumluluk bilgileri )
* [ Dabblet ] ( http : / / dabblet . com / ) ( CSS oyun alanı )
* [ Mozilla Geliştirici Ağı ı CSS belgelendirmesi ] ( https : / / developer . mozilla . org / en-US / docs / Web / CSS ) ( Eğitseller ve referanslar )
* [ Codrops ' CSS Referansı ] ( http : / / tympanus . net / codrops / css_reference / ) ( Referans )
# # Daha Fazla Okuma
* [ Understanding Style Precedence in CSS : Specificity , Inheritance , and the Cascade ] ( http : / / www . vanseodesign . com / css / css-specificity-inheritance-cascaade / )
* [ Selecting elements using attributes ] ( https : / / css-tricks . com / almanac / selectors / a / attribute / )
* [ QuirksMode CSS ] ( http : / / www . quirksmode . org / css / )
* [ Z-Index - The stacking context ] ( https : / / developer . mozilla . org / en-US / docs / Web / Guide / CSS / Understanding_z_index / The_stacking_context )
* [ SASS ] ( http : / / sass-lang . com / ) and [ LESS ] ( http : / / lesscss . org / ) for CSS pre-processing
2018-02-28 12:33:06 +03:00
* [ CSS-Tricks ] ( https : / / css-tricks . com )
