1
00:00:00,000 --> 00:00:05,660
>> [MÜZİK OYUN]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: O zaman bir daha ele alalım
Video bir daha dil hakkında konuşmak için.

3
00:00:08,740 --> 00:00:10,800
Biz CSS bahsedeceğiz bu sefer.

4
00:00:10,800 --> 00:00:13,460
Için kısa Yani CSS,
Basamaklı Stil Şablonu,

5
00:00:13,460 --> 00:00:16,149
Kullandığımız başka dildir
web siteleri oluşturarak zaman.

6
00:00:16,149 --> 00:00:17,190
Böyle düşün.

7
00:00:17,190 --> 00:00:20,900
HTML, biz düzenlemek için kullanabileceğiniz ne varsa
Bizim sayfaya koymak istediğiniz içerik,

8
00:00:20,900 --> 00:00:25,390
CSS genellikle kullanımı aracı olduğunu
Bizim web siteleri nasıl bakmak özelleştirmek için,

9
00:00:25,390 --> 00:00:30,410
ve nasıl bir kullanıcı deneyimi gerçekten
Web sitemizde ile etkileşim vardır.

10
00:00:30,410 --> 00:00:32,535
>> HTML benzer, CSS
bir programlama dili.

11
00:00:32,535 --> 00:00:33,451
Bu mantığı yoktur.

12
00:00:33,451 --> 00:00:34,595
Bu değişkenleri yok.

13
00:00:34,595 --> 00:00:38,890
O her türlü yok
C yaptığı benzer şeyler akış.

14
00:00:38,890 --> 00:00:40,150
Bu bir stil dil.

15
00:00:40,150 --> 00:00:42,810
Ve kendi sözdizimi güzel
Basit ve sadece açıklar

16
00:00:42,810 --> 00:00:46,240
nasıl unsurları bizim
sayfa belirli HTML var

17
00:00:46,240 --> 00:00:48,190
elemanlar modifiye edilmelidir.

18
00:00:48,190 --> 00:00:51,170
Bu amaçla, değil varsa
Henüz, HTML bizim video izledim

19
00:00:51,170 --> 00:00:53,290
veya bilmediğiniz
HTML genellikle, seni

20
00:00:53,290 --> 00:00:57,430
Şuna bir göz atmak isteyebilirsiniz
CSS ilk, çünkü bu tartışma

21
00:00:57,430 --> 00:01:00,700
bağlı olacak
bazı HTML bilgisi.

22
00:01:00,700 --> 00:01:03,740
>> Yani burada gerçekten
Basit CSS stil.

23
00:01:03,740 --> 00:01:06,480
Asla ettik bile
önce CSS ile programlanmış,

24
00:01:06,480 --> 00:01:10,624
Eğer anlamaya Ben eminim
Bu stil tam olarak ne.

25
00:01:10,624 --> 00:01:11,290
O ne yapar?

26
00:01:11,290 --> 00:01:15,470
Eh, bizim web vücuda uygulanan
vücut etiketleri arasında sayfa, her şeyi

27
00:01:15,470 --> 00:01:19,631
Bizim HTML ve setleri
mavi o sayfanın arka plan rengi.

28
00:01:19,631 --> 00:01:21,130
Evet, bu çok basit bir stil var.

29
00:01:21,130 --> 00:01:23,269
Aslında çok insan var
samimi bir dil, CSS.

30
00:01:23,269 --> 00:01:26,560
Yani, daha önce hiç kullanmadım bile
muhtemelen o ne yaptığını tahmin edebilir.

31
00:01:26,560 --> 00:01:30,140
Aslında, eğer biz bir sayfa, yüklenen
Bu stil, her nasılsa gömülü

32
00:01:30,140 --> 00:01:36,240
Bizim sayfanın arka plan rengi olur
mavi ve standart beyaz olmamak.

33
00:01:36,240 --> 00:01:37,670
>> Peki nasıl stil yaratırım?

34
00:01:37,670 --> 00:01:39,700
Peki ilk, biz var
Bir seçici tanımlamak.

35
00:01:39,700 --> 00:01:42,970
Son örnekte,
Bu seçici vücut oldu.

36
00:01:42,970 --> 00:01:45,050
Sonra açık var
kaşlı ayraç ve biz konum

37
00:01:45,050 --> 00:01:48,410
tanımlamaya başlamak için gidiyoruz
Bu seçici için stil.

38
00:01:48,410 --> 00:01:51,800
Kaşlı ayraçlar arasına, biz
Sadece anahtar değer çiftleri bir listesi var.

