1
00:00:00,000 --> 00:00:05,660
 [SKAN MŪZIKA]

2
00:00:05,660 --> 00:00:07,200
DAGS LOIDS: Tātad, uzņemsim vēl
vienu video, lai runātu par vēl vienu 

3
00:00:07,200 --> 00:00:08,740
valodu. 

4
00:00:08,740 --> 00:00:10,800
Šoreiz parunāsim par CSS.

5
00:00:10,800 --> 00:00:13,474
Tātad CSS, kas ir saīsinājums no
Cascading Style Sheets, ir vēl viena 

6
00:00:13,474 --> 00:00:16,149
valoda, ko lietojam, veidojot
vietnes. 

7
00:00:16,149 --> 00:00:17,190
Padomājiet par to šādi.

8
00:00:17,190 --> 00:00:20,495
Ja HTML ir tas, ko mēs izmantojam,
lai sakārtotu saturu, ko vēlamies 

9
00:00:20,495 --> 00:00:23,800
ievietot savā lapā, CSS ir rīks, ko
parasti izmantojam, lai pielāgotu 

10
00:00:23,800 --> 00:00:27,105
mūsu vietņu izskatu un lietotāja
pieredzi, mijiedarbojoties ar mūsu 

11
00:00:27,105 --> 00:00:30,410
vietni. 

12
00:00:30,410 --> 00:00:32,535
 Līdzīgi kā HTML, CSS nav
programmēšanas valoda.

13
00:00:32,535 --> 00:00:33,451
Tai nav loģikas.

14
00:00:33,451 --> 00:00:34,595
Tai nav mainīgo.

15
00:00:34,595 --> 00:00:38,890
Tai nav nekādu ar plūsmu saistītu
lietu, ko dara C valoda.

16
00:00:38,890 --> 00:00:40,150
Tā ir stila valoda.

17
00:00:40,150 --> 00:00:44,170
Un tās sintakse ir diezgan
vienkārša, un tajā ir tikai aprakstīts, kā 

18
00:00:44,170 --> 00:00:48,190
mūsu lapas elementos ir jāmaina
noteikti HTML elementi. 

19
00:00:48,190 --> 00:00:52,360
Šajā nolūkā, ja vēl neesat
skatījušies mūsu videoklipu par HTML vai 

20
00:00:52,360 --> 00:00:56,530
vispār nepārzināt HTML, vispirms
varat apskatīt to, jo šī diskusija 

21
00:00:56,530 --> 00:01:00,700
par CSS būs atkarīga no noteiktām
zināšanām par HTML. 

22
00:01:00,700 --> 00:01:03,740
 Tātad, šeit ir patiešām vienkārša
CSS stila lapa.

23
00:01:03,740 --> 00:01:07,182
Pat ja jūs nekad iepriekš neesat
programmējuši ar CSS, esmu 

24
00:01:07,182 --> 00:01:10,624
pārliecināts, ka varat precīzi
saprast, ko dara šī stila lapa. 

25
00:01:10,624 --> 00:01:11,290
Ko tā dara?

26
00:01:11,290 --> 00:01:14,070
Tā attiecas uz mūsu tīmekļa lapas
pamattekstu, visu, kas atrodas 

27
00:01:14,070 --> 00:01:16,850
starp pamatteksta tagiem mūsu HTML
lapā, un iestata zilu šīs lapas 

28
00:01:16,850 --> 00:01:19,631
fona krāsu. 

29
00:01:19,631 --> 00:01:21,130
Tā ir ļoti vienkārša stila lapa.

30
00:01:21,130 --> 00:01:23,269
Patiesībā tā ir ļoti cilvēkiem
draudzīga valoda, CSS.

31
00:01:23,269 --> 00:01:24,914
Tātad, pat ja jūs to nekad iepriekš
neesat izmantojuši, jūs, 

32
00:01:24,914 --> 00:01:26,560
iespējams, varētu uzminēt, ko tā
izdarīja. 

33
00:01:26,560 --> 00:01:31,400
Faktiski, ja mēs ielādētu lapu,
kurā šī stila lapa ir kaut kā 

34
00:01:31,400 --> 00:01:36,240
iegulta, mūsu lapas fona krāsa būtu
zila, nevis standarta balta. 

35
00:01:36,240 --> 00:01:37,670
 Tātad, kā mēs veidojam stila
lapas?

36
00:01:37,670 --> 00:01:39,700
Pirmkārt, mums ir jāidentificē
atlasītājs.

