Skip to content

Commit e5d8b6b

Browse files
kyznkyzn
committed
fixed code indentations added code fences
1 parent 7cc2527 commit e5d8b6b

14 files changed

Lines changed: 775 additions & 763 deletions

File tree

‎tr/css/README.md‎

Lines changed: 138 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ Twitter yazılımcıları tarafından geliştirilmeye başlanmış ve şu anda d
1818

1919
Bootstrap kurmak için `.html` dosyanızda `<head>` kısmına şunları eklemeniz gerekli (`blog/templates/blog/post_list.html`):
2020

21-
html
22-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css">
23-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">
24-
21+
```html
22+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
23+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
24+
```
2525

2626
Bu, projemize hiçbir yeni dosya eklemez. Yalnızca internet üzerinde var olan dosyalara işaret eder. Şimdi websitenizi açın ve sayfayı yenileyin. İşte oldu!
2727

@@ -73,64 +73,64 @@ Ancak az da olsa yapalım. Acaba başlığımızın rengini mi değiştirsek? Bi
7373

7474
`blog/static/css/blog.css` dosyanıza şu kodu eklemelisiniz:
7575

76-
css
77-
h1 a {
78-
color: #FCA205;
79-
}
80-
76+
```css
77+
h1 a {
78+
color: #FCA205;
79+
}
80+
```
8181

8282
`h1 a` bir CSS Seçicisidir (Selector). Bu demek oluyor ki biz stilimizi, bir `h1` öğesi içerisinde olan tüm `a` öğelerine (örneğin kodumuzun içerisinde `<h1><a href="">link</a></h1>` gibi bir şey olduğunda) uyguluyoruz. Bu durumda, rengi `#FCA205` yani turuncu yapmasını söylüyoruz. Elbette, buraya kendi arzu ettiğin rengi koyabilirsin!
8383

8484
Bir CSS dosyasında, HTML dosyasındaki öğeler için stil belirleriz. Öğeler, öğenin ismi (örn. `a`, `h1`, `body`), `sınıf` özniteliği (attribute) ya da `id` özniteliği ile tanımlanırlar. Sınıf ve id (kimlik), bir elemente senin tarafından verilen isimlerdir. Sınıflar bir öğe grubunu tanımlar, id'ler ise belirli bir öğeye işaret ederler. Örneğin şu aşağıdaki etiket CSS tarafından, `a` etiket adı, `external_link` sınıfı ya da `link_to_wiki_page` id'si kullanılarak tanımlanabilir:
8585

86-
html
87-
<a href="proxy.php?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDjango" class="external_link" id="link_to_wiki_page">
88-
86+
```html
87+
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
88+
```
8989

9090
Daha fazla bilgi için [w3schools'da CSS seçicileri][4]ni okuyabilirsin.
9191

9292
[4]: http://www.w3schools.com/cssref/css_selectors.asp
9393

9494
Sonrasında, ayrıca HTML şablonumuza (template) bir takım CSS eklemeleri yaptığımızı bildirmemiz gerekiyor. `blog/templates/blog/post_list.html` dosyasını açın ve en başına şu satırı ekleyin:
9595

96-
html
97-
{% load staticfiles %}
98-
96+
```html
97+
{% load staticfiles %}
98+
```
9999

100100
Burada yaptığımız yalnızca statik dosyaları yüklemek. :) Sonrasında, `<head>` ve `</head>`, tagları arasına, Bootstrap CSS dosyalarına yönelik linklerden sonra (web tarayıcımız bu satırları yazıldıkları sırası içerinde okuduğundan, bizim dosyamızdaki kodlar Bootstrap dosyasının içerisindekileri geçersiz kılabilir), eklemelisiniz:
101101

102-
html
103-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7B%25+static+"css/blog.css' %}">
104-
102+
```html
103+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
104+
```
105105

106106
Az evvel şablonumuza (template) CSS dosyamızın nerede olduğunu söylemiş olduk.
107107

108108
Dosyanız şu şekilde gözüküyor olmalı:
109109

