1
00:00:00,000 --> 00:00:05,660
>> [Παίζει μουσική]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Ας ρίξουμε μια πιο
βίντεο για να μιλήσουμε για μία ακόμη γλώσσα.

3
00:00:08,740 --> 00:00:10,800
Αυτή τη φορά θα μιλήσουμε για CSS.

4
00:00:10,800 --> 00:00:13,460
Έτσι, CSS, η οποία είναι μικρή για
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
είναι μια άλλη γλώσσα που χρησιμοποιούμε
κατά την κατασκευή δικτυακών τόπων.

6
00:00:16,149 --> 00:00:17,190
Σκεφτείτε το σαν αυτό.

7
00:00:17,190 --> 00:00:20,900
Αν HTML είναι αυτό που χρησιμοποιείτε για να οργανώσετε το
περιεχόμενο που θέλετε να βάλετε στην σελίδα μας,

8
00:00:20,900 --> 00:00:25,390
CSS είναι το εργαλείο που χρησιμοποιούμε συνήθως
για να προσαρμόσετε τον τρόπο κοιτάξουμε τις ιστοσελίδες μας,

9
00:00:25,390 --> 00:00:30,410
και πώς η εμπειρία του χρήστη πραγματικά
είναι, αλληλεπιδρούν με την ιστοσελίδα μας.

10
00:00:30,410 --> 00:00:32,535
>> Παρόμοια με την HTML, CSS είναι
δεν είναι μια γλώσσα προγραμματισμού.

11
00:00:32,535 --> 00:00:33,451
Δεν έχει λογική.

12
00:00:33,451 --> 00:00:34,595
Δεν έχει μεταβλητές.

13
00:00:34,595 --> 00:00:38,890
Δεν έχει κανενός είδους που
ροής που σχετίζονται με τα πράγματα που κάνει C.

14
00:00:38,890 --> 00:00:40,150
Είναι μια γλώσσα styling.

15
00:00:40,150 --> 00:00:42,810
Και η σύνταξη του είναι αρκετά
απλό, και απλά περιγράφει

16
00:00:42,810 --> 00:00:46,240
πως τα στοιχεία του μας
σελίδα έχει ορισμένα HTML

17
00:00:46,240 --> 00:00:48,190
στοιχεία θα πρέπει να τροποποιηθεί.

18
00:00:48,190 --> 00:00:51,170
Για το σκοπό αυτό, εάν δεν έχετε
ακόμη παρακολούθησαν βίντεο μας στο HTML,

19
00:00:51,170 --> 00:00:53,290
ή είναι εξοικειωμένοι με
HTML γενικά, μπορείτε

20
00:00:53,290 --> 00:00:57,430
μπορεί να θέλετε να ρίξετε μια ματιά σε αυτό
πρώτον, επειδή αυτή η συζήτηση του CSS

21
00:00:57,430 --> 00:01:00,700
θα εξαρτηθεί από
κάποια γνώση της HTML.

22
00:01:00,700 --> 00:01:03,740
>> Έτσι, εδώ είναι μια πραγματικά
απλή CSS στυλ.

23
00:01:03,740 --> 00:01:06,480
Ακόμα κι αν δεν έχετε
προγραμματιστεί με CSS πριν,

24
00:01:06,480 --> 00:01:10,624
Είμαι απόλυτα βέβαιος ότι μπορείτε να καταλάβω
τι ακριβώς κάνει αυτό το στυλ.

25
00:01:10,624 --> 00:01:11,290
Τι κάνει?

26
00:01:11,290 --> 00:01:15,470
Λοιπόν, εφαρμόζονται στο σώμα της ιστοσελίδας μας
σελίδα, ό, τι μεταξύ των ετικετών σώματος

27
00:01:15,470 --> 00:01:19,631
HTML για μας, και θέτει το
χρώμα του φόντου της σελίδας σε μπλε.

28
00:01:19,631 --> 00:01:21,130
Λοιπόν, αυτό είναι ένα πολύ απλό στυλ.

29
00:01:21,130 --> 00:01:23,269
Είναι πραγματικά πολύ ανθρώπινο
φιλική γλώσσα, CSS.

30
00:01:23,269 --> 00:01:26,560
Έτσι, ακόμη και αν δεν έχετε χρησιμοποιήσει πριν,
ίσως θα μπορούσε να μαντέψει τι έκανε αυτό.

31
00:01:26,560 --> 00:01:30,140
Στην πραγματικότητα, αν φορτωθεί μια σελίδα, όπου
Αυτό το στυλ ήταν ενσωματωμένο με κάποιο τρόπο,

32
00:01:30,140 --> 00:01:36,240
το χρώμα φόντου της σελίδας μας θα
είναι μπλε, και όχι η τυπική λευκό.

33
00:01:36,240 --> 00:01:37,670
>> Επομένως, πώς θα οικοδομήσουμε φύλλων στυλ;

34
00:01:37,670 --> 00:01:39,700
Λοιπόν κατ 'αρχάς, θα πρέπει να
προσδιορίσει έναν επιλογέα.

35
00:01:39,700 --> 00:01:42,970
Στο τελευταίο παράδειγμα,
ότι επιλογέας ήταν το σώμα.

36
00:01:42,970 --> 00:01:45,050
Στη συνέχεια έχουμε μια ανοικτή
σγουρά στήριγμα, και είμαστε

37
00:01:45,050 --> 00:01:48,410
πρόκειται να ξεκινήσει τον καθορισμό του
στυλ για την εν λόγω επιλογής.

