From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../\303\266\304\237ren/css/css_layout/index.html" | 70 ++ .../backgrounds_and_borders/index.html" | 324 +++++++++ .../cascade_and_inheritance/index.html" | 357 ++++++++++ .../css/css_yapi_taslari/debugging_css/index.html" | 212 ++++++ .../handling_different_text_directions/index.html" | 168 +++++ .../images_media_form_elements/index.html" | 211 ++++++ .../css/css_yapi_taslari/index.html" | 101 +++ .../css/css_yapi_taslari/organizing/index.html" | 376 +++++++++++ .../css_yapi_taslari/overflow_tasks/index.html" | 66 ++ .../overflowing_content/index.html" | 140 ++++ .../css/css_yapi_taslari/selectors/index.html" | 232 +++++++ .../sizing_items_in_css/index.html" | 153 +++++ .../css/css_yapi_taslari/sizing_tasks/index.html" | 82 +++ .../css_yapi_taslari/styling_tables/index.html" | 330 +++++++++ .../index.html" | 87 +++ .../css/css_yapi_taslari/the_box_model/index.html" | 367 ++++++++++ .../css_yapi_taslari/values_and_units/index.html" | 414 ++++++++++++ .../css/css_yapi_taslari/values_tasks/index.html" | 97 +++ .../writing_modes_tasks/index.html" | 82 +++ .../css/ilk_adimlar/css_nasil_calisir/index.html" | 157 +++++ .../css/ilk_adimlar/css_nedir/index.html" | 136 ++++ .../css/ilk_adimlar/getting_started/index.html" | 272 ++++++++ .../ilk_adimlar/how_css_is_structured/index.html" | 551 +++++++++++++++ .../css/ilk_adimlar/index.html" | 64 ++ .../ogrendiklerinizi_uygulay\304\261n/index.html" | 105 +++ "files/tr/\303\266\304\237ren/css/index.html" | 86 +++ .../css/styling_text/fundamentals/index.html" | 737 +++++++++++++++++++++ .../css/styling_text/index.html" | 83 +++ .../css/styling_text/styling_links/index.html" | 453 +++++++++++++ .../css/styling_text/styling_lists/index.html" | 436 ++++++++++++ .../typesetting_a_homepage/index.html" | 143 ++++ .../css/styling_text/web_fonts/index.html" | 221 ++++++ 32 files changed, 7313 insertions(+) create mode 100644 "files/tr/\303\266\304\237ren/css/css_layout/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/backgrounds_and_borders/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/cascade_and_inheritance/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/debugging_css/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/handling_different_text_directions/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/images_media_form_elements/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/organizing/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflow_tasks/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflowing_content/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/selectors/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_items_in_css/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_tasks/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/styling_tables/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/the_box_model/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_and_units/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_tasks/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/css_yapi_taslari/writing_modes_tasks/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nasil_calisir/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nedir/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/getting_started/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/how_css_is_structured/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/fundamentals/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/styling_links/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/styling_lists/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/typesetting_a_homepage/index.html" create mode 100644 "files/tr/\303\266\304\237ren/css/styling_text/web_fonts/index.html" (limited to 'files/tr/öğren/css') diff --git "a/files/tr/\303\266\304\237ren/css/css_layout/index.html" "b/files/tr/\303\266\304\237ren/css/css_layout/index.html" new file mode 100644 index 0000000000..42a4b4f5c1 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_layout/index.html" @@ -0,0 +1,70 @@ +--- +title: CSS layout +slug: Öğren/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - NeedsTranslation + - Positioning + - TopicStub + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +
{{draft}}
+ +
{{LearnSidebar}}
+ +

Bu zamana kadar Css temellerini, metnin nasıl stillendirileceğini, ve içeriğinizin içindeki kutuların nasıl biçimleneceğini öğrendik. Şimdi, kutuların bir web sayfasına nasıl yerleştireceğimizi öğrenme zamanı geldi. CSS düzenini daha iyi öğrenebilmek için, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bakabilmemiz için gerekli ön koşulları ele aldık.

+ +

Ön Koşullar

+ +

Bu modülü öğrenmeye başlamadan önce şunları bilmelisin:

+ +
    +
  1. HTML'e giriş kursunda anlatıldığı gibi temel HTML bilgisine sahip olun.
    2. +
  2. Introduction to CSS kursunda anlatıldığı gibi CSS konusunda rahat olun
    3. +
  3. Kutu Modeli kavramını anlamak.
    4. +
+ +
+

Note: Eğer kendi dosyalarınızı oluşturamayacağınız bir bilgisayar, tablet veya başka bir cihazdan çalışıyorsanız JSBin veya Thimble gibi bir çevrimci ortam kullanabilirsiniz.

+
+ +

Guides

+ +

These articles will provide instruction on the fundamental layout tools and techniques available in CSS.

+ +
+
Introduction to CSS layout
+
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.
+
Floats
+
Originally for floating images inside blocks of text, the {{cssxref("float")}} property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.
+
Positioning
+
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.
+
Practical positioning examples
+
With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.
+
Flexbox
+
A new technology, but with support now fairly widespread across browsers, Flexbox is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.
+
Grids
+
Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.
+
+ +

Assessments

+ +

The following assessments will test your ability to lay out web pages with CSS.

+ +
+
Creating a flexible multicolumn layout (TBD)
+
This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.
+
Creating a fixed control widget (TBD)
+
This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.
+
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/backgrounds_and_borders/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/backgrounds_and_borders/index.html" new file mode 100644 index 0000000000..79cd3c0a36 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/backgrounds_and_borders/index.html" @@ -0,0 +1,324 @@ +--- +title: Arka planlar ve kenarlıklar +slug: Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders +tags: + - Arka Plan + - Background + - Başlangıç + - Beginner + - CSS + - Eğitim + - Image + - Kenarlık + - Konum + - Learn + - Position + - Renk + - Resim + - borders + - color +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktır.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.
+ +

CSS'de arka planların stilini ayarlama

+ +

CSS'deki {{cssxref("background")}} niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.

+ +
.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} 
+
+ +

Bu eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.

+ +

Arka plan renkleri

+ +

CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <color> değerini kabul eder. background-color, öğenin içeriğinin ve dolgusunun altını boyar.

+ +

Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.

+ +

Geçerli olan <color> değerlerini kullanarak bunlarla oynayın.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Arka plan resimleri

+ +

{{cssxref("background-image")}} niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.

+ +

Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte background-color niteliğine renk bildiriminde bulun.

+ +

Arka plan tekrarını kontrol etme

+ +

{{cssxref("background-repeat")}} niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:

+ + + +

Bu değerleri aşağıdaki örnekte deneyin. Biz değerini no-repeat olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Arka plan resmini boyutlandırma

+ +

Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için uzunluk veya yüzde değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.

+ +

Ayrıca anahtar kelimeleri de kullanabiliriz:

+ + + +

Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.

+ +

Uygula.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Arka plan resmini konumlandırma

+ +

{{cssxref("background-position")}} niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (x) ve dikey (y) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.

+ +
+

Note: Varsayılan olarak background-position'ın başlangıç değeri(0,0) dır.

+
+ +

background-position yatay ve dikey olarak iki ayrı değer alır.

+ +

top ve right gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

Uzunluk ve yüzdeler:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla konumlandırıyoruz:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Note: background-position is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.

+
+ +

Degrade arka planlar

+ +

Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca  {{cssxref("background-image")}} niteliği kullanılarak tanımlanır.

+ +

<gradient>  veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan birini kullanmaktır.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.

+ +

Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

Birden çok arka plan görüntüsü

+ +

Birden çok arka plan görüntüsüne sahip olmak da mümkündür — background-image niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.

+ +

Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.

+ +
+

Not: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir

+
+ +

Diğer background-* nitelikleride background-image gibi virgülle ayrılmış değerlere sahip olabilirler:

+ +
background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;
+ +

Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki image1'in background-repeat değeri no-repeat olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki background-position değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — image3'e ilk konum değeri image4'de de ikinci konum değeri verilecektir.

+ +

Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Arka plan sabitleme

+ +

Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan {{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.

+ + + +

{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — background-attachment.html (ayrıca kaynak koduda burada).

+ +

Arka plan tanımı için kısatanım kullanımı

+ +

Bu dersin başında bahsettiğim gibi, genellikle {{cssxref("background")}} niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.

+ +

Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından no-repeat değerine sahip bir görüntü ve en altta bir renk var.

+ +

Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin

+ + + +

{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Arka planla erişilebilirlikle ilgili hususlar

+ +

Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de background-color tanımlamalısın.

+ +

Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.

+ +

Kenarlıklar

+ +

Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.

+ +

Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.

+ +
.box {
+  border: 1px solid black;
+}
+ +

Veya kutunun bir kenarını hedefleyebiliriz, örneğin:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Bu kısatanımların bireysel nitelikleride böyle olacaktır:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

Ve daha detaylı tanımlama için:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Not: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan mantıksal niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, farklı metin yönleri'ni ele alan bir sonraki derste işleyeceğiz.

+
+ +

Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stilini, genişliğini ve rengini değiştirin.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Yuvarlatılmış köşeler

+ +

{{cssxref("border-radius")}}, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.

+ +

Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:

+ +
.box {
+  border-radius: 10px;
+}
+ +

Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. {{cssxref("border-radius")}}'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Beçerilerini test et!

+ +

Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — Becerilerini test edin: Arka Planlar ve Kenarlıklar.

+ +

Özet

+ +

Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.

+ +

Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? 

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/cascade_and_inheritance/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/cascade_and_inheritance/index.html" new file mode 100644 index 0000000000..2e70a368d6 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/cascade_and_inheritance/index.html" @@ -0,0 +1,357 @@ +--- +title: Kaynak sırası ve miras +slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance +tags: + - Acemi + - Art arda + - Beginner + - CSS + - Cascade + - Inheritance + - Learn + - Miras + - Oğitim + - kaynak siparişi + - kurallar + - ozgüllük + - rules + - source order + - specificity +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan  art arda denetim, özgüllük ve kalıtım hakkındaki bilgilerini geliştirmektir.

+ +

Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:ardarda denetim ve özgüllük hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.
+ +

Çakışan kurallar

+ +

CSS, Basamaklı Stil Sayfaları anlamına gelir ve basamaklandırmanın(art arda denetimin) anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.

+ +

Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. Art arda Denetim ve özgüllük denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.

+ +

Burada ayrıca önemli olan kalıtım kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.

+ +

Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.

+ +

Art arda denetim

+ +

Stil sayfaları basamaklıdır — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit özgüllüğe sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.

+ +

Aşağıdaki örnekte, h1 seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(blue) olan kırmızı(red)'dan sonra geldiği için bu yarışı kazanır.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen h1 etiketimizi seçip color niteliğini 2. satırda belirtiğimiz  kırmızı(red) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki }  süstlü parantezle birlikte  h1 öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki h1 öğesinin  color niteliğini 5. satırdaki mavi(blue) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. h1 öğesinin color değişkeninde en son atanan değer mavi(blue) olduğu için HTML sayfamızdaki h1 öğemizin renk değeri mavi olur.

+ +

Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.

+ +

Özgüllük

+ +

Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:

+ + + +

Örnek zamanı! Aşağıda .main-heading sınıfına dahil <h1> etiketi seçicimiz  var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce .main-heading sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda h1 öğemizin color nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler.  Sayfadaki tüm h1 öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir h1 öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.

+ +

Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.

+ +

Miras

+ +

Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından miras olarak alınır.

+ +

Örneğin, color ve font-family niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Bazı özellikler miras olarak alınmaz  — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!

+ +
+

Not: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. Renk özelliği ayrıntıları, bölümüne bakın.

+
+ +

Kavramların birlikte nasıl çalıştığını anlamak

+ +

Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.

+ +

Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:

+ +

{{EmbedYouTube("Sp9ZfSvpf7A")}}

+ +

Mirası anlamak

+ +

Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki ul öğemize bir sınır, dolgu ve yazı tipi rengi verdik.

+ +

Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <li>. Daha sonra ikinci listemizi special sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!

+ +

Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.

+ +

Mirası kontrol etmek

+ +

CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.

+ +
+
{{cssxref("inherit")}}
+
Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.
+
{{cssxref("initial")}}
+
Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek başlangıç değerine ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).
+
{{cssxref("unset")}}
+
Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.
+
{{cssxref("revert")}}
+
Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.
+
+ +
+

Not: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.

+
+ +

Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.

+ +

Örnek:

+ +
    +
  1. İkinci liste öğesine  my-class-1 sınıfı uygulanmıştır. Bu sınıf  <a> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?
    2. +
  2. Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.
    3. +
  3. <a>  öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek a { color: red; }?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Tüm öğelerin değerlerini sıfırlama

+ +

CSS'in all niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(inherit, initial, unset veya revert). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.

+ +

Aşağıdaki örnekte iki adet alıntı bloğu var(blockquote). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde unset değerini atayan bir bildirimimiz var:  all: unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

 all niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.

+ +

Ardarda kontrolü anlamak

+ +

HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.

+ +

Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:

+ +
    +
  1. Kaynak sırası
    2. +
  2. Özgüllük
    3. +
  3. Önem
    4. +
+ +

Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.

+ +

Art arda denetim

+ +

Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.

+ +

Özgüllük

+ +

Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın daha yüksek özgüllüğe sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(class, id vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.

+ +

Bu derste daha önce gördüğümüz gibi, sınıf seçicinin  ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.

+ +

Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.

+ +

Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.

+ +

Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.

+ +
    +
  1. Binler basamağı: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.
    2. +
  2. Yüzler basamağı: Öğeye tanımlanmış bir kimlik için seçici (id) varsa, bu sütuna bir puan eklenir.
    3. +
  3. Onlar Basamağı: Her bir sınıf(class), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.
    4. +
  4. Birler: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.
    5. +
+ +
+

Not: Evrensel seçici (*), birleştirici seçiciler (+, >, ~, ' '), ve olumsuzluk ifadesi sözde sınıfının (:not) özgüllük üzerinde herhangi bir etkisi yoktur.

+
+ +

Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN  seçiciler kaynağına bakabilirsin.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciBinlerYüzlerOnlarBirlerToplam özgüllük
h100010001
h1 + p::first-letter00030003
li > a[href*="tr"] > .inline-warning00220022
#identifier01000100
{{htmlattrxref("style")}} niteliği. İçinde seçici yok.10001000
+ +

Devam etmenden önce bir örneğe bakalım.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.

+ + + +
    +
+ +
+

Not: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir milyon sınıf(class) seçici, bir kimlik(id) seçicinin üzerine yazamaz.

+ +

Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.

+
+ +

!important (!önemli)

+ +

Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS bildirimi var, ancak onu kullanırken çok dikkatli olmalısın — !important. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.

+ +

Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:

+ +
    +
  1. Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.
    2. +
  2. Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.
    3. +
  3. Her iki elamanda better sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi winning kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan daha yüksek bir özgüllüğü olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.
    4. +
  4. 2. elamanın arka planı kırmızı (red) ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: !important — Kimlik(ID) daha yüksek bir özgüllüğe sahip olsa bile, border: none nitelik tanımlaması !important bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.
    5. +
+ +
+

Not: !important bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir !important bildiriminde bulunmak.

+
+ +

!important bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim. !important Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.

+ +

Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.

+ +

CSS konumunun etkisi

+ +

Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..

+ +

Özet

+ +

İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:

+ +
    +
  1. Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).
    2. +
  2. Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).
    3. +
  3. Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).
    4. +
  4. Yazar stil sayfalarındaki önemli bildirimler.
    5. +
  5. Kullanıcı stil sayfalarındaki önemli bildirimler.
    6. +
+ +

Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da !important bildirimini kullanarak sağlayabilirler.

+ +

Becerilerini test et!

+ +

Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. Becerilerini test edin: Kaynak sırası.

+ +

Sıradaki ne

+ +

Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.

+ +

Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.

+ +

Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/debugging_css/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/debugging_css/index.html" new file mode 100644 index 0000000000..05b5c9a4ab --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/debugging_css/index.html" @@ -0,0 +1,212 @@ +--- +title: CSS'de hata ayıklamak +slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS +tags: + - Acemi + - Beginner + - CSS + - DOM + - Debugging + - DevTools + - Eğitim + - Hata Ayıklama + - Kaynak kod + - Learn + - source +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan  DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek
+ +

Tarayıcılarda DevTools'a nasıl erişilir

+ +

Tarayıcı geliştirici araçları nelerdir dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.

+ +

Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için,  Izgara Düzeni, Flexbox'ı ve Biçimleri incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.

+ +

Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için örnek bir dosya kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.

+ +

DOM ve görüntüleme kaynağı karşılaştırması

+ +

Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının kaynağını görüntülediğinde veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un HTML Panelinde görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.

+ +

Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <h2> etiketini </h3> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan </h3>'ü </h2> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.

+ +

Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) HTML ağacı'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.

+ +

Uygulanan CSS'i inceleme

+ +

Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden öğeyi incele'yi seçerek veya Araçlar menüsündeki Web geliştirici sekmesinde bulunan seçeneklerden birini seçerek DevTools'a geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki box1 sınıfına atanmış öğeyi seçip DevTools'u aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.

+ +

The example page for this tutorial with DevTools open.

+ +

Açılan DevTools ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde Denetçi sekmesinde bulunan HTML alanının sağındaki Kurallar görünümüne bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan box1 sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <body>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.

+ +

Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım margin kısa tanımı üzerinden ilerleyelim.

+ +

Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.

+ +

Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, border-radius niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve DevTools bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.

+ +

Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve box1 sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.

+ +

Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:

+ +

{{EmbedYouTube("O3DAm82vIvU")}}

+ +

Değerleri düzenleme

+ +

Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.

+ +

Seçtimiz box1 sınıfına ait öğemizin Kurallar görünümündeki color niteliğinin yanıda ki küçük renkli daireye tıklayalım. Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.

+ +

DevTools Styles Panel with a color picker open.

+ +

Yeni nitelik eklemek

+ +

DevTools'u kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <body> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.

+ +

Yeni bir bildirim girebilmek için kuralın sonunda bulunan } süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle font-size niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.

+ +

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

+ +
+

Not: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için CSS'i inceleme ve düzenleme dersine bakın.

+
+ +

Kutu modelini anlamak

+ +

Önceki derslerde Kutu Modeline verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.

+ +

Düzen görünümde(Layout) seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile  kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.

+ +

Bu panelde, kutu modeli özelliklerinden biri olan box-sizing öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.

+ +

box1 ve box2 sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak box1 sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin context-box değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.

+ +

box2 sınıfına dahil olan öğemizin kutu modeli border-box olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.

+ +

The Layout section of the DevTools

+ +
+

Not: Kutu Modelini İnceleme ve Düzenleme bölümünden daha fazla bilgi edinebilirsin.

+
+ +

Özgüllük sorunlarını çözme

+ +

Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.

+ +

Örnek dosyamızda bir <em> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Bunla birlikte stil sayfamda .special sınıf seçicisine sahip bir kuralım daha var:

+ +
.special {
+  color: orange;
+}
+ +

Art arda denetim ve miras dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.

+ +

Kontrol görünümünde <em> öğe ve .special sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan color niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.

+ +

Selecting an em and looking at DevTools to see what is over-riding the color.

+ +

Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin

+ +

MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için DevTools bölümüne ve Nasıl Yapılır Rehberi'ne bakın.

+ +

CSS'de hata ayıklama sorunları

+ +

DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.

+ +

Sorundan bir adım uzaklaşın

+ +

Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.

+ +

HTML ve CSS kodların geçerli mi?

+ +

Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.

+ + + +

Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?

+ +

Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.

+ +

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

+ +

MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.

+ +

{{Compat("css.properties.shape-outside")}}

+ +

CSS'ini geçersiz kılan başka bir etken mi var?

+ +

Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.

+ +

İndirgenmiş test senaryosu

+ +

Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.

+ +

İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.

+ +

İndirgenmiş bir test senaryosu oluşturmak:

+ +
    +
  1. Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. CodePen gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.
    2. +
  2. JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.
    3. +
  3. Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.
    4. +
  4. Sorunu etkilemeyen tüm CSS'leri kaldırın.
    5. +
+ +

Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.

+ +

Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.

+ +

Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın bugzilla sitesi).

+ +

CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/handling_different_text_directions/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/handling_different_text_directions/index.html" new file mode 100644 index 0000000000..372e9d8f6b --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/handling_different_text_directions/index.html" @@ -0,0 +1,168 @@ +--- +title: Farklı metin yönlerini kullanma +slug: Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions +tags: + - Başlangıç + - Beginner + - CSS + - Eğitim + - Learn + - logical properties + - mantıksal ozellikler + - writing modes + - yazma modu +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.

+ +

Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içeriklerde(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine yazma modu denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağız.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Modern CSS için yazma modlarının önemini anlamak.
+ +

Yazma modları nelerdir?

+ +

CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder.  {{cssxref("writing-mode")}} niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.

+ +

Aşağıdaki örnekte writing-mode: vertical-rl kullanılarak görüntülenen bir başlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımına daha ilginç bir görünüm ve his katmanın bir yolu olabilir.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

writing-mode niteliği için olası üç değer şunlardır:

+ + + +

Yani writing-mode niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.

+ +

Yazma modları ve blok ve satır içi düzen

+ +

Blok ve satır içi düzeni, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan,  bloklar sayfanın üstünden altına doğru görüntülenir.

+ +

Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, bir başlık ve bir paragraf içeren iki kutum var. İlki writing-mode: horizontal-tb, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi writing-mode: vertical-rl; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir horizontal-tb yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir vertical-rl yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; block dimension: yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. inline dimension: Satır içi ise paragrafların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.

+ +

Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.

+ +

,Showing the block and inline axis for a horizontal writing mode.

+ +

Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.

+ +

Showing the block and inline axis for a vertical writing mode.

+ +

CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğiz.

+ +

Yön

+ +

Yazma moduna ek olarak metin  yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağın bir uygulama değildir — bir metni sağ taraftan başlatmak istiyoran, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.

+ +

Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte başlangıç ve bitiş  tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.

+ +

Mantıksal özellikler ve değerler

+ +

Öğreniminin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında fikir sahibi olmandır.

+ +

İki kutumuza tekrar bir göz atalım — biri horizontal-tb ve diğeride vertical-rl değerlerine sahip. Bu iki kutuya da bir {{cssxref("width")}} değeri verdim. Gördüğün gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun blok boyutunun da genişlemesini istiyoruz.

+ +

Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — width ve height gibi — mantıksal veya  akışla ilgili sürümlerle değiştirir.

+ +

Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki width'yi ifade eder.  {{cssxref("block-size")}} niteliği ise blok boyuttaki height boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. inline-size ile width.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri

+ +

Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel niteliklerin bir çok örneklerini bulacaksın {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, ve {{cssxref("border-bottom")}}. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.

+ +

margin-top niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.

+ +

{{cssxref("padding-left")}} niteliğinin eşlemesi olan {{cssxref("padding-inline-start")}}, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlar. {{cssxref("border-bottom")}} niteliğinin eşlemsi olan {{cssxref("border-block-end")}} ise blok boyutunun sonunda bir sınır koymamızı sağlar.

+ +

Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.

+ +

Eğer .box sınıfı içerisindeki writing-mode'u vertical-rl olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.

+ +

Ayrıca {{htmlelement("h2")}} etiketinin border-bottom niteliğine sahip olduğunu görebilirsin. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağını bulabilir misin?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve Mantıksal Özellikler ve Değerler için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.

+ +

Mantıksal değerler

+ +

Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır top, right, bottom, ve left. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, block-start, inline-end, block-end, ve inline-start.

+ +

Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. left değerinin yerini  inline-start değerinin aldığını görebilirsin

+ +

Resim üzerinde nasıl bir etkisi olduğunu görebilmek için horizontal-tb değerini vertical-rl ile değiştirebilirsin. Ayrıca float niteliğindeki inline-start değerini inline-end ile değiştirin.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.

+ +
+

Şu anda, yalnız"ca Firefox için float akış kontrol değerleri desteklenmektedir. Eğer Google Chrome veya Microsoft Edge kullanıyorsan, metnin kaymadığını fark edebilirsin.

+
+ +

Fiziksel veya mantıksal özellikleri kullanmalı mısın?

+ +

Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.

+ +

Becerilerini test et!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test edin: yazma modları.

+ +

Özet

+ +

Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasan bile CSS'i anlamana yardımcı olacaktır.

+ +

Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
  13. /ol>
    14. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/images_media_form_elements/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/images_media_form_elements/index.html" new file mode 100644 index 0000000000..44d6747ddd --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/images_media_form_elements/index.html" @@ -0,0 +1,211 @@ +--- +title: 'Görseller, medya ve form öğeleri' +slug: Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements +tags: + - Acemi + - Beginner + - CSS + - Eğitim + - Forms + - Gorüntü + - Images + - Learn + - Media + - Medya + - değiştirilen içerik + - form + - replaced content +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
+ +

Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Görseller, diğer ortamlar ve form öğeleri, CSS ile biçimlendirme de şimdiye kadar öğrendiğin kutu davranışlarından biraz farklı davranırlar. Neyin yapılıp neyin yapılamadığını anlamak bazı karmaşıklıklardan seni kurtarabilir. Burada dikkat etmemiz gereken bazı ana konulara değineceğiz.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak
+ +

Yenilenen öğeler

+ +

Görüntüler ve medyalar yenilenen öğeler olarak tanımlanır. Bu, CSS'in bu öğeleri dahili düzenini etkileyemeceği anlamına gelir — yalnızca sayfadaki diğer öğelerle arasındaki konumlarına müdahale edebilir. Ancak göreceğimiz gibi, CSS'in bir görüntüye yapabileceği çeşitli şeyler de vardır.

+ +

Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir en boy oranına sahip olarak var olurlar. Bu, hem yatay(x) hem de dikey(y) boyutlara sahip olduğu ve varsayılan olarak dosyanın iç boyutları kullanılarak görüntüleneceği anlamına gelir.

+ +

Görüntüleri boyutlandırma

+ +

Bu zamana kadar ki derslerden öğrendiğin gibi, CSS'deki her öğe bir kutudan oluşturulur. Her iki yönde de görüntü dosyasının iç boyutlarından daha küçük veya daha büyük bir kutunun içine bir görüntü yerleştirirsen, ya kutudan daha küçük görünür yada kutunun sınırları dışına taşar. Taşma ile ne yapılacağı konusunada bizim karar vermemiz gerekir.

+ +

Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

+ +

Öyleyse taşma konusu hakkında ne yapabiliriz?

+ +

Önceki dersimizde öğrendiğimiz gibi, yaygın bir teknik olan {{cssxref("max-width")}} niteliğinin değerinine %100 değerini tanımlayabiliriz. Bu, görüntünün boyut olarak kutudan daha küçük olmasını ancak daha büyük olmamasını sağlayacaktır. Bu teknik, <video>lar ve  <iframe>ler içinde geçerlidir.

+ +

Yukarıdaki örnekte bulunan <img> öğesine max-width: 100%; niteliğini tanımlayın. Daha küçük görüntünün değişmeden kaldığını, ancak daha büyük olanın kutuya sığabilmek için küçüldüğünü göreceksin.

+ +

Kutuların içindeki görüntülerle ilgili başka seçimler de yapabilirsin. Örneğin, bür görüntüyü bir kutuya tamamen kaplayacak şekilde boyutlandırmak isteyebilirsin.

+ +

Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. object-fit niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..

+ +

Aşağıda cover, en boy oranını koruyarak, görüntüyü küçülten ve kutuyu düzgün bir şekilde dolduran değeri kullandık. En-boy oranı korunduğu için, görüntünün kutudan taşan kısımları kırpılacaktır.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

+ +

Değer olarak contain'nu kullanırsak, görüntü kutunun içine tamamen sığabileceği kadar küçültülür. Görüntü, kutuyla aynı en-boy oranına sahip değilse "sinemaskop" şeklinde görüntülenecektir.

+ +

fill değeri ise, kutuyu tamamen dolduracak fakat görüntü, kutuyla aynı en-boy oranına sahip değilse görüntüyü büzüp gerecektir. Yukarıdaki örnekte kutunun birinde bu değeri kullanıp nasıl sonuçlandığını görebilirsin.

+ +

Düzende yenilenebilen öğeler

+ +

Yenilenebilen öğeler üzerinde çeşitli CSS mizanpaj tekniklerini kullanırken, diğer öğelere göre biraz farklı davrandıklarını fark edebilirsin. Örneğin, esnek veya ızgara düzeninde öğeler varsayılan olarak tüm alanı dolduracak şekilde boyutlandırılır. Görüntüler yeniden boyutlandırılmazlar, bunun yerine ızgara alanının veya esnek kabın başlangıcına hızalanırlar.

+ +

Bunu aşağıdaki, içinde dört öğe bulunan iki sütun ve iki satırdan oluşan bir ızgara örneğinde görebilirsin. Tüm <div> öğelerinin bir arka plan rengi vardır, satır ve sütunu doldurmak için öğemiz boyutlandırılır. Ancak görüntünün boyutunda bir değişim olmaz.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

+ +

Bu dersleri sırayla takip ediyorsan, henüz düzene bakmamışsındır. Değiştirilen öğelerin bir ızgara veya esnek mizanpajın parçası olduklarında, dahil oldukları düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olduklarını unutmayın.

+ +

Görüntüyü, içinde bulunduğu ızgara hücresini dolduracak şekilde uzatmaya zorlamak için aşağıdaki gibi bir tanımlama yapman gerekir:

+ +
img {
+  width: 100%;
+  height: 100%;
+}
+ +

Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.

+ +

Form öğeleri

+ +

Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve Web Formları dersi, burada yeniden anlatamayacağım kadar karmaşık yönlerine yönelik ayrıntılı kılavuzlar içerir. Makalenin bu bölümünde vurgulanmaya değer bir kaç temel var.

+ +

<input> etiketi aracılığıyla sayfana birçok form denetimi eklenir — bu, renk ve tarih seçiciler gibi HTML5'e eklenen daha karmaşık alanlara kadar ve metin girişleri gibi basit form alanlarını tanımlar. Ayrıca <textarea> gibi satırlı metin girişine izin veren ek unsurlar ve ek unsurlar için kullanılan form üzerindeki öğelerin gruplandırılması ve etiketlenmesini sağlayan ek tanımlar da vardır — <fieldset> ve <legend> gibi.

+ +

HTML5 ayrıca web geliştiriclerinin hengi alanların gerekli olduğunu ve hatta girilmesi gereken içerik türünü belirtmesine olanak tanıyan nitelikler içerir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa, tarayıcı hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil ve özelleştirmeye izin verdikleri konusunda tutarsızdır.

+ +

Metin giriş öğelerini şekillendirme

+ +

Metin girişine izin veren <input type="text"> gibi, belirli türlerin girişine izin veren <input type="email"> gibi ve birden fazla satıra sahip metin girişine izin veren <textarea> etiketi gibi öğelerin stillendirilmesi oldukça kolaydır ve sayfandaki diğer kutular gibi davranma eğilimindedirler. Bu öğelerin varsayılan stili kullanıcının, siteyi ziyaret ettiği işletim sistemi ve tarayıcıya bağlı olarak farklılıklar gösterecektir.

+ +

Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerine stil uyguladık. Kenarlık, kenar boşlukları ve dolgu gibi stillerin beklediğin gibi uygulandığını ve farklı girdi türlerini hedeflemek için nitelik seçicilerin kullanıldığını görebilirsin. Kenarlıkları, arka plan renklerini, yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi denebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

+ +
+

Önemli: Form öğelerinin kullanıcı için görülebilir olması için form öğelerinin görümünü değiştirirken dikkatli olmalısın. Çevresindeki diğer nesnelerden neredeyse ayırt edilemeyen kenarlık ve arka planna sahip bir form girişi oluşturulabilir, ancak bu fark edilmesini ve bilgi girişi yapılmasını zorlaştırır.

+
+ +

Bu kursun HTML bölümündeki form stiliyle ilgili derslerde açıklandığı gibi, daha karmaşık giriş türlerinin çoğu işletim sistemi tarafından oluşturulur ve şekillendirme için erişilemez. Bu nedenle her zaman formların farklı ziyaretçiler için oldukça farklı görüneceğini varsaymalı ve çeşitli tarayıcılarda karmaşık formları test etmelisin.

+ +

Kalıtım ve form öğeleri

+ +

Bazı tarayıcılar, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarının gövdede veya bir ana öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsan, bu kuralı CSS'ine eklemelisin.

+ +
button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+}
+ +

Form öğeleri ve kutu boyutlandırma

+ +

Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. Kutu modeli dersimizde box-sizing niteliği hakkında bilgi edindin ve bu bilgiyi form öğelerinde genişlik ve yükseklileri ayarlarken tutarlı bir görünüm sağlamak için formları şekillendirirken kullanabilirsin.

+ +

Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini 0 olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.

+ +
button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+ +

Diğer kullanışlı ayarlar

+ +

Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <textarea> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, overflow: auto tanımını yapın:

+ +
textarea {
+  overflow: auto;
+}
+ +

Hepsini bir araya getirerek "sıfırlamak"

+ +

Son bir adım olarak, çalışmak ortamında tutarlı bir temel sağlamak için, yukarıda tartışılan çeşitli özellikleri aşağıdaki "form sıfırlama" ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:

+ +
button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+ +
+

Not: Normalleştirme stil sayfaları, birçok geliştirici tarafından projelerinde bir dizi temel stil şablonu oluşturmak için kullanılır. Salt olarak bunlar, CSS üzerinde kendi stilini oluşturmadan önce, tarayıcılar arasında ki farklı varsayılan değerler için ve yukarıda bahsettiğimiz davranışlar için tutarlı bir varsayılana sahip olmanı sağlar. Tarayıcılar tipik olarak geçmişe göre daha tutarlı olduğundan, eskisi kadar önemli değiller. Bununla birlikte, bir örneğe göz atmak istersen, bir çok popüler stil sayfasından biri olan ve pekçok projede kullanılan Normalize.css bakabilirsin.

+
+ +

Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.

+ + + +

Becerilerini test edin!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Görüntüler ve form öğeleri.

+ +

Özet

+ +

Bu ders, CSS'de görseller, medya ve diğer alışılmadık unsurlarla çalışırken karşılaşacağın bazı farklılıkları ele aldı. Sonraki makalede, HTML tablolarını biçimlendirmen gerektiğinde yararlı bulacağın birkaç ipucuna bakacağız.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/index.html" new file mode 100644 index 0000000000..e898c37760 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/index.html" @@ -0,0 +1,101 @@ +--- +title: CSS yapı taşları +slug: Öğren/CSS/CSS_yapi_taslari +tags: + - Başlangıç + - Beginner + - CSS + - Learn + - building blocks + - kutu oluşturmak + - Öğrenme +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Bu derste, CSS'in ilk adımlarının kaldığı yerden devam ediyor. Artık dile ve sözdizimine aşinalık kazandın ve onu kullanma konusunda bazı temel deneyimler edindin, biraz daha derine dalma zamanı. Bu bölüm, art arda denetime ve mirasa, sahip olduğun tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasına bakar.

+ +

Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve metin şekillendirme ve CSS düzeni gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak

+ +
+

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

+ +

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

+ +

Başla

+
+ +

Gereksinimler

+ +

Bu üniteye başlamadan önce şunlara sahip olmalısın:

+ +
    +
  1. Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)
    2. +
  2. Gerekli uygulamaların yüklenmesi bölümünde ayrıntılı olarak verilen çalışma ortamı ve  Dosyalarla çalışmak bölümünde ayrıntılarıyla anlatıldığı gibi dosyanın nasıl oluşturulacağının ve yönetileceğinin anlaşılması
    3. +
  3. HTML'ye Giriş ünitesinde tartışıldığı gibi alt yapıya sahip olmak.
    4. +
  4. CSS ilk adımlar ünitesinde açıklanan temellerin anlaşılması.
    5. +
+ +
+

Not: Kendi dosyalarını oluşturma imkanının olmadığı bir bilgisayar/table/başka bir çihaz üzerinde çalışıyorsan; çevrim içi kod düzenleyip deneyebileceğin şu siteleri kullanabilirsin: JSBin veya Glitch.

+
+ +

Kılavuzlar

+ +

Bu ünite, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Ders boyunca, gördüklerini denemene izin verecek bir çok alıştırmalarla karşılaşacaksın.

+ +
+
Art arda denetim ve miras
+
+

Bu dersin amacı, CSS'in HTML'ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden CSS'in en temel kavramlarından bazıları olan art arda denetim, özgüllük ve miras anlayışını geliştirmektir.

+
+
CSS seçicileri
+
CSS'de, stil verilecek öğeleri seçerken yüksek hassasiyetli birçok seçici mevcuttur. Bu makale ve alt makalelerinde, seçicilerin farklı türlerinin nasıl çalıştığını görerek incelemiş olacağız. Alt makalelerin bağlantıları aşağıdadır: + +
+
Kutu modeli
+
CSS'deki herşeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin ve öğelerin diğer öğelerle hizlanmasının anahtarıdır. Bu derste, nasıl çalıştığını ve bununla ilgili terminolojiyi anlayarak daha karmaşık tasarımların üstesinden gelebilmen için CSS Kutu Modeline derinlemesine bakacağız.
+
Arka planlar ve kenarlıklar
+
Bu derste CSS arka planları ve kenarlıkları ile yapabileceğin bazı yenilikçi özelliklere bir göz atacağız. Renk geçişleri, arka plan resimleri ve yuvarlatılmış köşeler yapabilmek. CSS'deki arka planlar ve kenarlıklar bir çok stil sorunun çözümüdür.
+
Farklı metin yönlerini kullanma
+
Son yıllarda, sağdan sola ve yukarıdan aşağıya doğru(japonca gb.) içeriklerinde dahil olduğu farklı yönlülüğü daha iyi desteklemek için CSS gelişti. Bu farklı yönlere yazma modu denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarının anlamak sana çok yardımcı olacaktır. Bu nedenle bunları bu makalede tanıtacağız.
+
Taşan içerik
+
Bu derste CSS'deki başka bir önemli soruna bakacağız — taşma. Taşma, bir kutunun sınırları içerisinde tutabileceğinden daha fazla içerik olduğunda olan davranıştır. Bu makalede ne olduğunu ve nasıl yönetileceğini öğreneceksin.
+
CSS değerleri ve birimleri
+
CSS'de kullanılan her nitelik, o nitelik için izin verilen bir değere veya değerler kümesine sahiptir. Bu derste, kullanılan en yaygın değerlerden ve birimlerden bazılarına göz atacağız.
+
CSS'de öğelerin boyutlandırma
+
Şimdiye kadarki derslerde, CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarına az buçuk aşına oldun. Tasarımındaki farklı özelliklerin ne kadar büyük olacağını anlamak gerçekten önemlidir ve bur derste, nesnelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yolarını özetleyeceğiz ve gelecete size yardımcı olacak boyutlandırma ile ilgili bir kaç terim tanıtacağız.
+
Görseller, medya ve form nesneleri
+
Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Resimler, diğer ortamlar ve form nesneleri gibi. CSS ile biçimlendirme becerin açısından normal kutulardan biraz farklı davranırlar. Neyin mümkün olup neyin mümkün olmadığını anlamak bazı hayal kırıklıklarından seni kurtarabilir. Bu ders bilmen gereken bazı ana konuları vurgular.
+
Tabloları şekillendirme
+
Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı işi değildir, ancak bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin uygulanmasıyla HTML tablolarının güzel görünmesi için sana bir klavuz sağlar.
+
CSS'de hata ayıklama
+
Bazen CSS yazarken, CSS'nin istediğin şeyi yapmadığı bir sorunla karşılaşırsın. Bu makale, bir CSS sorununu nasıl gidereceğin konusunda sana rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini göstereceğiz.
+
CSS'ini düzenleme
+
Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığında, büyük bir CSS dosyasını korumanın ne kadar zor olabileceğini keşfedeceksin. Bu makalede, CSS'ini yazmak için kullanılan en iyi uygulamalara  ve bakımı iyileştirmeye yardımcı olmak için başkaları tarafından kullanılan çözümlerden bazılarına kısa bir göz atacağız.
+
+ +

Değerlendirmeler

+ +

