Kod Görüntüleme ve Alıntılar için CSS Özellikleri

Articles

CSS'e Giriş

Bu makale, kod görüntüleme ve alıntılarla ilgili CSS özelliklerini açıklar.

CSS'nin quotes ve user-select gibi kod görüntüleme ve alıntılar ile ilgili özelliklerini, kullanım durumlarını ve yazma biçimlerini öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-code-quotation.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

Kod Görüntüleme ve Alıntılar için CSS Özellikleri

`white-space` Özelliği

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

white-space özelliği, bir öğe içindeki boşlukların ve satır sonlarının nasıl ele alınacağını belirten bir CSS özelliğidir. Varsayılan olarak, HTML birden fazla boşluğu tek bir boşluk olarak değerlendirir ancak white-space özelliği bu davranışı değiştirmenize olanak tanır.

`white-space` için ana değerler

normal varsayılan değerdir, bu durumda birden fazla boşluk bir araya getirilir ve satırlar otomatik olarak kırılır.
nowrap, boşlukları bir araya getirir ancak satır kırılmalarını önler. İçerik tek satırda görüntülenir.
pre, boşlukları ve satır sonlarını olduğu gibi korur. Satır kayması gerçekleşmez.
pre-wrap, boşlukları ve satır sonlarını korurken satır kaymalarına izin verir.
pre-line, boşlukları bir araya getirir ancak satır sonlarını korur ve satır kaymalarına izin verir.
break-spaces, boşlukları ve satır sonlarını korurken uzun kelimelerde veya boşluklarda kırılmalara izin verir.

`overflow-wrap` Özelliği

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

overflow-wrap özelliği, eskiden word-wrap olarak bilinir ve kelimelerin container'ın genişliğini aştığında nasıl ele alınacağını tanımlar. Bu özelliği kullanarak kelimeleri düzgün bir şekilde sarabilir ve metnin taşmasını ya da düzenin bozulmasını önleyebilirsiniz.

Bu örnekte, normal ile uzun kelimeler container'ı aşabilir ve yatay kaymaya neden olabilir, ancak break-word uzun kelimelerin sarılmasını zorlar.

Özellik değerleri

overflow-wrap özelliğinin başlıca iki değeri vardır:.

normal

normal varsayılan değerdir ve tarayıcı standart kelime sarma kurallarını takip eder. Normalde kelimeler yalnızca boşluklar veya tire gibi kırılabilir noktalarda sarılır. Bir kelime aşırı derecede uzunsa, container'ın genişliğini aşabilir ve düzeni bozabilir.
break-word break-word, gerekirse bir satır sonunu zorlar ve kelime uzunluğuna bakmaksızın metni bir sonraki satıra sarar. Bu, uzun kelimeler nedeniyle konteyner düzeninin bozulmasını önlemeye yardımcı olur.

break-word belirtilmişse, ekran genişliğine sığması için boşluk veya tire olmayan yerlerde bile kelimeler sarılır. Bu özellikle URL'ler veya çok uzun kelimeler için faydalıdır.

`overflow-wrap` ile Diğer Özellikler Arasındaki Farklar

overflow-wrap özelliğine benzer özellikler arasında word-break ve white-space bulunur.

`word-break` ile Farkı

word-break, kelime bütünlüğünün nasıl ele alınacağını tanımlar, ancak overflow-wrap yalnızca bir kelime konteyner genişliğini aştığında sarma işlemini tetikler. Örneğin, word-break: break-all; kelimeleri uzun olmasalar bile herhangi bir konumda bölerken, overflow-wrap yalnızca kelimeler konteyneri aştığında sarar.

`white-space` ile Farkı

white-space özelliği, tüm metindeki satır sonları ve boşlukların nasıl ele alınacağını kontrol eder. overflow-wrap özelliğinden farklı olarak, white-space satır sonları ve boşlukların korunup korunmayacağını tanımlar ancak kelime sarımını doğrudan etkilemez.

Örneğin, white-space: nowrap;, tüm metnin sarılmadan tek bir satırda kalmasını sağlar. Öte yandan, overflow-wrap metin sarımını kontrol eder.

Pratik Kullanım Durumları

overflow-wrap özellikle aşağıdaki durumlarda faydalıdır:.