38
00:01:48,410 --> 00:01:51,800
Στο μεταξύ τα άγκιστρα, εμείς
απλά έχουν μια λίστα βασικών ζευγών αξίας.

39
00:01:51,800 --> 00:01:56,205
Το προηγούμενο ζεύγος αξία ήταν
χρώμα μπλε φόντο ερωτηματικό,

40
00:01:56,205 --> 00:01:57,830
αλλά θα μπορούσαμε να κάνουμε περισσότερα και περισσότερα από αυτά.

41
00:01:57,830 --> 00:02:02,330
Θα μπορούσατε να έχετε πολλαπλές πράγματα εφαρμογής
σε αυτή την ετικέτα, τον εν λόγω οργανισμό επιλογέα.

42
00:02:02,330 --> 00:02:05,960
Κάθε ένα από αυτά χωρίζονται από ένα
ερωτηματικό, και καλούμε κάθε ένα από αυτά

43
00:02:05,960 --> 00:02:08,949
μια δήλωση, μια δήλωση CSS.

44
00:02:08,949 --> 00:02:12,410
Όταν τελειώσετε με όλα τα στυλ που
θέλετε να ισχύουν για τη συγκεκριμένη ετικέτα,

45
00:02:12,410 --> 00:02:15,300
έχουμε απλώς ένα κλείσιμο σγουρά
Προετοιμαστείτε για τον τερματισμό της στυλ,

46
00:02:15,300 --> 00:02:19,640
και τελειώσουμε τον ορισμό του στυλ
για το συγκεκριμένο επιλογέα.

47
00:02:19,640 --> 00:02:21,341
>> Ποιες είναι μερικές κοινές ιδιότητες CSS;

48
00:02:21,341 --> 00:02:23,590
Καλά, ίσως θέλετε να βάλετε
ένα περίγραμμα γύρω από κάτι.

49
00:02:23,590 --> 00:02:26,850
Έτσι, μπορείτε να πείτε, των συνόρων,
ότι θα είναι το κλειδί σας,

50
00:02:26,850 --> 00:02:29,460
και, στη συνέχεια, τις αξίες σας θα είναι,
τι στυλ, το χρώμα και το πλάτος

51
00:02:29,460 --> 00:02:30,209
θέλετε να είναι.

52
00:02:30,209 --> 00:02:33,530
Έτσι, το ύφος θα μπορούσε να είναι ένα στερεό
γραμμή, διακεκομμένη γραμμή, μία διακεκομμένη γραμμή,

53
00:02:33,530 --> 00:02:36,020
μια γραμμή κορυφογραμμή, η οποία θα είναι κυματιστή γραμμή.

54
00:02:36,020 --> 00:02:38,790
Ίσως θέλετε να το έχετε
να είναι μπλε ή μαύρο ή πράσινο.

55
00:02:38,790 --> 00:02:41,490
Ίσως θέλετε να είναι
1 ή 2 ή 10 pixels πλάτος.

56
00:02:41,490 --> 00:02:43,254
Μπορείτε να ορίσετε όλα αυτά τα πράγματα.

57
00:02:43,254 --> 00:02:46,420
Ίσως θέλετε να καθορίσετε το παρασκήνιο
το χρώμα της σελίδας σας με έναν ιδιαίτερο τρόπο.

58
00:02:46,420 --> 00:02:49,215
Ήδη είδαμε ότι, η ρύθμιση
φόντο του σώματος να είναι μπλε.

59
00:02:49,215 --> 00:02:52,080
>> Στη συνέχεια, μπορείτε να χρησιμοποιήσετε μια λέξη κλειδί,
έτσι CSS έχει ορισμένα χρώματα

60
00:02:52,080 --> 00:02:55,950
που είναι χτισμένη σε αυτό, μπλε, πράσινο,
μαύρο, ένα πολύ απλό χρώματα γνωρίζουμε.

61
00:02:55,950 --> 00:02:59,110
Αλλά μπορείτε επίσης να ορίσετε οποιαδήποτε
hex χρώμα που θέλετε.

62
00:02:59,110 --> 00:03:05,190
Θυμηθείτε ότι μπορεί να προσδιοριστεί χρώματα
από μια σειρά τριών αριθμών hex

63
00:03:05,190 --> 00:03:08,500
από 0 έως 255, RG και b, το
κόκκινο, πράσινο και μπλε συνιστώσα.

64
00:03:08,500 --> 00:03:10,590
Και έτσι μπορούμε να καθορίσουμε
οποιοδήποτε χρώμα που θέλουμε από,

65
00:03:10,590 --> 00:03:15,520
αντί να χρησιμοποιήσετε μπλε ή πράσινο ή μαύρο χρώμα,
χρησιμοποιώντας λίρα και στη συνέχεια έξι ψηφία του δεκαεξαδικού,

66
00:03:15,520 --> 00:03:18,310
και ότι θα μας δώσει
το εξαψήφιο χρώμα.

67
00:03:18,310 --> 00:03:19,850
Έτσι, αυτό είναι το χρώμα του φόντου.

68
00:03:19,850 --> 00:03:21,975
>> Έχουμε επίσης το πρώτο πλάνο
χρώμα, το οποίο είναι συνήθως

69
00:03:21,975 --> 00:03:24,140
πρόκειται να είναι το κείμενο της σελίδας σας.

70
00:03:24,140 --> 00:03:28,850
Και θα μπορούσατε να το κάνετε αυτό ομοίως
με λέξη κλειδί ή εξαψήφιος εξάγωνο.