CSS becerilerini test etmek ister misin? Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda anlatılan CSS hakkında edindiğin bilgileri sınayacak.

+ +
+
Temel CSS anlayışı
+
Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.
+
Süslü antetli kağıt oluşturma
+
Doğru izlenimi bırakmak istiyorsan, güzel bir antetli kağıda bir mektup yazmak gerçekten iyi bir başlangıç olabilir. Bu değerlendirme, böyle bir görünüm elde etmek için seni çevrimiçi bir şablon oluşturmaya davet edeceğim.
+
Harika görünümlü bir kutu
+
Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.
+
+ +

Göz at

+ +
+
Gelişmiş stil efektleri
+
Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir numara kutusu görevi görür.
+
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/organizing/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/organizing/index.html" new file mode 100644 index 0000000000..383d4db9e5 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/organizing/index.html" @@ -0,0 +1,376 @@ +--- +title: CSS planlama +slug: Öğren/CSS/CSS_yapi_taslari/Organizing +tags: + - Acemi + - Beginner + - CSS + - CodingScripting + - Eğitim + - Learn + - biçimlendirme + - comments + - formatting + - methodologies + - organizing + - post-processor + - pre-processor + - stil rehberi + - styleguide + - yorumlar +translation_of: Learn/CSS/Building_blocks/Organizing +--- +
{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
+ +

Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağız.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.
+ +

CSS'i düzenli tutmak için ipuçlar

+ +

Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler

+ +

Projende kodlama stili rehberin var mı?

+ +

mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.

+ +

Örneğin, MDN kod örnekleri için CSS yönergelerine bir göz atın.

+ +

Tutarlı olmasını sağlayın

+ +

Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)

+ +

Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.

+ +

CSS biçimlendirmen okunabilir olsun

+ +

CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:

+ +
.box { background-color: #567895; }
+h2 { background-color: black; color: white; }
+ +

Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:

+ +
.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}
+ +

Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.

+ +

CSS hakkında yorumlarda bulun

+ +

CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.

+ +
/* Bu bir CSS yorumudur
+Birden fazla satıra bölünebilir. */
+ +

Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda || mantıksal işaretini kullandım.

+ +
/* || Genel stiler */
+
+...
+
+/* || Yazıları şekillendir */
+
+...
+
+/* || Üst bilgi ve ana gezinti bölmesi */
+
+...
+
+
+ +

CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.

+ +

Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:

+ +
.box {
+  background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+
+ +

Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.

+ +

Stil sayfanda mantıksal bölümler oluştur.

+ +

Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:

+ + + +

Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.

+ +
/* || Genel Stiller */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+
+ +

Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.

+ +
/* || Araçlar */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+
+ +

Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.

+ +
/* || Site geneli */
+
+.main-nav { ... }
+
+.logo { ... }
+
+ +

Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.

+ +
/* || Site sayfaları */
+
+.product-listing { ... }
+
+.product-box { ... }
+
+ +

Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.

+ +

Aşırı karakteristik seçicilerden kaçının

+ +

Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, main sınıfına dahil <article> öğesinin torunlarından box sınıfına dahil <p> öğeleri için bir kuralımız olabilir.

+ +
article.main p.box {
+  border: 1px solid #ccc;
+}
+ +

Fakat daha sonra aynı kuralları main sınıfına dahil olmayan ebeveyne sahip öğeye veya <p> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için .box seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri box sınıfına dahil ederiz.

+ +
.box {
+  border: 1px solid #ccc;
+}
+ +

Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.

+ +

Büyük stil sayfalarını daha küçük parçalara bölün

+ +

Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.

+ +

Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.

+ +

CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.

+ +

Yardımcı olabilecek diğer araçlar

+ +

CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.

+ +

CSS metodolojileri

+ +

CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.

+ +

bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.

+ +

OOCSS

+ +

Karşılaşacağın yaklaşımların çoğu, Nicole Sullivan'ın çalışmasıyla popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, Media Nesnesi olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.

+ +

OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip comment adlı bir sınıf ve neredeyse comment sınıfıyla arasında bazı farklılıklar haricinde aynı olan  list-item sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.

+ +
.comment {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.comment .content {
+  font-size: .8rem;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 1px solid grey;
+}
+
+.list-item .content {
+  font-size: .8rem;
+}
+ +

OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan media adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.

+ +
.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.media .content {
+  font-size: .8rem;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.list-item {
+  border-bottom: 1px solid grey;
+}
+ +

HTML'emizdeki yorum kısmının hem media, hem de comment sınıflarına dahil edilmesi gerekir:

+ +
<div class="media comment">
+  <img />
+  <div class="content"></div>
+</div>
+
+ +

Liste öğelerinin de hem media, hem de list-item sınıfklarına dahil edilmesi gerekir:

+ +
<ul>
+  <li class="media list-item">
+    <img />
+    <div class="content"></div>
+  </li>
+</ul>
+ +

Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.

+ +

BEM

+ +

BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, BEM Adlandırma kuralları sayfasındaki HTML'ye uygulanan sınıflara bakın:

+ +
<form class="form form--theme-xmas form--simple">
+  <input class="form__input" type="text" />
+  <input
+    class="form__submit form__submit--disabled"
+    type="submit" />
+</form>
+ +

Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.

+ +

BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.

+ +

Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine BEM 101'i okuyun.

+ +

Diğer yaygın sistemler

+ +

Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS), Harry Roberts'tan ITCSS ve Yahoo! tarafından oluşturulan Atomic CSS (ACSS) bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.

+ +

Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.

+ +

CSS için bir sistem oluşturun.

+ +

CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.

+ +

Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.

+ +

En popüler ön işlemci Sass'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, Sass Temelleri makalesi ile başlayın ve ardından diğer belgelerine geçin.

+ +

Değişken tanımlama

+ +

CSS artık yerel özel özelliklere sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.

+ +

Aşağıdaki ilk satırdaki gibi bir $base-color değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.

+ +
$base-color: #c6538c;
+
+.alert {
+  border: 1px solid $base-color;
+}
+ +

CSS derlendikten sonra aşağıdaki gibi gözükecektir.

+ +
.alert {
+  border: 1px solid #c6538c;
+}
+ +

Birleşen stil sayfalarını derlemek

+ +

Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.

+ +

Örneğin, partials(kısımlar) ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki foundation/_code.scss, foundation/_lists.scss, foundation/_footer.scss, foundation/_links.scss vb. dosyaların olsun. Bunları Sass'da kullanmak için @use bildirimini kullanabilirsin:

+ +
// foundation/_index.sass
+@use 'code'
+@use 'lists'
+@use 'footer'
+@use 'links'
+ +

Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:

+ +
// style.sass
+@use 'foundation'
+ +
+

Not: Sass'ı denemenin basit bir yolu  CodePen kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek,  CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.

+
+ +

Optimizasyon için son işlem

+ +

Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek cssnano.

+ +

Bundan sonra

+ +

Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.

+ +

CSS'de mizanpaj hakkında daha fazla bilgi edinmek için CSS Mizanpajını Hakkında bölümüne bakabilirsin.

+ +

Artık MDN CSS materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için CSS YemekKitabını inceleyebilir ve CSS Izgara Düzeni Rehberi gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflow_tasks/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflow_tasks/index.html" new file mode 100644 index 0000000000..7ee1ceaad0 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflow_tasks/index.html" @@ -0,0 +1,66 @@ +--- +title: 'Becerilerinizi test edin: Taşma' +slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks +tags: + - Acemi + - Beginner + - CSS +translation_of: Learn/CSS/Building_blocks/Overflow_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

+
+ +

Birinci Görev

+ +

Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.

+ +

A small box with a border and a vertical scrollbar.

+ +

Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

İkinci Görev

+ +

Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.

+ +

A box with an image which fills the box but does not spill out the edges.

+ +

Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflowing_content/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflowing_content/index.html" new file mode 100644 index 0000000000..5f332ca348 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/overflowing_content/index.html" @@ -0,0 +1,140 @@ +--- +title: İçerik taşması +slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content +tags: + - Acemi + - Beginner + - Block Formatting Context + - CSS + - Data Loss + - Eğitim + - Learn + - Veri kaybı + - overflow + - taşma +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Taşmayı ve onu nasıl yöneteceğini anlamak.
+ +

Taşma nedir?

+ +

CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız. CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.

+ +

CSS, "veri kaybını" önlemeye çalışır

+ +

Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.

+ +

İlk örnek, height niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?

+ +

Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.

+ +

Bir kutuya width veya height ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)

+ +

Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.

+ +

Taşma niteliği: overflow

+ +

{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri visible'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.

+ +

Taşan içeriği gizlemek için de ayarlayabilirsin; overflow: hidden. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; overflow: scroll. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.

+ +

Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

Yukarıdaki örnekte, sadece y ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece y ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama overflow-y: scroll.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, CSS'de öğeleri boyutlandırma bölümünde tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

scroll'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.

+ +
+

Not:  overflow niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, overflow: scroll hidden'nin açılımı: overflow-x: scrool ve overflow-y: hidden olacak şekilde yorumlanacaktır.

+
+ +

Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, overflow:auto kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.

+ +

Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +
+

Not: Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)

+
+ +

Taşma, Blok Biçimlendirme Kapsamı oluşturur

+ +

scroll veya auto gibi bir taşma değeri kullandığında, Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC) oluşturursun. overflow olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.

+ +

Web tasarımında istenmeyen taşma

+ +

Modern yerleşim yöntemleri (CSS düzeninde açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.

+ +

Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.

+ +

Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)

+ +

Becerilerini test et!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. Becerilerini test edin: taşma.

+ +

Özet

+ +

Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de elemanların boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/selectors/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/selectors/index.html" new file mode 100644 index 0000000000..a7f89d5c85 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/selectors/index.html" @@ -0,0 +1,232 @@ +--- +title: CSS seçiciler +slug: Öğren/CSS/CSS_yapi_taslari/Selectors +tags: + - Başlangıç + - CSS + - Nitelik + - Sozde + - id + - oğrenin + - seçiciler + - sınıf +translation_of: Web/CSS/CSS_Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek
+ +

Seçici nedir?

+ +

Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin konusu olarak anılır.

+ +

Some code with the h1 highlighted.

+ +

Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici h1 veya sınıf seçici .special gibi.

+ +

CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler spesifikasyonunda tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.

+ +

Seçici listeleri

+ +

Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi,  bir seçici listesinde birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan h1 eleman seçicim ve .special sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.

+ +
h1, .special {
+  color: blue;
+}
+ +

Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.

+ +

Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa h1 şekillendirmesi hala uygulanacaktır.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de h1 elemanı biçimlendirilmez

+ +
h1, ..special {
+  color: blue;
+}
+ +

Seçici türleri

+ +

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..

+ +

Tür, sınıf ve kimlik seçicileri

+ +

Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <h1>:

+ +
h1 { }
+ +

Ayrıca bir sınıfı hedefleyen seçicileri de içerir class:

+ +
.box { }
+ +

veya bir kimlik id:

+ +
#unique { }
+ +

Nitelik seçiciler

+ +

Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:

+ +
a[title] { }
+ +

Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:

+ +
a[href="https://example.com"] { }
+ +

Sözde sınıflar ve sözde elemanlar

+ +

Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin :hover sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:

+ +
a:hover { }
+ +

Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin ::first-line her zaman bir elemanın içindeki ilk metin satırını seçer (<p> şağıdaki durumda, sanki ilk satırın etrafı <span> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.

+ +
p::first-line { }
+ +

Birleştiriciler

+ +

Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <article> eleman etiketi  (>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:

+ +
article > p { }
+ +

Sonraki adımlar

+ +

Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya tür, sınıf ve kimlik seçicileri makalesine devam ederek yolculuğunuza başlayabilirsiniz.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Seçicilerin referans tablosu

+ +

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekCSS makaleleri
Tür seçicih1 {  }Tür seçiciler
Evrensel seçici* {  }Evrensel seçici
Sınıf seçici.box {  }Sınıf seçici
Kimlik seçici#unique { }Kimlik seçici
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicip:first-child { }Sözde sınıflar
Sözde elelman seçicip::first-line { }Sözde eleman
Torun birleştiricisiarticle pTorun birleştirici
Çocuk birleştiricisiarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricisih1 + pBitişik kardeş
Genel kardeş birleştiricisih1 ~ pGenel kardeş
+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de elemanların boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_items_in_css/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_items_in_css/index.html" new file mode 100644 index 0000000000..9da820f78a --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_items_in_css/index.html" @@ -0,0 +1,153 @@ +--- +title: CSS'de öğeleri boyutlandırma +slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS +tags: + - Acemi + - Beginner + - CSS + - Eğitim + - Intrinsic size + - Learn + - boyutlandırma + - goruntu alanı birimleri + - maksimum boyut + - max size + - min size + - minimum boyut + - percentage + - sizing + - viewport units + - yüzde + - İç boyut +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +

https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit

+ +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
+ +

Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi ele alacağız.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS'de nesneleri boyutlandırmanın farklı yollarını anlamak.
+ +

Nesnelerin doğal veya içsel boyutu

+ +

HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <image>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen gerçek boyut olarak tanımlanır.

+ +

Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <img> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <div> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.

+ +

Belirli bir boyut belirleme

+ +

Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna dışsal boyut denir. Yukarıdaki <div> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. Taşma konusundaki dersimizde öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.

+ +

Yüzdeler kullanma

+ +

Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve değerler ve birimlerle ilgili derste tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <div>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.

+ +

Yüzde kenar boşlukları ve dolgu

+ +

Eğer margins ve padding niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}}  %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!

+ +

Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin satır içi boyutundan hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.

+ +

min- ve max- boyutlar

+ +

Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman en azından belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.

+ +

Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.

+ +

Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.

+ +

Misal; width: 100% olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.

+ +

Bunun yerine max-width: 100% tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.

+ +

Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye width: 100% tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü max-width: 100% tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine max-width: 100% tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Bu teknik, görüntüleri duyarlı hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.

+ +
+

Not: Duyarlı görüntüleme teknikleri hakkında daha fazla bilgi edinin.

+
+ +

Görüntü alanı birimleri

+ +

Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(vw) ve görüntüleme alanı yüksekliği(vh) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.

+ +

1vw görüntüleme alanının genişliğinin %1'ine, 1vh'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde font-size'ı 10vh olan bir "A" harfi var.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Eğer vh ve vw değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan örneği yeni bir pencerede açın(yukarıdaki örnek <iframe> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)

+ +

Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği 100vh olarak tanımlarsan,  içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.

+ +

Becerilerini test et!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Boyutlandırma.

+ +

Özet

+ +

Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. CSS Düzenine geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_tasks/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_tasks/index.html" new file mode 100644 index 0000000000..ffccae6a72 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/sizing_tasks/index.html" @@ -0,0 +1,82 @@ +--- +title: 'Becerilerinizi test edin: Boyutlandırma' +slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks +tags: + - Acemi + - Beginner + - CSS + - Example + - Örnek +translation_of: Learn/CSS/Building_blocks/Sizing_tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevin amacı CSS'de Öğeleri Boyutlandırma dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

+
+ +

Birinci Görev

+ +

Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.

+ +

İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.

+ +

Two boxes one with overflowing content

+ +

Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin Kaynak Kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

İkinci Görev

+ +

Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.A box with another box nested inside

+ +

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin kaynak kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Görev Üç

+ +

Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.

+ +

Two boxes with images in

+ +

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin kaynak kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/styling_tables/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/styling_tables/index.html" new file mode 100644 index 0000000000..c7fb4335d7 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/styling_tables/index.html" @@ -0,0 +1,330 @@ +--- +title: Tabloları şekillendirme +slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables +tags: + - Acemi + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Komut Dosyası + - Makale + - NeedsUpdate + - Rehber + - Stil + - Styling + - Tables + - Tablo +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
+ +

Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.
+ +

Standart bir HTML tablosu

+ +

Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.

+ +
<table>
+  <caption>A summary of the UK's most famous punk bands</caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+      ... some rows removed for brevity
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için punk-bands-unstyled.html sayfasına bakın.):

+ +

+ +

Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.

+ +

Tablomuzu şekillendirmek

+ +

Tablo örneğimizi birlikte şekillendirmeye çalışalım.

+ +
    +
  1. Başlangıç olarak, kaynak kodları ve iki adet resmi(noise ve leopardskin) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.
    2. +
  2. Ardından, adı style.css olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.
    3. +
  3. Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın. + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Aralık ve düzen

+ +

Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi style.css dosyasına eklemelisin:

+ +
/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:

+ + + +

+ + + +

Bu noktada, tablomuz biraz daha iyi görünür:

+ +

+ +

Basit bir tipografi

+ +

Şimdi metnimizi biraz şekillendirelim.

+ +

Google Fonts'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.

+ +

Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <link> tanımının hemen üstüne eklemelisin:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Şimdi, aşağıdaki CSS'i style.css dosyasının önceki eklemenin altına eklemelisin:

+ +
/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.

+ + + +

Sonuç biraz daha düzgün görünüyor:

+ + + +

+ +

Grafikler ve renler

+ +

Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade  ve zevkli bir tasarım tercik edebilirsin.

+ +

Aşağıdaki CSS'i style.css dosyanıza eklemelisin:

+ +
/* graphics and colors */
+
+thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.

+ +

{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.

+ +

Zebra çizgisi

+ +

Zebra çizgilerinin nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i sytle.css dosyasına eklemelisin:

+ +
/* zebra striping */
+
+tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

Bu renk cümbüşü aşağıdaki görünüme neden olur:

+ +

+ +

Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.

+ +

Başlığın stilini ayarlamak

+ +

Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri style.css dosyasına eklemelisin.

+ +
/* caption */
+
+caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Burada bottom değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(punk-bands-complete.html görmek için bakın):

+ +

+ +

Tablo şekillendirme için hızlı ipuçları

+ +

Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:

+ + + +

Becerilerini test et!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Tablolar.

+ +

Sıradaki

+ +

Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html" new file mode 100644 index 0000000000..b144c19470 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/test_your_skills_backgrounds_and_borders/index.html" @@ -0,0 +1,87 @@ +--- +title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar' +slug: Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders +tags: + - Arka Plan + - Assessment + - Başlangıç + - Beginner + - Değerlendirme + - Eğitim + - Kenarlık + - Learn + - Skill test + - backgrounds + - beceri testi + - borders +translation_of: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders +--- +

Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması yararlı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazla yardım")}} bölümüne bakın.

+
+ +

Arka Planlar ve Kenarlıklar 1

+ +

Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:

+ +
    +
  1. Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.
    2. +
  2. Bir arka plan resmi ekleyin (balloons.jpg'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.
    3. +
  3. <h2> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.
    4. +
+ +

Bitmiş örnek aşağıdaki gibi görünmelidir.

+ +

Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.

+ +

Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}

+ +
+

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin kaynak kodunu indirin.

+
+ +

Arka Planlar ve Kenarlıklar 2

+ +

Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:

+ + + +

İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:

+ +

Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.

+ +

Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}

+ +
+

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin Kaynak kodunu indirin.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/the_box_model/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/the_box_model/index.html" new file mode 100644 index 0000000000..016c021985 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/the_box_model/index.html" @@ -0,0 +1,367 @@ +--- +title: Kutu Modeli +slug: Öğren/CSS/CSS_yapi_taslari/The_box_model +tags: + - Başlangıç + - Beginner + - CSS + - Dolgu + - Eğitim + - Gorüntü + - Kenar payı + - Kutu Modeli + - Learn + - Sınır + - border + - box model + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, CSS Kutu Modeline giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.
+ +

Blok ve satır içi kutular

+ +

CSS'de genel olarak iki tür kutuya sahibiz — blok kutular ve satır içi kurular. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davranacağını ifade etmek için yapılır.

+ +

Bir kutunun türü blok(block) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:

+ + + +

Görüntü türünü satır içi olarak değiştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(block) olan öğelere örnektir.

+ +

Eğer kutunun görüntüleme türü satır içi(inline) olacak şekilde tanımlanmışsa:

+ + + +

Bağlantılar için kullanılan <a>  öğesi, <span>, <em> ve <strong> varsayılan tür olarak satır içi(inline) görüntülenecek öğelere örnektir.

+ +

Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine block ve inline değerleri kullanılır.

+ +

Ayrıca: İç ve dış görüntüleme türleri

+ +