37
00:01:39,700 --> 00:01:42,970
Pēdējā piemērā šis atlasītājs bija
rumpis.

38
00:01:42,970 --> 00:01:45,690
Tad mums ir atvērtas figūriekavas,
un mēs sāksim definēt šī 

39
00:01:45,690 --> 00:01:48,410
atlasītāja stila lapu. 

40
00:01:48,410 --> 00:01:51,800
Figūriekavās mums ir tikai galveno
vērtību pāru saraksts.

41
00:01:51,800 --> 00:01:54,815
Iepriekšējais vērtību pāris bija -
zila fona krāsa, semikols, bet mēs 

42
00:01:54,815 --> 00:01:57,830
varētu darīt vairāk un vairāk šādu.


43
00:01:57,830 --> 00:02:02,330
Uz šo tagu, atlasītāja rumpi, var
attiekties vairākas lietas.

44
00:02:02,330 --> 00:02:05,639
Katrs no tiem ir atdalīts ar
semikolu, un mēs katru no tiem saucam 

45
00:02:05,639 --> 00:02:08,949
par deklarāciju, CSS deklarāciju. 

46
00:02:08,949 --> 00:02:11,621
Kad esam pabeiguši ar visu stilu,
ko vēlamies pielietot konkrētajam 

47
00:02:11,621 --> 00:02:14,294
tagam, mums tikai ir nepieciešams
aizvērt figūriekavas, lai pabeigtu 

48
00:02:14,294 --> 00:02:16,967
stila lapu, un tā esam pabeiguši
stila lapas definēšanu konkrētajam 

49
00:02:16,967 --> 00:02:19,640
atlasītājam. 

50
00:02:19,640 --> 00:02:21,341
 Kādi ir daži izplatītākie CSS
rekvizīti?

51
00:02:21,341 --> 00:02:23,590
Nu, varbūt jūs vēlaties kaut kam
uzlikt apmales.

52
00:02:23,590 --> 00:02:26,899
Tātad jūs varat teikt, apmale, tā
būtu jūsu atslēga, un tad jūsu 

53
00:02:26,899 --> 00:02:30,209
vērtības būtu - kādu stilu, krāsu
un platumu vēlaties. 

54
00:02:30,209 --> 00:02:33,114
Tātad stils varētu būt:
nepārtraukta līnija, punktlīnija, pārtraukta 

55
00:02:33,114 --> 00:02:36,020
līnija, izliekta līnija, kas būtu
viļņveida līnija. 

56
00:02:36,020 --> 00:02:38,790
Varbūt vēlaties, lai tā būtu zila,
melna vai zaļa.

57
00:02:38,790 --> 00:02:41,490
Varbūt vēlaties, lai tā būtu 1 vai
2 vai 10 pikseļu plata.

58
00:02:41,490 --> 00:02:43,254
Jūs varat norādīt visas šīs lietas.

59
00:02:43,254 --> 00:02:46,420
Varbūt vēlaties iestatīt savas
lapas fona krāsu noteiktā veidā.

60
00:02:46,420 --> 00:02:49,215
Mēs to jau redzējām, iestatot
rumpja fonu zilā krāsā.

61
00:02:49,215 --> 00:02:51,460
Tad jūs varat izmantot atslēgas
vārdu, tāpēc CSS ir noteiktas krāsas, 

62
00:02:51,460 --> 00:02:53,705
kas tajā ir iebūvētas - zila, zaļa,
melna, ļoti vienkāršas krāsas, 

63
00:02:53,705 --> 00:02:55,950
kuras mēs zinām. 

64
00:02:55,950 --> 00:02:59,110
Bet jūs varat arī norādīt jebkuru
hex spektra krāsu, kuru vēlaties.

65
00:02:59,110 --> 00:03:03,805
Atcerieties, ka krāsas var
identificēt pēc trīs hex skaitļu kopas no 

66
00:03:03,805 --> 00:03:08,500
0 līdz 255, rg un b, sarkanā, zaļā
un zilā komponenta. 

67
00:03:08,500 --> 00:03:11,770
Un tāpēc mēs varam norādīt jebkuru
vēlamo krāsu, nevis izmantot zilu, 

68
00:03:11,770 --> 00:03:15,040
zaļu vai melnu. Izmantojot tēmturi
un pēc tam sešus hex ciparus, dos 

69
00:03:15,040 --> 00:03:18,310
mums sešu ciparu krāsu. 

70
00:03:18,310 --> 00:03:19,850
Tātad tā ir fona krāsa.

