1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> ΟΜΙΛΗΤΗΣ: Αποδεικνύεται ότι η HTML δεν είναι
η μόνη γλώσσα που μπορείτε να χρησιμοποιήσετε μέσα

3
00:00:03,310 --> 00:00:03,895
μιας σελίδας web.

4
00:00:03,895 --> 00:00:08,100
Μπορείτε να χρησιμοποιήσετε κάτι που ονομάζεται CSS, ή
Τα επικαλυπτόμενα φύλλα στυλ, καθώς και.

5
00:00:08,100 --> 00:00:12,120
CSS σας επιτρέπει να ορίσετε πολύ περισσότερο
ακριβώς η αισθητική ενός web

6
00:00:12,120 --> 00:00:16,930
σελίδα, περιλαμβανομένης και της διαμόρφωσης και τα μεγέθη και
χρώματα και τις γραμματοσειρές και πολλά άλλα.

7
00:00:16,930 --> 00:00:20,820
Για παράδειγμα, ας δημιουργήσουμε μια ιστοσελίδα
εδώ που ονομάζεται CSS0 που αντιπροσωπεύει μια

8
00:00:20,820 --> 00:00:22,740
αρχική σελίδα για, ας πούμε, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Σε αυτή τη σελίδα, θα έχουμε John Χάρβαρντ
όνομα, κάτω από το οποίο θα

10
00:00:25,480 --> 00:00:28,500
ένα ωραίο μήνυμα για τους επισκέπτες του, κάτω από
η οποία θα είναι μια υποσημείωση, με

11
00:00:28,500 --> 00:00:30,590
λένε, κάποιες πληροφορίες πνευματικών δικαιωμάτων.

12
00:00:30,590 --> 00:00:34,650
Για να το κάνετε αυτό, ας ορίσουμε τρία τμήματα
για τη σελίδα χρησιμοποιώντας ένα tag

13
00:00:34,650 --> 00:00:35,670
ονομάζεται div.

14
00:00:35,670 --> 00:00:43,880
Open div βραχίονα, John Harvard, κοντά
βραχίονα div, ένα άλλο ανοικτό στήριγμα div,

15
00:00:43,880 --> 00:00:48,330
και τώρα θα ορίσουμε κάτι
όπως, καλώς ήρθατε στην προσωπική μου σελίδα!

16
00:00:48,330 --> 00:00:50,420
Και ας κλείσει αυτό το div, καθώς και.

17
00:00:50,420 --> 00:00:53,700
>> Και τώρα το ένα τρίτο και τελικό
div, τα δικαιώματα πνευματικής ιδιοκτησίας.

18
00:00:53,700 --> 00:00:58,250
Ακριβώς για να είναι φανταχτερό, επιτρέψτε μου να χρησιμοποιήσω τώρα ένα HTML
οντότητα, ένα σύμβολο που αντιπροσωπεύει

19
00:00:58,250 --> 00:01:01,140
ένας χαρακτήρας που δεν θα μπορούσε αλλιώς
πληκτρολογείτε στο πληκτρολόγιό σας.

20
00:01:01,140 --> 00:01:07,490
Ειδικότερα, Πάω να κάνουμε
σύμβολο, λίρα, 169, τελεία.

21
00:01:07,490 --> 00:01:10,620
Αποδεικνύεται ότι το αριθμητικό κωδικό
για το σύμβολο πνευματικών δικαιωμάτων.

22
00:01:10,620 --> 00:01:14,260
Στη συνέχεια, ας καθορίσετε John Harvard
εδώ στο κάτω μέρος.

23
00:01:14,260 --> 00:01:17,180
Ας κλείσει το div και να αποθηκεύσετε το αρχείο.

24
00:01:17,180 --> 00:01:18,910
>> Τώρα, τι είναι αυτό το tag div;

25
00:01:18,910 --> 00:01:21,970
Το tag div απλώς ορίζει ένα τμήμα
της σελίδας, η οποία είναι ουσιαστικά ένα

26
00:01:21,970 --> 00:01:23,310
ορθογώνια περιοχή.

27
00:01:23,310 --> 00:01:26,850
Έτσι, σε αυτή τη στιγμή, έχω τρεις
ορθογώνιες περιοχές, το ένα στην κορυφή

28
00:01:26,850 --> 00:01:27,620
του άλλου.

