1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [CSS]

2
00:00:02,000 --> 00:00:04,810
[ஜோசப் ஆங் - ஹார்வர்ட் பல்கலைக்கழகம்]

3
00:00:04,810 --> 00:00:07,160
[இந்த CS50 உள்ளது. - CS50.TV]

4
00:00:07,160 --> 00:00:11,430
>> இன்று நாம் CSS பற்றி பேசி அல்லது நடைதாள்கள்.

5
00:00:11,430 --> 00:00:14,330
>> எனவே CSS சரியாக என்ன?

6
00:00:14,330 --> 00:00:17,120
நன்றாக, 2 பகுதிகளாக கீழே கால CSS உடைக்க அனுமதிக்க:

7
00:00:17,120 --> 00:00:19,510
விழுத்தொடர் மற்றும் நடைதாள்களைக்.

8
00:00:19,510 --> 00:00:23,900
விழுத்தொடர் சிறிது மிகவும் சிக்கலான உள்ளது, மற்றும் நாம் மற்றொரு வீடியோ மூடலாம் விஷயம்.

9
00:00:23,900 --> 00:00:27,930
ஆனால் முதல் முறையாக, நடைதாள்களைக் CSS என்ன நேரத்தில் மிகவும் குறிப்புகள்.

10
00:00:27,930 --> 00:00:30,880
இது, ஒரு வலை பக்கத்தின் HTML ஸ்டைல்கள் சேர்க்கிறது

11
00:00:30,880 --> 00:00:33,720
வலைப்பக்கத்தில் aesthetically எப்படி மாறும்.

12
00:00:33,720 --> 00:00:38,310
இந்த பக்கத்தில் உரை எழுத்துரு உள்ளடக்கத்தை பொருத்துதல் எல்லாமும்

13
00:00:38,310 --> 00:00:43,800
வட்டமான ஒரு பெட்டியில் மூலைகள் செய்யும் அல்லது உரை நிழல்கள் சேர்த்து போன்ற மற்ற குளிர் விஷயங்களை.

14
00:00:43,800 --> 00:00:48,230
விஷயங்களை திரையில் உயிருள்ள செய்ய நீங்கள் கூட பைத்தியம் விஷயங்களை செய்ய முடியும்.

15
00:00:48,230 --> 00:00:51,700
>> நாம் HTML உடன் CSS எப்படி பயன்படுத்துவது?

16
00:00:51,700 --> 00:00:53,620
நான் எழுதிய இந்த ஏழை காணப்படும் தளத்தில் எடுத்து.

17
00:00:53,620 --> 00:00:57,290
ராப் இப்போது இந்த தளத்தில் பார்த்து இருந்தால், அவர் ஒருவேளை, ஏதாவது சொல்ல விரும்புகிறேன்

18
00:00:57,290 --> 00:01:01,730
"ஓ! என் அறிமுகம் கொடூரமான தெரிகிறது. ஜோசப், நீங்கள் ஒரு மோசமான வடிவமைப்பாளர் இருக்கிறோம்."

19
00:01:01,730 --> 00:01:05,110
"இயல்புநிலை டைம்ஸ் எழுத்துரு பயன்படுத்தி? ஹெல்வெடிகா மிகவும் நன்றாக உள்ளது."

20
00:01:05,110 --> 00:01:09,600
>> அதனால் என்ன ராப் விரும்புகிறது ஸ்டைலிங் விண்ணப்பிக்க எளிய வழி இருக்கும்?

21
00:01:09,600 --> 00:01:13,530
மக்கள் மிக தெளிவான முறையில் நிறைய ஆரம்பத்தில் CSS எழுதினார்

22
00:01:13,530 --> 00:01:17,470
உறுப்பு தன்னை நாம் பாணி அறிவிப்புக்கள் அழைத்தால் என்ன செய்ய இருந்தார்

23
00:01:17,470 --> 00:01:20,560
HTML வகை பண்பு பயன்படுத்தி.

24
00:01:20,560 --> 00:01:26,420
ஒரு பாணி அறிவிப்பு வெறுமனே HTML உறுப்பு நாட்டின் CSS சொத்து கொண்டிருக்கும் நாம் மாற்ற வேண்டும்