71
00:03:19,850 --> 00:03:24,140
 Mums ir arī priekšplāna krāsa, kas
parasti ir jūsu lapas teksts.

72
00:03:24,140 --> 00:03:26,495
Un jūs varētu to izdarīt līdzīgi,
izmantojot atslēgas vārdu un vai 

73
00:03:26,495 --> 00:03:28,850
hex sešus ciparus. 

74
00:03:28,850 --> 00:03:32,610
Tātad augšpusē jūs varat norādīt
jebkuru vēlamo krāsu savas lapas 

75
00:03:32,610 --> 00:03:36,370
tekstam uz noteiktas fona krāsas. 

76
00:03:36,370 --> 00:03:38,385
Varat arī mainīt un apstrādāt fontu
un veidu, kā teksts tiek 

77
00:03:38,385 --> 00:03:40,400
atveidots lapā. 

78
00:03:40,400 --> 00:03:42,010
 Tātad jūs varat mainīt fonta
lielumu.

79
00:03:42,010 --> 00:03:44,835
Varat izmantot atslēgvārdus,
piemēram, extra, extra small vai xx 

80
00:03:44,835 --> 00:03:47,660
small, vai medium, large utt. 

81
00:03:47,660 --> 00:03:50,750
Varat izmantot fiksētos punktus, 10
punktus, 12 punktus un tā tālāk.

82
00:03:50,750 --> 00:03:54,985
Varat izmantot procentus, 80%, 20%,
kur 100% ir noklusējuma fonta 

83
00:03:54,985 --> 00:03:59,220
lielums, kas parasti ir apmēram 11
vai 12 punkti. 

84
00:03:59,220 --> 00:04:01,659
Vai pat varat to balstīt uz nesen
izmantoto fonta lielumu.

85
00:04:01,659 --> 00:04:04,216
Ja jūs tikko uzrakstījāt kaut ko un
vēlaties, lai tas būtu mazāks, 

86
00:04:04,216 --> 00:04:06,773
bet precīzi nezināt, kādu izmēru
vēlaties, tad varat vienkārši teikt 

87
00:04:06,773 --> 00:04:09,330
- font size smaller. 

88
00:04:09,330 --> 00:04:14,344
Un tā pamatā būs tieši augšā esošā
fonta lielums.

89
00:04:14,344 --> 00:04:15,760
Un jūs varat iegūt mazāku vai
lielāku.

90
00:04:15,760 --> 00:04:18,390
Tāpēc ir daudz dažādu veidu, kā
norādīt fonta lielumu.

91
00:04:18,390 --> 00:04:20,690
 Varat arī norādīt, kādu fontu
saimi vēlaties.

92
00:04:20,690 --> 00:04:24,835
Ja jums ir noteikts nosaukums, CSS
valodā — mēs par to šeit 

93
00:04:24,835 --> 00:04:28,980
nerunāsim — varat definēt ļoti
konkrētu fontu un iegult to savā lapā. 

94
00:04:28,980 --> 00:04:30,620
Varat arī izmantot vispārīgus
nosaukumus.

95
00:04:30,620 --> 00:04:33,540
Ir daudz tīmeklim drošu fontu, kas
ir iepriekš definēti CSS valodā.

96
00:04:33,540 --> 00:04:36,522
Un, ja pēdējo 20 gadu laikā esat
Microsoft Office lietotāji, 

97
00:04:36,522 --> 00:04:39,505
iespējams, jau esat iepazinušies ar
daudziem šiem tīmeklim drošiem 

98
00:04:39,505 --> 00:04:42,487
fontiem, piemēram, Times New Roman,
Arial, Courier New, Georgia, 

99
00:04:42,487 --> 00:04:45,470
Tahoma, Verdana un tā tālāk. 

100
00:04:45,470 --> 00:04:47,170
Tie visi tiek uzskatīti par
tīmeklim drošiem fontiem.

101
00:04:47,170 --> 00:04:50,541
Un patiesībā daļa no iemesla, kāpēc
tie radās, bija izmantot tīmekļa 

102
00:04:50,541 --> 00:04:53,913
izveidošanai — katrai lapai bija
piekļuve šim noklusējuma fontu 

103
00:04:53,913 --> 00:04:57,285
kopumam ar dažādiem serifiem, un
visam šim fontu saturam, kurā mēs 

104
00:04:57,285 --> 00:05:00,657
neiedziļināsimies, bet tie parasti
ir ir pieejams jūsu CSS, pat ja 

105
00:05:00,657 --> 00:05:04,029
fontus nedefinējat citādi. 