71
00:03:28,850 --> 00:03:32,140
Έτσι, μπορείτε να καθορίσετε οποιοδήποτε χρώμα σας
θέλετε για το κείμενο της σελίδας σας

72
00:03:32,140 --> 00:03:36,370
κατά ενός συγκεκριμένου
χρώμα φόντου, από πάνω.

73
00:03:36,370 --> 00:03:39,100
Μπορείτε επίσης να αλλάξετε και να αντιμετωπίσουν
με γραμματοσειρά, και τον τρόπο που κείμενο

74
00:03:39,100 --> 00:03:40,400
αποδίδεται στην σελίδα.

75
00:03:40,400 --> 00:03:42,010
>> Έτσι, μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς σας.

76
00:03:42,010 --> 00:03:46,320
Μπορείτε να χρησιμοποιήσετε λέξεις-κλειδιά, όπως επιπλέον,
Πολύ μικρή, ή xx μικρές ή μεσαίες,

77
00:03:46,320 --> 00:03:47,660
μεγάλο, και ούτω καθεξής.

78
00:03:47,660 --> 00:03:50,750
Μπορείτε να χρησιμοποιήσετε σταθερά σημεία, 10
σημείο, 12 σημείο, και ούτω καθεξής.

79
00:03:50,750 --> 00:03:55,850
Μπορείτε να χρησιμοποιήσετε τα ποσοστά, 80%, 20%,
όπου το 100% είναι η προεπιλεγμένη γραμματοσειρά

80
00:03:55,850 --> 00:03:59,220
μέγεθος, το οποίο είναι συνήθως πρόκειται να
είναι κάτι σαν 11 ή 12 πόντους.

81
00:03:59,220 --> 00:04:01,659
Ή μπορείτε να στηρίξει ακόμη και εκτός
της πιο πρόσφατης μέγεθος της γραμματοσειράς.

82
00:04:01,659 --> 00:04:04,950
Αν απλά έγραψε κάτι και να ξέρετε
αυτό που θέλουμε είναι να είναι μικρότερο,

83
00:04:04,950 --> 00:04:08,241
αλλά δεν ξέρετε τι ακριβώς μέγεθος που
θέλουν να είναι, καλά, μπορείτε να πείτε απλά,

84
00:04:08,241 --> 00:04:09,330
μέγεθος γραμματοσειράς μικρότερο.

85
00:04:09,330 --> 00:04:14,344
Και θα βασίσει την απενεργοποίηση του,
ακριβώς από πάνω, είναι το μέγεθος της γραμματοσειράς.

86
00:04:14,344 --> 00:04:15,760
Και μπορείτε να πάρετε μικρότερο ή μεγαλύτερο.

87
00:04:15,760 --> 00:04:18,390
Έτσι, υπάρχει μια πολύ διαφορετική
τρόποι για να καθορίσετε το μέγεθος της γραμματοσειράς.

88
00:04:18,390 --> 00:04:20,690
>> Μπορείτε επίσης να καθορίσετε τι
Οικογένεια γραμματοσειράς που θέλετε.

89
00:04:20,690 --> 00:04:23,360
Εάν έχετε μια ιδιαίτερη
όνομα, υπάρχει ένας τρόπος στο CSS--

90
00:04:23,360 --> 00:04:27,270
εμείς δεν πρόκειται να μιλήσω γι 'αυτό
here-- να ορίσει μια πολύ συγκεκριμένη γραμματοσειρά

91
00:04:27,270 --> 00:04:28,980
και το ενσωματώσετε στη σελίδα σας.

92
00:04:28,980 --> 00:04:30,620
Μπορείτε επίσης να χρησιμοποιήσετε γενικά ονόματα.

93
00:04:30,620 --> 00:04:33,540
Υπάρχουν πολλά web ασφαλείς πηγές
που είναι προ-ορίζονται στο CSS.

94
00:04:33,540 --> 00:04:36,352
Και αν είστε χρήστης της Microsoft
Γραφείο κατά τα τελευταία 20 χρόνια,

95
00:04:36,352 --> 00:04:38,810
είστε πιθανώς εξοικειωμένοι με
πολλά από αυτά τα web ασφαλείς πηγές

96
00:04:38,810 --> 00:04:44,640
ήδη, Times New Roman, Arial,
Courier New, Γεωργία, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
και ούτω καθεξής.

98
00:04:45,470 --> 00:04:47,170
Αυτοί θεωρούνται όλα web ασφαλείς πηγές.

99
00:04:47,170 --> 00:04:49,169
Και πράγματι, μέρος της
λόγος που ήρθε να είναι

100
00:04:49,169 --> 00:04:54,140
έπρεπε να χρησιμοποιηθεί για να κάνει web-- κάθε σελίδα
είχε πρόσβαση σε αυτό το προεπιλεγμένο σύνολο γραμματοσειρών

101
00:04:54,140 --> 00:04:58,480
με διάφορες πατούρες, και όλα αυτά
γραμματοσειρά πράγματα που δεν θα μπει,

102
00:04:58,480 --> 00:05:01,130
αλλά αυτά είναι συνήθως
προσβάσιμη σε CSS σας,

103
00:05:01,130 --> 00:05:04,029
ακόμη και αν δεν το κάνετε
Αλλιώς καθορίζουν τις γραμματοσειρές.

104
00:05:04,029 --> 00:05:07,070
Τέλος, μπορείτε να ευθυγραμμίσετε το κείμενό σας,
αντί να είναι, εξ ορισμού, να ευθυγραμμιστούν