25
00:01:26,420 --> 00:01:32,140
இறுதியில் சொத்து மற்றும் ஒரு அரைக்காற்புள்ளி புதிய மதிப்பு தொடர்ந்து ஒரு பெருங்குடல் தொடர்ந்து.

26
00:01:32,140 --> 00:01:36,600
உதாரணமாக, நாம் ராப் அவரது அறிமுகம் சுற்றி ஒரு கருப்பு எல்லை விரும்புகிறார் என்று.

27
00:01:36,600 --> 00:01:40,040
நாம் முதலில் இங்கே ராப் தான் DIV மீதான பாணி பண்பு வைத்து

28
00:01:40,040 --> 00:01:43,830
பின்னர் இரட்டை மேற்கோளில் உள்ளே ஒரு CSS அறிவிப்பு வைத்தது:

29
00:01:43,830 --> 00:01:47,880
"எல்லை: 1px திட கருப்பு;"

30
00:01:47,880 --> 00:01:52,480
1 பிக்சல் எல்லை அகலம் குறிக்கிறது, திட, எல்லை பாணியில் குறிக்கிறது

31
00:01:52,480 --> 00:01:56,640
மற்றும் இறுதியில் வண்ண எல்லை இன் நிறம் என்ன தீர்மானிக்கிறது.

32
00:01:56,640 --> 00:02:01,220
>> நாம் ஒரு உறுப்பு பல வடிவங்களில் விரும்பினால், வரிசையில் இந்த அறிவிப்புக்கள் எழுத.

33
00:02:01,220 --> 00:02:05,650
எடுத்துக்காட்டாக, ராப் நீல பின்னணியில் ஹெல்வெடிகா அவரது தலைப்பு உரை விரும்பினால்

34
00:02:05,650 --> 00:02:09,270
உரை சுற்றி அதிக இடம், நாம் இதை செய்ய முடியும்:

35
00:02:09,270 --> 00:02:19,800
பாணி = "எழுத்துரு-குடும்பத்தை: ஹெல்வெடிகா; பின்னணி வண்ண: நீல; திணிப்பு: 5px;"

36
00:02:22,150 --> 00:02:28,010
கடந்த அரைக்காற்புள்ளி உண்மையில் விரும்பினால், ஆனால் மக்கள் வழக்கமாக நிலைத்தன்மையும் பொருட்டு அதை வைத்து.

37
00:02:28,010 --> 00:02:32,180
>> நாம் குளிர்ந்த மற்றும் மிகவும் சிக்கலான CSS பண்புகள் சில விளக்கி காப்பாற்ற வேண்டும்

38
00:02:32,180 --> 00:02:34,140
மற்றொரு வீடியோ.

39
00:02:34,140 --> 00:02:38,780
நீங்கள் மனதில் ஏதாவது இருந்தால், வெறும் CSS தொடர்ந்து நீங்கள் விரும்பும் விளைவை தொடரவும்

40
00:02:38,780 --> 00:02:41,590
ஒருவேளை நீங்கள் நல்ல முடிவு கொடுக்கும்.

41
00:02:41,590 --> 00:02:44,530
குளிர் விஷயம், CSS அழகான பரந்த உள்ளது

42
00:02:44,530 --> 00:02:48,470
நீங்கள் செய்ய வேண்டும் ஏதாவது இருந்தால் மிகவும் பிரச்சனைகளுக்கும் உள்ளன - காரணம் இருக்கும் -

43
00:02:48,470 --> 00:02:51,350
CSS ஒருவேளை அதை செய்ய முடியும்.

44
00:02:51,350 --> 00:02:54,750
நாம் இன்லைன் ஸ்டைலிங் பாணியை இந்த வகையான அழைக்கிறோம்.

45
00:02:54,750 --> 00:02:59,030
உறுப்பு பாணி தொடக்க குறிச்சொல் ஏற்ப, நன்றாக உள்ளது.

46
00:02:59,030 --> 00:03:01,770
>> உண்மையில் ஏற்பாடு செய்ய பிடிக்கும் எல்லோரும் ஐந்து,

47
00:03:01,770 --> 00:03:05,800
இந்த அனைத்து எப்படி அழுக்காக்கி மணிக்கு சலிப்பை ஒரு சிறிய பெற தொடங்கலாம்.