106
00:05:04,029 --> 00:05:07,266
Visbeidzot, varat līdzināt tekstu.
Tā vietā, lai pēc noklusējuma tas 

107
00:05:07,266 --> 00:05:10,503
būtu līdzināts pa kreisi, jūs
varētu līdzināt to pa labi vai arī to 

108
00:05:10,503 --> 00:05:13,740
centrēt vai taisnot, lai tas
pieskartos abām malām. 

109
00:05:13,740 --> 00:05:16,930
Šīs ir visas iespējas, ko varat
izmantot, lai mainītu teksta izskatu 

110
00:05:16,930 --> 00:05:20,120
un to, kā tas tiek parādīts jūsu
lapā. 

111
00:05:20,120 --> 00:05:22,180
 Jūsu atlasītājiem nav jābūt tikai
tagiem.

112
00:05:22,180 --> 00:05:24,380
Iepriekš mēs redzējām rumpja taga
atlasītāju, un tagu atlasītājs 

113
00:05:24,380 --> 00:05:26,580
izskatās tieši tā. 

114
00:05:26,580 --> 00:05:30,020
Jūs piešķirat tagam nosaukumu un
pēc tam definējat šī taga stila lapu.

115
00:05:30,020 --> 00:05:32,660
Bet jūs varat arī darīt kaut ko, ko
sauc par ID atlasītāju.

116
00:05:32,660 --> 00:05:34,390
ID atlasītājs izskatās diezgan
līdzīgi.

117
00:05:34,390 --> 00:05:37,555
Taču ievērojiet, ka tagad es
neizmantoju HTML tagu, bet šajā gadījumā 

118
00:05:37,555 --> 00:05:40,720
izmantoju #unique jeb tēmturis
unique. 

119
00:05:40,720 --> 00:05:43,170
Ja atceraties mūsu videoklipu par
HTML, mēs runājām par to, kā tagiem 

120
00:05:43,170 --> 00:05:45,620
var būt atribūti. 

121
00:05:45,620 --> 00:05:48,530
Un viens atribūts, kas attiecas uz
gandrīz visiem HTML tagiem, bet 

122
00:05:48,530 --> 00:05:51,440
mēs par to nerunājām, ir kaut kas,
ko sauc par ID tagu. 

123
00:05:51,440 --> 00:05:54,985
Tātad šis konkrētais CSS attieksies
tikai uz HTML tagu, kuram ir ļoti 

124
00:05:54,985 --> 00:05:58,530
konkrēts ID, kuru esat piešķiruši
nosaukumu. 

125
00:05:58,530 --> 00:06:04,030
Tātad, ja jūsu kodā, kaut kur HTML
datnē ir tags un jūs norādāt - ID 

126
00:06:04,030 --> 00:06:09,530
ir vienāds ar unique - kā šī taga
atribūtu,, šī konkrētā stila lapa 

127
00:06:09,530 --> 00:06:15,030
tiks pielietota tikai šim tagam ar
ID unique. 

128
00:06:15,030 --> 00:06:17,180
 Varat arī veikt darbību, ko sauc
par klases atlasītāju.

129
00:06:17,180 --> 00:06:20,155
Tātad papildus ID atribūtiem varat
pievienot arī klases atribūtu HTML 

130
00:06:20,155 --> 00:06:23,130
tagiem. 

131
00:06:23,130 --> 00:06:27,140
Un, kad izmantojat klases atribūtu,
to var pielietot vairākiem tagiem.

132
00:06:27,140 --> 00:06:31,515
Tātad, ja jums ir vairākas līdzīgas
lietas, iespējams, vēlaties 

133
00:06:31,515 --> 00:06:35,890
teikt: atveriet tagu bla-bla-bla,
klase ir vienāda ar students. 

134
00:06:35,890 --> 00:06:38,965
Un tad šī konkrētā stila lapa
attiektos uz katru tagu, kur klase ir 

135
00:06:38,965 --> 00:06:42,041
students. 

136
00:06:42,041 --> 00:06:44,658
Šajā gadījumā mēs iestatītu fona
krāsu uz dzeltenu, un mēs iestatītu 

137
00:06:44,658 --> 00:06:47,275
necaurredzamību - kas ir tags, par
kuru mēs nerunājām, bet tas tikai 

138
00:06:47,275 --> 00:06:49,892
attiecas uz to, cik lielā mērā kaut
kas ir caurspīdīgs - šajā 