Bu noktada iç ve dış gösterim türlerini de açıklamamız yerinde olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir dış gösterim türüne sahiptir.

+ +

Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir iç gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler normal aşkışta düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).

+ +

Bu özellikler sayesinde, bir öğenin display niteliğine flex değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi display: flex şeklinde tanımlarsak, öğenin dış görünümü block olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü flex olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız Flexbox özelliklerinde belirtilen kurallara göre düzenlenir.

+ +
+

Not: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki Blok ve Satır İçi Düzen'e bir göz at.

+
+ +

CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, flex'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin grid.

+ +

Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi normal akış olarak anılır, çünkü başka bir talimat olmadan, kutularımız varsayılan blok veya satır içi değerlerine göre düzenlenirler.

+ +

Farklı görüntüleme türlerine örnekler

+ +

Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü block olan öğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.

+ +

İkincisi, görüntüleme türü olarak display: flex tanımlanmış bir listemiz var. Bu, ul etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe kadar genişler.

+ +

Bununda altında, içinde iki adet <span> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde inline türüne sahipler, içlerinden bir tanesini .block sınıfına dahil edip görüntü türünü display: block olarak tanımlıyoruz ve inline türüne sahip bir öğe block türüne sahip bir öğe gibi davranmaya başlıyor.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

+ +

Bir sonraki örnekte, inline görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <span> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.

+ +

Bir de <ul> öğemiz var. Bu öğemisin görüntüleme türünü display:inline-flex tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.

+ +

Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü display: inline olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değil de satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlarlar.

+ +

Değiştirin! sizde farklılıkları daha iyi görebilmek için display: inline tanımını display: block ve display: inline-flex tanımını da display: flex olarak değiştirin.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

+ +

İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, display niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpajdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.

+ +

Dersin geri kalanında, dış ekran türüne odaklanacağız.

+ +

CSS kutu modeli nedir?

+ +

CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.

+ +

Bir kutunun parçaları

+ +

Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:

+ + + +

Aşağıdaki şema bu katmanları göstermektedir:

+ +

Diagram of the box model

+ +

Standart CSS kutu modeli

+ +

Standart kutu modelinde, bir kutuya width ve height niteliklerine değer verirsen, bu içeriğin genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.

+ +

Aşağıda bir kutunun modelini tanımlayan width, height, margin, border, ve padding niteliklerini CSS kodu bulunmakta:

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

Not: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.

+
+ +

Alternatif CSS kutu modeli

+ +

Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, kutunun genişlik  ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanının genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)

+ +

Showing the size of the box when the alternate box model is being used.

+ +

Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için  box-sizing: border-box tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.

+ +
.box {
+  box-sizing: border-box;
+}
+ +

Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan box-sizing özelliğini <html> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmen için,CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a bakın.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

Not: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizması mevcut değildi.

+
+ +

Kutu modelleriyle oynamak

+ +

Aşağıda iki kutu görüyorsun. Bu kutular aynı .box sınıfına dahiller ve bu sınıf ikisinede aynı  width, height, margin, border, ve padding özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.

+ +

İkinci kutunun boyutunu(.alternate sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

+ +
+

Not: Burada, bu görev için bir çözüm bulabilirsin..

+
+ +

Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın

+ +

Tarayıcı geliştirme araçlarıyla(developer tools) kutu modelini daha rahat anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin harika bir yoludur.

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

Kenar boşluğu, dolgu ve kenarlıklar

+ +

Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler kısayollardır ve kutunun dört kenarını da aynı anda ayarlamana olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.

+ +

Şimdi bu nitelikleri daha detaylı inceleyelim.

+ +

Kenar boşluğu(margin)

+ +

Kenar boşluğu, kutunun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kutunun bir tarafına, negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.

+ +

{{cssxref("margin")}} niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsin:

+ + + +

Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

+ +

Kenar boşluğunun daralması

+ +

Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer, sayısal değeri büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.

+ +

Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta margin-bottom: 50px olarak tanımlanmış. İkinci paragraf ise margin-top: 30px olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan 50px kadar boşluk oluşmuştur.

+ +

margin-top niteliğine 0 değerini atayarakta bunu test edebilirsin. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan bottom-margin: 50px değeri korunur. Eğer margin-top: -10px olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

+ +

Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, kenar boşluğu daraltmayla ilgili sayfaya bakın. Şimdilik hatırlaman gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, muhtemelen olan budur.

+ +
+

Not: Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.

+
+ +

Kenarlık

+ +

Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun width ve heigh niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmını küçültür.

+ +

Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğin stil, renk ve genişlik özellikleri vardır.

+ +

{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.

+ +

Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:

+ + + +

Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:

+ + + +

Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:

+ + + +

Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğin farklı kenarlık stilleri hakkında bilgi verir.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

+ +

Dolgu

+ +

Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğene uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.

+ +

{{cssxref("padding")}} niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.

+ + + +

Aşağıdaki örnekte bulunan .box sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebilirsin.

+ +

Ayrıca .container sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılmasını sağlar.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

+ +

Kutu modeli ve satır içi kutular

+ +

Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <span> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.

+ +

Aşağıdaki örnekte, paragraf içerisinde bir adet <span> var. Bu satır içi kutuya width, height, margin, border, ve padding uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsin. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

+ +
+

Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.

+
+ +

display: inline-block kullanımı

+ +

display niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.

+ +

display: inline-block bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:

+ + + +

Bunlarla birlikte, yeni bir satıra bölünmez ve sadece,  width ve height nitelikleri belirtilirse içeriğinden daha büyük hale gelir.

+ +

Bu sonraki örnekte, <span> öğesine eklediğimiz display: inline-block  komutunu display: block olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

+ +

Bunun yararının görülebileceği bir örnek vermek gerekirse; padding uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <a> öğesi <span> gibi bir satır içi öğesidir ve padding istediğimiz gibi davranmayacaktır. Bunun için, display: inline-block tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.

+ +

Bunu gezinme çubuklarında oldukça sık görüyorsun. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <a> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğin gibi dolgu, <ul> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <a>'nın bir satır içi öğe olmasıdır.

+ +

.links-list a seçicisine display: inline-block kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

+ +

Becerilerini test et!

+ +

Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — Becerilerini test et: Kutu Modeli.

+ +

Özet

+ +

Kutu modeli hakkında bilmen gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığında kafan karışırsa, bu derse geri dönmek isteyebilirisn.

+ +

Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için arka planların ve kenarlıkların nasıl kullanılabileceğine bir göz atacağız.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_and_units/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_and_units/index.html" new file mode 100644 index 0000000000..9d42ba1317 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_and_units/index.html" @@ -0,0 +1,414 @@ +--- +title: CSS değerleri ve birimleri +slug: Öğren/CSS/CSS_yapi_taslari/Values_and_units +tags: + - Acemi + - Beginner + - CSS + - Durum + - Eğitim + - Function + - Image + - Learn + - Number + - Position + - Renk + - Resim + - birimler + - color + - değerler + - fonksiyon + - length + - numara + - percentage + - units + - uzunluk + - values + - yüzde +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek
+ +

CSS değeri nedir?

+ +

CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <color> veya <length> gibi. <color>  veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <color> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.

+ +
+

Note: Veri türleri olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.

+
+ +
+

Note: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <color> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.

+
+ +

Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi rgb() fonksiyonunu kullanarak ayarladık:

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <color> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, rgb() fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <color> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <color> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).

+ +

Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.

+ +

Sayılar, uzunluklar ve yüzdeler

+ +

CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Veri tipiAçıklama
<integer><integer> bir tamsayıyı temsil eder, 1024 veya -55 gibi.
<number><number> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, 0.255, 128 veya -1.2.
<dimension> <dimension> bir birime bağlı olan <number> tipinde bir sayıdır. Örn., 45deg, 5s, or 10px. <dimension>; <length>, <angle>, <time>, ve <resolution> değer türlerini içeren bir kapsayıcı kategoridir.
<percentage><percentage> başka bir değerin bir kısmını temsil eder. Örn., 50%. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.
+ +

Uzunluklar

+ +

En sık karşılaşacağın sayısal tür <length>'dir. Örn. 10px (pixels) veya 30em. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.

+ +

Mutlak uzunluk birimleri

+ +

Aşağıdakilerin tümü mutlak uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BirimİsimEşittir
cmSantimetre1cm = 96px/2.54
mmMilimetre1mm = 1/10th of 1cm
QÇeyrek milimetre1Q = 1/40th of 1cm
inİnç1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoint1pt = 1/72th of 1in
pxPiksel1px = 1/96th of 1in
+ +

Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekrandacm(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer px(piksel)'dir.

+ +

Bağıl uzunluk birimleri

+ +

Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BirimBağıl
emÖğenin veya ebeveyninin yazı tipi boyutuna.
exmevcut yazı tipinin x harfinin yüksekliğine.
chÖğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).
remKök(root) öğenin yazı tipi boyutu.
lhÖğenin satır yüksekliği.
vwGörüntü alanı genişliğinin %1'i.
vhGörüntü alanı yüksekliğinin %1'i.
vminGörüntü alanında küçük olan değerin %1'i.
vmaxGörüntü alanının büyük olan değerin %1!i
+ +

Bir örnekle keşfedelim

+ +

Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun {{cssxref("width")}} niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.

+ +

İkinci kutu, vw(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <iframe> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir.

+ +

Üçücü kutu em birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. .wrapper sınıfının yazı tipi boyutunu 1em olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems ve rems

+ +

em ve rem kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de stil metni veya CSS düzeni gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.

+ +

HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir ems sınıfına ve ikicinin bir rems sınıfına sahip olmasıdır.

+ +

Başlangıç olarak, <html> öğenin yazı tipi boyutu olarak 16px ayarladık.

+ +

Özetlemek gerekirse, tipografi durumunda em birimi "ana öğenin yazı tipi boyutu" anlamına gelir. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri ems sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu 1.3em'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.

+ +

Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını rems sınıfındaki rem tanımından dolayı kök öğenin<html> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.

+ +

Bununla birlikte, <html> öğesinin font-size niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem rem, hemde em buyutlu metinler.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Yüzdeler

+ +

Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi font-size yüzde olarak ayarlarsan, bu öğenin üst öğesinin font-size nitelik değerinin bir yüzdesi olacaktır. Bir width değer için yüzde kullanırsan, üst öğenin width nitelik değerinin yüzdesi olacaktır.

+ +

Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.

+ +

Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!

+ +

Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <li> öğesinin font-size nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <length-percentage>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <length> içeriyorsa, yüzde kullanmak mümkün değildir.

+ +

Sayılar

+ +

Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, opacity bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik 0(tamamen şeffaf) ve 1(şeffaflık yok) arasında bir sayıyı kabul eder.

+ +

Aşağıdaki örnekte, opacity değerini değiştirmeyi deneyin. 0 ve 1 arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Not:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine alınmamalıdır.

+
+ +

Renk

+ +

CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.

+ +

Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.

+ +
+

Not: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.

+
+ +

Anahtar kelime renkleri

+ +

Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <color> değer türü için sayfada tam bir liste görebilirsin.

+ +

Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.

+ +

Onaltılık RGB değerleri

+ +

Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani 0123456789abcdef. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).

+ +

Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.

+ +

RGB ve RGBA deperleri

+ +

Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — rgb(). onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.

+ +

RGB renklerini kullanmak için son örneğimizi yeniden yazalım:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri 0 olarak ayarlarsan rengi tamamen şeffaf hale getirir, 1 olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.

+ +
+

Not:  Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız {{cssxref("opacity")}} niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.

+
+ +

Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin.

+ +
+

Not: rgba() ile rgb()  ve hsl() ile hsla()(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem rgba(), hemde rgb() ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin rgba() fonksiyonunu rgb() olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.

+
+ +

HSL ve HSLA değeri

+ +

RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. hsl() fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:

+ + + +

HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!

+ +

Görüntüler

+ +

<image> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir url() fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.

+ +

Aşağıdaki örnekte, CSS background-image niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Not: <image> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <image> sayfasına bakabilirsin.

+
+ +

Konum

+ +

<position> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(background-position üzerinden) için kullanılan bir değerdir. Değer türü, top, left, bottom, right, ve center gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.

+ +

Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: center.

+ +

Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.

+ +

Dizeler ve tanımlayıcılar

+ +

Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <color> değer türünde kullandığımız red, black, rebeccapurple, ve goldenrod  anahtar kelimeleri gibi). Bu anahtar kelimeler, tanımlayıcılar olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, alıntı yapılmaz — dizeler olarak değerlendirilmezler.

+ +

CSS'de dizeleri kullandığımız yerler de var. örneğin oluşturulan içeriği belirtirken. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte alıntılanmamış renk anahtar sözcükleri kullanıyoruz.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Fonksiyonlar

+ +

Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — rgb(), hsl() ve bir dosyadan görüntüyü döndürmek için kullanılan url() gibi.

+ +

calc() geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.

+ +

Örneğin, aşağıda calc() fonksiyonunu kutunun genişliğini %20 + 100px yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. .wrapper sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden calc() fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Becerilerini test et!

+ +

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Değerler ve birimler.

+ +

Özet

+ +

Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. CSS Değerleri ve birimleri referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.

+ +

Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.

+ +

Örneğin <image>  bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de elemanların boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'ini düzenleme
    13. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_tasks/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_tasks/index.html" new file mode 100644 index 0000000000..138fd5a290 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/values_tasks/index.html" @@ -0,0 +1,97 @@ +--- +title: 'Becerilerinizi test edin: değerler ve birimler' +slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks +tags: + - Acemi + - Beginner + - CSS + - Example + - Örnek +translation_of: Learn/CSS/Building_blocks/Values_tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevin amacı, CSS Değerleri ve Birimleri dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

+
+ +

Birinci Görev

+ +

bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.

+ + + +

Onaltılık renk için dönüşümleri Bu bağlantıda bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.

+ +

Four list items. The first three with the same background color and the last with a lighter background.

+ +

Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

İkinci görev

+ +

Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.

+ + + +

Some text at varying sizes.

+ +

Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Üçüncü görev

+ +

Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.

+ +

A stat centered horizontally in a box and a short distance from the top of the box.

+ +

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git "a/files/tr/\303\266\304\237ren/css/css_yapi_taslari/writing_modes_tasks/index.html" "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/writing_modes_tasks/index.html" new file mode 100644 index 0000000000..a28339307f --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/css_yapi_taslari/writing_modes_tasks/index.html" @@ -0,0 +1,82 @@ +--- +title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler' +slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks +tags: + - Başlangıç + - Beginner + - CSS +translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevin amacı, Yazma Modları ve Mantıksal özellikler konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır. Bu görevleri tamamlamak için bilmeniz gerekenler, Farklı metin yönlerini kullanma dersinde ele alınmaktadır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

+
+ +

1. Görev

+ +

Örnekteki kutu, yatay bir yazma modu ile görüntülenir. Sağdan sola dikey yazma modunu kullanması için CSS satırı ekleyebilir misiniz? Öreneğiniz aşağıdaki resme benzemelidir.

+ +

A box with a vertical writing mode

+ +

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

2. Görev

+ +

Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için width ve height nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.

+ +

Two boxes one horizontal the other vertical

+ +

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

3. Görev

+ +

Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için top, left, bottom ve right yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.

+ +

Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.

+ +

Two boxes one horizontal one vertical with different margin, border and padding

+ +

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}

+ +
+

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nasil_calisir/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nasil_calisir/index.html" new file mode 100644 index 0000000000..c2cb95aa43 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nasil_calisir/index.html" @@ -0,0 +1,157 @@ +--- +title: CSS nasıl çalışır +slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir +tags: + - Başlangıç + - Beginner + - CSS + - DOM + - Eğitim + - Learn +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağız.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.)
Amaç:CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.
+ +

CSS gerçekten nasıl çalışır?

+ +

Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.

+ +
    +
  1. Tarayici HTML'yi yükler(Örn. onu ağdan alır).
    2. +
  2. {{Glossary("HTML")}}'yi bir  {{Glossary("DOM")}}'a (Belge Nesnesi Modeli) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.
    3. +
  3. Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.
    4. +
  4. Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).
    5. +
  5. Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.
    6. +
  6. Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).
    7. +
+ +

Aşağıdaki şema, işlemin basit bir görünümünü sunar.

+ +

+ +

DOM hakkında

+ +

DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir {{Glossary("Node/DOM","DOM düğümü")}} haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.

+ +

DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.

+ +

Gerçek bir DOM örneği

+ +

Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.

+ +

Aşağıdaki HTML kodunu ele alalım:

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+ +

DOM'da, <p> nesnemize karşılık gelen düğüm(P) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <span> öğemize karşılık gelen (SPAN) düğümüdür. SPAN Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.

+ +
P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+ +

Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :

+ +

{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}

+ + + +

DOM'a CSS uygulama

+ +

Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+ +

Diyelimki ona aşağıdaki CSS'i uyguladık:

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir span seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <span> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.

+ +

Güncellenen çıktı aşağıdaki gibidir:

+ +

{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}

+ +

Bir sonraki kısımdaki CSS Hata Ayıklama dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.

+ +

Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?

+ +

Daha önceki bir derste tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.

+ +

Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!

+ +

Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.

+ +
+
<p> I want this text to be large, bold and blue.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.

+ +

Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar calc() fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (width: 500px), sonrada calc(100% - 50px) fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, calc() fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta calc() fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.

+ +

Ve sonunda

+ +

Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede  öğrendiklerini uygulacak ve bu süreçte bazı CSS'leri test edeceksin.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Bu kısımda

+ +
    +
  1. CSS Nedir?
    2. +
  2. CSS'e başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır
    5. +
  5. Öğrendiklerini uygula
    6. +
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nedir/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nedir/index.html" new file mode 100644 index 0000000000..8433d2e196 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/css_nedir/index.html" @@ -0,0 +1,136 @@ +--- +title: CSS Nedir? +slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir +tags: + - Beginner + - CSS + - CSS Giriş + - Introduction to CSS + - Learn + - Modules + - Modüller + - Ogrenim + - Ozellikler + - Sozdizimi + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{Glossary("CSS")}}(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.

+ + + + + + + + + + + + +
Ön Koşullar:Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, HTML'ye Giriş  konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.
Amaç:CSS'in ne olduğunu öğrenmek
+ +

HTML'ye Giriş kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar,  sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.

+ +

The default styles used by a browser

+ +

Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.

+ +

Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.

+ +

{{EmbedYouTube("spK_S0HfzFw")}}

+ +

CSS ne içindir?

+ +

Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.

+ +

Bir belge genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — HTML en yaygın biçimlendirme dilidir, ancak SVG veya XML gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.

+ +

Bir dökümanı bir kullanıcıya sunmak, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. Tarayıcılar, sevdiğim Firefox, Chrome veya Edge, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.

+ +
+

Note: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.

+
+ +

CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların rengi ve boyutunu değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; tek bir metin sütununu bir düzene dönüştürmek. Animasyon gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.

+ +

CSS sözdizimi

+ +

CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".

+ +

Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini seçer. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.

+ +

Daha sonra bir dizi süslü parantezimiz { }var. Bunların içinde, nitelik ve değer  çifti biçimini alan bir veya daha fazla beyan olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.

+ +

İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen color niteliğine sahibiz. Ayrıca font-size niteliğinede sahibiz. Bu nitelik, çeşitli boyut birimlerini değer olarak alabilir. Fakat color niteliğine biri uzunluk birimi atamana izin verilmez.

+ +

Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.

+ +
+

Not: MDN CSS referans'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn css-feature-name" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!

+
+ +

CSS modülleri

+ +

CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için Arka Palanlar ve Kenarlıklar modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).

+ +

Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.

+ +

Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak background-color ve border-color nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!

+ +

CSS özellikleri

+ +

Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), Standardizasyon konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.

+ +

CSS'de farklı değildir — W3C içindeki CSS Working Group adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, davetli uzmanlar olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.

+ +

Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.

+ +

CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.

+ +

Tarayıcı desteği

+ +

CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. CSS Nasıl Çalışır dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.

+ +

Aşağıda, CSS  font-family niteliği için destek tablosu yer almaktadır.

+ +

{{Compat("css.properties.font-family")}}

+ +