39
00:01:51,800 --> 00:01:56,205
Bir önceki değer çifti oldu
arka plan rengi mavi noktalı virgül,

40
00:01:56,205 --> 00:01:57,830
ama biz bunlardan daha yapabilirdi.

41
00:01:57,830 --> 00:02:02,330
Birden şeyler uygulayarak olabilir
bu etiketi, o seçici vücuda.

42
00:02:02,330 --> 00:02:05,960
Bunların her biri bir ile ayrılır
noktalı virgül, ve biz bunların her biri çağrı

43
00:02:05,960 --> 00:02:08,949
Bir deklarasyon, bir CSS beyanı.

44
00:02:08,949 --> 00:02:12,410
Hepimizin styling biz ile işiniz bittiğinde
söz konusu etiketi uygulamak istediğiniz,

45
00:02:12,410 --> 00:02:15,300
biz sadece bir kapanış kıvırcık var
stil bitirmek için brace,

46
00:02:15,300 --> 00:02:19,640
ve biz stil tanımlayan bitti
söz konusu seçici için.

47
00:02:19,640 --> 00:02:21,341
>> Bazı yaygın CSS özellikleri nelerdir?

48
00:02:21,341 --> 00:02:23,590
Eh, belki koymak istiyorum
şey etrafında bir sınır.

49
00:02:23,590 --> 00:02:26,850
Diyebilirsiniz Yani, sınır,
Bu anahtar olurdu

50
00:02:26,850 --> 00:02:29,460
ve sonra değerleri olacaktır,
Ne tarz, renk ve genişliği

51
00:02:29,460 --> 00:02:30,209
Eğer bunu istiyorum.

52
00:02:30,209 --> 00:02:33,530
Yani stil katı olabilir
çizgi, kesikli çizgi, bir kesik çizgi,

53
00:02:33,530 --> 00:02:36,020
dalgalı bir çizgi olacak bir sırt hattı.

54
00:02:36,020 --> 00:02:38,790
Belki bunu istiyorum
mavi veya siyah veya yeşil olabilir.

55
00:02:38,790 --> 00:02:41,490
Belki de olmak istiyorum
1 ya da 2 ya da 10 piksel genişliğinde.

56
00:02:41,490 --> 00:02:43,254
Siz bu şeylerin hepsini belirtebilirsiniz.

57
00:02:43,254 --> 00:02:46,420
Belki arka plan ayarlamak istediğiniz
Belirli bir şekilde sayfanın rengi.

58
00:02:46,420 --> 00:02:49,215
Biz zaten ayarı gördüm
Vücudun arka plan mavi olmak.

59
00:02:49,215 --> 00:02:52,080
>> Sonra bir anahtar kelime kullanabilirsiniz,
yani CSS bazı renkleri vardır

60
00:02:52,080 --> 00:02:55,950
bu, bunun içine, yeşil, mavi inşa
siyah, bildiğimiz çok basit renkler.

61
00:02:55,950 --> 00:02:59,110
Ama aynı zamanda herhangi belirtebilirsiniz
İstediğiniz onaltılık renk.

62
00:02:59,110 --> 00:03:05,190
Renkleri tespit edilebilir Geri Çağırma
Üç altıgen sayılar kümesi tarafından

63
00:03:05,190 --> 00:03:08,500
0 ile 255, RG ve b için
kırmızı, yeşil ve mavi bileşen.

64
00:03:08,500 --> 00:03:10,590
Ve böylece biz belirtebilirsiniz
Biz istediğiniz herhangi bir renk,

65
00:03:10,590 --> 00:03:15,520
Bunun yerine mavi veya yeşil veya siyah kullanarak,
sterlin kullanarak ve hex sonra altı basamaklı,

66
00:03:15,520 --> 00:03:18,310
ve bizi verecekti
Altı haneli rengi.

67
00:03:18,310 --> 00:03:19,850
Yani arka plan rengi var.

68
00:03:19,850 --> 00:03:21,975
>> Biz de ön planda olması
genellikle renk,

69
00:03:21,975 --> 00:03:24,140
sayfanızın metin olacak.

70
00:03:24,140 --> 00:03:28,850
Ve benzer şekilde bunu yapabilir
anahtar kelime ve ya altı haneli hex ile.

71
00:03:28,850 --> 00:03:32,140
Yani herhangi bir renk belirtebilirsiniz sen
sayfanızın metin için istediğiniz