139
00:06:49,892 --> 00:06:52,510
gadījumā uz 70%. 

140
00:06:52,510 --> 00:06:54,430
 Ir divas stila lapu rakstīšanas
iespējas.

141
00:06:54,430 --> 00:06:57,060
Varat tās ierakstīt tieši savā
HTML, ievietojot stila lapas starp 

142
00:06:57,060 --> 00:06:59,690
stila tagiem. 

143
00:06:59,690 --> 00:07:03,850
Un šie stila tagi ievietosies jūsu
tīmekļa lapas galvenajos tagos.

144
00:07:03,850 --> 00:07:06,686
Iespējams, vēlamākais veids, kā to
izdarīt, ir uzrakstīt atsevišķu 

145
00:07:06,686 --> 00:07:09,523
.css datni un pēc tam sasaistīt to
ar savu dokumentu, izmantojot 

146
00:07:09,523 --> 00:07:12,360
saišu tagus. 

147
00:07:12,360 --> 00:07:14,560
Saišu tagi atkal atšķiras no
hipersaitēm, ja atceraties mūsu HTML 

148
00:07:14,560 --> 00:07:16,760
videoklipu. 

149
00:07:16,760 --> 00:07:19,030
Un saišu tagi ir veids, kā mēs
ievelkam atsevišķas datnes.

150
00:07:19,030 --> 00:07:23,900
Tas ir līdzīgs #include tīmekļa
programmēšanai.

151
00:07:23,900 --> 00:07:27,140
 Tāpēc apskatīsim table.HTML.

152
00:07:27,140 --> 00:07:30,818
Ja atceraties no mūsu HTML video,
es parādīju ļoti vienkāršas 

153
00:07:30,818 --> 00:07:34,496
reizināšanas tabulas piemēru, kas
izskatījās diezgan neglīta, un, 

154
00:07:34,496 --> 00:07:38,175
iespējams, ir kāds veids, kā to
uzlabot ar CSS, lai tā vairāk 

155
00:07:38,175 --> 00:07:41,853
izskatītos pēc reizināšanas tabulas
vai kaut kā tāda, kas ir salīmēts 

156
00:07:41,853 --> 00:07:45,532
kopā bez faktiska dalījuma starp
rindām un kolonnām. 

157
00:07:45,532 --> 00:07:49,411
Tāpēc pāriesim pie CS50 IDE un
apskatīsim, kā CSS var kaut kā uzlabot 

158
00:07:49,411 --> 00:07:53,290
to, ar ko mēs sākām iepriekš, un
padarīt to daudz labāku. 

159
00:07:53,290 --> 00:07:56,000
Tātad mēs tagad esam CS50 IDE, un,
ja nepazīstat, mēs šajā tabulā 

160
00:07:56,000 --> 00:07:58,710
parādīsim to HTML lapu. 

161
00:07:58,710 --> 00:08:01,877
Table.HTML būtībā tikai definē
saturu — tai vajadzēja būt četri reiz 

162
00:08:01,877 --> 00:08:05,044
četri reizināšanas tabulai. 

163
00:08:05,044 --> 00:08:06,210
Tas ir diezgan vienkārši.

164
00:08:06,210 --> 00:08:09,410
Un mēs domājam, ka tā izskatītos
diezgan sakarīga.

165
00:08:09,410 --> 00:08:12,343
Bet patiesībā, kad mēs priekšskatām
šo lapu, mēs redzam, ka tā ir 

166
00:08:12,343 --> 00:08:15,277
neglīta, vai ne? 

167
00:08:15,277 --> 00:08:16,860
Skaidrs, ka šeit ir rindas un
kolonnas.

168
00:08:16,860 --> 00:08:18,350
Ir sava veida atdalīšana.

169
00:08:18,350 --> 00:08:20,040
Bet tā nav jēgpilna atdalīšana.

170
00:08:20,040 --> 00:08:23,105
Patiesībā mēs šeit nesaņemam gana
daudz informācijas.

171
00:08:23,105 --> 00:08:25,782
Un starp rindām un kolonnām nav
atdalīšanas horizontālo vai vertikālo 

172
00:08:25,782 --> 00:08:28,460
noteikumu ziņā. 

173
00:08:28,460 --> 00:08:31,530
Mēs, iespējams, varētu to mazliet
uzlabot.

174
00:08:31,530 --> 00:08:32,934
Tāpēc mēģināsim.

175
00:08:32,934 --> 00:08:34,559
Tāpēc es aizvēršu šo cilni šeit.