110-
html
111-
{% load staticfiles %}
112-
<html>
113-
<head>
114-
<title>Django Girls blog</title>
115-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
116-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
117-
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
118-
</head>
119-
<body>
110+
```html
111+
{% load staticfiles %}
112+
<html>
113+
<head>
114+
<title>Django Girls blog</title>
115+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
116+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
117+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
118+
</head>
119+
<body>
120+
<div>
121+
<h1><a href="/">Django Girls Blog</a></h1>
122+
</div>
123+
124+
{% for post in posts %}
120125
<div>
121-
<h1><a href="/">Django Girls Blog</a></h1>
126+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
127+
<h1><a href="">{{ post.title }}</a></h1>
128+
<p>{{ post.text|linebreaks }}</p>
122129
</div>
123-
124-
{% for post in posts %}
125-
<div>
126-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
127-
<h1><a href="">{{ post.title }}</a></h1>
128-
<p>{{ post.text|linebreaks }}</p>
129-
</div>
130-
{% endfor %}
131-
</body>
132-
</html>
133-
130+
{% endfor %}
131+
</body>
132+
</html>
133+
```
134134

135135
Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
136136

@@ -140,11 +140,11 @@ Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
140140

141141
Güzel, belki sitemize biraz hava verebiliriz. Sol taraftaki kenar boşluğunu (margin'i) arttırabiliriz. Hadi deneyelim!
142142

143-
css
144-
body {
145-
padding-left: 15px;
146-
}
147-
143+
```css
144+
body {
145+
padding-left: 15px;
146+
}
147+
```
148148

149149
Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını görelim!
150150

@@ -154,20 +154,20 @@ Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını gör
154154

155155
Belki de başlığımızın yazı tipini değiştirebiliriz? Aşağıdaki satırı `blog/templates/blog/post_list.html` dosyasının içinde `<head>` etiketi arasına kopyalayın:
156156

157-
html
158-
<link href="proxy.php?url=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%26amp%3Bsubset%3Dlatin%2Clatin-ext" rel="stylesheet" type="text/css">
159-
157+
```html
158+
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
159+
```
160160

161161
Bu satır Google Font'larından (https://www.google.com/fonts) *Lobster*'ı sayfamıza aktarır.
162162

163163
Şimdi `blog/static/css/blog.css` dosyamızdaki `h1 a` deklarasyon bloğunun içine (`{` ve `}` kodları arasına) `font-family: 'Lobster';` satırını ekleyip sayfayı yenileyin:
164164

165-
css
166-
h1 a {
167-
color: #FCA205;
168-
font-family: 'Lobster';
169-
}
170-
165+
```css
166+
h1 a {
167+
color: #FCA205;
168+
font-family: 'Lobster';
169+
}
170+
```
171171

172172
![Şekil 14.3][7]
173173

@@ -179,105 +179,105 @@ Yukarıda bahsettiğimiz üzere, CSS'te class (sınıf) diye bir kavram var. Cla
179179

180180
Devam edelim ve HTML kodumuzun bir kısmına isim verelim. Başlığı içeren `div`'e `page-header` isimli bir class ekleyelim:
181181

182-
html
183-
<div class="page-header">
184-
<h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F">Django Girls Blog</a></h1>
185-
</div>
186-
182+
```html
183+
<div class="page-header">
184+
<h1><a href="/">Django Girls Blog</a></h1>
185+
</div>
186+
```
187187

188188
Şimdi de blog postunu içeren `div`'e `post` isimli bir class ekleyelim.
189189

190-
html
191-
<div class="post">
192-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
193-
<h1><a href="">{{ post.title }}</a></h1>
194-
<p>{{ post.text|linebreaks }}</p>
195-
</div>
196-
190+
```html
191+
<div class="post">
192+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
193+
<h1><a href="">{{ post.title }}</a></h1>
194+
<p>{{ post.text|linebreaks }}</p>
195+
</div>
196+
```
197197

198198
Şimdi farklı seçicilere (selector'lara) deklarasyon blokları ekleyeceğiz. `.` ile başlayan seçiciler (selector'lar) sınıflara işaret eder. Aşağıdaki kodu anlamanıza yardıcı olacak CSS hakkında pek çok tutorial ve açıklama mevcut. Şimdilik sadece bu kodu kopyalayıp `blog/static/css/blog.css` dosyamıza yapıştıralım:
199199

200-
css
201-
.page-header {
202-
background-color: #ff9400;
203-
margin-top: 0;
204-
padding: 20px 20px 20px 40px;
205-
}
206-
207-
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
208-
color: #ffffff;
209-
font-size: 36pt;
210-
text-decoration: none;
211-
}
212-
213-
.content {
214-
margin-left: 40px;
215-
}
216-
217-
h1, h2, h3, h4 {
218-
font-family: 'Lobster', cursive;
219-
}
220-
221-
.date {
222-
float: right;
223-
color: #828282;
224-
}
225-
226-
.save {
227-
float: right;
228-
}
229-
230-
.post-form textarea, .post-form input {
231-
width: 100%;
232-
}
233-
234-
.top-menu, .top-menu:hover, .top-menu:visited {
235-
color: #ffffff;
236-
float: right;
237-
font-size: 26pt;
238-
margin-right: 20px;
239-
}
240-
241-
.post {
242-
margin-bottom: 70px;
243-
}
244-
245-
.post h1 a, .post h1 a:visited {
246-
color: #000000;
247-
}
248-
200+
```css
201+
.page-header {
202+
background-color: #ff9400;
203+
margin-top: 0;
204+
padding: 20px 20px 20px 40px;
205+
}
206+
207+
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
208+
color: #ffffff;
209+
font-size: 36pt;
210+
text-decoration: none;
211+
}
212+
213+
.content {
214+
margin-left: 40px;
215+
}
216+
217+
h1, h2, h3, h4 {
218+
font-family: 'Lobster', cursive;
219+
}
220+
221+
.date {
222+
float: right;
223+
color: #828282;
224+
}
225+
226+
.save {
227+
float: right;
228+
}
229+
230+
.post-form textarea, .post-form input {
231+
width: 100%;
232+
}
233+
234+
.top-menu, .top-menu:hover, .top-menu:visited {
235+
color: #ffffff;
236+
float: right;
237+
font-size: 26pt;
238+
margin-right: 20px;
239+
}
240+
241+
.post {
242+
margin-bottom: 70px;
243+
}
244+
245+
.post h1 a, .post h1 a:visited {
246+
color: #000000;
247+
}
248+
```
249249