72
00:03:32,140 --> 00:03:36,370
Belirli bir karşı
arka plan rengini, yukarılardan.

73
00:03:36,370 --> 00:03:39,100
Sen de değişir ve başa çıkabilirim
yazı tipi ve yol metniyle

74
00:03:39,100 --> 00:03:40,400
sayfasında oluşturulur.

75
00:03:40,400 --> 00:03:42,010
>> Yani yazı boyutunu değiştirebilirsiniz.

76
00:03:42,010 --> 00:03:46,320
Sen böyle ekstra anahtar kelimeler kullanabilirsiniz
Ekstra küçük ya da küçük xx, ya da orta,

77
00:03:46,320 --> 00:03:47,660
Büyük ve böyle devam eder.

78
00:03:47,660 --> 00:03:50,750
Sen sabit noktalar kullanabilirsiniz, 10
nokta, 12 nokta, vb.

79
00:03:50,750 --> 00:03:55,850
Sen, yüzdelik,% 80,% 20 kullanabilirsiniz
Nerede% 100 varsayılan font

80
00:03:55,850 --> 00:03:59,220
Genellikle gidiyor boyutu
11 ya da 12 sayı gibi bir şey.

81
00:03:59,220 --> 00:04:01,659
Yoksa bile onu temel alabilirsiniz
En son yazı boyutu.

82
00:04:01,659 --> 00:04:04,950
Sadece bir şeyler yazdı ve siz biliyorsanız
daha küçük olması için ne istiyorsun olduğunu

83
00:04:04,950 --> 00:04:08,241
ama sen bilmiyorsun tam olarak ne boyutta size
Olması, iyi, sadece söyleyebiliriz istiyorum

84
00:04:08,241 --> 00:04:09,330
font boyutu küçüktür.

85
00:04:09,330 --> 00:04:14,344
Ve bu, kapalı temel olacak
sadece yukarı yukarıdaki, bu yazı tipi boyutu var.

86
00:04:14,344 --> 00:04:15,760
Ve küçük veya büyük olsun.

87
00:04:15,760 --> 00:04:18,390
Yani farklı bir sürü var
yolları yazı tipi boyutunu belirlemek için.

88
00:04:18,390 --> 00:04:20,690
>> Ayrıca ne belirtebilirsiniz
İstediğiniz yazı ailesi.

89
00:04:20,690 --> 00:04:23,360
Belirli bir varsa
isim, bir yolu var CSS--

90
00:04:23,360 --> 00:04:27,270
Biz bu konuda konuşmak için gitmiyoruz
burada-- çok özel bir yazı tipi tanımlamak için

91
00:04:27,270 --> 00:04:28,980
ve sayfanıza içine gömün.

92
00:04:28,980 --> 00:04:30,620
Ayrıca genel adları kullanabilirsiniz.

93
00:04:30,620 --> 00:04:33,540
Web güvenli yazı bir çok şey var
O CSS önceden tanımlanmıştır.

94
00:04:33,540 --> 00:04:36,352
Ve Microsoft kullanıcı iseniz
Son 20 yılda ofis,

95
00:04:36,352 --> 00:04:38,810
muhtemelen aşina
Bu web güvenli yazı bir sürü

96
00:04:38,810 --> 00:04:44,640
Zaten, Times New Roman, Arial,
Yeni, Gürcistan, Tahoma, Verdana kurye

97
00:04:44,640 --> 00:04:45,470
ve benzeri.

98
00:04:45,470 --> 00:04:47,170
Bunlar tüm web güvenli yazı tipleri kabul edilir.

99
00:04:47,170 --> 00:04:49,169
Ve aslında, bölüm
nedeni olmaya geldim

100
00:04:49,169 --> 00:04:54,140
her sayfada web-- yapmak için kullanılacak olan
Bu varsayılan erişim yazı batmıştı

101
00:04:54,140 --> 00:04:58,480
Çeşitli serifs ve tüm bu
Biz içine almazsınız yazı şeyler,

102
00:04:58,480 --> 00:05:01,130
ancak bu genellikle
CSS erişilebilir,

103
00:05:01,130 --> 00:05:04,029
Bunu yapmazsanız bile
Aksi takdirde fontları tanımlar.

104
00:05:04,029 --> 00:05:07,070
Son olarak, metin hizalayabilirsiniz,
o varlık yerine, varsayılan olarak, hizalanmış

105
00:05:07,070 --> 00:05:09,310
sola, sen-ebil
sağa hizalayın,