176
00:08:34,559 --> 00:08:37,024
Un es aizvēršu savu table.HTML, un
man šeit ir cita versija, ko sauc 

177
00:08:37,024 --> 00:08:39,490
par table2.HTML. 

178
00:08:39,490 --> 00:08:40,655
Mēs to atvērsim.

179
00:08:40,655 --> 00:08:42,446
Lapas rumpis ir gandrīz tāds pats,
bet es esmu nedaudz mainījis 

180
00:08:42,446 --> 00:08:44,238
augšdaļu. 

181
00:08:44,238 --> 00:08:47,132
Un es atritināšu uz šejieni.

182
00:08:47,132 --> 00:08:49,340
Ņemiet vērā, ka šoreiz es izmantoju
iegultos stila tagus.

183
00:08:49,340 --> 00:08:54,310
Esmu atvēris stila tagu un tagad
definēju CSS stila lapu tieši tajā.

184
00:08:54,310 --> 00:08:56,310
Man ir stila lapa, kurā teikts:
tabula.

185
00:08:56,310 --> 00:08:58,170
Tas ir mans tagu atlasītājs.

186
00:08:58,170 --> 00:09:00,940
Es neizmantoju punktu vai tēmturi,
ko es būtu darījis, ja izmantotu 

187
00:09:00,940 --> 00:09:03,710
ID vai klases atlasītāju. 

188
00:09:03,710 --> 00:09:06,190
Man šeit ir tagu atlasītājs —
tabula.

189
00:09:06,190 --> 00:09:10,090
Šis stils attieksies uz katru
tabulas tagu.

190
00:09:10,090 --> 00:09:12,934
Acīmredzot es vēlos savā tabulā
ievietot vienu pikseļu platu, kārtīgu 

191
00:09:12,934 --> 00:09:15,779
zilu rāmi. 

192
00:09:15,779 --> 00:09:18,320
Izklausās, ka tas, iespējams, labos
situāciju, vai ne?

193
00:09:18,320 --> 00:09:20,320
Mums viss izskatīsies daudz labāk.

194
00:09:20,320 --> 00:09:21,190
Tātad tas ir labi.

195
00:09:21,190 --> 00:09:23,540
Stilistiski es tikko šeit ievietoju
savu stila lapu.

196
00:09:23,540 --> 00:09:25,100
Tas noteikti ir pieņemams veids, kā
to izdarīt.

197
00:09:25,100 --> 00:09:26,391
Apskatīsim, kā tas izskatās.

198
00:09:26,391 --> 00:09:29,790
Tāpēc es atgriezīšos šeit un
apskatīšu savu table2.HTML.

199
00:09:32,430 --> 00:09:34,450
Nu, tas nav gluži tas, ko es
gribēju, bet tas ir tieši tas, ko mēs 

200
00:09:34,450 --> 00:09:36,470
lūdzām. 

201
00:09:36,470 --> 00:09:39,530
Mēs teicām, ka šis stils tiks
piemērots mūsu tabulai.

202
00:09:39,530 --> 00:09:43,810
Mūsu tabulai tagad ir viena pikseļa
plata, kārtīgs zils rāmis.

203
00:09:43,810 --> 00:09:46,237
Mēs faktiski netiekam pie tabulas
šūnām.

204
00:09:46,237 --> 00:09:47,570
Mēs tikai tiekam līdz tabulai.

205
00:09:47,570 --> 00:09:49,310
Tātad CSS nostrādāja.

206
00:09:49,310 --> 00:09:51,890
Mūsu tabulai tā ir pielietojusi
stila lapu.

207
00:09:51,890 --> 00:09:53,981
Bet nedarīja gluži to, ko gribējām.

208
00:09:53,981 --> 00:09:55,730
Kā mēs varam likt tai darīt to, ko
mēs vēlamies?

209
00:09:55,730 --> 00:09:59,287
 Apskatīsim vēl vienu versiju
table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Tāpēc es vienkārši aizvēršu šīs
cilnes.

211
00:10:00,870 --> 00:10:03,890
Es atgriezīšos šeit savā datņu kokā
un atvēršu table3.HTML.

212
00:10:07,680 --> 00:10:10,350
Atkal, sākumā tas izskatīsies
diezgan līdzīgi.

213
00:10:10,350 --> 00:10:14,610
Taču ievērojiet, ka šoreiz tā
vietā, lai izmantotu tieši tur iegultu 

214
00:10:14,610 --> 00:10:18,870
stila lapu, es izveidošu saiti
stila lapā, izmantojot saites tagu. 