105
00:05:07,070 --> 00:05:09,310
προς τα αριστερά, θα μπορούσατε
ευθυγράμμισή του προς τα δεξιά,

106
00:05:09,310 --> 00:05:13,740
ή θα μπορούσε να ευθυγραμμιστεί το επίκεντρο, ή
δικαιολογείται έτσι ώστε να χτυπήσει δύο περιθωρίων.

107
00:05:13,740 --> 00:05:16,800
Έτσι, όλα αυτά είναι επιλογές που μπορείτε να χρησιμοποιήσετε
για να αλλάξει ό, τι το κείμενο σας μοιάζει,

108
00:05:16,800 --> 00:05:20,120
και πώς εμφανίζεται στην σελίδα σας.

109
00:05:20,120 --> 00:05:22,180
>> Επιλογείς σας δεν κάνει
πρέπει να είναι μόνο ετικέτες.

110
00:05:22,180 --> 00:05:25,539
Είδαμε προηγουμένως μια ετικέτα σώμα
επιλογής, και επιλογέα tag

111
00:05:25,539 --> 00:05:26,580
δεν μοιάζει ακριβώς όπως αυτό.

112
00:05:26,580 --> 00:05:30,020
Μπορείτε όνομα μιας ετικέτας, και στη συνέχεια
ορίσετε ένα στυλ για αυτή την ετικέτα.

113
00:05:30,020 --> 00:05:32,660
Αλλά μπορείτε επίσης να κάνετε κάτι
ονομάζεται επιλογέας ID.

114
00:05:32,660 --> 00:05:34,390
Ένας επιλογέας ID φαίνεται αρκετά παρόμοια.

115
00:05:34,390 --> 00:05:38,100
Να σημειωθεί όμως, ότι τώρα δεν είμαι με τη χρήση
μια ετικέτα HTML, είμαι με τη χρήση, στην περίπτωση αυτή,

116
00:05:38,100 --> 00:05:40,720
#unique, ή hash μοναδική.

117
00:05:40,720 --> 00:05:42,930
Αν θυμάστε από μας
βίντεο σε HTML, μιλήσαμε

118
00:05:42,930 --> 00:05:45,620
σχετικά με το πώς οι ετικέτες μπορούν να έχουν χαρακτηριστικά.

119
00:05:45,620 --> 00:05:48,340
>> Και ένα χαρακτηριστικό που ισχύει
σε σχεδόν όλες τις ετικέτες HTML,

120
00:05:48,340 --> 00:05:51,440
αλλά δεν μιλάμε γι 'αυτό,
Είναι κάτι που ονομάζεται μια ετικέτα ID.

121
00:05:51,440 --> 00:05:55,250
Έτσι, αυτό το συγκεκριμένο CSS θα
ισχύουν μόνο για HTML tag που έχει

122
00:05:55,250 --> 00:05:58,530
μια πολύ συγκεκριμένη ταυτότητα, ότι έχετε το όνομα.

123
00:05:58,530 --> 00:06:01,000
Έτσι, αν έχετε κάπου
στον κώδικά σας, κάπου

124
00:06:01,000 --> 00:06:06,090
σε αρχείο HTML, μια ετικέτα και
καθορίζει ως ένα χαρακτηριστικό της εν λόγω ετικέτας,

125
00:06:06,090 --> 00:06:09,060
ID ισούται με το μοναδικό, αυτό
Ειδικότερα στυλ

126
00:06:09,060 --> 00:06:15,030
Εδώ θα ισχύουν μόνο μεταξύ
αυτή η ετικέτα με το αναγνωριστικό του μοναδική.

127
00:06:15,030 --> 00:06:17,180
>> Μπορείτε επίσης να κάνετε κάτι
ονομάζεται επιλογέας τάξη.

128
00:06:17,180 --> 00:06:19,920
Έτσι, εκτός του ότι έχει
ID χαρακτηριστικά, μπορείτε επίσης να

129
00:06:19,920 --> 00:06:23,130
προσθέστε ένα χαρακτηριστικό τάξη σε ετικέτες HTML.

130
00:06:23,130 --> 00:06:27,140
Και όταν χρησιμοποιείτε ένα χαρακτηριστικό κλάσης,
μπορεί να εφαρμοστεί σε πολλαπλές ετικέτες.

131
00:06:27,140 --> 00:06:31,880
Έτσι, αν έχετε πολλά πράγματα που
Τα παρόμοια, ίσως θέλετε να πείτε,

132
00:06:31,880 --> 00:06:35,890
μπλα open tag, μπλα, μπλα,
μπλα, τάξη ισούται φοιτητές.

133
00:06:35,890 --> 00:06:38,190
Και τότε αυτό το συγκεκριμένο
στυλ θα εφαρμοστεί

134
00:06:38,190 --> 00:06:42,041
σε κάθε ετικέτα των οποίων η κατηγορία είναι φοιτητές.

135
00:06:42,041 --> 00:06:44,290
Σε αυτή την περίπτωση, είχαμε οριστεί η
χρώμα του φόντου σε κίτρινο,

136
00:06:44,290 --> 00:06:46,706
και εμείς θα ορίσετε την αδιαφάνεια, η οποία
είναι μια ετικέτα που δεν μιλάμε για,

137
00:06:46,706 --> 00:06:52,510
αλλά απλά ασχολείται με πόση διαφάνεια
είναι κάτι, σε 70%, σε αυτή την περίπτωση.

138
00:06:52,510 --> 00:06:54,430
>> Υπάρχουν δύο επιλογές για την
γραφής stylesheets.