29
00:01:27,620 --> 00:01:30,610
Έτσι, για τώρα, το αποτέλεσμα είναι σχεδόν το ίδιο
αν είχα τρεις παραγράφους.

30
00:01:30,610 --> 00:01:33,490
Αλλά δεν θα δούμε τόσο πολύ
λευκό κενό μεταξύ τους.

31
00:01:33,490 --> 00:01:36,170
>> Ας αποθηκεύσετε αυτό το αρχείο, η αλλαγή του
δικαιώματα, και ρίξτε μια ματιά για μια

32
00:01:36,170 --> 00:01:37,990
στιγμή στο Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Ας τώρα να ανοίξει Chrome και επίσκεψη
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Πράγματι, εδώ είναι μια αρχική σελίδα
για τον John Harvard.

36
00:01:54,630 --> 00:01:59,370
Ας τώρα στυλιζάρω λίγο περισσότερο
ακρίβεια χρησιμοποιώντας κάποια CSS.

37
00:01:59,370 --> 00:02:03,510
>> Πίσω στο gedit, ας πάμε σε αυτό
πρώτη tag div και να προσθέσετε ένα στυλ

38
00:02:03,510 --> 00:02:11,060
αποδίδουν διευκρινίζοντας ότι θα ήθελα μια
το μέγεθος της γραμματοσειράς του, ας πούμε, 36 εικονοστοιχεία, ή px.

39
00:02:11,060 --> 00:02:15,650
Και θα ήθελα το βάρος αυτής της γραμματοσειράς
να είναι τολμηρή και όχι την προεπιλογή,

40
00:02:15,650 --> 00:02:16,980
το οποίο είναι φυσιολογικό.

41
00:02:16,980 --> 00:02:21,170
Για τη δεύτερη div, ας καθορίσετε
άλλο χαρακτηριστικό στυλ που έχει

42
00:02:21,170 --> 00:02:25,550
το μέγεθος της γραμματοσειράς των 24 pixels, έτσι
λίγο μικρότερο.

43
00:02:25,550 --> 00:02:28,410
Κλείστε αποσπάσματα μετά την τελεία.

44
00:02:28,410 --> 00:02:33,255
>> Τέλος, σε αυτό το τρίτο div, ας κάνουμε
στυλ ισούται με το μέγεθος απόσπασμα, τη γραμματοσειρά και

45
00:02:33,255 --> 00:02:35,340
ας πούμε 12 pixels αυτή τη φορά.

46
00:02:35,340 --> 00:02:37,280
Κλείσιμο απόσπασμα μετά την τελεία.

47
00:02:37,280 --> 00:02:40,200
Παρατηρήστε τότε που φαίνεται να έχουν
καθορίζεται ένα κομμάτι της στυλιζάρισμα για

48
00:02:40,200 --> 00:02:43,770
κάθε μία από αυτές τις τρεις divs χρήση,
αποδεικνύεται, CSS.

49
00:02:43,770 --> 00:02:47,820
Στην πραγματικότητα, η σύνταξη που βλέπετε στην
μεταξύ αυτών διπλά εισαγωγικά είναι CSS,

50
00:02:47,820 --> 00:02:50,620
Συγκεκριμένα CSS ιδιότητες
με τις αξίες.

51
00:02:50,620 --> 00:02:53,910
Και για το πρώτο ετικέτα, όπου είχα
δύο τέτοιες ιδιότητες, μέγεθος γραμματοσειράς και

52
00:02:53,910 --> 00:02:57,290
font βάρος, εγώ απλά χωρίζονται
τους με ένα ερωτηματικό.

53
00:02:57,290 --> 00:02:59,940
>> Τώρα, μόνο για λόγους ύφους, I
Περιλαμβάνονται επίσης ερωτηματικά σε

54
00:02:59,940 --> 00:03:00,880
το τέλος της κάθε γραμμής.

55
00:03:00,880 --> 00:03:04,270
Αλλά δεν είναι απολύτως αναγκαίο,
ιδιαίτερα όταν έχετε μόνο ένα

56
00:03:04,270 --> 00:03:05,580
ιδιοκτησίας που ορίζεται.

57
00:03:05,580 --> 00:03:08,370
Ας τώρα να αποθηκεύσετε το αρχείο και επαναλάβετε τη φόρτωση
στο Chrome, και να δούμε τι