215
00:10:18,870 --> 00:10:21,607
Tāpēc es acīmredzot veidoju saiti
stila lapā, ko sauc par tables.CSS, 

216
00:10:21,607 --> 00:10:24,345
un šis - rel vienāds ar stylesheet
- nozīmē tikai to, kas ir šī datne 

217
00:10:24,345 --> 00:10:27,083
attiecībā pret to, ko es daru, tā
ir stila lapa, ko es izmantoju 

218
00:10:27,083 --> 00:10:29,821
savai tīmekļa vietnei. 

219
00:10:29,821 --> 00:10:32,415
Tātad, ja es patiešām vēlos redzēt,
ko es daru ar CSS, man ir jāatver 

220
00:10:32,415 --> 00:10:35,010
arī datne table.CSS. 

221
00:10:35,010 --> 00:10:37,490
Tāpēc mēs atgriezīsimies šeit
vēlreiz pie mūsu datņu koka.

222
00:10:37,490 --> 00:10:38,660
Ir table.CSS.

223
00:10:38,660 --> 00:10:40,490
Mēs to atvērsim.

224
00:10:40,490 --> 00:10:43,070
Tagad mēs redzam nedaudz no CSS.

225
00:10:43,070 --> 00:10:45,630
Kā redzams, man šeit notiek pāris
lietas.

226
00:10:45,630 --> 00:10:47,958
Acīmredzot es vēlos ap savu tabulu
novilkt piecus pikseļus platu, 

227
00:10:47,958 --> 00:10:50,287
kārtīgu sarkanu rāmi. 

228
00:10:50,287 --> 00:10:52,870
Mēs jau zinām, ka tas notiks tikai
pa perimetru.

229
00:10:52,870 --> 00:10:56,180
Mēs to redzējām table2.HTML.

230
00:10:56,180 --> 00:10:59,065
Ar katru rindu es acīmredzot vēlos
norādīt, ka rindas augstums ir 50 

231
00:10:59,065 --> 00:11:01,950
pikseļi. 

232
00:11:01,950 --> 00:11:05,250
Tāpēc katrai rindai atcerieties, ka
to dara tr tags, es veidoju to 50 

233
00:11:05,250 --> 00:11:08,550
pikseļu augstu. 

234
00:11:08,550 --> 00:11:09,804
 Visbeidzot, man ir šāds komentārs.

235
00:11:09,804 --> 00:11:11,470
Un šādi mēs komentējam CSS valodā.

236
00:11:11,470 --> 00:11:13,822
Tas ir ļoti līdzīgs Seize Block
komentāru sintaksei - slīpsvītra, 

237
00:11:13,822 --> 00:11:16,174
zvaigzne. 

238
00:11:16,174 --> 00:11:17,090
Viss teksts, ko vēlaties.

239
00:11:17,090 --> 00:11:19,470
Tomēr CSS valodā nav slīpsvītru.

240
00:11:19,470 --> 00:11:23,400
Īsiem iekļautiem komentāriem mums
ir jāizmanto šis konkrētais formāts.

241
00:11:23,400 --> 00:11:26,830
Šķiet, ka savos td tagos daru
daudzas lietas.

242
00:11:26,830 --> 00:11:30,202
Atcerieties td tagus vai tabulas
datus, kas patiesībā ir tikai 

243
00:11:30,202 --> 00:11:33,575
kolonnas mūsu rindu iekšpusē, un ir
skaidrs, ka katrai manas tabulas 

244
00:11:33,575 --> 00:11:36,947
datu daļai es vēlos iestatīt fona
krāsu melnu, baltu, priekšplāna 

245
00:11:36,947 --> 00:11:40,320
krāsu. 

246
00:11:40,320 --> 00:11:42,360
Tātad šis būs manas lapas teksts.

247
00:11:42,360 --> 00:11:44,680
Es vēlos lielu fontu, 22 punktu
fontu, un es vēlos, lai tas būtu no 

248
00:11:44,680 --> 00:11:47,001
fontu saimes Georgia. 

249
00:11:47,001 --> 00:11:48,750
Tāpēc man nebūs noklusējuma fonta.

250
00:11:48,750 --> 00:11:51,290
Es norādīšu Georgia, kas ir viens
no tiem tīmeklim drošiem fontiem, 

251
00:11:51,290 --> 00:11:53,830
ko esam redzējuši iepriekš. 

252
00:11:53,830 --> 00:11:56,640
Es vēlos, lai mans teksts tiktu
centrēts, lodziņa vidū. Es nevēlos, 