139
00:06:54,430 --> 00:06:56,680
Μπορείτε να τα γράψω
απευθείας στο HTML σας

140
00:06:56,680 --> 00:06:59,690
με την τοποθέτηση των φύλλων στυλ
μεταξύ ετικέτες στυλ.

141
00:06:59,690 --> 00:07:03,850
Και αυτές οι ετικέτες του στυλ, πηγαίνετε στο εσωτερικό της
οι ετικέτες επικεφαλής της ιστοσελίδας σας.

142
00:07:03,850 --> 00:07:08,240
Η ίσως πιο προτιμώμενος τρόπος για να κάνουμε
είναι να γράψετε ένα ξεχωριστό αρχείο .css,

143
00:07:08,240 --> 00:07:12,360
και στη συνέχεια να συνδεθεί με σας
εγγράφου χρησιμοποιώντας ετικέτες σύνδεσμο.

144
00:07:12,360 --> 00:07:14,690
Ετικέτες Link, πάλι, είναι
διαφορετικό από υπερσυνδέσμους,

145
00:07:14,690 --> 00:07:16,760
αν θυμάστε από το βίντεο μας ένα HTML.

146
00:07:16,760 --> 00:07:19,030
Και ετικέτες σύνδεσμος είναι το πώς θα
τραβήξτε σε ξεχωριστά αρχεία.

147
00:07:19,030 --> 00:07:23,900
Είναι κάτι σαν το αντίστοιχο του
η #include για web προγραμματισμό.

148
00:07:23,900 --> 00:07:27,140
>> Έτσι, ας ρίξουμε μια ματιά σε table.HTML.

149
00:07:27,140 --> 00:07:29,380
Αν θυμάστε από μας
HTML βίντεο, μου έδειξε

150
00:07:29,380 --> 00:07:32,000
ένα παράδειγμα ενός πολύ
απλό πολλαπλασιασμό

151
00:07:32,000 --> 00:07:35,160
πίνακα που φαινόταν αρκετά
άσχημο, και ίσως υπάρχει

152
00:07:35,160 --> 00:07:38,650
ένας τρόπος για να γίνει καλύτερα με
CSS, για να δούμε πραγματικά

153
00:07:38,650 --> 00:07:41,120
περισσότερο σαν ένα πολλαπλασιασμό
τραπέζι, ή κάτι

154
00:07:41,120 --> 00:07:43,730
ότι δεν είναι μόνο κολλήσει μαζί
χωρίς πραγματική διαίρεση

155
00:07:43,730 --> 00:07:45,532
μεταξύ των σειρών και των στηλών.

156
00:07:45,532 --> 00:07:47,490
Οπότε ας το κεφάλι πάνω σε
CS50 IDE, και ρίξτε μια ματιά

157
00:07:47,490 --> 00:07:50,780
πώς CSS μπορεί, είδος, το τσίμπημα
αυτό που ξεκίνησε με πριν,

158
00:07:50,780 --> 00:07:53,290
και κάτι πολύ καλύτερο να κάνει.

159
00:07:53,290 --> 00:07:55,650
>> Έτσι είμαστε σε CS50 IDE
τώρα, και αν δεν είναι εξοικειωμένοι,

160
00:07:55,650 --> 00:07:58,710
θα τραβήξει σε αυτό
πίνακα ότι η HTML σελίδα.

161
00:07:58,710 --> 00:08:01,090
Table.HTML βασικά
ορίζει μόνο τα περιεχόμενα

162
00:08:01,090 --> 00:08:05,044
του multiple-- που έπρεπε να είναι
μια τέσσερις από τέσσερις πίνακα πολλαπλασιασμού.

163
00:08:05,044 --> 00:08:06,210
Είναι αρκετά απλό.

164
00:08:06,210 --> 00:08:09,410
Και εμείς θα σκεφτόταν ότι θα ήταν
εξετάσουμε πολύ καλά οργανωμένη.

165
00:08:09,410 --> 00:08:15,277
Αλλά στην πραγματικότητα, όταν θα προβολής αυτής της σελίδας,
βλέπουμε ότι είναι το είδος άσχημο, σωστά;

166
00:08:15,277 --> 00:08:16,860
Σαφώς έχουμε γραμμές και στήλες εδώ.

167
00:08:16,860 --> 00:08:18,350
Υπάρχει κάποιο είδος του διαχωρισμού.

168
00:08:18,350 --> 00:08:20,040
Αλλά δεν είναι ένα ουσιαστικό διαχωρισμό.

169
00:08:20,040 --> 00:08:23,105
Δεν είμαστε πραγματικά να πάρει
πάρα πολλές πληροφορίες εδώ.

170
00:08:23,105 --> 00:08:25,730
Και δεν υπάρχει κανένας διαχωρισμός μεταξύ
οι σειρές και στήλες σε όρους

171
00:08:25,730 --> 00:08:28,460
της οριζόντιας ή κάθετης κανόνες.

172
00:08:28,460 --> 00:08:31,530
Θα μπορούσαμε ίσως να κάνει αυτό
κοιτάξουμε λίγο καλύτερα.

173
00:08:31,530 --> 00:08:32,934
Οπότε ας προσπαθήσουμε.

174
00:08:32,934 --> 00:08:34,559
Έτσι, Πάω να κλείσει αυτήν την καρτέλα εδώ.

175
00:08:34,559 --> 00:08:37,434
Και Πάω να κλείσει table.HTML μου,
και έχω μια άλλη εκδοχή εδώ

176
00:08:37,434 --> 00:08:39,490
που ονομάζεται table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Θα ανοίξει το επάνω.