URL Gösterimi: Uzun URL'lerin gösteriminde düzen sorunlarını önler.
Teknik Terimler: Sürekli İngilizce kelimelerin veya teknik terimlerin konteyner genişliğini aştığı durumları ele alır.
Duyarlı Tasarım: Uzun metinlerin küçük ekranlarda bile düzeni bozmadığından emin olur.

`quotes` özelliği

1q {
2    quotes: "(" ")" "[" "]";
3}

quotes özelliği, tırnak işaretlerini özelleştirmek için kullanılır. Genellikle, <blockquote> veya <q> öğelerinin içeriği sarıldığında tırnak işaretleri otomatik olarak eklenir, ancak quotes özelliğini kullanarak özel tırnak işaretleri belirleyebilirsiniz.

Bu örnekte, parantezler ((, )) dış tırnak işaretleri olarak kullanılır. Ayrıca, iç içe tırnak işaretleri köşeli parantezler ([, ]) ile temsil edilir.

Sözdizimi

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

quotes özelliği, aşağıdaki gibi değerlerle belirtilmiş olabilir:.

none: Hiçbir tırnak işareti görüntülenmeyecek.
Tırnak serisi: Açılış ve kapanış tırnak işaretlerini belirtin. İlk grup dış tırnak işaretlerini temsil ederken, sonraki gruplar iç içe tırnak işaretleri içindir.

`quotes` özelliklerinin ana noktaları

quotes özelliği, metin alıntılarında kullanılan tırnak işaretlerini özelleştirmek için yararlı bir özelliktir. Tasarım ve dile uygun tırnak işaretlerini belirleyerek daha şık bir sayfa sunumu elde edebilirsiniz. quotes özelliğini kullanmanın aşağıdaki gibi avantajları vardır:.

Tırnak işaretlerini özelleştirme: Varsayılan tırnak şekillerini değiştirebilir veya belirli bir tasarıma uygun tırnak işaretleri belirleyebilirsiniz.
İç içe geçmiş alıntıları destekler: İç içe geçmiş alıntılar için farklı tırnak setlerini uygulayabilirsiniz.
Ülkeye ve dile göre özelleştirilebilir: Dil veya ülkeye bağlı olarak farklı tırnak stili uygulamak kolaydır; bu, uluslararası web siteleri için faydalıdır.

`user-select` özelliği

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

user-select özelliği, kullanıcıların metni seçip seçemeyeceğini kontrol etmek için kullanılan bir CSS özelliğidir. Bu özelliği kullanarak, belirli öğelerde veya tüm sayfada metnin kopyalanmasını engelleyebilir ya da tam tersine seçilebilir hale getirebilirsiniz. user-select özelliği için all değerini belirlerseniz, tüm öğe bir kerede seçilir. Örneğin, bir kullanıcı bir metin alanına veya paragrafa tıkladığında, tüm öğe bir kerede seçilir.
Kaynak kodun toplu seçiminde de kullanılabilir.
Bu örnekte, ilk paragrafın metni seçilebilirken, ikinci paragrafın metni seçilemez. select-all sınıfında, user-select özelliği all olarak ayarlanır ve bu, tüm öğenin bir kerede seçilmesine olanak tanır.

Sözdizimi

1element {
2    user-select: auto | none | text | all | contain;
3}

user-select özelliği şu değerlerle belirtilebilir:.

auto: Tarayıcının varsayılan davranışını kullanır. Metin seçimi çoğu öğede izinlidir ancak düğmeler ve bağlantılar gibi bazı etkileşimli öğelerde kısıtlanabilir.
none: Metin seçimi tamamen devre dışı bırakılır. Kullanıcılar, o öğe içindeki metni seçemezler.
text: Sadece öğe içindeki metnin seçilmesine izin verir.
all: Tüm öğe bir kerede seçilir. Kısmi seçim yerine, tüm öğe bir bütün olarak seçilir.
contain: Sadece bazı tarayıcılar tarafından desteklenir. Sadece tıklanan konumdaki öğenin seçilmesine izin verir.

Desteklenen Tarayıcılar

user-select özelliği, çoğu modern tarayıcı tarafından desteklenmektedir. Ancak, bazı tarayıcılar -webkit-user-select gibi üretici önekleri gerektirebilir.

Chrome: Destekleniyor
Firefox: Destekleniyor
Safari: Destekleniyor (-webkit- öneki gereklidir)
Edge: Destekleniyor
Internet Explorer: Desteklenmiyor

Ana Kullanım Durumları

user-select özelliği aşağıdaki avantajları sunar:.