106
00:05:09,310 --> 00:05:13,740
ya bunu merkezli hizalamak veya olabilir
her iki kenar boşluklarını vurmak böylece haklı.

107
00:05:13,740 --> 00:05:16,800
O yüzden kullanabileceğiniz tüm seçenekler
Metin neye benzediğini değiştirmek için,

108
00:05:16,800 --> 00:05:20,120
ve sayfanızda nasıl görüntülenen.

109
00:05:20,120 --> 00:05:22,180
>> Sizin seçiciler yok
etiketleri yalnızca olmak zorunda.

110
00:05:22,180 --> 00:05:25,539
Biz daha önce bir vücut etiketi gördüm
seçici ve etiket seçici

111
00:05:25,539 --> 00:05:26,580
sadece böyle gözüküyor.

112
00:05:26,580 --> 00:05:30,020
Size daha sonra bir etiket adı ve
Bu etiket için bir stil tanımlayabilirsiniz.

113
00:05:30,020 --> 00:05:32,660
Ama aynı zamanda bir şeyler yapabiliriz
bir kimlik seçici denir.

114
00:05:32,660 --> 00:05:34,390
Bir ID seçici oldukça benzer görünüyor.

115
00:05:34,390 --> 00:05:38,100
Ama şimdi ben kullanıyorum değilim fark
Bir HTML etiketi, I, bu durumda, kullanıyorum

116
00:05:38,100 --> 00:05:40,720
#unique, veya benzersiz karma.

117
00:05:40,720 --> 00:05:42,930
Eğer gelen hatırlayacak olursak bizim
HTML video, konuştuk

118
00:05:42,930 --> 00:05:45,620
etiketler nitelikleri olabilir nasıl.

119
00:05:45,620 --> 00:05:48,340
>> Ve bir nitelik olduğunu geçerlidir
hemen hemen tüm HTML etiketleri,

120
00:05:48,340 --> 00:05:51,440
ama biz bu konuda konuşmadık,
Kimlik etiketi denilen şeydir.

121
00:05:51,440 --> 00:05:55,250
Yani bu özel CSS olur
Sadece sahip HTML etiketi için geçerlidir

122
00:05:55,250 --> 00:05:58,530
çok özel bir kimlik, adlandırılmış ettik.

123
00:05:58,530 --> 00:06:01,000
Eğer bir yerde var ise
kodunuzu bir yere

124
00:06:01,000 --> 00:06:06,090
HTML dosyası, bir etiket ve sana
Bu etikete bir nitelik olarak belirtin

125
00:06:06,090 --> 00:06:09,060
Kimlik, bu eşsiz eşittir
Özellikle stil

126
00:06:09,060 --> 00:06:15,030
Burada tek arasında geçerli olacak
eşsiz kimliği ile bu etiket.

127
00:06:15,030 --> 00:06:17,180
>> Ayrıca bir şey yapabilirsiniz
Bir sınıf seçici denir.

128
00:06:17,180 --> 00:06:19,920
Sahip olmanın yanı sıra yüzden
ID de yapabilirsiniz, nitelikleri

129
00:06:19,920 --> 00:06:23,130
HTML etiketleri için bir sınıf özniteliğini ekleyin.

130
00:06:23,130 --> 00:06:27,140
Ve bir class özniteliği kullandığınızda,
birden fazla etiket tatbik edilebilir.

131
00:06:27,140 --> 00:06:31,880
Yani bazı şeyleri varsa o
Belki söylemek benzer istiyorsanız,

132
00:06:31,880 --> 00:06:35,890
açık etiket vesaire, vesaire, vesaire,
vesaire, sınıf öğrencilerini eşittir.

133
00:06:35,890 --> 00:06:38,190
Sonra bu belirli
stil geçerli olacak

134
00:06:38,190 --> 00:06:42,041
kimin sınıfı her etikete öğrencileridir.

135
00:06:42,041 --> 00:06:44,290
Bu durumda, set olur
Sarı arka plan rengi,

136
00:06:44,290 --> 00:06:46,706
ve biz, opacity istiyorum hangi
Konuşmamız vermedi etiket olduğunu

137
00:06:46,706 --> 00:06:52,510
ama ne kadar şeffaf ilgilenir
şey, bu durumda% 70 vardır.

138
00:06:52,510 --> 00:06:54,430
>> Için iki seçenek var
yazma stil.

139
00:06:54,430 --> 00:06:56,680
Onları yazabilirsiniz
doğrudan HTML içine

140
00:06:56,680 --> 00:06:59,690
stil yerleştirerek
stil etiketleri arasında.