48
00:03:05,800 --> 00:03:09,810
நீங்கள் பக்கத்தில் ஒவ்வொரு உறுப்பு செய்ய வேண்டியிருந்தது என்றால், கற்பனை

49
00:03:09,810 --> 00:03:13,690
பிளஸ் இப்போது உங்கள் HTML மற்றும் CSS அனைத்து intermixed மற்றும் அடைக்கப்பட்டுள்ளது.

50
00:03:13,690 --> 00:03:15,500
மொத்த, சரியான?

51
00:03:15,500 --> 00:03:21,110
இதை சரிசெய்ய, மக்கள் இறுதியில் தங்கள் HTML மார்க்கப் பிரிக்கும் மீது பிடித்துக்கொண்டு தொடங்கியது

52
00:03:21,110 --> 00:03:26,370
CSS தேர்வாளர்கள் என்று ஏதாவது பயன்படுத்தி தங்கள் CSS ஸ்டைலிங் இருந்து.

53
00:03:26,370 --> 00:03:31,780
CSS தேர்வாளர்கள் இது அறிவிப்புக்கள் பயன்படுத்த வேண்டும் கூறுகள் தேர்வு பயன்படுத்தப்படுகின்றன.

54
00:03:31,780 --> 00:03:38,600
CSS அறிவிப்புக்கள் பட்டியலை இணைந்து ஒரு தேர்வுக்குழு பெரும்பாலும் CSS ஆட்சி என குறிப்பிடப்படுகிறது.

55
00:03:38,600 --> 00:03:43,260
இந்த விதிகள், திறந்த மற்றும் நெருங்கிய HTML வகை குறிச்சொற்களை இடையே வைத்து

56
00:03:43,260 --> 00:03:46,120
பெரும்பாலும் ஆவணத்தின் தலை.

57
00:03:46,120 --> 00:03:49,000
>> இது, ஒரு எடுத்துக்காட்டாக பார்க்க மிகவும் எளிதாக இருக்கிறது

58
00:03:49,000 --> 00:03:53,000
எனவே ஒரு எளிய CSS ஆட்சி உருவாக்குவதன் மூலம் ஆரம்பிக்கலாம்.

59
00:03:53,000 --> 00:03:58,180
முதல், நாம் HTML தலைவர் பிரிவில் பாணி குறிச்சொற்களை வைத்து நாம்.

60
00:03:58,180 --> 00:04:00,020
அடுத்த, தேர்வுக்குழு.

61
00:04:00,020 --> 00:04:03,490
நாம் எளிய தேர்வாளர்கள் ஒரு ஹாஷ் சின்னமாக, பயன்படுத்தி துவங்க வேண்டும்

62
00:04:03,490 --> 00:04:08,080
அதன் ஐடி பண்பு மூலம் ஒரு HTML உறுப்பு தெரிவு.

63
00:04:08,080 --> 00:04:11,850
இந்த விஷயத்தில் நாம் ராப் அறிமுக பிரதிபலிக்கிறது என்று DIV தேர்ந்தெடுக்க வேண்டும்

64
00:04:11,850 --> 00:04:16,740
கிராம அடையாள, ராப் தொடர்ந்து புல சின்னமாக தட்டச்சு.

65
00:04:16,740 --> 00:04:18,579
இப்போது அறிவிப்புக்கள்.

66
00:04:18,579 --> 00:04:24,090
நாம் திறந்த மற்றும் நெருங்கிய பிரேஸ்களான சேர்க்க மற்றும் ராப் தான் DIV எங்கள் முந்தைய இன்லைன் அறிவிப்புக்கள் மாற்ற

67
00:04:24,090 --> 00:04:26,880
இந்த ப்ரேஸ்களை உள்ளே, புதுப்பித்தல்,

68
00:04:26,880 --> 00:04:34,160
மேலும், குளிர், ராப் என்ற அறிமுக இன்னும் அதை சுற்றி ஒரு கருப்பு எல்லை கழித்து அழுக்காக்கி இன்லைன் அருவருப்பு உள்ளது.

69
00:04:34,160 --> 00:04:39,380
>> இப்போது, நாம் ராப் என்ற அறிமுக என்ற H1 உள்ளே தேர்ந்தெடுக்க விரும்பினால்?