Kullanıcı arayüzü öğeleri: Tıklama veya sürükleme işlemlerine müdahale etmemek için metin seçimini devre dışı bırakın.
Metin kopyalamayı önleyin: Belirli öğelerde metin seçimini ve kopyalamayı engelleyin.
Formlar ve etkileşimli öğeler: Kullanıcı deneyimini artırmak için metin seçiminin gereksiz olduğu etkileşimli öğelere uygulayın.

Özet

user-select özelliği, bir web sayfasında metin seçimini esnek bir şekilde kontrol etmeye olanak tanıyan kullanışlı bir CSS özelliğidir. Kullanıcıların istemeden gereksiz metin seçmesini engelleyebilir veya bir seferde tüm metni seçmelerine olanak tanıyarak farklı etkileşimlere uyum sağlar.

`tab-size` özelliği

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}

tab-size özelliği, sekme karakterlerinin boşluğunu özelleştirmek için kullanılır. Varsayılan olarak sekme genişliği genellikle 8 boşluk olarak ayarlanır, ancak tab-size özelliği ile herhangi bir değere ayarlanabilir.

Sözdizimi

1element {
2    tab-size: length | number;
3}

tab-size özelliği aşağıdaki değer türlerini kabul edebilir.

number: Sekme karakterinin genişliğini karakter sayısı açısından belirtir. Bir tamsayı veya ondalık bir sayı belirtebilirsiniz.
length: Sekme karakterinin genişliğini uzunluk birimleriyle (örn. px, em) belirtir.

Notlar

tab-size özelliği genellikle düz aralıklı yazı tipleriyle kullanılır. Orantılı yazı tipleriyle kullanıldığında sekme genişliği düzensiz hale gelebilir.
Karakter sayısını belirtirken farklı cihazlardaki ölçeklendirme sorunlarına dikkat edin.

Özet

tab-size özelliğini kullanmak, kod veya sekme karakterleri görüntülerken esneklik sağlar. Bir geliştirici olarak sekme genişliğini doğru bir şekilde ayarlamak, kodun okunabilirliğini ve tasarım tutarlılığını sağlar.

`text-indent` özelliği

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}

text-indent özelliği, blok öğesindeki metnin ilk satırını belirtilen bir mesafede girintilemek için kullanılır. Bu özellik, bir paragrafın yalnızca ilk satırını biçimlendirmeye olanak tanır.

Sözdizimi

1element {
2    text-indent: length | percentage;
3}

text-indent özelliği aşağıdaki değer türlerini kabul edebilir.

length: Girintiyi uzunluk birimleriyle (örn. px, em) belirtir.
percentage: Girintiyi, kapsayıcı öğenin genişliğine dayalı bir yüzde olarak belirtir.

Notlar

text-indent yalnızca blok elemanlara uygulanır. Satır içi (inline) elemanlar üzerinde etkisi yoktur.

Özet

text-indent özelliği, okunabilir metin tasarımları oluşturmak için basit ama güçlü bir araçtır. Temel bilgileri öğrenerek ve ileri kullanım örneklerini ve hususları anlayarak daha etkili bir şekilde stil verebilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Metin boşluğuyla ilgili CSS özellikleri Kutu modeli ile ilgili CSS özellikleri

Kod Görüntüleme ve Alıntılar için CSS Özellikleri

YouTube Video

Önizleme için HTML

Kod Görüntüleme ve Alıntılar için CSS Özellikleri

white-space Özelliği

white-space için ana değerler

overflow-wrap Özelliği

Özellik değerleri

overflow-wrap ile Diğer Özellikler Arasındaki Farklar

word-break ile Farkı

white-space ile Farkı

Pratik Kullanım Durumları

quotes özelliği

Sözdizimi

quotes özelliklerinin ana noktaları

user-select özelliği

Sözdizimi

Desteklenen Tarayıcılar

Ana Kullanım Durumları

Özet

tab-size özelliği

Sözdizimi

Notlar

Özet

text-indent özelliği

Sözdizimi

Notlar

Özet

YouTube Video

`white-space` Özelliği

`white-space` için ana değerler

`overflow-wrap` Özelliği

`overflow-wrap` ile Diğer Özellikler Arasındaki Farklar

`word-break` ile Farkı

`white-space` ile Farkı

`quotes` özelliği

`quotes` özelliklerinin ana noktaları

`user-select` özelliği

`tab-size` özelliği

`text-indent` özelliği