Sırada ne var?

+ +

Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin CSS ile Başlarken bölümüne geçebiliriz.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

Bu kısımda

+ +
    +
  1. CSS nedir?
    2. +
  2. CSS'ye başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır
    5. +
  5. Öğrendiklerimizi uygulamak
    6. +
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/getting_started/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/getting_started/index.html" new file mode 100644 index 0000000000..b3d18a095a --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/getting_started/index.html" @@ -0,0 +1,272 @@ +--- +title: CSS'e başlarken +slug: Öğren/CSS/Ilk_adimlar/Getting_started +tags: + - Acemi + - Beginner + - CSS + - Classes + - Durum + - Elements + - Example + - Learn + - Ogeler + - Ornekler + - Selectors + - Sozdizimi + - Syntax + - Sınıflar + - oğrenin + - seçiciler + - state +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü incele)
Amaç:Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.
+ +

HTML ile başlayalım

+ +

Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha iyi olacaktır). Aşağıdaki kodu dosya adı index.html olacak şekilde bir klasöre kaydedin.

+ +
<!doctype html>
+<html lang="tr">
+<head>
+    <meta charset="utf-8">
+    <title>CSS'ye başlarken</title>
+</head>
+
+<body>
+
+    <h1>Ben birinci seviye bir başlığım</h1>
+
+    <p>Bu bir paragraf metnidir. Metinde bir <span>span etiketi</span>
+ve ayrıca bir <a href="http://example.com">bağlantı</a> var.</p>
+
+    <p>Bu ikinci paragraftır. <em>vurgulanan</em> bir metin içerir.</p>
+
+    <ul>
+        <li>Öğe bir</li>
+        <li>Öğe iki</li>
+        <li>Öğe <em>üç</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Not: Bunu bir cihazda veya kolayca dosya oluşturamadığın bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.

+
+ +

Belgene CSS eklemek

+ +

Yapman gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağın bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — CSS'i belgemizin başından bağlamak.

+ +

HTML belgenle aynı klasörde adı styles.css bir dosya oluşturun. .css dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.

+ +

index.html belgesindeki {{htmlelement("head")}} etiketinin içinde styles.css dosyasına bağlantı oluşturmak için:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Bu {{htmlelement("link")}} etiketi tarayıcıya,  rel niteliği ile bu dosyanın bir stil sayfası olduğunu ve href niteliğiylede dosyanın bulunduğu konumu söyler. styles.css dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.

+ +
h1 {
+  color: red;
+}
+ +

HTML ve CSS dosyalarını kaydedin ve index.html dosyasını bir web tarayıcısında yükle. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladın. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.

+ +

styles.css yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyiciyi kullanabilirsin. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk paneldeki CSS'i HTML belgesine bağlıymış gibi davranır.

+ +

HTML öğelerini şekillendirme

+ +

Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir öğe seçiciyle yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için p seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:

+ +
p {
+  color: green;
+}
+ +

seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:

+ +
p, li {
+    color: green;
+}
+ +

Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Öğelerin varsayılan davranışlarını değiştirme

+ +

İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.

+ +

Ancak, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <ul> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.

+ +
li {
+  list-style-type: none;
+}
+ +

Örneği CSS'e ekleme.

+ +

list-style-type niteliğinin desteklediği değerleri görmek için MDN içerisindeki list-style-type sayfasına bakabilirsin. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksın ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. 

+ +

Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — square değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.

+ +

Bir sınıf eklemek

+ +

Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.

+ +

HTML belgende, ikinci liste(<ul>) öğeni bir sınıf etiketi ekle. Listeni oluşturan kodlar artık böyle gözükmeli:

+ +
<ul>
+  <li>Öğe bir</li>
+  <li class="special">Öğe iki</li>
+  <li>Öğe <em>üç</em></li>
+</ul>
+ +

CSS'nde nokta ile başlayan special seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Sonucun ne olduğunu görmek için kaydedin ve yenile.

+ +

special sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <span> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin class niteliğine special değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.

+ +

Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Bu sözdizimi, "special sınıfana dahil bir li öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <span> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.

+ +

Belgedeki konumlarına göre öğeleri şekillendirme

+ +

Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <em> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <li> öğesinin içerisine yerleştirilen <em> öğesini seçmek için, diğer  seçiciyle arasına boşluk karakterini koyarak, soy birleştirici adı verilen bir seçici kullanabilirim.

+ +

Aşağıdaki kuralı stil sayfana ekle.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Bu seçici <li> içindeki (soyundan gelen) <em> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <em> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. 

+ +

Denemek isteyebileceğin başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektir. Bunu yapmak için seçiciler arasına bir + (Komşu kardeş birleştirici) yerleştirin.

+ +

Bu kuralı stil sayfana eklemeyi dene:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <span> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Not: Gördünüz gibi, CSS bize öğeleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Konumuzun ilerleyen bölümlerinde Seçiciler dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.

+
+ +

Öğeleri durumuna göre şekillendirme

+ +

Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <a> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.

+ +
a:hover {
+  text-decoration: none;
+}
+ +

Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini kalın yapabilir misin?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.

+ +
+

Not: Bu derslerde ve MDN genelinde erişilebilirlilikten sık sık bahsedildiğini göreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.

+ +

Ziyaretcin, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler, ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.

+ +

Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığında onu daha az erişilebilir hale getirmemen önemlidir.

+
+ +

Seçicileri ve birleştiricileri birleştirmek

+ +

Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:

+ +
/* <article> içinde bulunan <p>'nin içndeki <span> seçer  */
+article p span { ... }
+
+/* <h1>'den sonra gelen <ul>'den sonraki <p>'yi seçer.  */
+h1 + ul + p { ... }
+ +

Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Bu kural, <body> öğesinin içerisinde bulunan <h1> öğesinden sonra ilk gelen special sınıfına dahil <p> öğesini seçer. Vay be!

+ +

Orjinal HTML'de şekil verilmeyen tek öğe <span class="special">dir.

+ +

Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.

+ +

Özet

+ +

Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.

+ +

Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

Bu kısımda

+ +
    +
  1. CSS Nedir?
    2. +
  2. CSS'e başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır?
    5. +
  5. Öğrendiklerimizi uygulamak
    6. +
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/how_css_is_structured/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/how_css_is_structured/index.html" new file mode 100644 index 0000000000..4a40f8481d --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/how_css_is_structured/index.html" @@ -0,0 +1,551 @@ +--- +title: CSS nasıl yapılandırılır +slug: Öğren/CSS/Ilk_adimlar/How_CSS_is_structured +tags: + - Acemi + - Beginner + - CSS + - HTML + - Learn + - Ogrenim + - Ozellikler + - Selectors + - Structure + - Yapı + - beyaz boşluk + - comments + - değerler + - kısaltmalar + - nitelikler + - properties + - seçiciler + - shorthand + - values + - whitespace + - yorumlar +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.