178
00:08:40,655 --> 00:08:42,530
Το σώμα της σελίδας είναι
λίγο πολύ το ίδιο,

179
00:08:42,530 --> 00:08:44,238
αλλά έχω αλλάξει ένα
λίγο στην κορυφή.

180
00:08:44,238 --> 00:08:47,132
Και εγώ θα μετακινηθείτε προς τα επάνω εδώ.

181
00:08:47,132 --> 00:08:49,340
Σημειώστε ότι αυτή τη φορά, είμαι
χρησιμοποιώντας το ενσωματωμένο ετικέτες στυλ.

182
00:08:49,340 --> 00:08:53,550
Έχω ανοίξει μια ετικέτα στυλ, και είμαι τώρα
ορίζει ένα CSS στυλ ακριβώς μέσα

183
00:08:53,550 --> 00:08:54,310
από αυτό.

184
00:08:54,310 --> 00:08:56,310
Έχω ένα στυλ που λέει, τραπέζι.

185
00:08:56,310 --> 00:08:58,170
Αυτό είναι επιλογέα tag μου.

186
00:08:58,170 --> 00:09:01,340
Δεν είμαι χρησιμοποιώντας τελεία ή κατακερματισμού,
πράγμα που θα έκανα αν ήμουν

187
00:09:01,340 --> 00:09:03,710
ήταν χρησιμοποιώντας ένα αναγνωριστικό ή μια τάξη επιλογέα.

188
00:09:03,710 --> 00:09:06,190
Έχω ένα επιλογέα tag here-- πίνακα.

189
00:09:06,190 --> 00:09:10,090
Αυτό το στυλ πρόκειται να
ισχύουν για κάθε ετικέτα τραπέζι.

190
00:09:10,090 --> 00:09:14,950
Προφανώς θέλω να θέσω ένα one
εικονοστοιχείων, στερεό μπλε περίγραμμα,

191
00:09:14,950 --> 00:09:15,779
μέσα στο τραπέζι μου.

192
00:09:15,779 --> 00:09:18,320
Αυτό ακούγεται σαν να ήταν πιθανώς
βοηθήσει την κατάσταση, σωστά;

193
00:09:18,320 --> 00:09:20,320
Εμείς πάμε για να έχουν
τα πράγματα φαίνονται πολύ καλύτερα.

194
00:09:20,320 --> 00:09:21,190
Έτσι, αυτό είναι καλό.

195
00:09:21,190 --> 00:09:23,540
Στιλιστικά, έχω μόνο
ενσωματωμένα στυλ μου εδώ.

196
00:09:23,540 --> 00:09:25,100
Είναι σίγουρα ένα
αποδεκτός τρόπος για να το κάνουμε.

197
00:09:25,100 --> 00:09:26,391
Ας δούμε τι αυτό μοιάζει.

198
00:09:26,391 --> 00:09:29,790
Γι 'αυτό και θα επιστρέψω εδώ κάτω, και
Θα προεπισκόπηση θα table2.HTML μου.

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

200
00:09:32,430 --> 00:09:36,470
Λοιπόν, αυτό δεν είναι ακριβώς αυτό που ήθελα,
αλλά είναι ακριβώς ό, τι ζητήσαμε.

201
00:09:36,470 --> 00:09:39,530
Είπαμε ότι αυτό το στυλ είναι
πρόκειται να εφαρμόσει στο τραπέζι μας.

202
00:09:39,530 --> 00:09:43,810
Το τραπέζι μας έχει τώρα ένα pixel
ευρύ, σταθερό μπλε περίγραμμα γύρω από αυτό.

203
00:09:43,810 --> 00:09:46,237
Δεν είμαστε πραγματικά να πάρει
στα κελιά του πίνακα.

204
00:09:46,237 --> 00:09:47,570
Εμείς απλά να πάρει στο τραπέζι.

205
00:09:47,570 --> 00:09:49,310
Έτσι CSS εργαστεί.

206
00:09:49,310 --> 00:09:51,890
Έχει εφαρμοστεί ένα
στυλ στο τραπέζι μας.

207
00:09:51,890 --> 00:09:53,981
Αλλά δεν κάνει αρκετά
ό, τι θέλαμε να κάνουμε.

208
00:09:53,981 --> 00:09:55,730
Πώς θα φτάσουμε να κάνουμε
τι θέλουμε να κάνουμε;

209
00:09:55,730 --> 00:09:59,287
>> Λοιπόν, ας ρίξουμε μια ματιά σε ένα πιο
έκδοση του αυτό table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Έτσι, είμαι απλώς πρόκειται να κλείσει αυτές τις καρτέλες.

211
00:10:00,870 --> 00:10:03,890
Πάω να επιστρέψω εδώ για να μου
αρχείο δέντρο, και να ανοίξει table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Και πάλι, πρόκειται να εξετάσουμε πολύ
παρόμοιο εδώ στην αρχή.

214
00:10:10,350 --> 00:10:14,460
Αλλά ανακοίνωση, αυτή τη φορά, αντί της χρήσης
ένα φύλλο στυλ είναι ενσωματωμένη εκεί,

215
00:10:14,460 --> 00:10:18,870
Πάω να συνδεθούν σε ένα
στυλ χρησιμοποιώντας την ετικέτα σύνδεσμο.

216
00:10:18,870 --> 00:10:22,480
Έτσι είμαι προφανώς σε μια σύνδεση
στυλ που ονομάζεται tables.CSS,