141
00:06:59,690 --> 00:07:03,850
Ve bu tarz etiketler içinde gitmek
Web sayfasının baş etiketleri.

142
00:07:03,850 --> 00:07:08,240
Belki de daha çok tercih edilen bir yol yapmak
ayrı bir .css dosyası yazmak için,

143
00:07:08,240 --> 00:07:12,360
ve sonra içine bağlamak senin
Bağlantı etiketlerini kullanarak belge.

144
00:07:12,360 --> 00:07:14,690
Bağlantı etiketleri, yine vardır
köprüler farklı,

145
00:07:14,690 --> 00:07:16,760
Bizim video bir HTML hatırlayacak olursak.

146
00:07:16,760 --> 00:07:19,030
Ve bağlantı etiketleri nasılsınız biz
ayrı dosyalarda çekin.

147
00:07:19,030 --> 00:07:23,900
Bu tür eşdeğer gibi
web programlama için #include.

148
00:07:23,900 --> 00:07:27,140
>> Öyleyse table.HTML bir göz atalım.

149
00:07:27,140 --> 00:07:29,380
Eğer gelen hatırlayacak olursak bizim
HTML Video, ben gösterdi

150
00:07:29,380 --> 00:07:32,000
çok örneği
Basit çarpma

151
00:07:32,000 --> 00:07:35,160
hoş görünüyordu tablo
çirkin ve belki orada

152
00:07:35,160 --> 00:07:38,650
bir yol ile daha iyi yapmak için
CSS, aslında görünmesi için

153
00:07:38,650 --> 00:07:41,120
Bir çarpma gibi daha
masa falan

154
00:07:41,120 --> 00:07:43,730
bu sadece birbirine yapışmış değil
hiçbir gerçek bölümü ile

155
00:07:43,730 --> 00:07:45,532
satırlar ve sütunlar arasında.

156
00:07:45,532 --> 00:07:47,490
Yani sından izin
CS50 IDE ve bir göz atın

157
00:07:47,490 --> 00:07:50,780
CSS, tür, çimdik nasıl
ne daha önce başladı,

158
00:07:50,780 --> 00:07:53,290
ve çok daha iyi bir şey yapmak.

159
00:07:53,290 --> 00:07:55,650
>> Bu yüzden CS50 IDE konum
Şimdi, yabancı ise,

160
00:07:55,650 --> 00:07:58,710
Bu yukarı çekin edeceğiz
masa HTML sayfası olduğunu.

161
00:07:58,710 --> 00:08:01,090
Table.HTML temelde
Sadece içeriğini tanımlar

162
00:08:01,090 --> 00:08:05,044
Bir multiple-- bir olması gerekiyordu
Dört dört çarpım tablosu.

163
00:08:05,044 --> 00:08:06,210
Oldukça basit değil.

164
00:08:06,210 --> 00:08:09,410
Ve biz o-cekti düşünürdüm
Oldukça iyi organize bakmak.

165
00:08:09,410 --> 00:08:15,277
Ama aslında, biz bu sayfayı önizleme yaparken,
Biz bu tür çirkin, doğru olduğunu görüyoruz?

166
00:08:15,277 --> 00:08:16,860
Açıkçası biz burada satır ve sütun var.

167
00:08:16,860 --> 00:08:18,350
Orada ayrılık çeşit.

168
00:08:18,350 --> 00:08:20,040
Ama anlamlı bir ayrılık değil.

169
00:08:20,040 --> 00:08:23,105
Biz aslında almıyorum konum
Burada çok fazla bilgi.

170
00:08:23,105 --> 00:08:25,730
Ve arasında hiçbir ayrım yoktur
cinsinden satır ve sütun

171
00:08:25,730 --> 00:08:28,460
yatay veya dikey kurallar.

172
00:08:28,460 --> 00:08:31,530
Biz muhtemelen bu yapabilirdiniz
daha biraz bak.

173
00:08:31,530 --> 00:08:32,934
Öyleyse deneyelim.

174
00:08:32,934 --> 00:08:34,559
Yani buraya bu sekmeyi kapatmak için gidiyorum.

175
00:08:34,559 --> 00:08:37,434
Ve ben, benim table.HTML kapatmak için gidiyorum
ve burada başka bir sürümü var

176
00:08:37,434 --> 00:08:39,490
table2.HTML denir.

177
00:08:39,490 --> 00:08:40,655
Bunu açmak gerekir.

178
00:08:40,655 --> 00:08:42,530
Sayfanın organıdır
hemen hemen aynı,