70
00:04:39,380 --> 00:04:44,400
நீங்கள் "அது ஒரு ஐடி வைத்து பின்னர் எங்கள் முந்தைய பாணியை செல்லலாம்.", நினைக்கலாம்

71
00:04:44,400 --> 00:04:48,760
அந்த வேலை, ஆனால் CSS நீங்கள் கூறுகள் தேர்வு விடாமல் மற்ற வழிகள் உள்ளன

72
00:04:48,760 --> 00:04:53,490
நாம் combinators எளிய தேர்வாளர்கள் கலந்து அழைக்க என்ன பயன்படுத்தி.

73
00:04:53,490 --> 00:04:57,740
உதாரணமாக, ஒரு இடைவெளி பாத்திரம் ஒரு combinator பயன்படுத்தலாம்

74
00:04:57,740 --> 00:05:03,510
மற்றொரு தேர்வுக்குழு உள்ளே வாழும் 1 தேர்வுக்குழு அனைத்து நிகழ்வுகளையும் குறிப்பிட.

75
00:05:03,510 --> 00:05:06,630
அது உண்மையில் விட மிகவும் சிக்கலான போகிறது.

76
00:05:06,630 --> 00:05:08,830
இங்கே ஒரு எடுத்துக்காட்டு.

77
00:05:08,830 --> 00:05:13,900
நாம் #, திருட ஒரு இடத்தை சேர்க்க, மற்றும் ஒரு H1 அதை பின்பற்ற கொள்வோம்

78
00:05:13,900 --> 00:05:18,840
மற்றொரு எளிய தேர்வுக்குழு கூறுகள் வகையான தேர்ந்தெடுக்க வேண்டும் என்று ஒரு டாக் தேர்வுக்குழு என்று

79
00:05:18,840 --> 00:05:21,200
divs அல்லது பத்திகள் போன்ற.

80
00:05:21,200 --> 00:05:26,140
விண்வெளி அனைத்து CSS அறிவிப்புக்கள் விண்ணப்பிக்கும், எங்கள் 2 எளிய தேர்வாளர்கள் ஒருங்கிணைக்கிறது

81
00:05:26,140 --> 00:05:32,560
மற்றும் ஐடி = "ராப்" உறுப்பு உள்ளே வாழும் H1 குறிச்சொற்களை செய்ய சுருள் பிரேஸ்களான.

82
00:05:32,560 --> 00:05:38,290
அதை வேலை என்று நீங்கள் சமாதானப்படுத்த, நான் வெள்ளை, புதுப்பிப்பு, இந்த வண்ணத்தை மாற்ற வேண்டும்

83
00:05:38,290 --> 00:05:42,090
மேலும், பார், ராப் என்ற தலைப்பு இப்போது வெள்ளை.

84
00:05:42,090 --> 00:05:47,510
>> இந்த வேலை எல்லாம் விதிகள் பதிலாக இன்லைன் பாணியை பயன்படுத்தி என்று காட்ட போகிறது

85
00:05:47,510 --> 00:05:50,510
நாங்கள் மிகவும் தூய்மையான குறியீடு பெற முடியும்.

86
00:05:50,510 --> 00:05:53,900
இந்த பாணி தொகுதி தொடங்குகிறது என்றால், உண்மையில், கொஞ்சம் பெரிய பெறுவது

87
00:05:53,900 --> 00:05:58,340
நான் கூட முற்றிலும் வேறு கோப்பு இந்த பாணியை வெளியே இழுக்க முடியும்.

88
00:05:58,340 --> 00:06:05,120
>> இந்த ஆவணத்தில் CSS இந்த புதிய கோப்பு சேர்க்க நான் HTML இன் இணைப்பை டேக் பயன்படுத்த வேண்டும்.

89
00:06:05,120 --> 00:06:10,320
இங்கே நான், நான் ஒரு வெளிப்புற நடை தாள் உள்ள இணைக்கும் என்று நான் ரெல் பண்பு சொல்கிறேன்

90
00:06:10,320 --> 00:06:14,840
என் படம் பண்புடன் கோப்பு பாதையை குறிப்பிடாமல்.