+ + + + + + + + + + + + +
Önkoşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler,  HTML temelleri (IHTML'ye Giriş bölümünü incele) ve CSS'in nasıl çalıştığı hakkın bilgi.
Amaç:CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.
+ +

CSS'i HTML'ye uygulama

+ +

İlk olarak, bir belgeye CSS uygulamak için üç yöntemi inceleyelim: harici bir stil sayfasıyla, dahili bir stil sayfasıyla ve satır içi stillerle.

+ +

Harici stil sayfası

+ +

Harici bir stil sayfası, .css uzantısına sahip, içerisinde CSS kurallarını içeren ayrı bir dosyadır. Bu, CSS'i bir HTML belgesine getirmenin en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayarak hepsini aynı CSS stil sayfasıyla şekillendirebilirsin. CSS'e Başlarken bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.

+ +

Bir HTML <link> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS deneyimim</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Merhaba Dünya!</h1>
+    <p>Bu benim ilk CSS örneğim</p>
+  </body>
+</html>
+ +

CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

{{htmlelement("link")}} etiketi href niteliğinde belirtilen yokdaki bir dosyaya işaret ediyor. Yukarıdaki örnekte, CSS dosyası HTML belgesiyle aynı klasördeydi, ancak dosya farklı bir klasöre de yerleştirilip yolu belirtebiliriz. İşte üç tane örnek:

+ +
<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerisinde  -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerindeki 'general' alt klasörünün içinde-->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- CSS dosyası geçerli dizinin bir üst klasöründe bulunan 'styles' klasörünün içinde -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Dahili stil sayfası

+ +

Dahili bir stil sayfası, HTML belgesinin içinde bulur. Dahili bir stil sayfası oluşturmak için, CSS'i  HTML içindeki {{htmlelement("head")}} etiketi içerisinde ki, {{htmlelement("style")}} etiketi içerisinde yetleştirmeliyiz.

+ +

Dahili bir stil sayfasının HTML'si şöyle görünebilir:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS deneyimim</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Merhaba Dünya!</h1>
+    <p>Bu benim ilk CSS örneğim</p>
+  </body>
+</html>
+ +

Bazı durumlarda, dahili stil sayfaları faydalı olabilir. Örneğin, harici CSS dosyalarını değiştirmenin engellendiği bir içerik yönetim sistemiyle çalşıyorsundur.

+ +

Ancak birden fazla sayfası olan siteler için dahili stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak, birden çok sayfaya tek bir CSS stili uygulamak için, stili kullanacak her web sayfaya dahili CSS sayfalarını eklemen gerekmektedir. Verimlilik kaybı site bakımınada yansır, çünkü dahili stil sayfalarında ki CSS içerisinde basit bir stil değişikliğini bile birden çok web sayfasında düzenlemek zorunda kalırsın.

+ +

Satır içi stiller

+ +

Satır içi stiller, bir style niteliği içinde bulunan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şu şekilde görünebilir:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS deneyimim</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Merhaba Dünya!</h1>
+    <p style="color:red;">Benim ilk CSS örneğim</p>
+  </body>
+</html>
+ +

Mümkünse CSS'i bu şekilde kullanmaktan sakının. En iyi uygulamanın tam tersidir. Birincisi, bakım için CSS'in en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden fazla düzenleme gerektirebilir. İkincisi, satır içi CSS kodlarıyla HTML içeriklerini karıştırarak her şeyin okunmasını ve anlaşılmasını zorlaştırır. Kodu ve içeriği ayırmak, web sitesinde çalışan herkes için bakımı kolaylaştırır.

+ +

Satır içi stillerin daha yaygın olduğu birkaç durum vardır. Çalışma ortamın çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurman gerekebilir. Örn; belki bir CMS'n yalnca HTML gövdesini düzenlemene izin verir. Ayrıca, olabildiğince çok e-posta istemcisiyle uyumluluk sağlamak için, e-posta içindeki HTML'de çok sayıda satır içi stil kullanabilirsin.

+ +

CSS ile oynamak

+ +

Aşağıdaki alıştırma için bilgisayarında bir klasör oluşturun. Klasörü istediğin gibi adlandırabilirsin. Klasörün içinde, iki dosya oluşturmak için aşağıdaki metni kopyalayın:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS deneyimim</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Test HTML'ni burada oluşturun</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Create your test CSS here */
+
+p {
+  color: red;
+}
+ +

Denemek ve değişiklik yapmak için hem HTML dosyandaki <body> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.

+ +

Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

Oku ve eğlen!

+ +

Seçiciler

+ +

Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. CSS'e başlarken dersinde çeşitli seçiciler keşfetmiştik. Eğer CSS içeriğe istenildiği gibi uygulanmıyorsa, seçicin istediğin şekilde eşleşmiyor olabilir.

+ +

Her CSS kuralı, tarayıcıya kuralların hangi öğe veya öğelere uygulanması gerektiğini söylemek için bir seçici veya seçici listesi ile başlar. Aşağıdaki tüm örnekler geçerli seçicilerdir.

+ +
h1                   /*seçici*/
+a:link               /*seçici*/
+.manythings          /*seçici*/
+#onething            /*seçici*/
+*                    /*genel seçici*/
+.box p               /*seçici*/
+.box p:first-child   /*seçici*/
+h1, h2, .intro       /*seçici listesi*/
+ +

Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı dene. Seçiciler tarafından şekillendirilecek HTML öğeleri ekle. Yukarıdaki sözdiziminden herhangi birine aşina değilsen, MDN'yi aramayı dene.

+ +
+

Not: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini CSS seçicileri.

+
+ +

Özgüllük

+ +

İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <p> metnini maviye ayarlayan ayrıca tanımlandığı öğenin rengini kırmızıya ayarlayan bir sınıf kuralı olan stil sayfasını düşünün

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

HTML belgemizde de bir special sınıfına ait paragrafımız olduğunu varsayalım. Her iki kural da uygulanır. Fakat hangi kural baskındır? Mavi veya kırmızı paragraf menini görmeyi bekliyor musun?

+ +
<p class="special">Benim rengim nedir?</p>
+ +

CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara art arda denetim ve özgüllük denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <p> paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini mavi olarak ayarlayan bildirimin diğer bildirimden daha sonra tanımlanmış olması. Seçimlerin çakışması durumunda sonraki stiller, kendilerinden önce tanımlanmış stil kurallarını geçersiz kılıp yerlerine geçerler. Bu art arda denetim kuralıdır.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Bununla birlikte, sınıf seçicisi ile öğe seçicisi arasındaki çakışmaya sahip bir önceki örneğimizde, sınıf seçici kırmızı paragraf metnini oluşturarak baskın seçici olduğunu kanıtlar. Peki çakışan bir stil daha sonraki satırlada görünen bir seçiçiye nasıl baskın olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha karakteristik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.

+ +

Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından p.special kuralının p{....} kuralına baskın geldiğini izle.

+ +

Özgüllük ve art arda denetim kuralları ilk bakışta karmaşık görünebilir. CSS'e aşına oldukça bu kuralları anlamak daha kolay olcak. Bir sonraki kısımda Ard arda denetim ve miras bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.

+ +

Şimdilik, özgüllüğün var olduğunu unutmayın. Bazen, stil sayfasındaki başka bir şeyin daha karakteristik olması nedeniyle CSS beklediğin gibi uygulanmayabilir. Bir öğeye birden fazla kuralın uygulanabileceğini anlamak, bu tür sorunları çözmenin ilk adımıdır.

+ +

Nitelikler ve değerler

+ +

En basit düzeyinde, CSS iki bileşenden oluşur:

+ + + +

Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı color ve değeri blue.

+ +

A declaration highlighted in the CSS

+ +

Bir nitelik bir değerle eşleştirildiğinde, bu eşlemeye CSS bildirimi adı verilir. CSS bildirimleri CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte, vurgulanan CSS bildirim bloğunu tanımlar.

+ +

A highlighted declaration block

+ +

Son olarak, CSS kural kümeleri(veya CSS kuralları) oluşturmak için CSS bildirim blokları seçicilerle eşleştirilir. Aşağıdaki örnekte iki kural içerir: biri <p> etiketi için, diğeri <h1> etiketi için. Renkli vurgulanan CSS kuralı <h1> etiketinin stilini tanımlar.

+ +

The rule for h1 highlighted

+ +

CSS niteliklerini belirli değerlere ayarlamak, bir belge için düzen ve stil tanımlamanın birincil yoludur. CSS motoru, bir sayfanın her öğesi için hangi bildirimlerin geçerli olduğunu hesaplar.

+ +
+

Önemli: CSS nitelikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çifteki nitelik ve değer iki nokta üst üste ile ayrılır. (:)

+
+ +

Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın:

+ + + +
+

Önemli: Bir nitelik bilinmiyorsa veya belirli bir nitelik için bir değer geçerli değilse, beyan geçersiz olarak işlenir. Tarayıcının CSS motoru tarafından tamamem yok sayılır.

+
+ +
+

Önemli: CSS'de (ve diğer web standartlarında), dil varyasyonunun veya belirsizliğin olduğu yerlerde ABD yazımının standart olduğu kabul edilmiştir. 

+
+ +

Fonksiyonlar

+ +

Değerlerin çoğu nispeten basit anahtar kelimeler veya sayısal değerler olsa da, bir işlev biçimini alan bazı değerler vardır. calc() fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.

+ +
+
<div class="outer"><div class="box">İç kutu genişliği 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

Bu şu şekilde çalışır:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. calc() yukarıdaki örnekte, kutunun genişliğini değerler içeren blok genişliğinin %90 eksi 30piksel olmasını tanımlar. Hesaplamanın sonucu, önceden hesaplanabilen ve sabit bir değer olarak girilebilen  değer değildir.

+ +

Başka bir örnek {{cssxref("transform")}} niteliği,  rotate()fonksiyonundan dönen değerleri alabilir.

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

Yukarıdaki kodun çıktısı şuna benzer:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın:

+ + + +

@rules(kurallar)

+ +

CSS @rules ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları @rules sadece bir anahtar ve bir değerden ibarettir. Örn; @import bir stil sayfasını başka bir CSS stil sayfasına aktarır:

+ +
@import 'styles2.css';
+ +

Karşılaşabileceğin en yaygın @rule kurallarından birtanesi @media, medya sorguları oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.

+ +

Aşağıdaki örnekte, stil sayfası <body> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Eğitimler boyunda diğer @rules kurallarıyla karılaşacaksın.

+ +

Görünüm genişliğine göre stilleri değiştiren bir ortam sorgusu ekleyip ekeleyemeceğini görün. Sonucu görmek için tarayıcı pencerenin genişliğini değiştirin.

+ +

Kısaltmalar

+ +

{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ve {{cssxref("margin")}} gibi bazı niteliklere kısaltmalar denir. Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.

+ +

Örneğin, bu tek satırlık kod:

+ +
/* dolgu ve kenar boşluğu gibi 4 ayrı değer uygulanır.
+   Sırasıyla üst, sağ, alt, sol (üsten başlayarak saat
+   yönünde). Ayrıca kısaltma olarak kullanılan başka
+   niteliklerde vardır.*/
+padding: 10px 15px 15px 5px;
+ +

şu dört kod satırına eşdeğerdir:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Bu tek satır:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Şu beş satıra eşdeğerdir:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-attachment: fixed;
+ +

Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin CSS referensı sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.

+ +

Nasıl çalıştığına daha iyi aşina olmak için kendi CSS alıştırmanda yukarıdaki bildirimleri kullanmayı dene. Ayrıca farklı değerleri deneyebilirsin.

+ +
+

Uyarı: CSS kısaltmasını kullanmanın dikkat edilmesi gekeren yönü, atlanan değerlerin sıfırlanmasıdır. CSS kısaltmasında belirtilmeyen bir değer, tarayacının varsayılan değerine geri döner. Bu da,  önceden ayarlanmış değeri geçersiz kılabileceği anlamına gelir.

+
+ +

Açıklamalar

+ +

Herhangi bir kodlama çalışmasında olduğu gibi, CSS ile birlikte açıklama yazmak iyi bir uygulamadır. Bu, daha sonra düzeltmeler veya geliştirmeler için geri döndüğünde kodun nasıl çalıştığını hatırlamana yardımcı olur. Ayrıca başkalarının da kodu anlamasına yardımcı olur.

+ +

CSS açıklamaları /* ile başlar ve */ ile biter. Aşağıdaki örnekteki açıklamalar, kodun farklı bölümlerinin başlangıcını işaret etmektedir. Bu, kod tanımlamasında büyüdükçe gezinmeye yardımcı olur. Bu tür açıklamalar yerinde olduğunda, kod düzenleyicinde açıklama aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.

+ +
/* Temel öğe elamanını biçimlendirin. */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Genel yazı tipi boyutunu özel olarak inceleyelim. Büyük ekran
+     veya pencerede daha iyi okunabilirlilik için yazı tipi
+     boyutunu arttırıyoruz. */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* DOM'da yuvalanmış belili öğeleri biçimlendirin  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, .special sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

CSS'ne açıklamalar ekle!

+ +

Beyaz boşluk

+ +

Beyaz boşluk; gerçek boşluklar, sekmeler ve yeni satırlar(Enter) anlamına gelir. Tarayıcıların HTML'deki beyaz boşluğu yok sayması gibi, tarayıcılar da CSS içindeki beyaz boşluğu yok sayar. Beyaz boşluklar okunabilirliliği nasıl geliştirdiklerini görebilirsin.

+ +

Aşağıdaki örnekte, her bildirim (Kural bağlangıcı ve bitişi) kendi satırına sahiptir. Bu da CSS yazmanın iyi bir yolur. CSS'i okumayı ve anlamayı kolaylaştırır.

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

Aşağıdaki örnek, yukarıdaki CSS kodunun sıkıştırılmış(fazlalık boşlukların temizlenmiş) halidir. Yukarıdaki örnekle aynı işi yapmaktadır fakat okunurluluğu oldukça zordur.

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+/*Ve hatta*/
+body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;}
+
+ +

Kendi projelerin için, kodunu kişisel tercihine göre biçimlendireceksin. Takım projeleri için, bir takımın veya projenin kendi stil rehberi olduğunu göreceğin çalışmalarında olacaktır.

+ +
+

Önemli: CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, nitelik adlarında hiçbir zaman boşluk olmaz.

+
+ +

Örneğin, bu geçerli bir CSS beyanıdır:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Fakat bu beyanlar geçersizdir:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

Aralık hatalarını görüyor musun? ilk olarak margin niteliği 0auto değerini geçerli bir değer olarak tanımaz. Tanımın 0auto yu iki ayrı değer olarak alması amaçlanmıştır. 0 ve auot olarak. İkinci padding- geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (padding-left) hatalı bir boşlukla ayrılmıştır.
+
+ Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığından emin olmalısın. Nitelik adlarını ve nitelik değerlerini, bölünmüş tek dizeler olarak bir arada tutun.

+ +
/* bölünmüş tek dizeler */
+margin: 0 auto; /*tek dize*/
+padding-left: 10px; /*tek dize*/
+
+/* aşağıdaki kodlar çalışır fakat okuması zor*/
+margin:
+0
+auot;
+padding-left:
+10px;
+
+ +

Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.

+ +

Sıradaki ne?

+ +

Tarayıcının bir web sayfasını görüntülemek için HTML ve CSS'i nasıl kullandığını anlamak faydalıdır. Sonraki makale CSS nasıl çalışır, bunu açıklar.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Bu kısımda

+ +
    +
  1. CSS nedir?
    2. +
  2. CSS'e başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır
    5. +
  5. Öğrendiklerini uygulama
    6. +
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/index.html" new file mode 100644 index 0000000000..eca80e4e76 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/index.html" @@ -0,0 +1,64 @@ +--- +title: CSS'e ilk adım +slug: Öğren/CSS/Ilk_adimlar +tags: + - Acemi + - Beginner + - CSS + - Landing + - Learn + - Modul + - Module + - first steps + - İlk Adım +translation_of: Learn/CSS/First_steps +--- +
{{LearnSidebar}}
+ +

CSS (Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn., içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek; birden çok sütuna bölmek, animasyonlar ve diğer dekoratif özellikler eklemek gibi. Bu bölüm, nasıl çalıştığını, söz diziminin neye benzediğini ve bunu HTML'ye, stil ekelemek için nasıl kullanmaya başlayabileceğinle ilgili, temel bilgilerle CSS uzmanlığına doğru giden yolunda yumuşak bir başlangıç sağlar.

+ +
+

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

+ +

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

+ +

Başla

+
+ +

Önkoşullar

+ +

Bu bölüme başlamadan önce sağlama gereken koşullar şunlardır:

+ +
    +
  1. Bilgisayarları ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın.
    2. +
  2. Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem, Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olmalısın.
    3. +
  3. HTML'ye Giriş  konusunda anlatıldığı gibi temel HTML bilgisi sahibi olmalısın.
    4. +
+ +
+

Not: Kendi dosyalarını oluşturma yeteneğin olmayan bir bilgisayar, tablet veya başka bir cihaz üzerinde çalışıyorsan, JSBin veya Glitch gibi çevrimiçi kodlama yapabileceğin bir sitede kod örneklerini(çoğunu) deneyebilirsin.

+
+ +

Bölümler

+ +

Bu eğitim serisi, sizi tüm temel CSS teorilerine götürecek ve bazı becerileri test etmen için fırsatlar sunacak bölümleri içerir.

+ +
+
CSS nedir?
+
CSS (Basamaklı stil sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, fakat kaputun altında nasıl çalışır? Bu bölümde, basit bir sözdizimi örneğiyle CSS'in ne olduğunu ve dil hakkındaki bazı temel terimleri açıklayacağız.
+
CSS'e başlarken
+
Bu Yazıda basit bir HTML belgesini alıp ona CSS uygulayacağız, bu sırada dil hakkında bazı pratik bilgiler öğreteceğiz.
+
CSS nasıl yapılandırılır
+
Artık CSS'in ne olduğu ve onu kullanmanın temelleri hakkında bir fikrin olduğuna göre, dilin kendi yapısına biraz daha derinlemesine bakmanın zamanı geldi. Burada tartışılan kavramların çoğuyla zaten tanıştık; daha sonraki kavramları kafa karıştırıcı bulursan, bir özet geçmek için bu bölüme geri dönebilirsin.
+
CSS nasıl çalışır?
+
CSS'in temelerini, ne için olduğunu ve basit stil sayfalarının nasıl yazılacağını öğrendik. Bu  bölümde, bir tarayıcının CSS ve HTML'yi nasıl alıp bir web sayfasına dönüştürdüğüne bir göz atacağız
+
Öğrendiklerini kullanın
+
Son birkaç derste öğrendiğin bilgilerle, basit metin belgelerini CSS kullanarak, onlara kendi stilini eklemek için biçimlendirebileceğini keşfetmelisin. Bu makale size bunu yapma şansı veriyor.
+
+ +

Göz at

+ +
+
Orta Düzey Web Okuryazarlığı 1:CSS'e Giriş
+
CSS'ye giriş bölümünde bahsedilen birçok beceriyi araştıran ve test eden mükemmel bir Mozilla hazırlık kursu. Bir web sayfasında, CSS seçicilerin, niteliklerin ve değerlerin bir HTML sayfasındaki öğelerin stilini belirlemesi hakkında bilgi edinin.
+
diff --git "a/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" new file mode 100644 index 0000000000..3282953c36 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/ilk_adimlar/ogrendiklerinizi_uygulay\304\261n/index.html" @@ -0,0 +1,105 @@ +--- +title: Öğrendiklerini uygula +slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın +tags: + - Acemi + - Başlangıç + - Beginner + - CSS + - Eğitim + - Learn + - Playground + - oyun alanı +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.

+ + + + + + + + + + + + +
Ön Koşul:Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (HTML'ye Giriş).
Amaç:Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.
+ +

Başlangıç noktası

+ +

Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için örnek dosyayı indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: CodePen, jsFiddle, ve Glitch.

+ +
+

Not: Takıldığın noktalarda bizden yardım isteyebilirsin — Değerlendirme ve daha fazlası bölümüne bakabilirsin.

+
+ +

CSS ile çalışmak

+ +

Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.

+ + + +

Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.

+ +

Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.

+ +
    +
  1. CSS color niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(hotpink) yap.
    2. +
  2. Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(dotted) çizgi atın ve rengini mor(purple) yap.
    3. +
  3. 2. düzey başlığı italik yap.
    4. +
  4. ul etikemizin arka plan renk {{cssxref("background-color")}}  değerini #eeeeee yap ve ayrıca mor(purple) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için paddin niteliğine kullan.
    5. +
  5. Linklerin üzerine gelindiğinde renginin yeşil(green) olmasını sağla.
    6. +
+ +

Çıktının resimdeki gibi gözükmesi gerekmektedir.

+ +

Screenshot of how the example should look after completing the assessment.

+ +

MDN CSS reference safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!

+ +

Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Değerlendirme ve daha fazlası

+ +

Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:

+ +
    +
  1. Çalışmanı CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir düzenleyiciye kaydet.
    2. +
  2. MDN Discourse forum Learning category sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler: +
      +
    • "CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.
      • +
    • Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.
      • +
    • Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.
      • +
    • Yardım istediğin konunun sorusunu içeren sayfanın bağlantısı.
      • +
    +
    3. +
+ +

Sıradaki ne?

+ +

Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan CSS'in yapı taşlarında, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Bu ünitede

+ +
    +
  1. CSS nedir
    2. +
  2. CSS'e başlarken
    3. +
  3. CSS nasıl yapılandırılır
    4. +
  4. CSS nasıl çalışır
    5. +
  5. Öğrendiklerini uygulama
    6. +
diff --git "a/files/tr/\303\266\304\237ren/css/index.html" "b/files/tr/\303\266\304\237ren/css/index.html" new file mode 100644 index 0000000000..0b6e8df673 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/index.html" @@ -0,0 +1,86 @@ +--- +title: CSS kullanarak HTML şekillendirmeyi öğrenin +slug: Öğren/CSS +tags: + - Başlangıç + - Beginner + - CSS + - CodingScripting + - Debugging + - Hata Ayıklama + - Landing + - Scrip Kodlama + - Stil + - Style + - Tema + - Topic + - başlık + - length + - specificity +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +

Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya {{glossary("CSS")}} — {{glossary("HTML")}}'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.

+ +
+

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

+ +

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

+ +

Başla

+
+ +

Önkoşullar

+ +

CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için HTML'ye Giriş eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:

+ + + +

HTML'nin temellerini anladıktan sonra, iki konu arasında gidip gelerek aynı anda HTML ve CSS öğrenmeni öneririm. Bunun nedeni, HTML'eye CSS'i uyguladığın da, öğrenmesi çok daha ilginç ve daha eğlenceli olmasıdır. Ayrıca HTML'yi bilmeden CSS'yi gerçenten öğrenemezsin.

+ +

Bu konuya başlamadan önce, bilgisayarları kullanma ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın. Gerekli yazılımların kurulumu bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve Dosyalarla çalışma bölümünde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olman gerekir — her ikiside  Web'e başlarken eğitiminin bir parçasıdır.

+ +

Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce Web'e başlarken eğitimini adım adım çalışmanı öneririz. Bununla birlikte CSS'in temelleri dersinde anlatılanların çoğu, CSS'e ilk adım bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.

+ +

Bölümler

+ +

Bu konunun daha iyi anlaşılması için öğrenmeye aşağıda belirtilen sıra ile ilerlenmesi gerekmektedir. Hakkında bilgi sahibi olduğunu düşündüğün bölümleri atlama, Sırasıyla ilerleyerek bilgilerinide pekiştirmiş olursun.

+ +
+
CSS'e ilk adım
+
CSS (Cascading Style Sheets) web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn. içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için. Bu kısım, CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML'ye stil eklemek için nasıl kullanacağın hakkında temel bilgiler verecektir.
+
CSS'in yap taşları
+
+

Bu bölüm CSS'e ilk adım'ın kaldığı yerden devam ediyor- artık dile ve sözdizimine aşina oldun ve onu kullanma konusunda bazı temel bilgiler edindin, biraz daha derine dalmanın vakti geldi. Bu bölümde, art arda denetim ve mirası, tüm seçici türlerini, birimleri, boyutlandırmayı, arka planların ve kenarlıkların stilini belirlemeyi, hata ayıklamayi ve çok daha fazlasını inciler

+ +

Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.

+
+
Metin stilini belirleme
+
CSS dilinin temelleri ele alındığında, odaklanman gereken bir sonraki CSS konusu, CSS ile yapacağın en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipini, kalınğı, italiği, satır ve harf aralığını, alt gölgeler ve diğer metin özelliklerini ayarlama da dahil olmak üzere metin stilinin temellerine bakıyoruz. Sayfana özel yazı tiplerini uygulamaya; listeleri ve bağlantıları şekillendirmeye bakarak bu bölümü tamamlıyoruz.
+
CSS düzeni
+
Bu kısma kadar CSS'in temellerini, metnin stilini ve içeriğinin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğini inceledik. Şimdi, kutularını görüntü alanına ve bir birlerine göre yerleşimlerini düzenlemeye bakma zamanı. CSS düzenine derinlemesine dalarak; farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına, ayrıca hala bilmek isteyebileceğin bazı eski tekniklerin ön koşullarını ele alacağız.
+
+ +

Yaygın sorunları CSS ile çözme

+ +

Yaygın sorunları çözmek için CSS kullanma; bir web sayfası oluştururken çok yaygın sorunları çözmek için CSS'in nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.

+ +

Başlangıçtan itibaren, renkleri öncelikle HTML öğelerine ve arka planlarına uygula, öğelerin boyutunu, şeklini ve konumunu değiştirin ve öğeler üzerinde kenarlık ekle ve bunları tanımla. CSS'in temellerini sağlam bir şekilde anladıktan sonra yapamayacağın pek bir şey yoktur. CSS öğrenmenin en iyi yanlarından biri, temelleri öğrendikten sonra, aslında nasıl yapılacağını henüz bilmesen bile, genellikle neyin yapılabileceği ve yapılamayacağı konusunda oldukça iyi bir öngörüye sahip olmandır.

+ +

"CSS tuhaf"

+ +

CSS, karşılaşacağın çoğu programlama dilinden ve tasarım aracından biraz farklı çalışır. Aşağıdaki videoda, Miriam Suzanne CSS hakkında yararlı bir kaç açıklamada bulunuyor.

+ +

{{EmbedYouTube("aHUtMbJw8iA")}}

+ +

Göz at

+ +
+
MDN'de CSS
+
CSS dilinin tüm özellikleri içn ayrıntılı kaynak belgeleri bulacağın MDN, CSS eğitimine ana giriş noktasıdır. Burası ziyaret etmek için harika bir yer.
+
diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/fundamentals/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/fundamentals/index.html" new file mode 100644 index 0000000000..0bf22d6921 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/fundamentals/index.html" @@ -0,0 +1,737 @@ +--- +title: Temel metin ve yazı tipi biçimi +slug: Öğren/CSS/Styling_text/Fundamentals +tags: + - Acemi + - Aile + - Aralık + - Article + - Beginner + - CSS + - Ders + - Genişlik + - Guide + - Hizalama + - Kısa Tanım + - Metin + - Rehber + - Style + - Tarz + - Text + - Yazı Tipi + - aligment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

Bu derste, {{glossary("CSS")}} ile metin stilinde ustalaşma yolculuğuna başlayacağız. Burada, yazı tipi genişliğini, ailesini, yazı tipi kısa tanımını, hizlamasını, satır/harf aralığını ve diğer efektleri de dahil omak üzere metin/yazı tipi stilinin tüm temellerini ayrıntılı olarak inceleyeceğiz.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.
+ +

CSS'de metnin stilini belirlemeye neler dahildir?

+ +

HTML ve CSS ile yaptığın çalışmalarda zaten deneyimlemiş olacağın gibi, bir öğenin içindeki metin, öğenin içerik kutusunun içine yerleştirilir. İçerik alanının sol üstünde (veya RTL metin yönünde sağ üstte) başlar ve satırın sonuna doğru akar. Kutunun sınırına ulaştığında, bir sonraki satıra iner ve tüm içerik kutuya yerleştirilinceye kadar sonraki satıra devam eder. Metin içeriği etkili bir şekilde bir dizi satır içi öğe gibi davranır. Satırlar birbirlerine bitişik olarak yerleştirilir ve satır sonuna ulaşılmadıkça  veya {{htmlelement("br")}}  etikeytiyle karşılaşmadıkça satır kesmeleri(satır başı) oluşturulmaz.

+ +
+

Not: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce Kutu Modeli dersimizi bir daha inceleyin.

+
+ +

Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:

+ + + +
+

Not: Bir öğenin içindeki metnin tek bir varlık olarak etkilendiğini unutmayın. Metni {{htmlelement("span")}} veya {{htmlelement("strong")}} gibi öğelerin içine almadıkça veya ::first-letter(bir öğenin içindeki metnin ilk harfi), ::first-line(bir öğenin içindeki metnin ilk satırı) veya ::selection(imleç tarafından o anda seçilen kısmı) gibi sözde öğeleri kullanmadıkça, alt bölümleri seçemez ve bunlara stil uygulayamaz.

+
+ +

Fontlar(Yazı Tipleri)

+ +

Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:

+ +
<h1>Tommy the cat</h1>
+
+<p>Well I remember it as though it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

Bitmiş örneği GitHub'da bulabilirsiniz (ayrıca kaynak kodunu da görebilirsiniz).

+ +

Renk

+ +

{{cssxref("color")}} niteliği hedeflenen öğedeki görünen içeriğin rengini belirler(bunlar, genellikle metindir fakat metne {{cssxref("text-decoration")}} niteliğiyle uygulanan alt ve üst çizgidir).

+ +

color niteliği herhangi bir CSS renk birimini kabul edebilir. Örneğin:

+ +
p {
+  color: red;
+}
+ +

Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:

+ + + +

{{ EmbedLiveSample('Renk', '100%', '230') }}

+ +

Font ailesi

+ +

Metninizde farklı bir yazı tipi ayarlamak için {{cssxref("font-family")}}  niteliği kullanılır — bu, tarayıcının hedeflenen öğelere uygulaması için bir font (veya font listesi) belirlememize olanak tanır. Tarayıcı, yalnızca web sitesine erişilen makinede mevcutsa bir yazı tipi uygular; mevcut değilse tarayıcı {{anch("Default fonts", "varsayılan fontu")}} kullanır. Basit bir örnek şöyle görünür:

+ +
p {
+  font-family: arial;
+}
+ +

Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.

+ +

Web uyumlu fontlar

+ +

Font kullanılabilirliliğinden bahsetmişken, genellikle tüm işletim sistemlerinde mevcut olan ve bu sayede endişe duyulmadan kullanılabilen bir kaç font vardır. Bunlara web uyumlu font(yazı tipleri) denir.

+ +

Çoğu zaman, web geliştiricileri olarak, metin içeriğimizi görüntülemek için kullanacağımız font üzerinde daha fazla kontrole sahip olmak isteriz. Bu aşamada karşımıza çıkacak sorun, web sayfasını görüntülemek için kullanılan cihazda(Bilgisayar, tablet, akıllı telefon vb) hangi fontların yüklü olduğunu bilememizdir. Bunu bilmenin bir yolu da yoktur, ancak web uyumlu fontların en çok kullanılan işletim sistemlerinde(macOS, Windows, en yaygın Linux dağıtımları, iOS ve Android) bir örneğinin mevcut olduğunu bilmeniz ilk aşamada yeterlidir.

+ +

Gerçek web uyumlu fontların listesi, işletim sistemleri geliştikçe değişecektir, ancak aşağıdaki fontları şimdilik web için kullanılabilir olduklarını kabul etmek faydalıdır(bunların çoğu, 90'ların sonları ve 2000'lerin başında Microsoft Çekirde Web Fontları sayesinde popüler hale gelmiştir):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AdıGenel TipiNotlar
Arialsans-serif +

Arial'in daha fazla desteğe sahip olmasına rağmen Helvetica'yı tercih edebilirsiniz, çünkü yazı tipinin görünümü neredeyse aynı olsa da, Helvetica'nın daha güzel bir şekle sahip olduğu düşünülür. En bariz farkı iki yazı tipi arasındaki satır aralığı farkıdır. Helvetica biraz daha geniş bir satıra aralığına sahiptir.

+
Courier Newmonospace +

Bazı işletim sistemlerinde Courier New yazı tipinin muhtemelen daha eski bir sürümü olan Courier yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Courier New'in kullanılması tavsiye edilir.

+
Georgiaserif
Times New Romanserif +

Bazı işletim sistemlerinde Times New Roman'ın muhtemelen daha eski bir sürümü olan Times yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Times New Roman'in kullanılması tavsiye edilir.

+
Trebuchet MSsans-serif +

Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.

+
Verdanasans-serif
+ +
+

Not: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında,  cssfontstack.com sitesi Windows ve macOS işletim sistemlerinde bulunan yazı tiplerinin ne kadar güvenli oldukları ve sistem üzerinde bulunabilirliği hakkında size yardımcı olabilir.

+
+ +
+

Not: Web sayfalarında kullanmak istediğimiz yazı tipinin kurulu olup olmadığına bakmaksızın, her hangi bir yazı tipini kullanmamıza olanak sağlayan bir seçeneğimiz de vardır:  Web yazı tipleri. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde ayrı bir derste inceleyeceğiz.

+
+ +

Varsayılan yazı tipleri

+ +

CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: serif, sans-serif, monospace, cursive ve fantasy. Bu isimler bir genellemedir ve bu adları kullanırken hangi yazı tipinin kullanılacağı tarayıcı ve tarayıcının kurulu olduğu işletim sistemine bağlıdır. Bu adları, tarayıcının belirlemiş olduğumuz yazı tipine/tiplerine uygun herhangi bir yazı tipiyle eşleştirme yapamadığı durumlarda, bu adlara tanımlanmış herhangi bir yazı tipini belirlemesi için kullanırız.

+ +

Bu beş adlandırma şu şekilde guruplandırılmıştır:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AdTanımÖrnek
serif +

Serifli yazı tipleri olarak bilinirler. Harflerde okumayı kolaylaştırdığı düşünülen harflerin köşelerinde hafif çıkıntı ve süslemelerin olduğu yazı tipleridir.

+ 		Ben büyük kırmızı bir filim
sans-serifSerif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür.Ben büyük kırmızı bir filim
monospaceYazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır.Ben büyük kırmızı bir filim
cursiveAkıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir.Ben büyük kırmızı bir filim
fantasyDaha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir.Ben büyük kırmızı bir filim
+ +

Yazı tipi listesi

+ +

Web sayfalarınızda kullanmak istediğiniz yazı tiplerinin kullanılabilirliğini garanti edemeyeceğiniz için (bir web yazı tipi bile herhangi bir nedenle başarısız olabilir), tarayıcının seçim yapabileceği birden çok yazı tipini tanımlayabiliriz. Bunun için, font-family niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir yazı tipi listesi tanımlarız. örn.

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Böyle bir durumda, tarayıcı listenin başından başlar ve yazı tipinin işletim sisteminde bulunup bulunmadığına bakar. Yazı tipi varsa, var olan yazı tipini öğelere uygular. Değilse, sonraki yazı tipine geçer ve bu şekilde devam eder.

+ +

Listenin sonunda uygun bir genel yazı tipi grubu adı sağlamak iyi bir yaklaşım olur. Böylece listeelenen yazı tiplerinden hiçbiri mevcut değilse, tarayıcı en azından istediğimiz yazı tipine uygun bir seçim yapmasını sağlayabiliriz. Bu noktayı vurgulamak için, eğer genel adlandırma kullanmaz isek tarayıcı paragraflara varsayılan serifli bir yazı tipi uygulayabilir — bu genellikle Times New Roman olur — sans-serif yazı tipi olmasını istediğimiz durumlar için istediğimiz bir sonuç değil.

+ +
+

Not: Trebuchet MS gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin "Trebuchet MS".

+
+ +

Bir font-family örneği

+ +

Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Sayfamız artık böyle görünür:

+ + + +

{{ EmbedLiveSample('Bir_font-family_örneği', '100%', 220) }}

+ +

Yazı Tipi Boyutu

+ +

Önceki ünitede CSS değerleri ve birimleri dersimizde, uzunluk ve boyut birimlerini inceledik. Yaz tipi boyutu ({{cssxref("font-size")}} niteliği ile ayarlanır), bu nitelik birçok ölçü birimi değerini kabul eder(yüzdelikler ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:

+ + + +

font-size nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan {{htmlelement("html")}}  kök öğesinin font-size nitelik değeri 16px olarak tanımlanmasıyla, kök öğenin çocukları ve torunları için bir kural oluşturmadığınız sürece sayfanızdaki tüm öğelerinfont-size değeri aynı olur. Diğer bazı öğelerin tarayıcı tarafından tanımlanmış varsayılan değerleri de olabilir, meselâ {{htmlelement("h1")}}  öğesinin varsayılan font-size nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.

+ +

İç içe geçmiş öğelerin yazı tipi boyutunu ayarlamaya başladığınızda işler biraz karmaşaya neden olabilir. Örn., sayfanızdaki {{htmlelement("article")}}  öğesinin yazı tipi boyutunu 1.5em olarak ayarladınız buda normal şartlarda 24px olarak hesaplanacaktır ve <article> öğesinin içerisindeki paragrafların yazı tipi boyutunuda 20px olmasını istiyorsunuz. Bu durumda hangi em değerini kullanırdınız?

+ +
<!-- belgenin kök font-size değeri 16px -->
+<article> <!-- Buradaki font-size 1.5em olmasını istiyoruz -->
+  <p>My paragraph</p> <!-- tüm paragraflarımızın font-size değerininde 20px olmasını planladık? -->
+</article>
+ +

Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <article> öğemizin yazı tipi boyutu 24px olarak hesaplanır, paragraflarımızda font-size nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <article> yazı tipi boyutundan alacağı için; em * 24=20, em=20/24, em=0,83333333 olarak yazmamız gerekir. Bu biraz tuhaf gelebilir, bu yüzden bir şeyleri nasıl şekillendirdiğiniz konusunda dikkatli olmalısınız. rem işleri bira daha basit tutmak  için kullanışlı olabilir.

+ +

Basit bir boyutlandırma örneği

+ +

Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan {{htmlelement("html")}} kök öğemizin font-size nitelik değerini 10px olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde rem niteliklerimiz varsayılan 16px değeri yerine 10px değerini baz alacaklardır. Sayfamızdaki öğeler için font-size nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.

+ +

Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Basit_bir_boyutlandırma_örneği', '100%', 260) }}

+ +

Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi

+ +

CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:

+ + + +

Örneğimize bu niteliklerden birkaçını ekleyelim:

+ +

Görüntünün yeni çıktısı şu şekildedir:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi', '100%', 260) }}

+ +

Metnin alt gölgeleri

+ +

{{cssxref("text-shadow")}} niteliğini kullanarak metninize alt gölgeler uygulayabilirsiniz. Bu şekilde metninizin altındaki görsel veya renk ile kontrastını arttırarak okunabilirliliğini yükseltmiş oluruz yada sadece görsellik için kullanırız. Aşağıdaki gibi bu özelliği kullanabilmek için niteliğe en fazla dört değer atanabilir.

+ +
text-shadow: 4px 4px 5px red;
+ +

Dört özellik aşağıdaki gibidir:

+ +
    +
  1. +

    Gölgenin metninize olan yatay uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi sağa doğru, negatif eder ise gölgelendirmeyi sola doğru hareket ettirir. Bu değerin bulunması zorunludur.

    +
    2. +
  2. +

    Gölgenin meninize olan dikey uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi aşağıya doğru, negatif eder ise gölgelendirmeyi yukarıya doğru hareket ettirir. Bunun dışında yatay tanımlama ile aynı davranışı sergiler. Bu değerin de bulunması zorunludur.

    +
    3. +
  3. +

    Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, bu değer belirtilmez ise varsıylan olarak 0 değerini alır ve buda bulanıklılığın olmadığı anlamına gelir. Değer yükseldikçe gölge daha geniş bir alana yayılır. Eksi değer alamaz.

    +
    4. +
  4. +

    Gölgenin temel rengi tanımlanır. Herhangi bir CSS renk değerini alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin color niteliğinden alınır.

    +
    5. +
+ +

Birden çok gölge

+ +

Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.

+ +
text-shadow: 1px 1px 1px red,
+             2px 2px 1px green;
+ +

Bunu {{htmlelement("h1")}} öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:

+ + + +

{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}

+ +
+

Not: CSS ile metinlere ay ışığı gölgelendirmesi dersinde, text-shadow ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.

+
+ +

Metin düzeni

+ +

Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.

+ +

Metin hizalama

+ +

{{cssxref("text-align")}} niteliği metin içeren kutunun içerisindeki metnin hizalanmasını kontrol etmek için kullanılır. Mevcut değerler aşağıdaki gibidir ve normal bir kelime işlmeci uygulamasına benzer şekilde çalışır:

+ + + +

{{htmlelement("h1")}} öğemize text-align: center; bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:

+ + + +

{{ EmbedLiveSample('Metin_düzeni', '100%', 260) }}

+ +

Satır yüksekliği

+ +

{{cssxref("line-height")}} niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu uzunluk ve boyut birimini alabilir, ancak aynı zamanda çarpan olarak davranan ve genellikle en iyi seçenek olarak kabul edilen birimsiz bir değer de alabilir. Satır yüksekliğini elde etmek için yazı tipi boyutuyla {{cssxref("font-size")}} çarpılır. Gövde metni genellikle daha güzel görünür ve satırlar aralandığında okunması daha kolaydır; önerilen satır yüksekliği 1,5-2'dir(çif aralık). Dolayısıyla, metin satırlarımızı yazı tipinin yüksekliğinin 1,6 katına ayarlamak için şunu kullanırsını:

+ +
line-height: 1.6;
+ +

Bunu örneğimizdeki {{htmlelement("p")}} öğemize uyguladığımızda şu sonucu verir:

+ + + +

{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}

+ +

Harf ve kelime aralığı

+ +

{{cssxref("letter-spacing")}} ve {{cssxref("word-spacing")}} nitelikleri, metninizdeki harf ve kelimlerin arasındaki boşluğu ayarlamanıza olanak sağlar. Bunları çok sık kullanmayacaksınız, ancak belirli bir görünüm elde etmeleri veya özellikle yoğun bir yazı tipinin okunabilirliğini artırmaları için bir kullanabilirsiniz. Çoğu uzunluk ve boyut birimlerini alabilir.

+ +

Örnek olarak, örneğimizdeki her bir {{htmlelement("p")}} öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:

+ +
p::first-line {
+  letter-spacing: 4px;
+  word-spacing: 4px;
+}
+ +

Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:

+ + + +

{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}

+ +

Bakmaya değer diğer nitelikler

+ +

Yukarıdaki özellikler size bir web sayfasında metin stilini nasıl belirleyeceğiniz konusunda bir fikir verir, ancak kullanabileceğiniz daha birçok nitelik vardır. Sadece en önemlilerini burada ele almak istedik. Yukarıdakileri kullanmaya alıştığınızda, aşağıdakileri de keşfetmelisiniz.

+ +

Yazı tipi stilleri:

+ + + +

Metin düzeni stilleri:

+ + + +

Yazı tipi kısa tanımları

+ +

{{cssxref("font")}} niteliği ile yazı tipinin birçok özelliği tanımlanabilir. Tanımlabilen nitelikler şu sırayla yazılır: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} ve {{cssxref("font-family")}}.

+ +

Tüm bu nitelikler arasında sadece font-size ve font-family  kullanılırken font kısa tanımında belirtilmesi gereken bir kullanım vardır.

+ +

{{cssxref("font-size")}} ve {{cssxref("line-height")}} niteliklerinin arasına eğik çizgi konulmalıdır.

+ +

Kullanım örneği:

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Aktif öğrenim: metin stilini değiştirin

+ +

Bu aktif öğrenme oturumunda, yapabileceğiniz belirli bir alıştırmanız yok. sadece bazı yazı tipi/metin düzeni nitelikleriniyle oyun oynamanızı ve neler üretebileceğinizi görmenizi istiyoruz! Bunu çevrimdışı HTML/CSS dosyalarını kullanarak yapabilir veya kodunuzu aşağıdaki canlı düzenlenebilir örneğe girebilirsiniz.

+ +

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak baştan başlayabilirsiniz.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Becerilerinizi test edin!

+ +

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

+ +

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

+ +

Özet

+ +

Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

Bu ünitede

+ + diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/index.html" new file mode 100644 index 0000000000..6e7c8c3500 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/index.html" @@ -0,0 +1,83 @@ +--- +title: Metni stilini belirleme +slug: Öğren/CSS/Styling_text +tags: + - Acemi + - Bağlantılar + - Beginner + - CSS + - CodingScripting + - Fonts + - Golgelendirme + - Hat + - Landing + - Links + - Listeler + - Mektup + - Metin + - Modul + - Module + - Text + - Web Yazı Tipleri + - Yazı Tipi + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.

+ +
+

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

+ +

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

+ +

Başla

+
+ +

Ön Koşullar

+ +

Bu üniteye başlamadan önce, HTML'e giriş ünitesinde ele aldığımız temel HTML bilgisine ve CSS'e giriş ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.

+ +
+

Not: Eğer çalışırken kullandığınız cihazınızda (bilgisayar, tablet veya diğer cihazlar) kendi örneklerinizi yazıp çalışabileceğiniz bir ortamınız bulunmuyorsa, JSBin, CodePen veya Glitch ortamlarını çevrimiçi kullanabilirsiniz.

+
+ +

Rehber

+ +

Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.

+ +
+
Temel metin ve yazı tipi stili
+
Bu derste yazı tipinin; kalınlığını, ailesini ve stilini, kısa tanımını, hizalanmasını, satır ve harf aralığını ve diğer efektleri ayarlama da dahil olmak üzere metnin/fontun stilini belirlemede kullanacağımız tüm yöntemleri ele alacağız.
+
Listeleri biçimlendirme
+
Listelerin diğer metinler gibi davranmanın yanında kendilerine özgü bilmeniz gereken bazı davranışları ve dikkat etmeniz bazı uygulamaları vardır. Bu ders de her şeyi açıklayacağım.
+
Bağlantıları biçimlendirme
+
Bağlantıları şekillendirirken, bağlantı durumlarını etkili bir şekilde biçimlendirmek için sözde sınıflardan nasıl yararlanılacağını, gezinme menüleri ve sekmeler gibi yaygın arayüz özelliklerinde kullanılan bağlantıların nasıl şekillendirileceğini anlamak önemlidir. Bu yazıda tüm bu konuların üzerinden geçeceğiz.
+
Web yazı tipleri
+
Bu derste web yazı tiplerini ayrıntılı olarak inceleyeceğiz  — bunlar, sistemlerde bulunurluluğu az olan fontları veya özel metin stillerini web sayfanızda kullanmanıza olanak sağlayan yaklaşımları ele alacağız.
+
+ +

Değerlendirmeler

+ +

Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.

+ +
+
Bir okulun ana sayfasındaki metinleri şekillendirmek
+
Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.
+
+ +
+
+ +
+
+ +
+
+
diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/styling_links/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/styling_links/index.html" new file mode 100644 index 0000000000..3cf6997aa5 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/styling_links/index.html" @@ -0,0 +1,453 @@ +--- +title: Bağlantıları şekillendirmek +slug: Öğren/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Bağlantıları etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç:Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.
+ +

Bağlantılara bir göz atalım

+ +

HTML'mizde bağlantı oluşturma konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.

+ +

Bağlantı durumları

+ +

Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı sözde sınıflar ile kontrol edilebilmesidir:

+ + + +

Varsayılan stiller

+ +

Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)

+ +
<p><a href="#">Basit bir bağlantı</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}

+ +
+

Not: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır.  Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.

+
+ +

Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:

+ + + +

İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:

+ + + +

Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:

+ + + +
+

Not: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!

+
+ +

Bağlantıların stilini belirleme

+ +

Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.

+ +

Başlangıç olarak boş kural kümelerimizi yazacağız:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "LaV Fena HAlde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.

+ +

Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:

+ +
<p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve
+<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p>
+ +

İkisini bir araya getirmek bize şu sonucu verir:

+ +

{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}

+ +

Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:

+ + + +

Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin

+ +

Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.

+ +

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak sıfırlayabilirsiniz. Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için Çözümü göster düşmesini kullanın.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Bağlantılara simgeler eklemek

+ +

Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — Örnek olabilecek simgeler için icons8.com.

+ +

Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:

+ +
<p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin,
+ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p>
+ +

Ardından CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}

+ +

Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki liste öğelerinde özel madde işaretlerini işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine {{cssxref("background")}} kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, no-repeat ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.

+ +

{{cssxref("background-size")}} niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?

+ +

Son olarak, {{cssxref("padding-right")}} niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.

+ +

Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? HTML  bağlantıları yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde nitelik şeciciyle(a[href*="http"]) {{htmlattrxref("href","a")}}  öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.

+ +

İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!

+ +
+

Not: href değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <iframe> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.

+
+ +
+

Not: Henüz arka planlar ve duyarlı web tasarımına aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.

+
+ +

Bağlantıları buton olarak biçimlendirmek

+ +

Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.

+ +

Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.

+ +

İlk olarak, biraz HTML:

+ +
<ul>
+  <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li>
+</ul>
+ +

ve birazda CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Bu bize şu sonucu verir:

+ +

{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}

+ +

En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:

+ + + +
+

Not: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi satır içi blok öğeleri arasındaki boşluklarla savaşma bölümünde bulabilirsiniz.

+
+ +

Becerilerinizi tes edin!

+ +

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfası tasarımı.

+ +

Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.

+ +

Özet

+ +

Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

Bu ünitede

+ + diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/styling_lists/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/styling_lists/index.html" new file mode 100644 index 0000000000..b9690f6d23 --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/styling_lists/index.html" @@ -0,0 +1,436 @@ +--- +title: Listeleri Şekillendirmek +slug: Öğren/CSS/Styling_text/Styling_lists +tags: + - Acemi + - Article + - Beginner + - CSS + - Ders + - Guide + - Listeler + - Metin + - Rehber + - Stil + - Styling + - Text + - biçimlendirme + - bullets + - lists + - Şekillendirme +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Listeler çoğunlukla diğer metinler gibi davranır, ancak bilmeniz gereken bazı listelere özgü CSS özellikleri ve uygulama yaklaşımları vardır. Bu ders herşeyi açıklıyor.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak.
+ +

Basit bir liste örneği

+ +

Basit bir liste örneğiyle başlayalım. Bu ders boyunca sıralanmamış, sıralanmış ve açıklama listelerine bakacağız. Hepsinin birbirlerine benzeyen, bazılarında ise kendi liste türlerine özgü şekillendirme özellikleri vardır. Github üzerinde biçimlendirilmemiş bir örneğimiz mevcuttur(kaynak koduna bakabilirsiniz).

+ +

Liste örneğimizin HTML'si şu şekildedir.

+ +
<h2>Sırasız alışveriş listesi</h2>
+
+<p>Referans için paragraf, referans için paragraf, referans için paragraf,
+referans için paragraf, referans için paragraf, referans için paragraf.</p>
+
+<ul>
+  <li>Humus</li>
+  <li>Pide</li>
+  <li>Yeşil salata</li>
+  <li>Hellim peyniri</li>
+</ul>
+
+<h2>Sıralı tarif listesi</h2>
+
+<p>Referans için paragraf, referans için paragraf, referans için paragraf,
+referans için paragraf, referans için paragraf, referans için paragraf.</p>
+
+<ol>
+  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin</li>
+  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
+  <li>Salatayı yıkayıp doğrayın</li>
+  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
+</ol>
+
+<h2>Madde açıklama listesi</h2>
+
+<p>Referans için paragraf, referans için paragraf, referans için paragraf,
+referans için paragraf, referans için paragraf, referans için paragraf.</p>
+
+<dl>
+  <dt>Humus</dt>
+  <dd>Genellikle tahin, limon suyu, tuz, sarımsak ve diğer malzemelerle harmanlanmış nohuttan yapılan koyu bir sos</dd>
+  <dt>Pide</dt>
+  <dd>Yumuşak, hafif mayalı bir gözleme</dd>
+  <dt>Hellim peyniri</dt>
+  <dd>Normalden daha yüksek erime noktasına sahip, genellikle keçi/koyun sütünden yapılan yarı sert, olgunlaşmamış, salamura peynir</dd>
+  <dt>Yeşil salata</dt>
+  <dd>Bir çoğumuzun kebapları süslemek için kullandığımız yeşil sağlıklı sebzeler</dd>
+</dl>
+ +

Şimdi canlı örneğe giderseniz ve tarayıcı geliştirme araçlarını kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:

+ + + +

Liste aralıklarını kontrol etme

+ +

Listelerin şeklini belirlerken, stillerini çevreleyen öğelerle(paragraf ve görüntü gibi; dikey ritmi olarakta adlandırılır) aynı dikey aralığına ve birbirleriyle aynı yatay aralığa sahip olacak şekilde ayarlamamız gerekebilir(you can see the finished styled example on Github, and find the source code too.).

+ +

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other ( bitmiş örneğimizi Github'da bulabilir ve kaynak kodlarınıda görebilirsiniz).

+ +

Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:

+ +
/* Genel Stil */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+ + + +

Listeye özgü şekiller

+ +

Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.

+ +

İlk başta bilmeniz gereken, {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğelerinde ayarlanabilen üç nitelik vardır.

+ + + +

Madde işareti şekilleri

+ +

Yukarıda belirtildiği gibi, {{cssxref("list-style-type")}} niteliğiyle madde işaretleri için ne tür bir işaret kullanacağını ayarlamamıza izin verir. Örneğimizde, sıralı listeyi büyük harfli roma rakamları kullanacak şekilde ayarlamak için:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:

+ +

Madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı liste.

+ +

{{cssxref("list-style-type")}} referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.

+ +

Madde işareti konumu

+ +

{{cssxref("list-style-position")}}, Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde yada liste içeriğinin dışında(sol dışında) görünür. Varsayılan değeri olan outside ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.

+ +

Değeri inside olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı bir liste.

+ +

Özel bir madde işareti görüntüsü kullanma

+ +

{{cssxref("list-style-image")}} niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. Arka planlar ve sınırlar dersinde {{cssxref("background")}} nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!

+ +

Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Burada aşağıdakileri yaptık:

+ + + +

Bu bize şu sonucu verir:

+ +

an unordered list with the bullet points set as little star images

+ +

Liste şekillendirebilen kısa tanım

+ +

Yukarıda belirtilen üç niteliğin tümü, tek bir kısa tanım niteliği kullanılarak tanımlanabilir ({{cssxref("list-style")}}). Örn., aşağıdaki CSS:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Bununla değiştirilebilir:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Değerler herhangi bir sırayla girilebilir, biri, ikisi veya üçünü birden tanımlayabilirsiniz (tanımlanmayan değerler için varsayılan değerler kullanılır disc, none ve outside vbg.) Birinci ve ikincideki type ve image türü bildirimin nedeni: Eğer herhangi bir nedenden dolayı resim yüklenemezse de görüntüleyebileceği bir madde işaretini tanımlamaktır.

+ +

Liste sayımını kontrol etme

+ +

Bazen sıralı bir listede sıralamanın farklı şekillerde numaralandırılmasını isteyebiliriz — örn. 1'den farkllı bir sayıdan başlayarak veya geriye doğru sayarak veya 1'den fazla adımlarla sayarak. HTML ve CSS'in burada bizlere yardımcı olacak bazı araçları vardır.

+ +

başlangıç

+ +

{{htmlattrxref("start","ol")}} niteliği listenin 1'in haricinde bir sayıdan başlatmak istediğimizde kullanırız. Aşağıdaki örneğimizde listemiz saymaya 4'den başlar:

+ +
<ol start="4">
+  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
+  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
+  <li>Salatayı yıkayıp doğrayın</li>
+  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
+</ol>
+ +

Bize bu çıktıyı verir:

+ +

{{ EmbedLiveSample('başlangıç', '100%', 150) }}

+ +

tersten numaralandırmak

+ +

{{htmlattrxref("reversed","ol")}} niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:

+ +
<ol start="4" reversed>
+  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
+  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
+  <li>Salatayı yıkayıp doğrayın</li>
+  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
+</ol>
+ +

Gives you this output:

+ +

{{ EmbedLiveSample('tersten_numaralandırmak', '100%', 150) }}

+ +
+

Not: Geriye doğru ilerleyen bir listede belirtilen sayıdan daha fazla liste öğesi varsa, sayı sıfır ve ardından negatif sayılara doğru devam eder. 2, 1, 0, -1, -2, ...

+
+ +

değer

+ + + +

{{htmlattrxref("value","ol")}} niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:

+ +
<ol>
+  <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
+  <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
+  <li value="6">Salatayı yıkayıp doğrayın</li>
+  <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
+</ol>
+ +

Gives you this output:

+ +

{{ EmbedLiveSample('degerleme', '100%', 100) }}

+ +
+

Not: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de value niteliğindeki değere eş değer bir değer getirilir.

+
+ + + +

{{ EmbedLiveSample('izli1', '100%', 100) }}

+ +

Aktif öğrenme: İç içe listeyi şekillendirme

+ +

Bu aktif öğrenme oturumunda, yukarıda öğrendiklerinizi anlamanızı ve iç içe geçmiş bir liste şekillendirmenizi istiyoruz. Size HTML'yi sağladık ve şunları yapmanızı istiyoruz:

+ +
    +
  1. Sırasız listeye kare madde işaretleri verin.
    2. +
  2. Sırasız liste öğelerine ve sıralı liste öğelerine yazı tipi boyutlarının 1,5'i kadar yüksekliğinde bir satır yüksekliği verin.
    3. +
  3. Sıralı listeye daha düşük alfabetik madde işaretleri verin.
    4. +
  4. Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.
    5. +
+ +

Bir hata yaparsanız, sıfırla butonunu kullanarak her zaman başlangıça dönebilirsiniz. Gerçekten takılırsanız, olası bir cevap görmek için Çözümü göster düşmesine basabilirsiniz.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Ayrıca bakınız

+ +

CSS sayaçları, liste sayma ve şeklini özelleştirmek için gelişmiş araçlar sağlar, ancak oldukça karmaşıktır. Kendinizi geliştirmek istiyorsanız bunlara bakmanızı öneririz:

+ + + +

Becerilerinizi test edin!

+ +

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

+ +

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

+ +

Özet

+ +

İlişkili birkaç temel ilkeyi ve belirli özelliği öğrendikten sonra, listelerin stil oluşturmaya alışması nispeten kolaydır. Sonraki makalede bağlantı stil tekniklerine geçeceğiz.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

Bu ünitede

+ + diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/typesetting_a_homepage/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/typesetting_a_homepage/index.html" new file mode 100644 index 0000000000..0d5c95314b --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/typesetting_a_homepage/index.html" @@ -0,0 +1,143 @@ +--- +title: Bir okulun ana sayfasını düzenlemek +slug: Öğren/CSS/Styling_text/Typesetting_a_homepage +tags: + - Acemi + - Assessment + - Bağlantı + - Beginner + - CSS + - CodingScripting + - Değerlendirme + - Link + - Liste + - Metnin Stilini Belirleme + - Styling text + - Web Yazı Tiği + - Yazı Tipi + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Bu değerlendirmede, bir okulun ana sayfasının metnin şekillendirmenizi sağlayarak, bu ünite boyunca ele aldığımız tüm metin şekillendirme tekniklerini kavrayışınızı test edeceğiz. Yol boyunca biraz eğelebilirsiniz.

+ + + + + + + + + + + + +
Ön koşul:Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir
Amaç:CSS metin stil tekniklerinin anlaşılmasını test etmek.
+ +

Başlangıç noktası

+ +

Bu değerlendirmeyi başlatmak için şunları yapmalısınız:

+ + + +

Alternatif olarak, değerlendirmenizi yapmak için JSBin ve Glitch gibi siteleri kullanabilirsiniz. HTML'yi yapıştırabilir ve CSS'i bu çevrimiiçi düzenleyicilerden birine doldurabilir ve arka plan resmini işaret etmek için bu URL'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <style> etiketi ile HTML sayfanıza yerleştirebilirsiniz.

+ +
+

Not: Sıkıştığınızda bizden yardım isteyebilirsiniz — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazlası")}} bölümüne bakabilirsiniz.

+
+ +

Proje tanıtımı

+ +

Hayli bir okulun ana sayfası için bir miktar ham HTML, ayrıca sayfayı üç sütunlu bir düzende biçimlendiren ve başka bazı temel stil sağlayan bazı CSS'ler sağlandı. Yaptığınız bitleri işaretlemenin kolay olduğundan emin olmak için CSS eklemelerinizi CSS dosyasının altındaki yourmun altına yazmalısınız. Bazı seçiciler tekrarlıysa endişelenmeyin.

+ +

Yazı tipleri:

+ + + +

Genel metin stili:

+ + + +

Başlantılar:

+ + + +

Listeler:

+ + + +

Gezinti menüsü:

+ + + +

İpuçları ve püf noktaları

+ + + +

Örnek

+ +

Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:

+ +

+ +

Değerlendirme ve daha fazlası

+ +

Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.
    2. +
  2. MDN söyleşi/öğrenme forumu kategorisinde değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir: +
      +
    • "Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • halihazırda denedikleriniz ve biden ne yapmamızı istediğinizle ilgili ayrıntılar, örneğin, takılıp kaldıysanız ve yardıma ihtiyacınız varsa veya bir değerlendirme istiyosanız.
      • +
    • Değerlendirilmesini istediniz veya yarımda ihtiyaç duyduğunuz önreğin bir çevrimiçi paylaşılabillir düzenleyicide bulunan bağlantısı (yukarıdaki 1.adımda belitildiği gibi). Bu, içine girmek için iyi bir uygulamadır — kodunu göremiyorsanız, kodlama sorunu olan birine yardım etmek çok zordur.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

In this module

+ + diff --git "a/files/tr/\303\266\304\237ren/css/styling_text/web_fonts/index.html" "b/files/tr/\303\266\304\237ren/css/styling_text/web_fonts/index.html" new file mode 100644 index 0000000000..cf13b6533a --- /dev/null +++ "b/files/tr/\303\266\304\237ren/css/styling_text/web_fonts/index.html" @@ -0,0 +1,221 @@ +--- +title: Web Yazı Tipleri +slug: Öğren/CSS/Styling_text/Web_fonts +tags: + - '@font-face' + - Article + - Beginner + - CSS + - CSS Fonts + - Fonts + - Guide + - Learn + - Web Development + - Web Fonts Article + - Web fonts documentation + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

Ünitenin ilk dersinde, yazı tiplerini ve metni şekillendirmek için kullanılan temel CSS özelliklerini keşfettik. Bu dersimizde daha da ileri gideceğiz, web yazı tiplerini ayrıntılı olarak inceleyceğiz — bunlar, daha çeşitli, özel metin stillerine izin vermek için web sayfanızla birlikte özel yazı tiplerinide kullanmanıza izin verir.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç:Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek
+ +

Yazı tipi aileleri özeti

+ +

Temel metin ve yazı tipi stilinde incelediğimiz gibi, HTML'nize uygulanan yazı tipleri {{cssxref("font-family")}} niteliği ile kontrol edilebilinir. Bu, bir veya daha fazla yazı tipi ailesi adını alır ve tarayıcı, çalıştığı sistemde mevcut olan bir yazı tipini bulana kadar bu listede ileriye doğru hareket eder:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Bu sistem iyi çalışıyor, ancak geleneksel olarak web geliştiricilerinin yazı tipi seçenekleri sınırlıdır. Tüm yaygın sistemlerde kullanılabilceğini garanti edebileceğiniz yalnızca bir avuç yazı tipi vardır — Web uyumlu yazı tipleri. Tercih edilen yazı tiplerini belirtmek için yazı tipi yığınını, ardından web için güvenli alternatifleri ve ardından varsayılan sistem yazı tipini belirtebilirsiniz, ancak bu tasarımlarınızın her yazı tipiyle iyi göründüğünden emin olmak için test açısından ek yük getirir.

+ +

Web yazı tipleri

+ +

IE sürüm 6'ya kadar çok iyi çalışan bir alternatifimiz var. Web yazı tipleri, web siteniz erişilirken indirilecek yazı tipi dosyalarını belirtmenize olanak tanıyan bir CSS özelliğidir, yani web'i destekleyen herhangi bir tarayıcı tam olarak sizin belirlediğiniz fontlara sahip olabilir. Gerekli sözdizimi şuna benzer:

+ +

Her şeyden önce CSS'in başlangıcında {{cssxref("@font-face")}} ile başlayan indirilecek yazı tipi dosyalarını belirten bir bloğumuz var:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

Bunun altında, özel yazı tipinizi normal olarak istediğiniz herhangi bir şeye uygulamak için @font-face içinde belirtilen yazı tipi ailesi adını kullanabilirsiniz:

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.

+ +

Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:

+ +
    +
  1. Tarayıcılar farklı yazı tipi biçimlerini desteklerler, bu nedenle tarayıcılar arasında daha iyi bir destek için birden çok yazı tipi biçimine ihtiyacınız olacaktır. Örneğin, çoğu modern tarayıcı, piyasadaki en verimli biçim olan WOFF/WOFF2'yi (Web Açık Yazı Tipi Biçimi sürüm 1 ve 2) destekler, ancak IE'nin eski sürümleri yalnızca EOT(Gömülü Açık Tip) yazı tiplerini destekler ve iPhone ve Android tarayıcıların eski sürümlerini desteklemek için yazı tipinin bir SVG sürümünü eklemeniz gerekebilir. Gerekli kodu nasıl oluşturacağınızı aşağıda göstereceğiz.
    2. +
  2. yazı tiplerinin kullanımı genellikle ücretsiz değildir. bunlar için ödeme yapmanız ve/veya yazı tipi oluşturucuyu kodda (veya sitenizde) belirtmek gibi diğer lisa ns koşullarını izlemeniz gerekir. Yazı tiplerini çalmamalı ve uygun şekilde kredi vermeden kullanmamalısınız.
    3. +
+ +
+

Not: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.

+
+ +

Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için Firefox yazı tipi düzenleyicisini kullanabilirsiniz. Bu video güzel bir yol sunar:

+ +

{{EmbedYouTube("UazfLa1O94M")}}

+ +

Aktif öğrenme: Bir web yazı tipi örneği

+ +

İlk ilkelerden temel bir web yazı tipi örneği oluşturalım. Gömülü bir canlı örnek kullanarak bunu göstermek zordur, bu nedenle, süreç hakkında bir fikir edinmek için aşağıdaki bölümlerde ayrıntılı olarak açıklanan adımları izlemenizi öneririz.

+ +

Kullanmanız için size iki örnek dosya; web-font-start.html ve web-font-start.css (canlı örneği görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın.  web-font-start.css dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.

+ +

Yazı tipi bulmak

+ +

Bu örnek için, biri başlıklar ve diğeri gövde metni için olmak üzere iki web fontu kullanacağız. Başlangıç olarak, yazı tiplerini içeren yazı tipi dosyalarını bulmamız gerekiyor. Yazı tipleri, yazı tipi dökümhaneleri tarafından oluşturulur ve farklı dosya formatlarında saklanır. yazı tiplerini edinebileceğiniz genellikle üç tür site vardır:

+ + + +

Biraz yazı tipi bulalım! Font Squirrel sitesine gidelim ve iki adet font seçelim — başlıklar için ilginç ve gösterişli bir yazı tipi ve paragraflar içinde daha okunabilir bir yazı tipi. Her bir yazı tipini bulduğunuzda, indirme düşmesine basın ve dosyayı daha önce kaydettiğiniz HTML ve CSS dosyalarının bulunduğu dizine kaydedin. TTF (True Type Fontlar) veya OTF (Open Type Fontlar) olması önemli değil.

+ +

Her durumda, yazı tipi paketini açın (Web yazı tipleri genellikle yazı tipi dosyalarını ve lisans bilgilerini içeren ZIP dosyalarında dağıtılır). Pakette birden fazla yazı tipi dosyası bulabilirsiniz — bazı yazı tipleri, örneğin ince, orta, kalın, italik, ince italik vb. gibi farklı şekillere sahip aile olarak dağıtılır. Bu örnek için, yalnızca her seçim için bir yazı tipi dosyası yeterli.

+ +
+

Not: Sağ taraftaki sütunda  "Yazı tiplerini bul" bölümü altında, görüntülenen seçenekleri filtrelemek için farklı etiketlere ve sınıflandırmalara tıklayabilirsiniz.

+
+ +

Gerekli kodun oluşturulması

+ +

Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:

+ +
    +
  1. Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.
    2. +
  2. Fontsquirrel Web yazı tipi oluşturucuya gidin.
    3. +
  3. Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.
    4. +
  4. "Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.
    5. +
  5. Kitinizi indirin.
    6. +
+ +

Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.

+ +

Kodu demonuza uygulamak

+ +

Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.

+ + + +

Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:

+ +
    +
  1. Sıkıştırılmış dosyayı klasöre açın, örn fonts.
    2. +
  2. stylesheet.css dosyasını açın ve her iki @font-face kod bloğunu web-font-start.css dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.
    3. +
  3. url() işlevlerin her biri, CSS'mize aktarmak istediğimiz bir yazı tipi dosyasına işaret eder. Dosyalara giden yolların doğru olduğundan emin olamanız gerekir. Bizim durumumuzda her yolun başına fonts/ eklmeyi unutmayın.
    4. +
  4. Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Üzerinde bazı güzel yazı tiplerinin uygulandığı bir demo sayfası bulmalısınız. Farklı yazı tipleri farklı boyutlarda oluşturulduğundan, görünümü ve hissi verebilmek için boyutu, aralığı vb. durumları ayarlamanız gerekebilir.

+ +

+ +
+

Not: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — web-font-finished.html ve web-font-finished.css (bitmiş örneği canlı çalıştırın).

+
+ +

Çevrimiçi bir yazı tipi hizmeti kullanma

+ +

Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle @font-face kodu yazma konusunda endişelenmenize gerek kalmaz ve genellikle her şeyin çalışması için sitenize basit bir veya iki satır kod eklemeniz gerekir. Örnekler arasında Adobe Fonts ve Cloud.typography bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan Google Fonts dışında, abonelik tabanlıdır.

+ +

Bu hizmetlerin kullanımı kolaydır, bu nedenle onları ayrıntılı olarak ele alacağız. Google yazı tiplerine hızlıca bir göz atalım, böylece fikir edinebilirisiniz. Yine, başlangıç noktanız olarak web-font-start.html ve web-font-start.css dosyalarının birer kopyalarını kullanalım.

+ +
    +
  1. Google Fonts'a gidin.
    2. +
  2. Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.
    3. +
  3. Seçmek istediğiniz yazı tipi ailesine tıklayın.
    4. +
  4. Yazı tipi ailesindeki yazı tiplerinin listelenecek.
    5. +
  5. Her yazı tipinin sağındaki "+ Select this style" tıkladığınızda sağda açılan "Selected family" ekranında (eğer açılmazsa sayfadaki sağ üsttü bulunan butonuna tıklayın) ilk önce gösterilen HTML kod satırını kopyalayıp HTML dosyanızın başına yapıştırmanız gerekir. CSS'nizde kullanmadan önce HTML sayfanızda CSS'inizden önce tanımlanması gerekir. Daha sonra kendi stil kodunuzu veya dosyanızı eklemelisiniz.
    6. +
  6. Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.
    7. +
+ +
+

Not:Tamamlanmış bir sürümü google-font.html ve google-font.css adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz canlı örneğe bir göz atın.

+
+ +

@font-face daha ayrıntılı olarak bakalım

+ +

Fontsquirrel tarafından olşturulan @font-face kural bildirimini inceleyelim.

+ +

Bloklardan biri şuna benzemektedir:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Bu "bulletproof @font-face sözdizimi", @font-face popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (Bulletproof @font-face Syntax) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:

+ + + +
+

Not: Web yazı tipleriniz için belirli {{cssxref("font-variant")}} ve {{cssxref("font-stretch")}} değerleri de belirtebilirsiniz. Daha yeni tarayıcılarda, {{cssxref("unicode-range")}} niteliği ile web yazı tipinde kullanmak istediğiniz belirli bir karakter aralığı olan bir değer de belirteblirsiniz — destekleyen tarayıcılar da, yalnızca belirtilen karakterler indirilecek ve gereksiz indirme yapılmayacaktır. Drew McLellan tarafından yayınlanan Creating Custom Font Stacks with Unicode-Range makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.

+
+ +

Değişken yazı tipleri

+ +

Tarayıcılarda değişken yazı tipi adı verilen daha yeni bir yazı tipi teknolojisi vardır — bunlar, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosayasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesine izin veren yazı tipleridir. Başlangıç dersimiz için biraz ileri düzeydedirler, ancak kendinizi esnetmek ve geliştirmek istiyorsanız Değişken yazı tipleri klavuzumuzu okuyabilirsiniz.

+ +

Becerilerinizi test edin!

+ +

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Modülün sonunda bu bilgileri sakladğınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfasını düzenleme.

+ +

Özet

+ +

Artık metin biçimlendirme temelleri hakkındaki makalelerimizi incelediğinize göre, topluluk okulu anasayfası olan Dizgi oluşturma modülüne yönelik değerlendirmemizle anlamanızı test etme zamanı.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

Bu ünitede

+ + -- cgit v1.2.3-54-g00ecf