58
00:03:08,370 --> 00:03:11,000
το καθαρό αποτέλεσμα είναι.

59
00:03:11,000 --> 00:03:13,470
Πίσω στο Chrome εδώ,
ας κλικ Reload.

60
00:03:13,470 --> 00:03:15,800
>> Τώρα έχουμε μια ελαφρώς πιο ενδιαφέρουσα
Αρχική σελίδα για τον John

61
00:03:15,800 --> 00:03:19,000
Χάρβαρντ, όπου η πρώτη γραμμή με
το όνομά του, το οποίο είναι μέσα από αυτό

62
00:03:19,000 --> 00:03:23,470
πρώτη div, είναι 36 pixels ύψος και
έντονους, οπότε η δεύτερη γραμμή,

63
00:03:23,470 --> 00:03:27,340
που είναι σε αυτό το δεύτερο div, είναι 24
pixels ψηλός, αλλά όχι έντονη γραφή.

64
00:03:27,340 --> 00:03:31,500
Και σύμφωνα με την οποία η τρίτη γραμμή στην εν λόγω τρίτη
div είναι 12 pixels ύψος και

65
00:03:31,500 --> 00:03:32,610
Δεν με έντονους χαρακτήρες.

66
00:03:32,610 --> 00:03:35,380
Αλλά ας υποθέσουμε ότι τώρα θα ήθελα να στραφούν
όλα αυτό το κείμενο πάνω

67
00:03:35,380 --> 00:03:36,650
έτσι ώστε να είναι κεντραρισμένο.

68
00:03:36,650 --> 00:03:40,480
>> Θα μπορούσε να ευθυγραμμίσει κάθε επιμέρους
Divs ως επίκεντρο.

69
00:03:40,480 --> 00:03:45,330
Αλλά πιο εύκολα, θα μπορούσα να τυλίξετε εκείνες
τρεις divs εσωτερικό ενός τέταρτου div, ένα

70
00:03:45,330 --> 00:03:49,360
μητρική div, να το πω έτσι, και να καθορίσετε
ότι το div και όλα της

71
00:03:49,360 --> 00:03:52,610
απόγονοι θα πρέπει να είναι
κειμένου στοιχίζονται κέντρο;

72
00:03:52,610 --> 00:03:54,120
Ας ρίξουμε μια ματιά.

73
00:03:54,120 --> 00:03:58,510
>> Μέσα από gedit, ας πάμε πίσω στο μου
το σώμα και να προσθέσετε μια νέα div επάνω στην κορυφή με

74
00:03:58,510 --> 00:04:04,460
div, το στυλ ισούται με παράθεση unquote
κέντρο ευθυγράμμιση κειμένου, κοντά

75
00:04:04,460 --> 00:04:06,250
παραθέσω μετά την τελεία.

76
00:04:06,250 --> 00:04:10,280
Και τώρα, ας πάμε μπροστά και παύλα όλα
από αυτές τις γραμμές που έχουμε πληκτρολογήσει στο παρελθόν.

77
00:04:10,280 --> 00:04:15,040
Και κάτω από την εν λόγω τρίτη div, ας
κλείστε αυτό το νέο div.

78
00:04:15,040 --> 00:04:18,829
>> Με άλλα λόγια, επειδή τα τρία αυτά
αρχική divs είναι τώρα τα παιδιά, έτσι ώστε να

79
00:04:18,829 --> 00:04:22,110
μιλούν, μίας νέας μητρικής div και έχω
διευκρινίζεται ότι θα ήθελα να ευθυγραμμίσει το

80
00:04:22,110 --> 00:04:26,140
κείμενο της εν λόγω μητρικής div στο κέντρο
της σελίδας, ότι η ιδιοκτησία θα είναι

81
00:04:26,140 --> 00:04:28,290
κληρονομείται από όλα αυτά τα παιδιά.

82
00:04:28,290 --> 00:04:32,370
Πράγματι, ας αποθηκεύσετε το αρχείο και
ρίξτε μια ματιά σε ένα πρόγραμμα περιήγησης.

83
00:04:32,370 --> 00:04:34,650
Ας φορτώσετε στο Chrome.

84
00:04:34,650 --> 00:04:37,540
Και εκεί αυτό, ένα ακόμη καλύτερο έχουν
αρχική σελίδα για τον John Harvard.

85
00:04:37,540 --> 00:04:39,872