250250
Sonrasında blog postlarımızı gösteren HTML kodunun etrafını class deklarasyonları ile saralım. Aşağıdaki kodları değiştirin:
251251

252-
html
253-
{% for post in posts %}
254-
<div class="post">
255-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
256-
<h1><a href="">{{ post.title }}</a></h1>
257-
<p>{{ post.text|linebreaks }}</p>
258-
</div>
259-
{% endfor %}
260-
252+
```html
253+
{% for post in posts %}
254+
<div class="post">
255+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
256+
<h1><a href="">{{ post.title }}</a></h1>
257+
<p>{{ post.text|linebreaks }}</p>
258+
</div>
259+
{% endfor %}
260+
```
261261

262262
`blog/templates/blog/post_list.html` dosyasının içierisindeki kodu bununla:
263263

264-
html
265-
<div class="content container">
266-
<div class="row">
267-
<div class="col-md-8">
268-
{% for post in posts %}
269-
<div class="post">
270-
<div class="date">
271-
{{ post.published_date }}
272-
</div>
273-
<h1><a href="">{{ post.title }}</a></h1>
274-
<p>{{ post.text|linebreaks }}</p>
264+
```html
265+
<div class="content container">
266+
<div class="row">
267+
<div class="col-md-8">
268+
{% for post in posts %}
269+
<div class="post">
270+
<div class="date">
271+
{{ post.published_date }}
275272
</div>
276-
{% endfor %}
277-
</div>
273+
<h1><a href="">{{ post.title }}</a></h1>
274+
<p>{{ post.text|linebreaks }}</p>
275+
</div>
276+
{% endfor %}
278277
</div>
279278
</div>
280-
279+
</div>
280+
```
281281

282282
Bu dosyaları kaydedin ve websayfanızı yenileyin.
283283

0 commit comments

Comments
 (0)