217
00:10:22,480 --> 00:10:25,090
και αυτό και ισούται με
στυλ ακριβώς means-- καλά,

218
00:10:25,090 --> 00:10:28,645
τι είναι αυτό το αρχείο σε σχέση με ό, τι
Είμαι doing-- είναι ένα στυλ που είμαι

219
00:10:28,645 --> 00:10:29,821
χρησιμοποιώντας για τη σελίδα μου.

220
00:10:29,821 --> 00:10:32,320
Έτσι, αν πραγματικά θέλετε να δείτε τι
Κάνω με το CSS εδώ,

221
00:10:32,320 --> 00:10:35,010
Πρέπει να πάω ανοικτές ότι
table.CSS αρχείων, καθώς και.

222
00:10:35,010 --> 00:10:37,490
Έτσι θα πάμε πίσω εδώ
και πάλι σε δέντρο αρχείο μας.

223
00:10:37,490 --> 00:10:38,660
Υπάρχει table.CSS.

224
00:10:38,660 --> 00:10:40,490
Θα το σκάσει ανοίξει.

225
00:10:40,490 --> 00:10:43,070
Τώρα βλέπουμε λίγο από το CSS.

226
00:10:43,070 --> 00:10:45,630
Προφανώς, έχω ένα ζευγάρι
πράγματα συμβαίνουν εδώ.

227
00:10:45,630 --> 00:10:48,950
Θα προφανώς θέλει να βάλει πέντε
εικονοστοιχείων, στερεό κόκκινο περίγραμμα,

228
00:10:48,950 --> 00:10:50,287
γύρω από το τραπέζι μου.

229
00:10:50,287 --> 00:10:52,870
Γνωρίζουμε ήδη ότι αυτό συμβαίνει
να πάει ακριβώς στην περίμετρο.

230
00:10:52,870 --> 00:10:56,180
Είδαμε ότι στην table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Με κάθε σειρά, εγώ
θέλουν προφανώς να ορίσετε

232
00:10:58,770 --> 00:11:01,950
ότι το ύψος της γραμμής είναι 50 pixels ύψος.

233
00:11:01,950 --> 00:11:05,680
Έτσι, για κάθε γραμμή, θυμηθείτε
αυτό είναι που κάνει η ετικέτα tr,

234
00:11:05,680 --> 00:11:08,550
Κάνω το 50 pixels ύψος.

235
00:11:08,550 --> 00:11:09,804
>> Τέλος, έχω αυτό το σχόλιο.

236
00:11:09,804 --> 00:11:11,470
Και αυτό είναι το πώς μπορούμε να διατυπώσουν τις παρατηρήσεις CSS.

237
00:11:11,470 --> 00:11:16,174
Είναι πολύ παρόμοιο με αδράξουν μπλοκ
σχόλια σύνταξη αστέρι κάθετο.

238
00:11:16,174 --> 00:11:17,090
Όλο το κείμενο που θέλετε.

239
00:11:17,090 --> 00:11:19,470
Δεν υπάρχει κάθετος κάθετος αν και σε CSS.

240
00:11:19,470 --> 00:11:23,400
Για σύντομες παρατηρήσεις inline, έχουμε
Για να χρησιμοποιήσετε αυτή συγκεκριμένη μορφή εδώ.

241
00:11:23,400 --> 00:11:26,830
Μοιάζει κάνω μια
Πολλά πράγματα σε ετικέτες td μου.

242
00:11:26,830 --> 00:11:29,710
Θυμηθείτε ετικέτες td, ή τραπέζι
στοιχεία, τα οποία είναι πραγματικά ακριβώς

243
00:11:29,710 --> 00:11:32,210
Οι κίονες στο εσωτερικό της
σειρές μας, και προφανώς

244
00:11:32,210 --> 00:11:35,090
για κάθε κομμάτι των στοιχείων
στο τραπέζι μου, θέλω

245
00:11:35,090 --> 00:11:38,850
για να ορίσετε το χρώμα φόντου για την
είναι το μαύρο, το χρώμα πρέπει να είναι λευκό,

246
00:11:38,850 --> 00:11:40,320
χρώμα είναι χρώμα προσκηνίου.

247
00:11:40,320 --> 00:11:42,360
Έτσι, αυτό πρόκειται να είναι
Το κείμενο της σελίδας μου.

248
00:11:42,360 --> 00:11:45,140
Θέλω μεγάλη γραμματοσειρά, 22
μέγεθος γραμματοσειράς, και θέλω

249
00:11:45,140 --> 00:11:47,001
να είναι της οικογένειας γραμματοσειρών, Γεωργία.

250
00:11:47,001 --> 00:11:48,750
Γι 'αυτό και δεν πρόκειται να
έχουν την προεπιλεγμένη γραμματοσειρά.

251
00:11:48,750 --> 00:11:51,820
Πάω να καθορίσετε τη Γεωργία, η οποία
είναι ένα από αυτά τα web ασφαλείς πηγές

252
00:11:51,820 --> 00:11:53,830
ότι έχουμε δει στο παρελθόν.

253
00:11:53,830 --> 00:11:57,284
Θέλω κείμενό μου να ευθυγραμμιστούν
κεντρικά, στο μέσον του κουτιού,

254
00:11:57,284 --> 00:11:59,450
Δεν θέλω να μείνει
ευθυγραμμισμένο ή δεξιά στοίχιση.

255
00:11:59,450 --> 00:12:03,461
Και θέλω το πλάτος της στήλης μου
να είναι 50 pixels πλάτος, καθώς και.