253
00:11:56,640 --> 00:11:59,450
lai tas būtu līdzināts pa kreisi
vai pa labi. 

254
00:11:59,450 --> 00:12:03,461
Un es vēlos, lai manas kolonnas
platums arī būtu 50 pikseļi.

255
00:12:03,461 --> 00:12:07,470
Apskatīsim, kā tas izskatās, un
noskaidrosim, vai tas ir uzlabojums.

256
00:12:07,470 --> 00:12:11,150
Tāpēc es došos uz table3.HTML, kas,
atcerieties, ietver table.CSS kā 

257
00:12:11,150 --> 00:12:14,830
saiti, un mēs to priekšskatīsim. 

258
00:12:14,830 --> 00:12:16,800
Tā ir daudz labāk, vai ne?

259
00:12:16,800 --> 00:12:20,004
Tā faktiski sāk izskatīties vairāk
pēc reizināšanas tabula.

260
00:12:20,004 --> 00:12:23,409
Man ap tabulu ir sarkans rāmis, bet
tagad esmu arī norādījis, ka 

261
00:12:23,409 --> 00:12:26,814
katra rinda ir 50 pikseļu plata vai
50 pikseļus augsta — 

262
00:12:26,814 --> 00:12:30,220
atvainojiet — katra kolonna ir
50 pikseļu plata. 

263
00:12:30,220 --> 00:12:34,251
Katras kolonnas datiem - tikai
datiem - ir melns fons.

264
00:12:34,251 --> 00:12:36,000
Tāpēc tur ir šīs baltās līnijas.

265
00:12:36,000 --> 00:12:39,962
Tā kā atstarpe starp visām šīm
šūnām, tā pati par sevi nav robeža, es 

266
00:12:39,962 --> 00:12:43,924
tikai aizpildu šūnas, kas faktiski
veido tabulas rāmi, kas acīmredzot 

267
00:12:43,924 --> 00:12:47,887
pastāvēja visu laiku, tās bija
tikai plānas, baltas līnijas. 

268
00:12:47,887 --> 00:12:48,720
Tagad tās ir redzamas.

269
00:12:48,720 --> 00:12:50,380
Tagad tās parādās ekrānā.

270
00:12:50,380 --> 00:12:53,714
Un tāpēc šī ir ļoti vienkārša stila
lapa, ko esmu pielietojis, un 

271
00:12:53,714 --> 00:12:57,048
tagad mana tabula izskatās vairāk
kā četri reiz četri reizināšanas 

272
00:12:57,048 --> 00:13:00,382
tabula, nevis vienkārši juceklis,
kurā viss ir skaidrs - rindas un 

273
00:13:00,382 --> 00:13:03,717
kolonnas, bet nav īpaši labi
sakārtots. 

274
00:13:03,717 --> 00:13:06,800
Mēs tiešām tikai pavirši
pieskaramies tam, ko varat darīt ar CSS.

275
00:13:06,800 --> 00:13:10,330
Par laimi CSS dokumentācija ir
diezgan vienkārša.

276
00:13:10,330 --> 00:13:14,000
Jūs izmantosit vairākus tās
atribūtus diezgan bieži.

277
00:13:14,000 --> 00:13:16,087
Tos, par kuriem mēs runājām
iepriekš šajā videoklipā.

278
00:13:16,087 --> 00:13:18,170
Ir vairāki, kurus, iespējams,
neizmantosit vispār.

279
00:13:18,170 --> 00:13:19,469
Un tas arī ir labi.

280
00:13:19,469 --> 00:13:22,010
Bet tikai ziniet, ka tur ir daudz
dokumentācijas.

281
00:13:22,010 --> 00:13:25,110
Tātad, pat ja mēs neaptvērām visu,
jūs noteikti nepaliksit vieni.

282
00:13:25,110 --> 00:13:26,780
Bet ar CSS ir patiešām jautri
eksperimentēt.

283
00:13:26,780 --> 00:13:29,450
Un es ļoti iesaku jums paspēlēties
ar savām tīmekļa lapām un 

284
00:13:29,450 --> 00:13:32,120
noskaidrot, ko jūs varat mainīt to
izskatā un sajūtās, lai uzlabotu 

285
00:13:32,120 --> 00:13:34,790
jūsu lapas apmeklēšanas pieredzi. 

286
00:13:34,790 --> 00:13:35,710
Es esmu Dags Loids.

287
00:13:35,710 --> 00:13:37,980
Šis ir CS50.