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 или Cascading Style Sheets.

5
00:00:11,430 --> 00:00:14,330
>> Значи, што точно е CSS?

6
00:00:14,330 --> 00:00:17,120
Добро, ајде да се пробие на терминот CSS долу во 2 дела:

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
Но, за почеток, Style Sheets многу загатки на она што CSS прави тоа.

10
00:00:27,930 --> 00:00:30,880
Таа додава стилови на HTML кодот на веб страница,

11
00:00:30,880 --> 00:00:33,720
менување на начинот на веб-страница естетски изгледа.

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
>> Така како ние да го користи CSS со HTML?

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
А стил изјава едноставно се состои од CSS сопственост на елемент HTML е што сакаме да се промени

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 на Rob овде

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
style = "font-family: Хелветика; background-color: сина; баласт: 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
Ако имате нешто на ум, само Googling на ефектот што сакате проследено со 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 се сите меѓусебно поврзани и преполни.

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 кој претставува вовед на Rob

64
00:04:11,850 --> 00:04:16,740
со впишување на хаш симбол проследено со проект на div, Роб.

65
00:04:16,740 --> 00:04:18,579
Сега декларации.

66
00:04:18,579 --> 00:04:24,090
Ние додаваме отвораат и затвораат загради и го пренасочиме нашиот порано РЕГИСТРАЦИЈА декларации за div на Rob

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 внатрешноста на интро на Rob?

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
Просторот комбинира нашите 2 едноставни селектори, со примена на сите CSS декларации

81
00:05:26,140 --> 00:05:32,560
и големите загради да H1 тагови кои живеат во внатрешноста на елемент со id = "украде".

82
00:05:32,560 --> 00:05:38,290
Само за да ви убедат дека тоа функционира, јас ќе се промени бојата на фонтот на бело, освежи,

83
00:05:38,290 --> 00:05:42,090
и, погледнете, насловот на Rob сега е бело.

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
Еве јас сум го кажувам дека јас сум поврзување во надворешен стил лист, rel атрибут,

90
00:06:10,320 --> 00:06:14,840
и специфицирање на патека до датотеката со мојот href атрибут.

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
Ooh. Жал.