179
00:08:42,530 --> 00:08:44,238
ama ben değiştim bir
üstünde biraz.

180
00:08:44,238 --> 00:08:47,132
Ve ben burada yukarı olacak.

181
00:08:47,132 --> 00:08:49,340
Ben, bu defa edin
Gömülü stil etiketlerini kullanarak.

182
00:08:49,340 --> 00:08:53,550
Ben bir stil etiketi açtım ve şimdi ben
sadece içinde bir CSS stil tanımlama

183
00:08:53,550 --> 00:08:54,310
Bunun.

184
00:08:54,310 --> 00:08:56,310
Ben, masa diyor bir stil var.

185
00:08:56,310 --> 00:08:58,170
Bu benim Etiket seçici var.

186
00:08:58,170 --> 00:09:01,340
Ben nokta veya hash kullanarak değilim,
Hangi ben ben yapıyor olacak

187
00:09:01,340 --> 00:09:03,710
bir kimliği veya sınıf seçici kullanarak oldu.

188
00:09:03,710 --> 00:09:06,190
Ben bir etiket seçici burada-- tablo var.

189
00:09:06,190 --> 00:09:10,090
Bu tarz gidiyor
her tablo etiketi için geçerlidir.

190
00:09:10,090 --> 00:09:14,950
Görünüşe göre bir tane koymak istiyorum
Geniş piksel, katı mavi sınır,

191
00:09:14,950 --> 00:09:15,779
Benim tablo içinde.

192
00:09:15,779 --> 00:09:18,320
Böyle muhtemelen olur sesler
Doğru, durum yardımcı?

193
00:09:18,320 --> 00:09:20,320
Biz gidiyoruz
işler çok daha iyi görünüyorsun.

194
00:09:20,320 --> 00:09:21,190
Yani bu iyi.

195
00:09:21,190 --> 00:09:23,540
Üslup, ben sadece ettik
Burada benim stil gömülü.

196
00:09:23,540 --> 00:09:25,100
Kesinlikle bir var
bunu yapmak için kabul edilebilir bir yol.

197
00:09:25,100 --> 00:09:26,391
Şimdi bu neye benzediğini görelim.

198
00:09:26,391 --> 00:09:29,790
Yani buraya geri dönün ve edeceğiz
Benim table2.HTML önizleme olacak olacak.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
Eh, yani ne istediğini çok değil
ama biz istedi tam olarak ne olduğunu.

201
00:09:36,470 --> 00:09:39,530
Biz bu tarz olduğunu söyledi
bizim masaya uygulamak için gidiyoruz.

202
00:09:39,530 --> 00:09:43,810
Masamıza artık bir pikseli
Çevresinde geniş, katı mavi sınır.

203
00:09:43,810 --> 00:09:46,237
Biz aslında almıyorum konum
Tablo hücreleri de.

204
00:09:46,237 --> 00:09:47,570
Biz sadece masada alıyoruz.

205
00:09:47,570 --> 00:09:49,310
Yani CSS çalıştı.

206
00:09:49,310 --> 00:09:51,890
Bu uygulanan bir
bizim masaya stil.

207
00:09:51,890 --> 00:09:53,981
Ama oldukça yapmadım
Ne biz yapmak istedim.

208
00:09:53,981 --> 00:09:55,730
Biz yapmak nasıl alabilirim
Ne biz bunu yapmak ister misin?

209
00:09:55,730 --> 00:09:59,287
>> Peki, bir daha bir göz atalım
table3.HTML bu sürümü.

210
00:09:59,287 --> 00:10:00,870
Yani sadece bu sekmeleri kapatmak için gidiyorum.

211
00:10:00,870 --> 00:10:03,890
Ben buraya geri gitmek için gidiyorum benim
ağaç dosya ve table3.HTML açmak.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
Yine, güzel bakmak için gidiyor
Burada başında benzer.

214
00:10:10,350 --> 00:10:14,460
Ama haber bu kez, yerine kullanma
Orada gömülü bir stil,

215
00:10:14,460 --> 00:10:18,870
Ben bağlantısını gidiyorum
Bağlantı etiketi kullanarak stil.

216
00:10:18,870 --> 00:10:22,480
Yani görünüşte bir bağlama ediyorum
tables.CSS denilen stil,

217
00:10:22,480 --> 00:10:25,090
ve bu iyi eşittir
stil, sadece iyi means--