256
00:12:03,461 --> 00:12:05,210
Ας ρίξουμε μια ματιά στο
τι αυτό μοιάζει,

257
00:12:05,210 --> 00:12:07,470
και να δούμε αν αυτό είναι ίσως μια βελτίωση.

258
00:12:07,470 --> 00:12:12,890
Έτσι, Πάω να πάει στο table3.HTML, η οποία
ανάκληση, περιλαμβάνει table.CSS ως σύνδεσμος,

259
00:12:12,890 --> 00:12:14,830
και εμείς θα την προεπισκόπηση.

260
00:12:14,830 --> 00:12:16,800
Αυτό είναι πολύ καλύτερα, έτσι δεν είναι;

261
00:12:16,800 --> 00:12:20,004
Αυτό είναι πραγματικά αρχίζει να φαίνεται
πολύ περισσότερο σαν ένα πίνακα πολλαπλασιασμού.

262
00:12:20,004 --> 00:12:21,920
Έχω αυτό το κόκκινο περίγραμμα
γύρω από το τραπέζι μου, αλλά τώρα

263
00:12:21,920 --> 00:12:26,700
Θα ήθελα επίσης να διευκρινιστεί ότι
κάθε γραμμή είναι 50 pixels πλάτος,

264
00:12:26,700 --> 00:12:30,220
ή είναι 50 εικονοστοιχεία tall-- δικαιολογία
me-- κάθε στήλη είναι 50 pixels πλάτος.

265
00:12:30,220 --> 00:12:34,251
Τα δεδομένα σε κάθε στήλη, και μόνο
τα δεδομένα, έχει ένα μαύρο φόντο.

266
00:12:34,251 --> 00:12:36,000
Έτσι, γι 'αυτές που
λευκές γραμμές υπάρχουν.

267
00:12:36,000 --> 00:12:38,836
Επειδή ο χώρος
μεταξύ όλων αυτών των κυττάρων,

268
00:12:38,836 --> 00:12:40,710
δεν είναι μια συνόρων στην
από μόνη της, είναι ακριβώς

269
00:12:40,710 --> 00:12:43,170
Είμαι μόνο τη συμπλήρωση της
κύτταρα, τα οποία στην πραγματικότητα

270
00:12:43,170 --> 00:12:46,310
καθιστά τα σύνορα του πίνακα, ο οποίος
προφανώς υπήρχαν σε όλο το μήκος, το

271
00:12:46,310 --> 00:12:47,887
ήταν απλά λεπτές λευκές γραμμές.

272
00:12:47,887 --> 00:12:48,720
Τώρα είναι ορατό.

273
00:12:48,720 --> 00:12:50,380
Τώρα έχει πεταχτεί στην οθόνη.

274
00:12:50,380 --> 00:12:52,920
Και έτσι αυτό είναι ένα πολύ απλό
στυλ που έχω χρησιμοποιήσει,

275
00:12:52,920 --> 00:12:56,850
και τώρα το τραπέζι μου μοιάζει πολύ περισσότερο σαν
ένα τραπέζι τέσσερις από τέσσερις πολλαπλασιασμό,

276
00:12:56,850 --> 00:13:00,950
αντί για ένα μόνο μπερδεμένες χάος, όπου
όλα είναι ξεκάθαρα γραμμές και στήλες,

277
00:13:00,950 --> 00:13:03,717
αλλά όχι εξαιρετικά καλά οργανωμένη.

278
00:13:03,717 --> 00:13:06,800
Είμαστε πραγματικά ακριβώς το ξύσιμο της επιφάνειας
από ό, τι μπορείτε να κάνετε με CSS εδώ.

279
00:13:06,800 --> 00:13:10,330
Ευτυχώς, η τεκμηρίωση CSS
είναι αρκετά απλή.

280
00:13:10,330 --> 00:13:14,000
Θα χρησιμοποιήσετε πολλές από της
Χαρακτηριστικά, αρκετά συχνά.

281
00:13:14,000 --> 00:13:16,087
Οι αυτοί μιλήσαμε για
νωρίτερα σε αυτό το βίντεο.

282
00:13:16,087 --> 00:13:18,170
Υπάρχουν πολλά που μπορείτε
πιθανότατα δεν θα χρησιμοποιήσει όλα.

283
00:13:18,170 --> 00:13:19,469
Και αυτό είναι εντάξει, πάρα πολύ.

284
00:13:19,469 --> 00:13:22,010
Αλλά ακριβώς γνωρίζουν, ότι υπάρχει μια
Πολλοί τεκμηρίωσης εκεί έξω.

285
00:13:22,010 --> 00:13:25,110
Έτσι, ακόμη και αν δεν καλύπτει τα πάντα,
είστε σίγουρα δεν άφησαν τη δική σας.

286
00:13:25,110 --> 00:13:26,780
Αλλά CSS είναι πραγματικά διασκεδαστικό
να πειραματιστείτε με.

287
00:13:26,780 --> 00:13:29,040
Και θα ήθελα να σας ενθαρρύνω
για να παίξει γύρω με τις ιστοσελίδες σας,

288
00:13:29,040 --> 00:13:32,180
και δείτε πώς μπορείτε να τα κάνετε
εμφάνιση και την αίσθηση για τη βελτίωση της χρήσης

289
00:13:32,180 --> 00:13:34,790
εμπειρία της επίσκεψης σας σελίδα.

290
00:13:34,790 --> 00:13:35,710
Είμαι ο Νταγκ Lloyd.

291
00:13:35,710 --> 00:13:37,980
Αυτό είναι CS50.

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