91
00:06:14,840 --> 00:06:20,290
இப்போது என் HTML மார்க்கப் மற்றும் CSS, முற்றிலும் தனி கோப்புகளில் நன்றாக ஏற்பாடு

92
00:06:20,290 --> 00:06:26,090
இது எப்போதும் வடிவமைப்பாளர்கள் HTML மற்றும் CSS வேலை விரும்பினால் வழி.

93
00:06:26,090 --> 00:06:30,180
>> நீங்கள் என்ன செய்கிறீர்கள் வழக்கில், எளிய தேர்வாளர்கள் ஐடி தேர்வாளர்கள் அடங்கும்

94
00:06:30,180 --> 00:06:33,100
நாம் கண்டது தான் போன்ற மற்றும் டாக் தேர்வாளர்கள்

95
00:06:33,100 --> 00:06:38,610
அத்துடன் வர்க்கம் ஒரு குறிப்பிட்ட வர்க்கம் கொண்ட தனிமங்களின் தேர்வு தேர்வாளர்கள்,

96
00:06:38,610 --> 00:06:44,000
வகை போன்ற பிற பண்புகளை மூலம் கூறுகள் தேர்வு பண்பு தேர்வாளர்கள் = "ரேடியோ"

97
00:06:44,000 --> 00:06:49,180
ரேடியோ பொத்தானை உள்ளீடுகள், மற்றும் போன்ற pseudoselectors ஐந்து படல் மற்றும் கவனம்

98
00:06:49,180 --> 00:06:55,260
பரஸ்பர ஒரு உறுப்பு ஏற்படும் மீது mousing பிடிக்கும் போது ஸ்டைலிங் குறிப்பிடாமல் ஐந்து.

99
00:06:55,260 --> 00:06:58,950
>> பொது combinators அனைத்து குழந்தைகளுக்கும் இடைவெளி அடங்கும்

100
00:06:58,950 --> 00:07:02,080
மற்றும் முகவரிகள் தேர்வாளர்கள் வேறுபடுத்தி.

101
00:07:02,080 --> 00:07:06,370
நீங்கள் சந்திப்பதில்லை இருக்கலாம் மற்றவர்கள் மட்டுமே நேரடி குழந்தைகள் அம்புக்குறி அடங்கும்

102
00:07:06,370 --> 00:07:10,440
உறுப்பு பிறகு ஏற்படும் அனைத்து உடன்பிறந்தவர்கள் ஐந்து டில்டே,

103
00:07:10,440 --> 00:07:16,010
மற்றும் உறுப்பு உடனடியாக வரும் என்று 1 உடன்பிறப்பு ஐந்து கூட்டல்.

104
00:07:16,010 --> 00:07:18,540
>> இந்த தேர்வாளர்கள் மற்றும் combinators இணைப்பதன் மூலம்,

105
00:07:18,540 --> 00:07:22,910
நீங்கள் ஒரு குறிப்பிட்ட வலைப்பக்கத்தில் அடைய முடியும் ஸ்டைலிங் வரை விரிவுபடுத்த முடியும்

106
00:07:22,910 --> 00:07:25,050
மேலும் திறம்பட CSS எழுத.

107
00:07:25,050 --> 00:07:28,370
நீங்கள் என்னை இங்கே தட்டச்சு பார்க்க CSS வரிகளை ஒரு ஜோடி இணைந்து,

108
00:07:28,370 --> 00:07:34,460
நான் விரைவில் இந்த போல இந்த தோற்றம் போன்ற ஏதாவது செய்ய முடியும்.

109
00:07:34,460 --> 00:07:37,080
>> நான் ஜோசப் இருக்கிறேன், இந்த CS50 உள்ளது.

110
00:07:37,080 --> 00:07:39,260
>> [CS50.TV]

111
00:07:39,260 --> 00:07:40,780
>> ஓ, நான் எங்கு தொடங்க வேண்டும்?

112
00:07:40,780 --> 00:07:44,140
[சிரிக்கிறார்] சரி - என்னை இல்லாமல் அதை செய்ய விடுங்கள்.

113
00:07:44,140 --> 00:07:47,300
ஒரு சேர்க்க - எனக்கு அந்த வார்த்தைகளை மாற்ற வேண்டும்.

114
00:07:50,580 --> 00:07:52,470
ஓ. மன்னிக்கவும்.