218
00:10:25,090 --> 00:10:28,645
Bu dosya göreli nedir nedir
Ben değilim, bir stil olduğunu doing-- değilim

219
00:10:28,645 --> 00:10:29,821
Benim sayfa için kullanıyor.

220
00:10:29,821 --> 00:10:32,320
Ben gerçekten ne görmek istiyorsanız Yani
Ben burada CSS ile yapıyorum

221
00:10:32,320 --> 00:10:35,010
Bunu açık gitmek gerekir
table.CSS de dosya.

222
00:10:35,010 --> 00:10:37,490
Yani biz buraya geri gidersiniz
Yine bizim dosya ağacına.

223
00:10:37,490 --> 00:10:38,660
Table.CSS var.

224
00:10:38,660 --> 00:10:40,490
Biz bunu açık pop edeceğiz.

225
00:10:40,490 --> 00:10:43,070
Şimdi CSS biraz görüyorsunuz.

226
00:10:43,070 --> 00:10:45,630
Görünüşe göre, bir çift var
şeyler oluyor burada.

227
00:10:45,630 --> 00:10:48,950
Ben görünüşte beş koymak istiyorum
Geniş piksel, katı kırmızı ötesi,

228
00:10:48,950 --> 00:10:50,287
Benim masa etrafında.

229
00:10:50,287 --> 00:10:52,870
Biz zaten gidiyor biliyor
Sadece çevre gitmek.

230
00:10:52,870 --> 00:10:56,180
Biz table2.HTML içinde olduğunu gördüm.

231
00:10:56,180 --> 00:10:58,770
Her satırda, ben
görünüşte belirtmek istiyorum

232
00:10:58,770 --> 00:11:01,950
Bu satır yüksekliği 50 piksel yüksek.

233
00:11:01,950 --> 00:11:05,680
Yani her satır için, hatırlıyorum
Bu, tr etiketi ne var

234
00:11:05,680 --> 00:11:08,550
Ben 50 piksel yüksek yapıyorum.

235
00:11:08,550 --> 00:11:09,804
>> Son olarak, ben bu yorum var.

236
00:11:09,804 --> 00:11:11,470
Ve bu CSS yorum yapmak nasıl.

237
00:11:11,470 --> 00:11:16,174
Bu blok ele geçirmek için çok benzer
Yorumlar sözdizimi çizgi yıldızı.

238
00:11:16,174 --> 00:11:17,090
İstediğiniz tüm metin.

239
00:11:17,090 --> 00:11:19,470
Hiçbir çizgi çizgi CSS olsa var.

240
00:11:19,470 --> 00:11:23,400
Kısa inline yorumlar için elimizde
Burada bu özel biçimi kullanmak için.

241
00:11:23,400 --> 00:11:26,830
Ben yapıyorum gibi görünüyor
Benim td etiketleri şeyler çok.

242
00:11:26,830 --> 00:11:29,710
Td etiketleri veya masa hatırla
gerçekten sadece vardır veriler,

243
00:11:29,710 --> 00:11:32,210
içinde sütunlar
Bizim satırlar ve görünüşte

244
00:11:32,210 --> 00:11:35,090
Verilerin her bir parça için
benim tabloda, ben istiyorum

245
00:11:35,090 --> 00:11:38,850
arka plan rengini ayarlamak için
siyah, renk, beyaz olmak

246
00:11:38,850 --> 00:11:40,320
renk ön plan rengi olduğunu.

247
00:11:40,320 --> 00:11:42,360
Yani bu olacak
Benim sayfanın metin.

248
00:11:42,360 --> 00:11:45,140
Büyük yazı tipi, 22 istiyor
yazı gelin ve ben istiyorum

249
00:11:45,140 --> 00:11:47,001
o, yazı tipi ailesi Gürcistan olmak.

250
00:11:47,001 --> 00:11:48,750
Yani gitmiyorum
varsayılan yazı tipini var.

251
00:11:48,750 --> 00:11:51,820
Ben Gürcistan, belirtmek için gidiyorum hangi
Bu web güvenli yazı biridir

252
00:11:51,820 --> 00:11:53,830
Daha önce gördüğüm.

253
00:11:53,830 --> 00:11:57,284
Ben metin hizalanmış olmak istiyorum
merkezi bir kutunun ortasına,

254
00:11:57,284 --> 00:11:59,450
Ben bırakılmak istemiyoruz
hizalanmış veya sağa hizalanmış.

255
00:11:59,450 --> 00:12:03,461
Ve benim sütun genişliği istiyorum
Geniş yanı sıra 50 piksel olmak.

256
00:12:03,461 --> 00:12:05,210
En az bir göz atalım
Bu neye benzediğini,

257
00:12:05,210 --> 00:12:07,470
Bu belki de bir gelişme olup olmadığını görmek.

258
00:12:07,470 --> 00:12:12,890
Yani table3.HTML, gitmek için gidiyorum hangi
hatırlama, bir bağlantı olarak table.CSS içerir

259
00:12:12,890 --> 00:12:14,830
ve biz önizleme edeceğiz.

260
00:12:14,830 --> 00:12:16,800
Bu doğru, çok daha iyi değil mi?

261
00:12:16,800 --> 00:12:20,004
Bu aslında bir bakmaya başlıyor
daha çarpım tablosu gibi çok.

262
00:12:20,004 --> 00:12:21,920
O kırmızı sınır var
Benim masa etrafında ama şimdi

263
00:12:21,920 --> 00:12:26,700
Ben de o belirttiğiniz
Her satır, 50 piksel genişliğinde

264
00:12:26,700 --> 00:12:30,220
ya da tall-- bahane 50 piksel var
Benim, her sütun 50 piksel genişliğinde.

265
00:12:30,220 --> 00:12:34,251
Her bir sütunda veriler ve sadece
veri siyah bir arka plan vardır.

266
00:12:34,251 --> 00:12:36,000
Böylece neden bu var
beyaz çizgiler vardır.

267
00:12:36,000 --> 00:12:38,836
Uzay çünkü
bu hücrelerin tümü arasında,

268
00:12:38,836 --> 00:12:40,710
o bir sınır değil
ve kendisi, bu sadece

269
00:12:40,710 --> 00:12:43,170
Ben sadece doldurma ediyorum
Hücreler, aslında bu

270
00:12:43,170 --> 00:12:46,310
Tablonun sınırlarını, yapar
Görünüşe göre, tüm boyunca onu var mıydı

271
00:12:46,310 --> 00:12:47,887
Sadece ince beyaz çizgiler oldu.

272
00:12:47,887 --> 00:12:48,720
Şimdi görünür konum.

273
00:12:48,720 --> 00:12:50,380
Şimdi ekranda kapalı pop.

274
00:12:50,380 --> 00:12:52,920
Ve böylece bu çok basit
Ben uyguladığınız stil,

275
00:12:52,920 --> 00:12:56,850
ve şimdi benim tablo daha çok benziyor
dört, dört tarafından çarpım tablosu,

276
00:12:56,850 --> 00:13:00,950
yerine sadece karışık karışıklık, bir
her şeyi açıkça satırlar ve sütunlar olduğunu

277
00:13:00,950 --> 00:13:03,717
ama süper iyi organize.

278
00:13:03,717 --> 00:13:06,800
Biz gerçekten sadece yüzeyi çizilmeye ediyoruz
Burada CSS ile neler yapabileceğini.

279
00:13:06,800 --> 00:13:10,330
Neyse CSS belgeleri
oldukça basittir.

280
00:13:10,330 --> 00:13:14,000
Siz birkaç kullanacağız onun
Oldukça sık, bağlıyor.

281
00:13:14,000 --> 00:13:16,087
Konuştuğumuz olanlar
Daha önce bu video.

282
00:13:16,087 --> 00:13:18,170
Senin o birkaç vardır
muhtemelen tüm kullanmaz.

283
00:13:18,170 --> 00:13:19,469
Ve bu da, sorun değil.

284
00:13:19,469 --> 00:13:22,010
Ama bir var ki, biliyorum
Orada belgelerin çok.

285
00:13:22,010 --> 00:13:25,110
Bu yüzden her şeyi kapsayacak etmedi bile,
kesinlikle kendi sol değiliz.

286
00:13:25,110 --> 00:13:26,780
Ama CSS gerçekten eğlenceli
ile deneme.

287
00:13:26,780 --> 00:13:29,040
Ve ben şiddetle teşvik ediyorum
web sayfaları ile oynamak için,

288
00:13:29,040 --> 00:13:32,180
ve bunları nasıl yapabiliriz bakın
bakmak ve kullanıcı geliştirmek hissediyorum

289
00:13:32,180 --> 00:13:34,790
sayfanızı ziyaret deneyim.

290
00:13:34,790 --> 00:13:35,710
Ben Doug Lloyd değilim.

291
00:13:35,710 --> 00:13:37,980
Bu CS50 olduğunu.

292
00:13:37,980 --> 00:13:40,151