1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [MUSIC CHƠI] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON BUCHHOLTZ-AU: Vì vậy, chúng tôi về cơ bản chỉ cần đi 5 00:00:12,224 --> 00:00:14,629 để cung cấp cho bạn một tóm tắt của CSS, bởi vì chúng tôi biết 6 00:00:14,629 --> 00:00:16,420 rằng nó đã không được bảo hiểm trong tất cả các phần. 7 00:00:16,420 --> 00:00:20,090 Và chúng tôi thực sự muốn chắc chắn rằng bạn kẻ có công cụ này theo ý của bạn, 8 00:00:20,090 --> 00:00:24,790 bởi vì nó có khả năng thực hiện trang web của bạn trông đẹp hơn rất nhiều. 9 00:00:24,790 --> 00:00:28,660 >> Và nếu bạn đang xây dựng một trang web, sau đó có thể bạn muốn làm cho nó đẹp hơn. 10 00:00:28,660 --> 00:00:31,372 Tôi có nghĩa là, bạn không cần phải, nhưng tôi muốn đề nghị đó. [Cười] 11 00:00:31,372 --> 00:00:35,430 Nếu bạn muốn người dùng sử dụng nó, bạn có thể muốn làm cho nó một chút [không nghe được]. 12 00:00:35,430 --> 00:00:39,130 Vì vậy, chúng ta sẽ cố gắng cung cấp cho bạn và chỉ một số công cụ cơ bản và sự hiểu biết, 13 00:00:39,130 --> 00:00:42,340 do đó khi bạn đi ra ngoài và bạn nghiên cứu điều về CSS, 14 00:00:42,340 --> 00:00:45,902 nó không hoàn thành vô nghĩa, như CSS đôi khi là. 15 00:00:45,902 --> 00:00:47,240 >> Tomas Reimers: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison nói nó khá tốt. 17 00:00:49,930 --> 00:00:53,250 Vì vậy, tôi đoán, điều đầu tiên chúng tôi nên bắt đầu với những gì đang là CSS? 18 00:00:53,250 --> 00:00:55,750 Vì vậy, CSS là awesome. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON BUCHHOLTZ-AU: Đó là tên của hội thảo của chúng tôi. 21 00:00:58,320 --> 00:00:58,434 >> Tomas Reimers: Yeah. 22 00:00:58,434 --> 00:01:00,130 Đó là thực sự quan trọng bạn hiểu rằng đến lúc đó. 23 00:01:00,130 --> 00:01:03,090 Nếu bạn chỉ mất đi một điều, đó là CSS rằng nếu awesome. 24 00:01:03,090 --> 00:01:06,180 Hai là CSS là viết tắt của Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Vì vậy, cốt lõi của nó, là CSS một phong cách, có nghĩa là 26 00:01:10,380 --> 00:01:13,200 nó cho phép bạn tạo kiểu cho một trang web. 27 00:01:13,200 --> 00:01:16,609 Và sau đó có nghĩa là gì, đó là một cách để thêm phong cách cho trang web của bạn. 28 00:01:16,609 --> 00:01:18,900 Vì vậy, bằng phong cách, chúng ta có nghĩa là tất cả mọi thứ đó không phải structural-- 29 00:01:18,900 --> 00:01:24,350 vì vậy những thứ như màu sắc, hình nền hình ảnh, biên giới, như, đệm, 30 00:01:24,350 --> 00:01:25,040 lợi nhuận. 31 00:01:25,040 --> 00:01:27,310 Chúng tôi sẽ nói về những gì tất cả những gì có nghĩa là trong một chút. 32 00:01:27,310 --> 00:01:30,110 >> Vì vậy, chúng tôi đã chỉ đi trước và mở cả của những người trong gedit. 33 00:01:30,110 --> 00:01:32,680 Vì vậy, đây là index.html. 34 00:01:32,680 --> 00:01:34,800 Và đây là main.css. 35 00:01:34,800 --> 00:01:36,829 Vì vậy, không có gì main.css. 36 00:01:36,829 --> 00:01:38,412 ALLISON BUCHHOLTZ-AU: Không có phong cách rất xa. 37 00:01:38,412 --> 00:01:39,245 Tomas Reimers: Không có. 38 00:01:39,245 --> 00:01:42,577 Và như bạn sẽ thấy, đó là một trang web thực sự xấu xí. 39 00:01:42,577 --> 00:01:44,160 ALLISON BUCHHOLTZ-AU: Nó chỉ là đồng bằng. 40 00:01:44,160 --> 00:01:45,820 Tomas Reimers: Yeah. 41 00:01:45,820 --> 00:01:49,150 Yeah, nó không xấu xí, nó chỉ là tối giản. 42 00:01:49,150 --> 00:01:53,430 Và sau đó ở đây chúng tôi có index.html. 43 00:01:53,430 --> 00:01:55,729 Và như vậy một cách nhanh chóng recap của HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 bạn muốn chỉ nói về trang web? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON BUCHHOLTZ-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 Vì vậy, rõ ràng, chúng tôi có HTML của chúng tôi tag, đó chỉ là tên tập tin HTML. 47 00:02:01,100 --> 00:02:07,080 Chúng tôi có tiêu đề của chúng tôi ở đây, với CSS Khiếp sợ, which-- nếu bạn quay trở lại. 48 00:02:07,080 --> 00:02:07,720 Ở đâu đó? 49 00:02:07,720 --> 00:02:09,136 >> Tomas Reimers: Oh. 50 00:02:09,136 --> 00:02:10,301 Vâng, bạn có thể nhìn thấy. 51 00:02:10,301 --> 00:02:12,092 ALLISON BUCHHOLTZ-AU: Và thông báo các tiêu đề 52 00:02:12,092 --> 00:02:14,120 là tiêu đề tab này phải lên đây. 53 00:02:14,120 --> 00:02:17,130 Và sau đó "Hello, world!" là các văn bản mà chúng tôi có chỉ 54 00:02:17,130 --> 00:02:19,620 hiển thị trên web trang, mà is-- đi lại. 55 00:02:19,620 --> 00:02:21,290 Back. 56 00:02:21,290 --> 00:02:24,287 Mà chỉ là trong cơ thể của chúng tôi here-- các văn bản đơn giản. 57 00:02:24,287 --> 00:02:26,120 Ngoài ra, có một điều để chú ý, nếu bạn nhìn ở đây, 58 00:02:26,120 --> 00:02:29,410 Tomas chuyển lên các hai từ slide của chúng tôi. 59 00:02:29,410 --> 00:02:32,035 Vì vậy, miễn là bạn có tất cả ba trong số này, bạn đang sử dụng tốt. 60 00:02:32,035 --> 00:02:34,044 Họ có thể là bất cứ điều gì trong thứ tự mà chúng muốn. 61 00:02:34,044 --> 00:02:39,368 Điều quan trọng nhất mà chỉ là bạn có mỗi của những ba điều. 62 00:02:39,368 --> 00:02:40,340 >> Tomas Reimers: Cool. 63 00:02:40,340 --> 00:02:41,111 Thêm một loại doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON BUCHHOLTZ-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 Tomas Reimers: Yeah. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON BUCHHOLTZ-AU: Rõ ràng, mics tôi không thích tôi. 68 00:02:46,102 --> 00:02:49,650 Tomas Reimers: Oh, cung cấp cho chúng ta một giây chỉ trong khi Allison switch ra mic của mình. 69 00:02:49,650 --> 00:02:50,500 Vì vậy, yeah. 70 00:02:50,500 --> 00:02:52,030 Vì vậy, chúng ta có trang chính của chúng tôi. 71 00:02:52,030 --> 00:02:53,890 Đó là loại unstyled. 72 00:02:53,890 --> 00:02:54,780 Chúng tôi không có nhiều. 73 00:02:54,780 --> 00:02:57,110 Chúng tôi chỉ có cơ bản text. 74 00:02:57,110 --> 00:02:59,470 Chúng tôi có các style sheet. 75 00:02:59,470 --> 00:03:00,220 Chúng tôi có danh hiệu. 76 00:03:00,220 --> 00:03:04,020 Vì vậy, chỉ bare-xương các thành phần làm cho một trang web. 77 00:03:04,020 --> 00:03:08,880 >> Vì vậy, từ đó, chúng ta hãy nói về những gì là CSS 78 00:03:08,880 --> 00:03:11,270 và những gì nó trông giống như và tất cả điều đó. 79 00:03:11,270 --> 00:03:12,047 Vì vậy, cho that-- 80 00:03:12,047 --> 00:03:13,755 ALLISON BUCHHOLTZ-AU: Quay lại slide. 81 00:03:13,755 --> 00:03:15,200 Tomas Reimers: Trở về slide. 82 00:03:15,200 --> 00:03:17,240 Và Allison có thể đi qua. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON BUCHHOLTZ-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 Vì vậy, trong file CSS của bạn, bạn sẽ có 86 00:03:22,360 --> 00:03:25,010 rất nhiều những điều được gọi là bộ chọn. 87 00:03:25,010 --> 00:03:27,420 Điều đó sẽ chỉ là cơ sở của tập tin CSS của bạn. 88 00:03:27,420 --> 00:03:29,480 Nó chỉ đi được rất nhiều và rất nhiều trong số này. 89 00:03:29,480 --> 00:03:30,780 Vì vậy, chọn. 90 00:03:30,780 --> 00:03:32,649 Đây chỉ là giải phẫu tổng quát. 91 00:03:32,649 --> 00:03:35,190 Chúng ta sẽ đi qua ví dụ, bởi vì nếu các bạn không bao giờ 92 00:03:35,190 --> 00:03:38,400 xem phần tôi, tôi cảm thấy như mọi thứ trong trừu tượng 93 00:03:38,400 --> 00:03:39,400 không thực sự có ý nghĩa. 94 00:03:39,400 --> 00:03:41,110 Nó luôn luôn giúp để xem các ví dụ. 95 00:03:41,110 --> 00:03:42,420 >> Vì vậy, chúng tôi có một số chọn. 96 00:03:42,420 --> 00:03:49,120 Đó sẽ là một số định danh cho những gì chúng tôi muốn các phong cách để áp dụng. 97 00:03:49,120 --> 00:03:52,220 Và sau đó chúng ta có thể có bất kỳ thiết lập các quy tắc và các giá trị. 98 00:03:52,220 --> 00:03:55,680 Vì vậy, bộ chọn mà bạn có thể nhìn thấy có thể là một cái gì đó giống như cơ thể, 99 00:03:55,680 --> 00:04:00,262 hoặc đoạn văn với P, hoặc tiêu đề, hoặc bất cứ điều gì, 100 00:04:00,262 --> 00:04:02,000 bất cứ điều gì bạn muốn thẻ HTML của bạn được. 101 00:04:02,000 --> 00:04:03,570 >> Vì vậy, trong trường hợp này, chúng ta có cơ thể. 102 00:04:03,570 --> 00:04:06,985 Và chúng tôi có một số quy tắc, mà điều này tương ứng 103 00:04:06,985 --> 00:04:09,610 với những gì phong cách của bạn áp dụng vào. 104 00:04:09,610 --> 00:04:12,720 Vì vậy, trong trường hợp này, chúng ta có màu nền và trọng lượng font. 105 00:04:12,720 --> 00:04:16,200 Vì vậy, điều này sẽ thay đổi là nền tảng của bất cứ điều gì 106 00:04:16,200 --> 00:04:19,640 trong bất kỳ khóa cơ thể của tập tin HTML của chúng tôi. 107 00:04:19,640 --> 00:04:22,810 Và nó sẽ cung cấp cho nó giá trị này màu xanh nhạt. 108 00:04:22,810 --> 00:04:24,820 >> Vì vậy, nó sẽ làm cho các nền màu xanh nhạt. 109 00:04:24,820 --> 00:04:28,660 Và sau đó bất cứ điều gì trong cơ thể là sẽ có một font đậm. 110 00:04:28,660 --> 00:04:31,142 Vì vậy, nó chỉ cần đi đậm tất cả các văn bản của chúng tôi. 111 00:04:31,142 --> 00:04:32,970 Và đây chỉ là một selector. 112 00:04:32,970 --> 00:04:34,680 Nhưng bạn có thể có rất nhiều trong số này. 113 00:04:34,680 --> 00:04:38,730 Và như chúng ta sẽ thấy sau đó, một chút nhiều hơn như thế nào 114 00:04:38,730 --> 00:04:40,709 mà các công trình và các ví dụ khác đó. 115 00:04:40,709 --> 00:04:41,750 Bất cứ điều gì bạn muốn thêm? 116 00:04:41,750 --> 00:04:42,499 >> Tomas Reimers: No. 117 00:04:42,499 --> 00:04:43,500 Allison đã nhận nó. 118 00:04:43,500 --> 00:04:46,144 Chúng tôi chỉ cần đi để cắt ra một Ví dụ ở đây trên trang web ví dụ của chúng tôi. 119 00:04:46,144 --> 00:04:47,310 Vì vậy, hãy thực hiện việc này. 120 00:04:47,310 --> 00:04:48,620 Nó hoàn hảo. 121 00:04:48,620 --> 00:04:54,460 Vì vậy, tôi chỉ cần đi để sao chép và dán mà phải vào file main.css của chúng tôi. 122 00:04:54,460 --> 00:04:56,530 Và tôi sẽ lưu nó. 123 00:04:56,530 --> 00:04:59,190 Và sau đó chúng ta sẽ chạy nó. 124 00:04:59,190 --> 00:05:01,600 Vì vậy, lưu ý phụ, một trong những hầu hết những điều bực bội 125 00:05:01,600 --> 00:05:04,490 được nếu bạn không lưu một tập tin, và sau đó bạn, giống như, tải lại trang, 126 00:05:04,490 --> 00:05:07,450 và như thế, tại sao không phải là sự thay đổi xảy ra? 127 00:05:07,450 --> 00:05:07,950 Nó sẽ xảy ra. 128 00:05:07,950 --> 00:05:14,230 Vì vậy, ở đây chúng tôi thấy rằng chúng tôi đã làm chúng tôi trang web một nền màu xanh nhạt 129 00:05:14,230 --> 00:05:16,560 và một số văn bản in đậm. 130 00:05:16,560 --> 00:05:20,730 >> Tôi cũng nên đề cập đến, nếu bạn kẻ có thắc mắc về bất cứ điều gì 131 00:05:20,730 --> 00:05:23,622 chúng tôi đang làm, xin vui lòng miễn phí để ngăn chặn chúng tôi và yêu cầu chúng tôi. 132 00:05:23,622 --> 00:05:25,330 Chúng tôi hoàn toàn sẵn sàng đến với những câu hỏi. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON BUCHHOLTZ-AU: Rõ ràng, với CSS, tất cả mọi thứ được xây dựng dựa vào chính nó. 135 00:05:31,930 --> 00:05:34,107 Vì vậy, nếu có một điều không làm cho ý nghĩa bây giờ, chúng tôi 136 00:05:34,107 --> 00:05:35,690 không muốn điều đó bog bạn xuống sau đó. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> Tomas Reimers: Vì vậy, chúng ta hãy loại phân tích này. 139 00:05:41,930 --> 00:05:44,210 Vì vậy, bạn muốn bắt đầu bộ chọn ở đây? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON BUCHHOLTZ-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 Như tôi đã nói trước đây, cơ thể chỉ chọn của chúng tôi ở đây. 142 00:05:48,270 --> 00:05:50,950 Vì vậy, nếu chúng ta nhìn lại để index-- ah của chúng tôi. 143 00:05:50,950 --> 00:05:53,245 >> Tomas Reimers: Mà tôi chỉ đóng cửa. 144 00:05:53,245 --> 00:05:54,530 Hãy cho tôi một giây. 145 00:05:54,530 --> 00:05:58,286 Vì vậy, File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON BUCHHOLTZ-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Vì vậy, nếu bạn nhận thấy ở đây, chúng tôi có các thẻ cơ thể, phải không? 148 00:06:02,710 --> 00:06:06,270 Vì vậy, chọn chỉ tương ứng với các thẻ mà chúng ta đang nói về. 149 00:06:06,270 --> 00:06:07,670 Vì vậy, cơ thể phải ở đây. 150 00:06:07,670 --> 00:06:10,315 Vì vậy, những gì chúng ta đang nói là everything-- chúng ta có thể quay trở lại? 151 00:06:10,315 --> 00:06:12,065 Tôi muốn tôi có thể chỉ như chạm vào màn hình. 152 00:06:12,065 --> 00:06:14,410 Nó muốn được mát mẻ hơn rất nhiều. 153 00:06:14,410 --> 00:06:17,150 >> Vì vậy, bất cứ điều gì trong những body, mà chúng ta đã thấy 154 00:06:17,150 --> 00:06:19,637 chỉ là, như, các văn bản, và cơ thể nói chung 155 00:06:19,637 --> 00:06:20,970 đề cập đến, như thế, nền. 156 00:06:20,970 --> 00:06:22,720 Nếu bạn đã bao giờ muốn thay đổi hình nền, 157 00:06:22,720 --> 00:06:25,090 đó sẽ được đưa vào thẻ cơ thể. 158 00:06:25,090 --> 00:06:27,120 Chỉ cần có những quy tắc áp dụng cho họ. 159 00:06:27,120 --> 00:06:32,040 >> Vì vậy, nếu chúng ta đi tới index.html và- thực sự, 160 00:06:32,040 --> 00:06:33,840 chúng ta có thể có một cái gì đó bên ngoài của cơ thể? 161 00:06:33,840 --> 00:06:37,340 Nếu chúng tôi đã có, như, một chân hoặc một cái gì đó, nó sẽ không áp dụng đối với này. 162 00:06:37,340 --> 00:06:40,900 Nhưng bất cứ điều gì trong vòng các thẻ cơ thể sẽ 163 00:06:40,900 --> 00:06:44,960 bị ảnh hưởng bởi cơ thể này chọn mà chúng tôi đã thực hiện. 164 00:06:44,960 --> 00:06:47,405 Vì vậy, nếu bạn đã gõ cái gì khác there-- 165 00:06:47,405 --> 00:06:49,400 >> Tomas Reimers: Hãy lái xe về nhà mà. 166 00:06:49,400 --> 00:06:55,330 Vì vậy, nếu chúng ta có một div-- vì vậy đó là chỉ khác tag bạn có thể có. 167 00:06:55,330 --> 00:06:56,350 Tôi sẽ đóng nó. 168 00:06:56,350 --> 00:06:58,280 Hoặc chúng ta hãy làm điều này một đoạn. 169 00:06:58,280 --> 00:07:01,430 Vì vậy, p là viết tắt của đoạn văn. 170 00:07:01,430 --> 00:07:02,560 Và trong đoạn văn đó. 171 00:07:02,560 --> 00:07:05,650 Và sau đó tôi nói, "Đây là văn bản." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 Và sau đó tôi đã thực hiện quy định này áp dụng đối với một đoạn thay vì cơ thể. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Bạn sẽ thấy cách nó chỉ áp dụng cho đoạn mới hình thành, phải, 176 00:07:17,320 --> 00:07:18,892 không phải là toàn bộ điều. 177 00:07:18,892 --> 00:07:20,090 Điều đó có ý nghĩa? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON BUCHHOLTZ-AU: Vì vậy, đây là tất cả các cơ quan, 179 00:07:21,840 --> 00:07:24,450 nhưng bây giờ chúng tôi chỉ chọn tương ứng với các đoạn văn. 180 00:07:24,450 --> 00:07:27,050 Vì vậy, chúng tôi chỉ có màu xanh đậm và cho đoạn cụ thể này, 181 00:07:27,050 --> 00:07:30,760 bởi vì đây là điều duy nhất được kèm theo trong thẻ p. 182 00:07:30,760 --> 00:07:35,349 >> Tomas Reimers: Liệu đó có ý nghĩa loại Cách thức đóng gói những thứ khác? 183 00:07:35,349 --> 00:07:38,140 ALLISON BUCHHOLTZ-AU: Ngoài ra, chỉ để nói, như thế, một trong những cách tốt nhất 184 00:07:38,140 --> 00:07:40,889 để thực sự có được thoải mái với CSS là để chỉ làm những việc như thế này, 185 00:07:40,889 --> 00:07:42,050 chỉ cần cố gắng nó ra. 186 00:07:42,050 --> 00:07:46,700 Nó rất đơn giản để gõ một cái gì đó ra, nhấn Refresh, và xem những gì sẽ xảy ra. 187 00:07:46,700 --> 00:07:48,940 Và như với hầu hết CS, thử nghiệm có thể thường xuyên 188 00:07:48,940 --> 00:07:51,790 dẫn đến một tốt hơn nhiều sự hiểu biết trực quan. 189 00:07:51,790 --> 00:07:54,432 Thậm chí nhiều hơn so với chúng ta nên công như thế, nói chuyện với bạn. 190 00:07:54,432 --> 00:07:58,350 >> Tomas Reimers: Tuyệt đối 100% đồng ý ở điểm đó. 191 00:07:58,350 --> 00:08:02,430 Vì vậy, nếu chúng ta quay trở lại này, chúng ta hãy bắt đầu mổ xẻ một cách chính xác những gì hai làm. 192 00:08:02,430 --> 00:08:04,550 Vì vậy, chúng ta có hai quy tắc về điều này. 193 00:08:04,550 --> 00:08:07,420 Vì vậy, đầu tiên là một màu nền. 194 00:08:07,420 --> 00:08:10,590 Và bạn thấy rằng chúng tôi đã thiết lập nó bằng một giá trị, màu xanh nhạt. 195 00:08:10,590 --> 00:08:15,009 >> Vì vậy, trong CSS, CSS là loại của rất lỏng lẻo về cách 196 00:08:15,009 --> 00:08:16,300 bạn đang được cho phép để xác định màu. 197 00:08:16,300 --> 00:08:17,800 Vì vậy, bạn có thể xác định chúng bằng tên. 198 00:08:17,800 --> 00:08:20,650 Bạn cũng có thể làm một cái gì đó như "đỏ". 199 00:08:20,650 --> 00:08:25,270 Và sau đó, nếu chúng ta quay trở lại này, bạn sẽ thấy rằng các nền là màu đỏ. 200 00:08:25,270 --> 00:08:29,040 Bạn cũng có thể nhận được really-- Tôi nghĩ rằng bạn có thể nhận được khá sáng tạo với điều này, 201 00:08:29,040 --> 00:08:29,540 có thể không? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON BUCHHOLTZ-AU: I nghĩ rằng bạn có thể sử dụng hex. 203 00:08:31,170 --> 00:08:31,250 Không thể bạn? 204 00:08:31,250 --> 00:08:32,083 >> Tomas Reimers: Yeah. 205 00:08:32,083 --> 00:08:32,969 Vì vậy, bạn có thể sử dụng hex. 206 00:08:32,969 --> 00:08:34,490 Nhưng tôi nghĩ tên-khôn ngoan. 207 00:08:34,490 --> 00:08:35,385 Là không có? 208 00:08:35,385 --> 00:08:37,260 ALLISON BUCHHOLTZ-AU: Bạn có thể làm một số khá. 209 00:08:37,260 --> 00:08:43,350 Khá nhiều như hầu hết các màu sắc mà bạn có thể name-- như thế, tôi nghĩ rằng cá hồi là một. 210 00:08:43,350 --> 00:08:45,322 >> Tomas Reimers: Chúng ta sẽ thử cá hồi. 211 00:08:45,322 --> 00:08:47,530 ALLISON BUCHHOLTZ-AU: I nghĩ rằng màu lục nhạt là ở đó. 212 00:08:47,530 --> 00:08:48,050 Tomas Reimers: Yeah. 213 00:08:48,050 --> 00:08:48,550 Thấy không? 214 00:08:48,550 --> 00:08:50,080 Vì vậy, bạn có thể nhận được khá sáng tạo. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON BUCHHOLTZ-AU: Bạn có thể nhận được khá sáng tạo. 216 00:08:52,246 --> 00:08:55,750 Giống như, nếu bạn có thể nghĩ về Tên màu, nó có thể là ở đó. 217 00:08:55,750 --> 00:08:57,840 Nếu bạn thực sự muốn tốt chi tiết, bạn có thể đi hex. 218 00:08:57,840 --> 00:08:58,673 >> Tomas Reimers: Yeah. 219 00:08:58,673 --> 00:08:59,390 Vì vậy, hệ thập lục phân. 220 00:08:59,390 --> 00:09:05,280 Nếu các bạn nhớ lại này từ PSET cũ của bạn, hình ảnh phục hồi, 221 00:09:05,280 --> 00:09:08,300 các bạn đã phải đối phó với các giá trị hex. 222 00:09:08,300 --> 00:09:15,280 Và loại để tóm tắt lại đó là những gì, hex có ba giá trị được lưu trữ trong đó. 223 00:09:15,280 --> 00:09:17,250 Vì vậy, đó là trong nhóm của hai gia số. 224 00:09:17,250 --> 00:09:19,300 Hai đầu tiên đại diện cho các giá trị đỏ. 225 00:09:19,300 --> 00:09:22,420 Điều thứ hai đại diện các giá trị màu xanh lá cây. 226 00:09:22,420 --> 00:09:25,020 Và điều cuối cùng là màu xanh? 227 00:09:25,020 --> 00:09:30,050 >> Vì vậy, FF sẽ xảy ra với đại diện một thập lục phân 255. 228 00:09:30,050 --> 00:09:35,480 Vì vậy, bạn có 255 màu đỏ, 255 màu xanh lá cây, và 0 cho màu xanh. 229 00:09:35,480 --> 00:09:37,670 Và các giá trị trong khoảng từ 0 đến 255. 230 00:09:37,670 --> 00:09:38,350 >> Đung phải. 231 00:09:38,350 --> 00:09:41,472 Vì vậy, về cơ bản, chúng ta có thể tìm kiếm Internet cho bất kỳ màu theo ý muốn, 232 00:09:41,472 --> 00:09:43,912 và xác định các-biết thực sự màu sắc kết hợp quang phổ, 233 00:09:43,912 --> 00:09:45,130 và sau đó chúng ta có thể đặt nó trong? 234 00:09:45,130 --> 00:09:46,380 ALLISON BUCHHOLTZ-AU: Chính xác. 235 00:09:46,380 --> 00:09:52,900 Vì vậy, bạn có khá nhiều kiểm soát hoàn toàn qua những màu sắc bạn muốn trong CSS. 236 00:09:52,900 --> 00:09:55,069 Có phải chúng ta sẽ nói về hình ảnh nền sau này? 237 00:09:55,069 --> 00:09:56,110 Hay chúng ta muốn làm điều đó? 238 00:09:56,110 --> 00:09:56,240 >> Tomas Reimers: Yeah. 239 00:09:56,240 --> 00:09:57,010 Tuyệt đối. 240 00:09:57,010 --> 00:10:00,830 Vì vậy, đầu tiên, chỉ để thấy rằng màu đỏ và màu xanh lá cây là màu vàng. 241 00:10:00,830 --> 00:10:03,120 Và nếu bạn cần một số giúp việc tìm kiếm này, bạn 242 00:10:03,120 --> 00:10:05,575 Google có thể một cái gì đó như "chọn màu." 243 00:10:05,575 --> 00:10:07,200 ALLISON BUCHHOLTZ-AU: Oh, nó tốt như vậy. 244 00:10:07,200 --> 00:10:09,090 Tôi yêu Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> Tomas Reimers: colorpicker.com là một ví dụ tốt. 246 00:10:11,360 --> 00:10:14,580 Và ở đây, bạn sẽ thấy rằng bạn có một bảng chọn màu sắc giống như Photoshop đầy đủ. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON BUCHHOLTZ-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Ngoài ra, những điều thú vị là bạn có thể tạo ra màu sắc chương trình 249 00:10:16,980 --> 00:10:18,896 do đó bạn không có, như, xung đột sắc. 250 00:10:18,896 --> 00:10:22,780 Tomas Reimers: Và sau đó đây là giá trị hex lên đây. 251 00:10:22,780 --> 00:10:27,800 Vì vậy, bạn luôn có thể tìm thấy trực tuyến cơ bản nơi để có được các giá trị hex từ. 252 00:10:27,800 --> 00:10:31,667 Nó không sắp xếp của mà chỉ cần, như thế, chúng tôi nhìn thấy màu sắc của thế giới về số lượng. 253 00:10:31,667 --> 00:10:34,000 Đó là chi tiết mà chúng tôi đi trực tuyến và tìm thấy những gì màu theo ý muốn, 254 00:10:34,000 --> 00:10:36,850 và sau đó lấy số xuống. 255 00:10:36,850 --> 00:10:39,590 Bởi vì nó chỉ là một thực sự dễ dàng cách để tham khảo những điều trong CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON BUCHHOLTZ-AU: Và sau đó có also-- 257 00:10:40,350 --> 00:10:41,630 Tôi quên tên chính xác của trang web. 258 00:10:41,630 --> 00:10:43,838 Nhưng chắc chắn, tôi nghĩ, một cái gì đó từ Adobe 259 00:10:43,838 --> 00:10:48,350 mà tạo ra màu sắc chương trình cho bạn, đó là thực sự mát mẻ, bởi vì bạn 260 00:10:48,350 --> 00:10:50,580 definitely-- nó đôi khi khó để tìm ra, 261 00:10:50,580 --> 00:10:53,729 oh, nếu tôi muốn sử dụng màu sắc này, những gì có thể là một trong những hữu ích 262 00:10:53,729 --> 00:10:56,395 để sử dụng ở những nơi khác trên trang web của tôi để, như thế, làm cho nó đẹp và gắn kết. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> Tomas Reimers: Allison nói về một bằng Adobe Kuler gọi, tôi nghĩ. 265 00:11:04,260 --> 00:11:04,885 Đó là K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON BUCHHOLTZ-AU: Tôi nghĩ vậy. 267 00:11:06,259 --> 00:11:07,610 Tôi khá chắc chắn đó là một trong những. 268 00:11:07,610 --> 00:11:11,050 >> Tomas Reimers: Sở thích của tôi có luôn Color Scheme Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON BUCHHOLTZ-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> Tomas Reimers: nào là now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON BUCHHOLTZ-AU: Ah, đây là đẹp. 272 00:11:16,860 --> 00:11:18,818 >> Tomas Reimers: Và bạn về cơ bản có thể nói, như, 273 00:11:18,818 --> 00:11:21,700 Tôi muốn ba màu cạnh nhau. 274 00:11:21,700 --> 00:11:25,030 Và sau đó chúng ta hãy làm một cái gì đó tốt đẹp. 275 00:11:25,030 --> 00:11:29,210 Và sau đó bạn có thể có được một ví dụ về những gì mà có thể trông như thế nào. 276 00:11:29,210 --> 00:11:32,470 Và sau đó nếu bạn di chuột qua bất kỳ họ, nó mang lại cho bạn những giá trị hex. 277 00:11:32,470 --> 00:11:35,010 >> Vì vậy, chỉ là một cách tốt để bắt đầu suy nghĩ về chủ đề màu 278 00:11:35,010 --> 00:11:39,570 hoặc những màu sắc trong một trang web có thể đi cùng nhau. 279 00:11:39,570 --> 00:11:45,655 Bởi vì đó có thể là đáng ngạc nhiên không phải là dễ dàng để chọn như bạn nghĩ. 280 00:11:45,655 --> 00:11:48,280 Và sau đó là điều khác mát Tôi đã luôn luôn tìm thấy về trang web này 281 00:11:48,280 --> 00:11:51,480 là nếu bạn nhấn Ví dụ, nó sẽ thấy hiển thị những gì một trang web ví dụ 282 00:11:51,480 --> 00:11:54,800 có thể trông giống như sử dụng mà màu sắc. 283 00:11:54,800 --> 00:11:56,270 Dù sao. 284 00:11:56,270 --> 00:11:57,863 >> Quay lại CSS thực tế. 285 00:11:57,863 --> 00:12:01,112 ALLISON BUCHHOLTZ-AU: Nhưng rõ ràng, chúng tôi biết các tài liệu tham khảo có thể có ích. 286 00:12:01,112 --> 00:12:03,195 Tomas Reimers: Không, họ chắc chắn có thể hữu ích. 287 00:12:03,195 --> 00:12:04,720 Vì vậy, các quy tắc thứ hai, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON BUCHHOLTZ-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 Nguyên tắc thứ hai chỉ là tương ứng với kích cỡ font chữ. 290 00:12:08,280 --> 00:12:11,520 Vì vậy, trọng lượng font là chỉ loại of-- nên trọng lượng sẽ 291 00:12:11,520 --> 00:12:15,220 được nếu bạn muốn chỉ là, như, bình thường hoặc, như, phông chữ mỏng hơn, 292 00:12:15,220 --> 00:12:17,251 hoặc trong trường hợp này, như thế, táo bạo. 293 00:12:17,251 --> 00:12:17,750 Tôi quên. 294 00:12:17,750 --> 00:12:21,557 Là gì nếu bạn muốn it-- là có một mỏng hơn chỉ, giống như, bình thường không? 295 00:12:21,557 --> 00:12:24,140 Tomas Reimers: Tôi không thực sự biết nếu có một mỏng hơn. 296 00:12:24,140 --> 00:12:24,680 ALLISON BUCHHOLTZ-AU: Tôi quên. 297 00:12:24,680 --> 00:12:26,300 Vì vậy, trọng lượng font chữ chúng ta thường chỉ cần sử dụng để làm đậm. 298 00:12:26,300 --> 00:12:29,010 Nếu bạn muốn nhận được sự thành nó, chúng ta sẽ chỉ cho bạn. 299 00:12:29,010 --> 00:12:34,317 W3Schools có tất cả các khác nhau điều bạn có thể làm cho phông chữ. 300 00:12:34,317 --> 00:12:36,900 Nhưng về cơ bản, nếu bạn muốn để thay đổi bất cứ điều gì về font, 301 00:12:36,900 --> 00:12:39,330 nó luôn luôn có được, như, font-một cái gì đó. 302 00:12:39,330 --> 00:12:43,450 Vì vậy, nó sẽ được như thế, font-family nếu bạn cố gắng để thay đổi các loại thực tế. 303 00:12:43,450 --> 00:12:47,390 Nó sẽ có font-style bạn muốn làm cho nó giống như chữ thảo, 304 00:12:47,390 --> 00:12:49,710 hoặc nghiêng, hoặc có điều gì. 305 00:12:49,710 --> 00:12:53,570 Hoặc thậm chí font-màu sắc, nếu chúng tôi muốn thay đổi điều đó. 306 00:12:53,570 --> 00:12:55,621 >> Tomas Reimers: Yup. 307 00:12:55,621 --> 00:12:56,925 Vì vậy, bạn có thể thay đổi điều đó. 308 00:12:56,925 --> 00:12:59,360 Và loại chỉ để recap bây giờ, vì vậy bạn có thể 309 00:12:59,360 --> 00:13:01,400 thấy rằng chúng tôi có bộ chọn ở đây. 310 00:13:01,400 --> 00:13:03,000 Chúng tôi có các dấu ngoặc nhọn. 311 00:13:03,000 --> 00:13:06,735 Và sau đó chúng tôi có những quy định giới hạn bởi dấu chấm phẩy. 312 00:13:06,735 --> 00:13:08,100 Điều đó có ý nghĩa? 313 00:13:08,100 --> 00:13:09,130 Yeah? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 Vì vậy, nếu đó là good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON BUCHHOLTZ-AU: Trở về. 317 00:13:14,424 --> 00:13:17,590 Tomas Reimers: Hãy nói cụ thể về loại selectors chúng ta có. 318 00:13:17,590 --> 00:13:19,790 'Nguyên nhân ngay bây giờ chúng tôi đã loại chỉ thể hiện các thẻ. 319 00:13:19,790 --> 00:13:21,696 Nhưng các bạn có thể nhìn thấy nó hợp lý. 320 00:13:21,696 --> 00:13:23,570 Giả sử bạn có hai đoạn trên một trang và bạn 321 00:13:23,570 --> 00:13:26,087 muốn để có thể phong cách một trong nhưng không phải là khác, 322 00:13:26,087 --> 00:13:29,170 bạn không chỉ muốn giới hạn mình phải sử dụng HTML thực tế khác nhau 323 00:13:29,170 --> 00:13:33,410 thẻ để cung cấp cho họ phong cách khác nhau. 324 00:13:33,410 --> 00:13:35,995 >> Vì vậy, chúng tôi có ba cơ bản loại selectors. 325 00:13:35,995 --> 00:13:37,120 ALLISON BUCHHOLTZ-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 Vì vậy, chúng tôi đã có tag, đó là những gì chúng tôi đã nói về ngay bây giờ. 327 00:13:39,828 --> 00:13:42,430 Vì vậy, đó là loại giống như cơ thể hoặc p của bạn. 328 00:13:42,430 --> 00:13:46,280 Và sau đó chúng tôi có lớp học, đó là khi chúng ta định nghĩa nó trong file CSS của chúng tôi, 329 00:13:46,280 --> 00:13:49,907 nó luôn luôn được chấm, bất cứ điều gì bạn muốn tên của lớp của bạn được. 330 00:13:49,907 --> 00:13:51,490 Và điều này có thể áp dụng cho nhiều điều. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Giả sử bạn có năm đoạn và hai trong số ba người 333 00:13:57,610 --> 00:14:00,580 cần phải được theo kiểu giống nhau, bạn sẽ áp dụng một lớp với nó. 334 00:14:00,580 --> 00:14:03,040 Và đây chỉ là cách chúng ta làm điều đó. 335 00:14:03,040 --> 00:14:05,600 Chúng tôi sẽ cung cấp cho bạn một ví dụ về nơi này thực sự xuất hiện. 336 00:14:05,600 --> 00:14:11,030 Nhưng nếu bạn đã có thể một số tag p, sau đó, bạn sẽ viết, 337 00:14:11,030 --> 00:14:14,170 lớp bằng bất cứ lớp học bạn muốn áp dụng cho nó. 338 00:14:14,170 --> 00:14:19,280 Vì vậy, bất cứ bộ chọn lớp học mà chúng ta muốn để áp dụng cho đoạn cụ thể này, 339 00:14:19,280 --> 00:14:21,300 chúng tôi chỉ có thể viết như thế này. 340 00:14:21,300 --> 00:14:24,080 Tất nhiên, tôi nghĩ rằng một ví dụ sẽ làm cho nó cụ thể hơn. 341 00:14:24,080 --> 00:14:27,270 >> Một trong những khác chúng tôi có là id, mà chúng biểu thị 342 00:14:27,270 --> 00:14:29,707 với một băm, hoặc pound, hoặc hashtag. 343 00:14:29,707 --> 00:14:30,790 Tomas Reimers: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON BUCHHOLTZ-AU: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 Điều đó làm việc, quá. 346 00:14:34,550 --> 00:14:36,640 Và một trong những điều này thực sự phải là duy nhất. 347 00:14:36,640 --> 00:14:39,880 Họ chỉ nên áp dụng cho một điều trên trang của bạn. 348 00:14:39,880 --> 00:14:43,820 Vì vậy, cho dù đó là một đoạn văn cụ thể, hoặc một số mục trong một danh sách, hoặc bất cứ điều gì, 349 00:14:43,820 --> 00:14:45,090 này phải là duy nhất. 350 00:14:45,090 --> 00:14:48,730 Và trong cùng một cách mà chúng ta chỉ nói, như, class = "class1 class2," 351 00:14:48,730 --> 00:14:51,577 điều này chỉ có thể được id của bất cứ điều gì chúng ta có. 352 00:14:51,577 --> 00:14:52,410 Tomas Reimers: Yeah. 353 00:14:52,410 --> 00:14:54,330 Vì vậy, hãy chắc chắn nói chuyện về ví dụ ở đây. 354 00:14:54,330 --> 00:14:58,170 Và tôi chỉ cần đi để lặn thẳng trở lại vào các mã. 355 00:14:58,170 --> 00:15:02,090 Vì vậy, chúng ta hãy nhìn vào HTML của chúng tôi. 356 00:15:02,090 --> 00:15:03,960 Và vì vậy chúng tôi ngay bây giờ có một đoạn. 357 00:15:03,960 --> 00:15:05,510 Đây là văn bản. 358 00:15:05,510 --> 00:15:09,151 Tôi chỉ cần đi để sửa đổi nó. "Đây là văn bản 1." 359 00:15:09,151 --> 00:15:11,150 Và sau đó chúng ta sẽ có một "này là text 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON BUCHHOLTZ-AU: Thứ hai một. 361 00:15:12,525 --> 00:15:13,540 Tomas Reimers: Yup. 362 00:15:13,540 --> 00:15:16,810 Vì vậy, bây giờ chúng tôi có "Đây là văn bản 2," phải không? 363 00:15:16,810 --> 00:15:21,560 Và chúng ta sẽ thấy rằng nếu chúng ta cần nạp trang, những gì chúng ta đang đi tìm 364 00:15:21,560 --> 00:15:23,067 là chúng ta sẽ find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON BUCHHOLTZ-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 Tomas Reimers: Yeah. 367 00:15:24,983 --> 00:15:27,570 Chúng tôi đang đi tìm một "này là văn bản 1, "và" Đây là văn bản 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON BUCHHOLTZ-AU: Và màu vàng ra đáng yêu. 369 00:15:28,650 --> 00:15:31,066 >> Tomas Reimers: Và bạn sẽ thấy mà chọn của chúng tôi ngay bây giờ, 370 00:15:31,066 --> 00:15:34,940 áp dụng cho p, hoặc đoạn, ảnh hưởng đến cả hai người, 371 00:15:34,940 --> 00:15:38,700 vì cả hai đều đáp ứng điều kiện là họ đang cả một thẻ p. 372 00:15:38,700 --> 00:15:40,360 Điều đó làm cho tổng cảm giác. 373 00:15:40,360 --> 00:15:43,340 Vì vậy, câu hỏi là, tốt, những gì nếu chúng ta muốn chỉ có một? 374 00:15:43,340 --> 00:15:46,350 Vì vậy, chính xác như Allison đã nói, chúng ta có hai cách khác để làm điều đó. 375 00:15:46,350 --> 00:15:47,320 Tôi sẽ bắt đầu với id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON BUCHHOLTZ-AU: Hãy bắt đầu với id. 377 00:15:48,405 --> 00:15:50,405 >> Tomas Reimers: Và cả hai trong số này là các thuộc tính. 378 00:15:50,405 --> 00:15:53,200 Vì vậy, các thuộc tính tồn tại trong HTML. 379 00:15:53,200 --> 00:15:55,600 Và những gì họ đang là một cái gì đó mà bạn thêm 380 00:15:55,600 --> 00:15:58,840 bên trong các thẻ đó là tách biệt với tên thẻ. 381 00:15:58,840 --> 00:16:01,301 Vì vậy, bạn có thể có nhiều thuộc tính. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON BUCHHOLTZ-AU: tôi chỉ cần đi để nói, từ ví dụ của bạn từ PSET 7, 384 00:16:03,950 --> 00:16:06,650 nếu bất kỳ của bạn cố gắng để gắn kết thứ đến trung tâm, 385 00:16:06,650 --> 00:16:08,550 bạn có thể đã sử dụng "Văn bản align = center." 386 00:16:08,550 --> 00:16:10,550 Và bạn nhận thấy nó có thể nên đã làm trung tâm 387 00:16:10,550 --> 00:16:12,650 văn bản của bạn hoặc thanh điều hướng của bạn. 388 00:16:12,650 --> 00:16:15,499 Vì vậy, đó chỉ còn một thuộc tính mà bạn có thể làm quen với. 389 00:16:15,499 --> 00:16:18,040 Tomas Reimers: Có một bó của các thuộc tính mà bạn sẽ thấy. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Giống như tài liệu tham khảo tốt để PSET 7. 392 00:16:21,250 --> 00:16:23,150 Chúng tôi có id. 393 00:16:23,150 --> 00:16:25,080 Bạn cũng có thể có lớp học, mọi thứ như thế này. 394 00:16:25,080 --> 00:16:27,250 Một thẻ duy nhất có thể có nhiều thuộc tính. 395 00:16:27,250 --> 00:16:33,140 Vì vậy, bắt đầu với id, chúng ta hãy giả vờ chúng tôi muốn có một id of-- Tôi không biết. 396 00:16:33,140 --> 00:16:35,140 Chúng tôi sẽ gọi nó là đặc biệt, vì thế này, chúng tôi 397 00:16:35,140 --> 00:16:37,867 sẽ làm cho đậm, và gạch dưới, và bất cứ điều gì. 398 00:16:37,867 --> 00:16:39,950 ALLISON BUCHHOLTZ-AU: Đó là sẽ được siêu đặc biệt. 399 00:16:39,950 --> 00:16:42,360 Tomas Reimers: Vì vậy, đây một, chúng tôi có id đặc biệt. 400 00:16:42,360 --> 00:16:48,140 Vì vậy, con đường để chọn mục đó, sau đó, là trong main.css, hơn là có một thẻ p, 401 00:16:48,140 --> 00:16:51,500 bạn làm #Special, OK? 402 00:16:51,500 --> 00:16:55,538 Và đó chọn điều với id đặc biệt. 403 00:16:55,538 --> 00:16:57,295 Liệu điều này có ý nghĩa với tất cả mọi người? 404 00:16:57,295 --> 00:16:57,920 Đung Yeah. 405 00:16:57,920 --> 00:16:59,110 Tomas Reimers: Cool. 406 00:16:59,110 --> 00:17:04,440 Vì vậy, bây giờ nếu chúng ta quay trở lại, chúng tôi sẽ see-- tả. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 Chúng ta sẽ thấy rằng nó chỉ chọn một với id đặc biệt. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Âm thanh mát. 411 00:17:11,900 --> 00:17:12,570 Vâng. 412 00:17:12,570 --> 00:17:15,456 >> Đung một cái gì đó có thể có một thuộc tính của cả lớp và một id? 413 00:17:15,456 --> 00:17:16,359 >> Tomas Reimers: Yes. 414 00:17:16,359 --> 00:17:16,900 Đung OK. 415 00:17:16,900 --> 00:17:20,887 Và sau đó những gì sẽ xảy ra nếu bạn sau đó cung cấp cho nó một số quy tắc trong CSS xung đột? 416 00:17:20,887 --> 00:17:21,970 Tomas Reimers: Tuyệt đối. 417 00:17:21,970 --> 00:17:23,940 Chúng tôi chắc chắn sẽ để nói về điều đó. 418 00:17:23,940 --> 00:17:31,890 Vì vậy, chính xác những gì bạn đã nhận được tại, bạn cũng có thể có các lớp học. 419 00:17:31,890 --> 00:17:36,380 Vì vậy, chúng ta hãy giả vờ tôi đã có ba đoạn I 420 00:17:36,380 --> 00:17:38,730 muốn để kiểu đầu tiên hai nhưng không phải là thứ ba. 421 00:17:38,730 --> 00:17:42,850 Vâng, ý tưởng đầu tiên của bạn có thể được, tốt, tôi chỉ có thể cung cấp cho một thứ hai một id. 422 00:17:42,850 --> 00:17:45,590 Nhưng bạn không thể, bởi vì một id, chính xác như Allison đã nói, 423 00:17:45,590 --> 00:17:47,330 có phải là duy nhất. 424 00:17:47,330 --> 00:17:50,860 >> Vì vậy, thay vì một id, những gì bạn có thể sử dụng là bạn có thể sử dụng một lớp. 425 00:17:50,860 --> 00:17:57,880 Và một class-- những gì nó cho phép bạn phải làm là về cơ bản nói, 426 00:17:57,880 --> 00:17:59,610 này thuộc như là một phần của một nhóm. 427 00:17:59,610 --> 00:18:02,410 Trong trường hợp này, nhóm của chúng tôi được gọi là đặc biệt. 428 00:18:02,410 --> 00:18:06,500 Và những gì chúng ta sẽ làm sau đó là chúng ta sẽ say-- hơn pound, 429 00:18:06,500 --> 00:18:08,070 chúng ta sẽ sử dụng dấu chấm. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 Và nhận thấy rằng đồng bảng Anh và chấm chỉ tồn tại trong các tập tin CSS, 432 00:18:11,950 --> 00:18:12,797 không nằm trong HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON BUCHHOLTZ-AU: Yes. 434 00:18:13,880 --> 00:18:15,185 Biệt quan trọng. 435 00:18:15,185 --> 00:18:17,510 >> Tomas Reimers: Tôi có đã đấu tranh rất nhiều, 436 00:18:17,510 --> 00:18:23,990 vì tôi đặt các hash trong HTML và sau đó chỉ cần cảm thấy ngu ngốc trong một thời gian dài. 437 00:18:23,990 --> 00:18:27,470 Xem cách nó chọn cả hai những người thân với lớp đó? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Bây giờ, mọi thứ có thể có nhiều lớp. 440 00:18:29,950 --> 00:18:32,790 Hãy nói rằng tôi muốn làm đầu tiên hai có một nền tảng của vàng 441 00:18:32,790 --> 00:18:36,770 và thứ hai có hai một màu sắc font của màu xanh. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Tôi thực sự không biết lý do tại sao tôi muốn muốn làm điều đó, nhưng tôi có thể. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON BUCHHOLTZ-AU: Might không đề nghị nó cho trang web của bạn. 445 00:18:42,401 --> 00:18:43,880 Nhưng đối với các mục đích của chúng tôi, nó sẽ làm. 446 00:18:43,880 --> 00:18:46,294 >> Tomas Reimers: Nó không một màu sắc tốt. 447 00:18:46,294 --> 00:18:49,210 ALLISON BUCHHOLTZ-AU: Vâng, vàng và màu xanh là màu sắc của trường trung học của tôi. 448 00:18:49,210 --> 00:18:50,947 Tôi không biết, mặc dù. 449 00:18:50,947 --> 00:18:53,530 Tomas Reimers: cao của Allison trường có một bảng màu tuyệt vời. 450 00:18:53,530 --> 00:18:54,520 [Cười] 451 00:18:54,520 --> 00:18:59,120 Vậy thì những gì chúng ta có thể gọi đây là Hãy gọi this-- vì vậy chúng tôi có đặc biệt 452 00:18:59,120 --> 00:19:00,030 và chúng tôi có Khá. 453 00:19:00,030 --> 00:19:02,405 Tôi đề nghị, cho điều này, bạn sử dụng tên nhiều mô tả. 454 00:19:02,405 --> 00:19:05,820 ALLISON BUCHHOLTZ-AU: Yeah, tôi sẽ gọi này, như, màu vàng hoặc màu xanh. 455 00:19:05,820 --> 00:19:08,314 >> Tomas Reimers: Chúng tôi không thực sự làm cho một website thực sự, 456 00:19:08,314 --> 00:19:09,730 đó là lý do tại sao chúng tôi không làm điều đó. 457 00:19:09,730 --> 00:19:11,521 Nhưng nếu bạn thực sự đã có một website thực sự, bạn 458 00:19:11,521 --> 00:19:16,220 có thể có, như thế nào, bài viết tiêu đề, nội dung bài viết, từ đầu tiên, 459 00:19:16,220 --> 00:19:21,920 những điều như thế, mà cho phép bạn được nhiều hơn mô tả. 460 00:19:21,920 --> 00:19:23,550 Đây là những thực sự giống như các biến. 461 00:19:23,550 --> 00:19:28,390 Họ nên được đặt tên theo một cách mà bạn có thể, like-- yeah, như vậy. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> Vì vậy, màu nền. 464 00:19:30,480 --> 00:19:35,920 Và sau đó chúng ta sẽ say-- nên cách nào để thay đổi màu sắc chỉ là "màu sắc". 465 00:19:35,920 --> 00:19:38,412 Và chúng ta sẽ làm cho nó màu xanh. 466 00:19:38,412 --> 00:19:40,150 Đó là mát mẻ. 467 00:19:40,150 --> 00:19:42,640 Vì vậy, bây giờ chúng tôi có hai đầu tiên có đặc biệt. 468 00:19:42,640 --> 00:19:45,972 Người tiếp theo sẽ có "class = khá." 469 00:19:45,972 --> 00:19:49,180 ALLISON BUCHHOLTZ-AU: Và sau đó bạn sẽ thấy muốn thêm "đẹp" cho một trong những trung. 470 00:19:49,180 --> 00:19:49,971 Tomas Reimers: Yup. 471 00:19:49,971 --> 00:19:52,970 Và sau đó để ở giữa, để thêm "đẹp", những gì sẽ xảy ra 472 00:19:52,970 --> 00:19:56,880 là bạn chỉ cần có một không gian. 473 00:19:56,880 --> 00:19:59,800 Vì vậy, các thuộc tính lớp là một danh sách không gian cách nhau 474 00:19:59,800 --> 00:20:02,450 của tất cả các lớp học áp dụng cho các thẻ đó. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Nó không phải như thế này thuộc về một số loại lớp học đặc biệt được gọi là 477 00:20:05,750 --> 00:20:07,180 "Đặc biệt, không gian, xinh đẹp". 478 00:20:07,180 --> 00:20:10,870 Nó thuộc về hai classes-- đặc biệt và khá. 479 00:20:10,870 --> 00:20:12,492 Có? 480 00:20:12,492 --> 00:20:14,360 Cool. 481 00:20:14,360 --> 00:20:17,010 >> Và sau đó nếu chúng ta nhìn những gì xảy ra, chúng tôi 482 00:20:17,010 --> 00:20:21,850 sẽ thấy rằng một trong những đầu tiên có nền vàng chữ đen. 483 00:20:21,850 --> 00:20:22,450 One-- thứ hai 484 00:20:22,450 --> 00:20:26,160 >> ALLISON BUCHHOLTZ-AU: --has đậm nền vàng với chữ màu xanh. 485 00:20:26,160 --> 00:20:29,330 Và cuối cùng chúng tôi chỉ có chữ màu xanh mà chúng ta gán cho nó. 486 00:20:29,330 --> 00:20:30,870 >> Tomas Reimers: Cool? 487 00:20:30,870 --> 00:20:32,491 Làm thế nào selectors làm việc? 488 00:20:32,491 --> 00:20:32,990 Awesome. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON BUCHHOLTZ-AU: Chúng ta có muốn nói về cuộc xung đột hiện nay sau đó? 490 00:20:34,720 --> 00:20:35,780 >> Tomas Reimers: Vì vậy, yeah. 491 00:20:35,780 --> 00:20:36,310 Tuyệt đối. 492 00:20:36,310 --> 00:20:38,380 Vì vậy, những gì sẽ xảy ra nếu bạn có một cuộc xung đột, phải không? 493 00:20:38,380 --> 00:20:44,740 Hãy giả vờ là người đầu tiên thiết lập một cái gì đó like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON BUCHHOLTZ-AU: Có thể này thay đổi nền? 495 00:20:47,240 --> 00:20:48,090 Tomas Reimers: Yeah. 496 00:20:48,090 --> 00:20:51,699 Vì vậy, chúng ta sẽ làm cho "đẹp" thay đổi hình nền cho cá hồi. 497 00:20:51,699 --> 00:20:54,740 ALLISON BUCHHOLTZ-AU: Bạn chỉ có tất cả các màu sắc tuyệt vời ngày hôm nay, Tomas. 498 00:20:54,740 --> 00:20:55,573 Tomas Reimers: Yeah. 499 00:20:55,573 --> 00:20:58,200 Bởi vì tôi phát hiện ra tôi có thể sử dụng cá hồi là một màu thực. 500 00:20:58,200 --> 00:21:00,270 Vì vậy, chúng tôi sẽ chỉ làm điều đó. 501 00:21:00,270 --> 00:21:01,770 Tôi cũng nghĩ rằng Sunset là một màu thực. 502 00:21:01,770 --> 00:21:03,103 Đung Sunset là một màu sắc thật không? 503 00:21:03,103 --> 00:21:04,572 ALLISON BUCHHOLTZ-AU: Hãy thử nó. 504 00:21:04,572 --> 00:21:07,735 Tomas Reimers: Sau khi bản demo này chỉ bởi vì trong trường hợp nó messes lên, 505 00:21:07,735 --> 00:21:08,943 Tôi không muốn được gỡ rối. 506 00:21:08,943 --> 00:21:11,580 Vì vậy, chúng ta biết cá hồi là một màu sắc thật sự. 507 00:21:11,580 --> 00:21:15,626 Vì vậy, bất kỳ dự đoán về những gì sẽ xảy ra? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON BUCHHOLTZ-AU: Bất kỳ ý tưởng? 509 00:21:17,522 --> 00:21:20,002 >> Đung [không nghe được]. 510 00:21:20,002 --> 00:21:20,920 >> Tomas Reimers: Yeah. 511 00:21:20,920 --> 00:21:22,150 Vì vậy, bạn đã nhận nó đúng. 512 00:21:22,150 --> 00:21:24,930 Về cơ bản, nó có Quy tắc cuối cùng mà nó đã được đưa ra. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON BUCHHOLTZ-AU: Vì vậy, đây là nơi tầng có hiệu lực. 514 00:21:27,860 --> 00:21:31,080 >> Tomas Reimers: Vì vậy, nhớ làm thế nào chúng tôi có mà tầng style sheets? 515 00:21:31,080 --> 00:21:33,660 Vì vậy, bằng cách đó, chúng tôi có nghĩa là loại rằng chúng tôi có một loạt các quy tắc 516 00:21:33,660 --> 00:21:37,115 áp dụng trên đầu trang của mỗi khác, và họ cũng có thể ghi đè lên nhau. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON BUCHHOLTZ-AU: Vì vậy, bất cứ điều gì của ở phía dưới 518 00:21:39,380 --> 00:21:41,540 sẽ ghi đè lên bất cứ điều gì ở đầu trang. 519 00:21:41,540 --> 00:21:45,842 Bạn có thể có những quy định mà hoàn toàn phủ nhận một cái gì đó trước. 520 00:21:45,842 --> 00:21:48,300 Đó cũng là lý do tại sao bạn muốn có cẩn thận khi bạn tạo kiểu tóc, 521 00:21:48,300 --> 00:21:51,465 vì vậy bạn không tạo ra các quy tắc bạn chỉ cần hoàn toàn trọng. 522 00:21:51,465 --> 00:21:53,340 >> Tomas Reimers: Hoặc có thể bạn không muốn ghi đè lên các quy tắc. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON BUCHHOLTZ-AU: Hoặc có thể bạn làm. 524 00:21:53,920 --> 00:21:54,300 Vâng. 525 00:21:54,300 --> 00:21:57,175 >> Tomas Reimers: Giả vờ như bạn có một lớp học mà áp dụng cho hầu hết mọi thứ, 526 00:21:57,175 --> 00:22:01,220 nhưng chúng ta hãy nói rằng bạn muốn thay đổi màu nền sang màu đỏ và chữ 527 00:22:01,220 --> 00:22:03,140 trọng lượng để in đậm đối với hầu hết thứ, nhưng đối với một, 528 00:22:03,140 --> 00:22:06,098 bạn chỉ muốn màu nền để có màu đỏ nhưng bạn muốn tất cả các khác 529 00:22:06,098 --> 00:22:09,990 tài sản, bạn có thể làm một cái gì đó như "font-weight = bình thường" 530 00:22:09,990 --> 00:22:12,760 mà sau đó sẽ lùi lại mà thay đổi táo bạo. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Một lần nữa, cách tốt nhất, tôi nghĩ rằng Allison cho biết, chỉ được thực hành. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON BUCHHOLTZ-AU: Sự thử nghiệm. 534 00:22:18,080 --> 00:22:20,090 >> Tomas Reimers: Thực hành, thực tập, thực hành, và thử nghiệm. 535 00:22:20,090 --> 00:22:22,950 Tôi biết có rất nhiều người nghĩ rằng CSS là chỉ cần rất nhiều phỏng đoán và kiểm tra 536 00:22:22,950 --> 00:22:25,580 vào cuối ngày, mà nếu bạn muốn làm something-- như, 537 00:22:25,580 --> 00:22:27,663 bạn có một ý tưởng thô, nhưng bạn vẫn có thể cần 538 00:22:27,663 --> 00:22:31,390 để thử nó ra để đảm bảo bạn biết những gì nó trông như thế nào. 539 00:22:31,390 --> 00:22:34,482 >> Đung Khi bạn đang áp dụng lớp học, nhiều hơn một 540 00:22:34,482 --> 00:22:37,339 cho cùng một đoạn hoặc phần, hiện nó 541 00:22:37,339 --> 00:22:39,505 có vấn đề gì để bạn có thể gõ chúng vào trong dấu ngoặc kép? 542 00:22:39,505 --> 00:22:40,992 >> Tomas Reimers: Không, không phải ở tất cả. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON BUCHHOLTZ-AU: Điều quan trọng là các lệnh trong CSS của bạn. 544 00:22:45,764 --> 00:22:47,430 Đung bạn có thể lặp lại các câu hỏi? 545 00:22:47,430 --> 00:22:50,680 Tomas Reimers: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON BUCHHOLTZ-AU: Trong vòng lớp học, khi bạn đang đem lại cho các lớp học 547 00:22:53,990 --> 00:22:56,964 một cái gì đó trong HTML, không Có vấn đề gì mà tự họ đang ở trong? 548 00:22:56,964 --> 00:22:58,130 Nó không quan trọng thứ tự. 549 00:22:58,130 --> 00:23:02,915 Thứ tự của những gì quan trọng là selectors class trong CSS của bạn, 550 00:23:02,915 --> 00:23:04,306 trong bảng phong cách của bạn. 551 00:23:04,306 --> 00:23:06,982 >> Tomas Reimers: Sound tốt? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON BUCHHOLTZ-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> Tomas Reimers: Và sau đó chúng ta sẽ tiếp tục với: 554 00:23:11,539 --> 00:23:13,330 ALLISON BUCHHOLTZ-AU: Chúng ta có gì tiếp theo? 555 00:23:13,330 --> 00:23:14,245 Tôi quên. 556 00:23:14,245 --> 00:23:16,087 Oh, chúng ta chỉ có những ví dụ. 557 00:23:16,087 --> 00:23:17,295 Nhưng chúng tôi đã thực hiện những loại. 558 00:23:17,295 --> 00:23:18,990 Chúng tôi đã thực hiện các ví dụ trên bay. 559 00:23:18,990 --> 00:23:20,540 >> Tomas Reimers: Chúng tôi nhận được để kết hợp các selectors sớm. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON BUCHHOLTZ-AU: Oh, chúng tôi nhận được để kết hợp các bộ chọn. 561 00:23:22,790 --> 00:23:25,260 Tomas Reimers: Vì vậy, một số ví dụ là chúng tôi có 562 00:23:25,260 --> 00:23:29,630 # Bảng dog--, hoặc hashtag, hoặc octothorpe, hoặc bất cứ điều gì 563 00:23:29,630 --> 00:23:32,050 bạn muốn gọi that-- sắc nét. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON BUCHHOLTZ-AU: chó Sharp. 565 00:23:34,875 --> 00:23:36,470 >> Tomas Reimers: Sau đó, bạn có .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Một cái gì đó có một id của con chó, chỉ có một con chó trên trang. 568 00:23:41,600 --> 00:23:43,870 Một cái gì đó có một id của mèo, chỉ có một con mèo. 569 00:23:43,870 --> 00:23:45,665 Có thể có rất nhiều vật nuôi trên trang. 570 00:23:45,665 --> 00:23:47,570 Đó là lý do tại sao chúng tôi đã cho rằng các lớp học. 571 00:23:47,570 --> 00:23:48,740 Bạn có một ví dụ của p. 572 00:23:48,740 --> 00:23:50,490 Và sau đó vì vậy một trong những Ví dụ cuối cùng, mà 573 00:23:50,490 --> 00:23:53,790 là một cái gì đó chúng tôi đã không nói chuyện về, là những gì sẽ xảy ra khi bạn kết hợp chúng. 574 00:23:53,790 --> 00:23:54,580 Vì vậy p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Vì vậy, cho rằng, chúng ta hãy quay trở lại mã và giới thiệu another-- yeah. 577 00:24:02,950 --> 00:24:04,290 Vì vậy, trở lại đây. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON BUCHHOLTZ-AU: I cảm thấy như thế này là really-- 579 00:24:04,850 --> 00:24:08,105 như chỉ nhìn qua ví dụ thực sự là cách để tìm hiểu điều này. 580 00:24:08,105 --> 00:24:09,360 Vì vậy, đó là những gì chúng tôi đang làm. 581 00:24:09,360 --> 00:24:14,030 >> Tomas Reimers: Vì vậy, chúng ta hãy giả vờ chúng tôi chỉ muốn chọn text 2, phải không? 582 00:24:14,030 --> 00:24:16,530 Vì vậy, chúng tôi chắc chắn không thể làm điều đó với một id. 583 00:24:16,530 --> 00:24:19,620 Vâng, chúng ta có thể làm điều đó với một id, nhưng nó không có một id. 584 00:24:19,620 --> 00:24:22,490 Tôi có thể thêm một, nhưng chúng ta hãy giả vờ rằng tôi không muốn thêm một 585 00:24:22,490 --> 00:24:24,910 hoặc nó đã có một cái gì đó khác. 586 00:24:24,910 --> 00:24:26,516 Tôi không thể làm điều đó với điều đó. 587 00:24:26,516 --> 00:24:28,870 Các thẻ chắc chắn không phải là duy nhất, phải không? 588 00:24:28,870 --> 00:24:30,670 Và không phải là lớp học. 589 00:24:30,670 --> 00:24:32,314 Nhưng bạn có thể kết hợp những điều này. 590 00:24:32,314 --> 00:24:35,230 Hãy nói rằng chúng tôi muốn làm một cái gì đó mà chỉ áp dụng cho những thứ mà 591 00:24:35,230 --> 00:24:39,420 có các lớp học đặc biệt và trong đó có các lớp học khá. 592 00:24:39,420 --> 00:24:48,150 >> Vì vậy, những gì bạn có thể làm là trong main.css, bạn có thể nói, chúng ta hãy đi xóa này. 593 00:24:48,150 --> 00:24:50,240 Bạn có thể kết hợp này. 594 00:24:50,240 --> 00:24:51,430 Vì vậy, bạn có thể làm .special. 595 00:24:51,430 --> 00:24:52,110 Không có không gian. 596 00:24:52,110 --> 00:24:54,770 Chỉ cần .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Điều đó có nghĩa là một cái gì đó mà là cả hai đặc biệt và khá. 598 00:25:00,550 --> 00:25:01,900 Điều đó có ý nghĩa? 599 00:25:01,900 --> 00:25:04,190 Và nếu chúng tôi đi đây, những gì bạn sẽ thấy 600 00:25:04,190 --> 00:25:09,734 là quy tắc này chỉ áp dụng cho các thứ hai, trong đó có cả những người. 601 00:25:09,734 --> 00:25:11,400 Và bạn có thể làm điều đó cho rất nhiều thứ. 602 00:25:11,400 --> 00:25:13,270 Bạn có thể say-- hãy giả vờ tôi chỉ muốn 603 00:25:13,270 --> 00:25:18,300 để làm những điều mà có lớp khá và đó cũng là một thẻ đoạn. 604 00:25:18,300 --> 00:25:19,920 Vì vậy p.pretty. 605 00:25:19,920 --> 00:25:23,585 Hãy giả vờ rằng tôi đã có một cái gì đó đẹp trên cơ thể tag. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Tôi có thể chạy và tôi có thể thấy rằng nó chỉ 608 00:25:28,490 --> 00:25:32,720 sẽ áp dụng đối với những điều mà có đoạn có lớp khá. 609 00:25:32,720 --> 00:25:35,650 Và bạn có thể kết hợp này, về cơ bản, như nhiều như bạn muốn. 610 00:25:35,650 --> 00:25:38,580 Vì vậy, bạn chỉ có thể đặt chúng lại với nhau. 611 00:25:38,580 --> 00:25:39,604 Điều đó có ý nghĩa? 612 00:25:39,604 --> 00:25:41,770 ALLISON BUCHHOLTZ-AU: Vì vậy, loại này là hữu ích hơn 613 00:25:41,770 --> 00:25:45,490 khi, Tomas đã nói trước đó, có thể bạn có một trang web rất phức tạp, 614 00:25:45,490 --> 00:25:48,050 và bạn đã có rất nhiều những quy định này bằng văn bản, 615 00:25:48,050 --> 00:25:51,170 và bạn chỉ cần kết hợp hai từ trước. 616 00:25:51,170 --> 00:25:55,350 Giống như thay vì viết một toàn bộ selector mới và thay đổi nó ở đó, 617 00:25:55,350 --> 00:25:58,592 bạn chỉ có thể kết hợp họ, nơi nó chồng. 618 00:25:58,592 --> 00:26:00,670 >> Tomas Reimers: Hoặc bạn có thể tìm thấy out-- đôi 619 00:26:00,670 --> 00:26:04,290 có một lớp học mà làm cho màu chữ giống như màu xanh, 620 00:26:04,290 --> 00:26:06,740 và có một lớp học mà làm cho các nền màu xanh. 621 00:26:06,740 --> 00:26:07,840 Và điều này sẽ không làm việc. 622 00:26:07,840 --> 00:26:10,924 Vì vậy, bạn viết một trường hợp đặc biệt, ở đâu, like-- nhưng nếu nó có cả hai, những gì bạn đang 623 00:26:10,924 --> 00:26:13,548 sẽ làm là bạn đang đi đến làm cho một bóng râm này của màu xanh 624 00:26:13,548 --> 00:26:15,310 và điều này một bóng này khác màu xanh. 625 00:26:15,310 --> 00:26:15,580 Phải không? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON BUCHHOLTZ-AU: Good đối với những loại ngoại lệ. 627 00:26:17,955 --> 00:26:21,220 Tomas Reimers: Vì vậy, để suy nghĩ về vấn đề 628 00:26:21,220 --> 00:26:25,000 có thể xảy ra khi bạn kết hợp chúng. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Vì vậy, trở lại trình bày của chúng tôi. 631 00:26:29,692 --> 00:26:31,400 ALLISON BUCHHOLTZ-AU: Chúng tôi gần như ở đó. 632 00:26:31,400 --> 00:26:34,022 Tomas Reimers: Và nó đã ngừng kết nối. 633 00:26:34,022 --> 00:26:36,494 ALLISON BUCHHOLTZ-AU: Oh, không. 634 00:26:36,494 --> 00:26:39,125 ALLISON BUCHHOLTZ-AU: CS tại văn phòng, internet đi xuống. 635 00:26:39,125 --> 00:26:40,360 Oh, sự trớ trêu. 636 00:26:40,360 --> 00:26:45,620 >> Tomas Reimers: Vì vậy, may mắn thay, chúng ta có thể trình bày mà không có internet, tôi đoán, 637 00:26:45,620 --> 00:26:47,380 bởi vì chúng tôi có tất cả các slide ở đây. 638 00:26:47,380 --> 00:26:49,304 Vì vậy, chúng ta hãy nói về mối quan hệ của các thẻ. 639 00:26:49,304 --> 00:26:50,470 ALLISON BUCHHOLTZ-AU: Đúng vậy. 640 00:26:50,470 --> 00:26:52,660 Vì vậy, chỉ cần loại đi tắt của những gì Tomas nói, 641 00:26:52,660 --> 00:26:54,180 đây chỉ là một cách khác để làm điều đó. 642 00:26:54,180 --> 00:26:57,840 Vì vậy, chúng tôi có một số cha mẹ Selector với một chọn con. 643 00:26:57,840 --> 00:27:02,815 Vì vậy, trong ví dụ này ở đây, chúng tôi có một số cơ thể với một thanh điều hướng lớp, nút lớp. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> Tomas Reimers: Oh, xin lỗi. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON BUCHHOLTZ-AU: Và Về cơ bản, điều này có nghĩa 647 00:27:06,180 --> 00:27:11,070 là chọn tất cả các em, như tất cả các loại selectors, 648 00:27:11,070 --> 00:27:13,040 trong chọn phụ huynh này. 649 00:27:13,040 --> 00:27:16,004 Và đó là những chỉ nó bao giờ sẽ được áp dụng cho. 650 00:27:16,004 --> 00:27:17,755 Tôi không biết nếu bạn có một cách tốt hơn of-- 651 00:27:17,755 --> 00:27:19,504 Tomas Reimers: Vì vậy, tôi đoán cách để suy nghĩ 652 00:27:19,504 --> 00:27:22,440 về việc này là như thế nào trước khi nhớ chúng tôi loại thích đặt chúng lại với nhau. 653 00:27:22,440 --> 00:27:26,340 Và sau đó có nghĩa một phần tử mà phù hợp với tất cả các. 654 00:27:26,340 --> 00:27:29,530 , Điều này được nói là tôi muốn bạn để phù hợp với tất cả mọi thứ 655 00:27:29,530 --> 00:27:33,220 trong some-- tôi muốn bạn tìm một selector. 656 00:27:33,220 --> 00:27:35,670 Và sau đó trong đó, tôi muốn bạn để phù hợp với những điều mới mẻ. 657 00:27:35,670 --> 00:27:36,170 Phải không? 658 00:27:36,170 --> 00:27:40,900 Vì vậy, trong CSS, nó là tất cả về loại việc có thể để phù hợp với các mặt hàng này. 659 00:27:40,900 --> 00:27:43,050 Và bạn có thể cố gắng để phù hợp với các mục trong các mặt hàng khác. 660 00:27:43,050 --> 00:27:46,510 >> Vì vậy, chúng ta hãy thực sự làm một ví dụ, và chúng tôi nghĩ rằng sẽ làm rõ. 661 00:27:46,510 --> 00:27:53,090 Vì vậy, chúng ta hãy giả vờ chúng tôi có đặc biệt, đặc biệt xinh đẹp, bất cứ điều gì. 662 00:27:53,090 --> 00:27:55,690 Và sau đó chúng tôi có một liên kết, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Vì vậy, hãy nhớ rằng, một là một liên kết. 665 00:28:02,370 --> 00:28:03,900 Nó sẽ không đi đâu cả. 666 00:28:03,900 --> 00:28:11,500 Và chúng ta sẽ để cho nó liên kết lớp, tôi đoán. 667 00:28:11,500 --> 00:28:13,335 Hãy cho nó class-- cho tôi một ý tưởng. 668 00:28:13,335 --> 00:28:14,460 ALLISON BUCHHOLTZ-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 Tomas Reimers: Coo-- hãy đi một lớp khá. 670 00:28:16,420 --> 00:28:16,930 Tại sao không? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON BUCHHOLTZ-AU: OK. 672 00:28:17,971 --> 00:28:23,040 Tomas Reimers: Vì vậy, thứ ngay bây giờ khá 673 00:28:23,040 --> 00:28:26,000 sẽ làm cho nền màu xanh, màu nền của cá hồi. 674 00:28:26,000 --> 00:28:27,969 Điều đó có ý nghĩa. 675 00:28:27,969 --> 00:28:28,760 Và nếu chúng ta làm this-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON BUCHHOLTZ-AU: Bạn có muốn chèn thêm chữ 677 00:28:29,620 --> 00:28:31,078 do đó, các siêu liên kết thực hiện? 678 00:28:31,078 --> 00:28:35,088 Tomas Reimers: Đó sẽ là một cuộc gọi tốt. 679 00:28:35,088 --> 00:28:37,921 ALLISON BUCHHOLTZ-AU: "Nguyên nhân quyền Hiện tại chúng tôi chỉ sẽ vượt gì. 680 00:28:37,921 --> 00:28:39,690 Tomas Reimers: Vì vậy, đây là một liên kết. 681 00:28:39,690 --> 00:28:42,202 "Đây là một liên kết." 682 00:28:42,202 --> 00:28:45,820 Oh, và điều này sẽ là một đường link khác. 683 00:28:45,820 --> 00:28:47,280 Hãy cung cấp cho nó các lớp "mát mẻ". 684 00:28:47,280 --> 00:28:50,295 Bạn nói đúng. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Vì vậy, ngay bây giờ chúng tôi đang đi để lấy này. 688 00:28:56,010 --> 00:28:57,269 Chúng tôi đang đi để ném một. 689 00:28:57,269 --> 00:28:59,060 Chúng tôi có một trong các tag đặc biệt, và chúng tôi cũng 690 00:28:59,060 --> 00:29:01,150 sẽ có một trong các tag khá. 691 00:29:01,150 --> 00:29:05,449 Và ngay bây giờ những gì chúng ta đang đi làm là chúng ta sẽ làm cho cool-- 692 00:29:05,449 --> 00:29:06,490 những gì chúng ta muốn nó làm gì? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON BUCHHOLTZ-AU: Chúng ta có thể làm cho nó lớn hơn? 695 00:29:12,180 --> 00:29:13,800 Tomas Reimers: Hãy cung cấp cho nó một đường viền. 696 00:29:13,800 --> 00:29:14,840 ALLISON BUCHHOLTZ-AU: Chúng tôi có thể biên giới. 697 00:29:14,840 --> 00:29:15,673 Tomas Reimers: Yeah. 698 00:29:15,673 --> 00:29:18,560 Vì vậy, chúng ta sẽ phải làm một cái gì đó như, is-- biên giới và chúng tôi 699 00:29:18,560 --> 00:29:20,971 sẽ giải thích tất cả trong một giây. 700 00:29:20,971 --> 00:29:21,470 Đối now-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON BUCHHOLTZ-AU: Để mô hình hộp. 702 00:29:24,592 --> 00:29:27,300 Tomas Reimers: Nhưng bây giờ, chúng tôi chỉ cần đi để cho nó một biên giới. 703 00:29:27,300 --> 00:29:29,580 Vì vậy, điều đó có nghĩa bạn đang là sẽ thấy những liên kết này. 704 00:29:29,580 --> 00:29:32,788 Và bạn sẽ thấy rằng họ có những, như, viền đen xấu xí, mà 705 00:29:32,788 --> 00:29:33,820 là mát mẻ. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON BUCHHOLTZ-AU: Trang web của chúng tôi là rất đẹp. 707 00:29:34,500 --> 00:29:35,333 >> Tomas Reimers: Yeah. 708 00:29:35,333 --> 00:29:38,930 Trang web của chúng tôi là tuyệt vời. 709 00:29:38,930 --> 00:29:41,585 Vì vậy, hai là liên kết, và họ xuất hiện. 710 00:29:41,585 --> 00:29:44,160 Bây giờ chúng ta hãy giả vờ tôi chỉ muốn làm điều này 711 00:29:44,160 --> 00:29:50,072 nếu nó không phải là một cái gì đó trong vòng trong đó có một nền tảng của cá hồi. 712 00:29:50,072 --> 00:29:52,280 Vì vậy, hãy nhớ rằng điều này có một nền tảng của cá hồi, 713 00:29:52,280 --> 00:29:54,000 bởi vì nó là của lớp khá. 714 00:29:54,000 --> 00:29:59,777 >> Nhưng chúng tôi muốn nói rằng chỉ có nguội đó là trong lớp học đặc biệt, không phải trong lớp 715 00:29:59,777 --> 00:30:02,890 khá, nên có biên giới. 716 00:30:02,890 --> 00:30:12,549 Vâng, những gì bạn có thể làm là bạn có thể nói, .special, không gian, .cool. 717 00:30:12,549 --> 00:30:15,590 Và điều đó đang làm gì, khi bạn nghĩ về nó, là nó về cơ bản nói, 718 00:30:15,590 --> 00:30:19,530 OK, tìm thấy tôi tất cả mọi thứ phù hợp đặc biệt. 719 00:30:19,530 --> 00:30:24,104 Sau đó, trong những thẻ, tìm tôi tất cả mọi thứ đó là mát mẻ. 720 00:30:24,104 --> 00:30:27,270 ALLISON BUCHHOLTZ-AU: Vì vậy, một cách khác đó có thể là tốt để suy nghĩ về điều này, 721 00:30:27,270 --> 00:30:29,810 đưa nó trở lại C, là giống như ý tưởng của phạm vi. 722 00:30:29,810 --> 00:30:34,020 Vì vậy, khi bạn có một số chọn, giống như những người 723 00:30:34,020 --> 00:30:38,460 rằng chúng tôi đã làm việc cho trước này, Trang web toàn bộ của bạn, tất cả các HTML của bạn 724 00:30:38,460 --> 00:30:40,180 nằm trong phạm vi của bạn, phải không? 725 00:30:40,180 --> 00:30:43,090 Nhưng khi chúng ta có những mối quan hệ cha-con, 726 00:30:43,090 --> 00:30:47,130 nó như là nếu bạn đang thu hẹp nơi bạn đang tìm kiếm một địa điểm cụ thể, 727 00:30:47,130 --> 00:30:50,540 như, như, chúng tôi đang tìm kiếm trong một chức năng cụ thể thay vì 728 00:30:50,540 --> 00:30:52,007 của toàn bộ tập tin của chúng tôi. 729 00:30:52,007 --> 00:30:55,090 Đung Vì vậy, với ý nghĩ đó, sẽ nó đã quan trọng nếu chúng ta có changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON BUCHHOLTZ-AU: Trình tự? 731 00:30:56,423 --> 00:30:59,320 Đung --Thông class trong CSS để .cool, không gian, .special? 732 00:30:59,320 --> 00:31:01,153 ALLISON BUCHHOLTZ-AU: Vâng, bởi vì sau đó 733 00:31:01,153 --> 00:31:04,420 sẽ nói, phạm vi nó để tất cả mọi thứ mà có mát mẻ, 734 00:31:04,420 --> 00:31:07,235 và sau đó nhìn vào những gì has-- Tôi có nghĩa là, như, trong trường hợp này, 735 00:31:07,235 --> 00:31:08,860 Tôi không nghĩ rằng nó sẽ thay đổi nó. 736 00:31:08,860 --> 00:31:10,318 >> Tomas Reimers: Nếu chúng ta đã nói những gì? 737 00:31:10,318 --> 00:31:10,906 Xin lỗi. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON BUCHHOLTZ-AU: Nếu chúng tôi Phạm vi đó để nguội và sau đó 739 00:31:12,660 --> 00:31:14,550 tìm kiếm những điều ngoài đặc biệt, nó sẽ là như nhau, thực sự. 740 00:31:14,550 --> 00:31:16,260 >> Tomas Reimers: Vì vậy, nó sẽ không được. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON BUCHHOLTZ-AU: Nó không sẽ? 742 00:31:16,590 --> 00:31:17,590 Oh, oh tốt. 743 00:31:17,590 --> 00:31:18,090 Tôi sai. 744 00:31:18,090 --> 00:31:21,480 >> Tomas Reimers: Vì lý do nó different-- mistake-- chung 745 00:31:21,480 --> 00:31:27,140 được rằng ngay bây giờ chỉ link đó có mát, phải không? 746 00:31:27,140 --> 00:31:32,176 Tôi đoán câu hỏi của tôi đến với bạn là, những gì trên trang này được kết hợp bởi .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Có hai thẻ ở đây, phải không? 749 00:31:38,340 --> 00:31:39,770 Đó là một trong những điều này và một này. 750 00:31:39,770 --> 00:31:40,590 Cả hai kết hợp mát mẻ. 751 00:31:40,590 --> 00:31:42,200 Không có gì khác không. 752 00:31:42,200 --> 00:31:46,460 Vì vậy, nếu bạn nói, .cool, không gian, .special, những gì bạn sẽ nói là, 753 00:31:46,460 --> 00:31:48,824 trong những thẻ này, những gì là đặc biệt? 754 00:31:48,824 --> 00:31:49,865 ALLISON BUCHHOLTZ-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Đó là những gì it-- phải. 756 00:31:51,800 --> 00:31:52,310 Bởi vì nó giống như một cái gì đó chỉ ở đây. 757 00:31:52,310 --> 00:31:53,310 >> Tomas Reimers: Vì vậy, nó sẽ chọn gì. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON BUCHHOLTZ-AU: Trong khi với đặc biệt, chúng tôi trong các thẻ ở đây. 759 00:31:56,530 --> 00:31:57,971 >> Tomas Reimers: Những và những người. 760 00:31:57,971 --> 00:31:58,512 Đung OK. 761 00:31:58,512 --> 00:31:58,920 Vì vậy, những thẻ từ dấu gạch chéo? 762 00:31:58,920 --> 00:31:59,740 >> Tomas Reimers: Yes. 763 00:31:59,740 --> 00:32:01,150 Điều đó có ý nghĩa? 764 00:32:01,150 --> 00:32:03,685 Làm thế nào nó về cơ bản cố gắng để thu hẹp phạm vi. 765 00:32:03,685 --> 00:32:04,810 ALLISON BUCHHOLTZ-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 Tôi nghĩ có lẽ đó là Cách dễ nhất để suy nghĩ về nó. 767 00:32:06,870 --> 00:32:09,270 >> Tomas Reimers: Vì vậy, chúng ta thấy điều này, và chúng tôi thấy cả hai điều này phù hợp đặc biệt. 768 00:32:09,270 --> 00:32:11,400 Và sau đó, chúng tôi đang yêu cầu, trong vòng những chàng trai, những gì là mát mẻ? 769 00:32:11,400 --> 00:32:12,941 Và trong vòng một này, cái này thì mát. 770 00:32:12,941 --> 00:32:14,500 Trong thời hạn này, không có gì là mát mẻ. 771 00:32:14,500 --> 00:32:16,250 Vì vậy, đây là thẻ duy nhất còn lại. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON BUCHHOLTZ-AU: Trong khi mát chỉ là trong các thẻ một có. 773 00:32:20,112 --> 00:32:21,070 Tomas Reimers: Chính xác. 774 00:32:21,070 --> 00:32:22,403 Và những gì đặc biệt trong những? 775 00:32:22,403 --> 00:32:22,930 Không có gì. 776 00:32:22,930 --> 00:32:25,270 Bây giờ, những gì tôi sẽ nói là nếu không có không gian, 777 00:32:25,270 --> 00:32:29,880 bạn đang hỏi gì là mát mẻ và special-- hoặc những gì là đẹp, và đặc biệt, phải không? 778 00:32:29,880 --> 00:32:35,370 Nếu bạn nói .special.pretty, đó là giống như .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Bởi vì những gì loại bỏ các không gian hỏi là, khi bạn nói .special, 780 00:32:39,220 --> 00:32:40,970 bạn đang hỏi, OK, mà những người rất đặc biệt? 781 00:32:40,970 --> 00:32:43,780 Và sau đó những người, mà những cũng khá, 782 00:32:43,780 --> 00:32:47,010 đó là như nhau, ngữ pháp, như hỏi, những gì là đẹp, 783 00:32:47,010 --> 00:32:49,500 và sau đó những người, những gì cũng đặc biệt không? 784 00:32:49,500 --> 00:32:50,000 Phải không? 785 00:32:50,000 --> 00:32:53,099 Đó là sự khác biệt của những gì là bên trong là gì. 786 00:32:53,099 --> 00:32:53,640 Đung OK. 787 00:32:53,640 --> 00:32:54,473 Tomas Reimers: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Awesome. 790 00:32:58,030 --> 00:33:00,426 Vì vậy, với ý nghĩ đó then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON BUCHHOLTZ-AU: Tôi nghĩ cuối cùng của chúng tôi điều (IN Fancy BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 các mô hình hộp. 793 00:33:02,510 --> 00:33:05,992 >> Tomas Reimers: Các box-- [cười khúc khích] Tôi rất thích cách Allison nói rằng. 794 00:33:05,992 --> 00:33:06,950 Vì vậy, điều mô hình hộp. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON BUCHHOLTZ-AU: Chỉ cần có một hộp, tôi sẽ có mô hình hộp của bạn. 796 00:33:09,644 --> 00:33:11,310 Tomas Reimers: Vì vậy, chúng ta hãy nói về điều đó. 797 00:33:11,310 --> 00:33:14,070 Vì vậy, ngay bây giờ chúng tôi đã dành rất nhiều thời gian nói về bộ chọn. 798 00:33:14,070 --> 00:33:16,944 Bởi bây giờ, các bạn có lẽ, như, bậc thầy của selectors-- bạn biết, 799 00:33:16,944 --> 00:33:21,510 làm thế nào để lựa chọn chính xác các nội dung đó bạn muốn thao tác trên màn hình của bạn. 800 00:33:21,510 --> 00:33:24,740 >> Vì vậy, bây giờ câu hỏi là, làm thế nào chính xác bạn có thể vận dụng nó? 801 00:33:24,740 --> 00:33:27,010 Vì vậy, tôi đoán cơ bản nhất cách để suy nghĩ về điều đó 802 00:33:27,010 --> 00:33:30,294 là, tốt, những gì chính xác là một yếu tố trong CSS? 803 00:33:30,294 --> 00:33:32,585 Chúng tôi đã dành rất nhiều thời gian nói về, một thẻ là gì, 804 00:33:32,585 --> 00:33:36,140 hoặc những gì là cơ bản nhất đại diện của một thẻ không? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Một cách tốt để suy nghĩ về nghĩa là, những gì hình dạng là cá hồi? 807 00:33:45,170 --> 00:33:47,295 Hình dạng gì là, như thế, cá hồi màu nền? 808 00:33:47,295 --> 00:33:47,880 >> Đung Đó là một hình chữ nhật. 809 00:33:47,880 --> 00:33:49,040 >> Tomas Reimers: Đó là một hình chữ nhật, phải không? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON BUCHHOLTZ-AU: Không phải là một câu hỏi trick. 811 00:33:50,956 --> 00:33:51,870 [Cười] 812 00:33:51,870 --> 00:33:54,670 >> Tomas Reimers: Không phải cố gắng để lừa các bạn này muộn. 813 00:33:54,670 --> 00:33:57,510 Vì vậy, chúng ta có hình chữ nhật này. 814 00:33:57,510 --> 00:33:59,140 Và các tag là một p, phải không? 815 00:33:59,140 --> 00:34:02,280 Vì vậy, mà cho chúng ta tốt niềm tin rằng các đoạn 816 00:34:02,280 --> 00:34:07,440 được biểu diễn như là một hình chữ nhật, tại ít nhất trong tâm trí của các trình duyệt, 817 00:34:07,440 --> 00:34:08,715 nó được. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON BUCHHOLTZ-AU: Tôi có nghĩa là, trình duyệt thường hình chữ nhật, 819 00:34:11,423 --> 00:34:13,440 do đó, nó làm cho tinh thần. 820 00:34:13,440 --> 00:34:18,750 >> Tomas Reimers: Ý tưởng ở đây là rằng tất cả các thẻ trong CSS 821 00:34:18,750 --> 00:34:21,790 được biểu diễn như là một hình chữ nhật. 822 00:34:21,790 --> 00:34:25,699 Và mỗi hình chữ nhật có bốn bộ phận theo CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Bạn có nội dung thực tế. 824 00:34:27,830 --> 00:34:29,644 Đó là nơi mà các văn bản nằm. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON BUCHHOLTZ-AU: Có lẽ hình ảnh của bạn. 826 00:34:30,470 --> 00:34:31,303 >> Tomas Reimers: Yeah. 827 00:34:31,303 --> 00:34:33,860 Bạn có đệm, đó là chỉ một số loại không gian màu trắng. 828 00:34:33,860 --> 00:34:35,085 Sau đó, bạn có một biên giới. 829 00:34:35,085 --> 00:34:37,710 Và sau đó bạn có lợi nhuận, mà là không gian màu trắng bên ngoài mà. 830 00:34:37,710 --> 00:34:39,460 Vì vậy, mà làm cho không có ý nghĩa cho bất cứ ai, vì vậy chúng tôi 831 00:34:39,460 --> 00:34:42,500 sẽ nói về điều đó trong một giây. 832 00:34:42,500 --> 00:34:47,570 Vì vậy, ngay ở đây, những gì chúng tôi đang đi làm là chúng ta sẽ tạo ra một số divs, OK? 833 00:34:47,570 --> 00:34:48,420 Xin lỗi khi I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON BUCHHOLTZ-AU: Tôi cảm thấy thích chúng ta nên đặt một hình ảnh dễ thương trong. 835 00:34:51,506 --> 00:34:52,520 >> Tomas Reimers: Chúng tôi chắc chắn nên. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON BUCHHOLTZ-AU: Tôi cảm thấy như tất cả mọi người 837 00:34:53,389 --> 00:34:54,870 có thể được hưởng lợi từ một hình ảnh dễ thương, là tất cả. 838 00:34:54,870 --> 00:34:56,774 >> Tomas Reimers: Có thể chúng tôi tất cả các lợi ích từ a-- 839 00:34:56,774 --> 00:34:57,648 >> Đung Ừ, chắc chắn. 840 00:34:57,648 --> 00:34:58,790 Tomas Reimers: OK, mát mẻ. 841 00:34:58,790 --> 00:35:02,254 Vì vậy, chúng ta nên đặt một dễ thương hình ảnh trong một nơi nào đó. 842 00:35:02,254 --> 00:35:05,295 ALLISON BUCHHOLTZ-AU: Tôi cảm thấy giống như một thỏ dễ thương có thể có ích ngay bây giờ. 843 00:35:05,295 --> 00:35:06,190 Tomas Reimers: Chắc chắn. 844 00:35:06,190 --> 00:35:06,950 ALLISON BUCHHOLTZ-AU: Cuối tuần. 845 00:35:06,950 --> 00:35:07,390 Có một cái gì đó adorab-- 846 00:35:07,390 --> 00:35:08,520 >> Tomas Reimers: Thế còn một con mèo? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON BUCHHOLTZ-AU: Một con mèo con làm việc, quá. 848 00:35:09,220 --> 00:35:11,300 >> Tomas Reimers: Cool, vì có một trang web cho rằng. 849 00:35:11,300 --> 00:35:12,300 Nó được gọi là PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON BUCHHOLTZ-AU: Đó là tuyệt vời. 851 00:35:14,719 --> 00:35:15,510 Tomas Reimers: Yes. 852 00:35:15,510 --> 00:35:18,040 ALLISON BUCHHOLTZ-AU: Just for, như, hình ảnh giữ chỗ trong trang web của bạn. 853 00:35:18,040 --> 00:35:18,914 Tomas Reimers: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Ngoài ra còn có PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Và có PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON BUCHHOLTZ-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Thật không? 858 00:35:25,350 --> 00:35:28,190 >> Tomas Reimers: Oh, chúng tôi không có thể truy cập internet ở đây. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON BUCHHOLTZ-AU: [rên rỉ] 860 00:35:29,875 --> 00:35:30,375 Bi thảm. 861 00:35:30,375 --> 00:35:32,333 Tomas Reimers: Nếu không, Tôi sẽ cho các bạn thấy 862 00:35:32,333 --> 00:35:33,870 làm thế nào để đưa hình ảnh trong trang web của bạn. 863 00:35:33,870 --> 00:35:36,370 Chúng tôi sẽ cố gắng để có được điều này làm việc trước khi chúng tôi phải đi. 864 00:35:36,370 --> 00:35:38,660 Nhưng bây giờ, chúng tôi chỉ sẽ nói trong các màu sắc sau đó. 865 00:35:38,660 --> 00:35:39,820 Chúng tôi muốn đưa hình ảnh của kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON BUCHHOLTZ-AU: Chúng tôi đã làm. 867 00:35:40,210 --> 00:35:43,110 >> Tomas Reimers: --Thông của internet xuống cho thời điểm hiện tại. 868 00:35:43,110 --> 00:35:47,820 Vì vậy, chúng ta có hai divs, và chúng tôi sẽ cung cấp cho họ hai ids. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Chúng tôi sẽ gọi nó là "Đầu tiên" và "thứ hai." 871 00:35:56,760 --> 00:36:01,184 Vì vậy, id = "đầu tiên." 872 00:36:01,184 --> 00:36:02,850 Và chúng tôi sẽ cung cấp cho họ hai màu sắc. 873 00:36:02,850 --> 00:36:08,424 Vì vậy, làm thế nào để chúng ta chọn một cái gì đó với một id của "đầu tiên"? 874 00:36:08,424 --> 00:36:09,840 ALLISON BUCHHOLTZ-AU: Dot hoặc băm? 875 00:36:09,840 --> 00:36:10,730 Đung Sharp. 876 00:36:10,730 --> 00:36:12,940 Tomas Reimers: Sharp, hoàn hảo. 877 00:36:12,940 --> 00:36:14,950 Sharp, băm, bất cứ điều gì we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON BUCHHOLTZ-AU: Rất nhiều thứ để gọi nó. 879 00:36:15,680 --> 00:36:16,430 >> Tomas Reimers: OK. 880 00:36:16,430 --> 00:36:19,800 Chúng tôi sẽ giải quyết trên hashtag, và đó là những gì chúng ta sẽ đi với. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON BUCHHOLTZ-AU: hashtag. 883 00:36:20,735 --> 00:36:22,340 >> Tomas Reimers: Vì vậy, hashtag đầu tiên. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON BUCHHOLTZ-AU: Vì vậy, bạn có thể tweet seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag mát. 886 00:36:27,582 --> 00:36:29,040 Tomas Reimers: hashtag khiếp sợ. 887 00:36:29,040 --> 00:36:30,730 ALLISON BUCHHOLTZ-AU: Hashtag khiếp sợ, vâng. 888 00:36:30,730 --> 00:36:31,480 Tomas Reimers: OK. 889 00:36:31,480 --> 00:36:33,660 Vì vậy, chúng tôi có "đầu tiên" và "thứ hai." 890 00:36:33,660 --> 00:36:37,697 Vì vậy, đầu tiên, chúng ta sẽ có một màu nền của màu đỏ. 891 00:36:37,697 --> 00:36:39,030 ALLISON BUCHHOLTZ-AU: Uh, đại tràng. 892 00:36:39,030 --> 00:36:40,281 Tomas Reimers: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON BUCHHOLTZ-AU: Sẽ chỗ-checker của bạn. 894 00:36:42,281 --> 00:36:43,960 Tomas Reimers: Allison đã cho tôi. 895 00:36:43,960 --> 00:36:45,830 Background-color của blue-- 896 00:36:45,830 --> 00:36:46,810 >> Tomas Reimers: Tím! 897 00:36:46,810 --> 00:36:47,726 >> Tomas Reimers: Purple. 898 00:36:47,726 --> 00:36:48,830 ALLISON BUCHHOLTZ-AU: Yes. 899 00:36:48,830 --> 00:36:50,630 Màu sắc yêu thích của tôi Purple, và chúng tôi đã không sử dụng nó chưa. 900 00:36:50,630 --> 00:36:51,546 >> Tomas Reimers: Violet. 901 00:36:51,546 --> 00:36:53,361 ALLISON BUCHHOLTZ-AU: Violet. 902 00:36:53,361 --> 00:36:53,860 Điều đó làm việc. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> Tomas Reimers: Vì vậy, chúng tôi sẽ có hai divs. 905 00:36:59,880 --> 00:37:01,654 Họ sẽ được hoàn toàn trống rỗng. 906 00:37:01,654 --> 00:37:03,070 Chúng ta có lẽ nên có một số văn bản. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Vì vậy, "đầu tiên" là có được "HELLO". 909 00:37:09,815 --> 00:37:10,940 Và "thứ hai" sẽ say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON BUCHHOLTZ-AU: Tạm biệt. 911 00:37:11,110 --> 00:37:12,514 >> Đung - "THẾ GIỚI." 912 00:37:12,514 --> 00:37:14,122 Xin chào, tạm biệt. 913 00:37:14,122 --> 00:37:16,580 ALLISON BUCHHOLTZ-AU: Tôi thấy chúng trong buổi hòa nhạc tuần khác. 914 00:37:16,580 --> 00:37:17,705 Tomas Reimers: The Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON BUCHHOLTZ-AU: Đối với tập số thực. 916 00:37:20,242 --> 00:37:21,200 Chúng không phải là tuyệt vời. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Tôi không thích nó. 919 00:37:24,750 --> 00:37:26,060 >> Tomas Reimers: Chúng tôi có "HELLO" và "Goodbye". 920 00:37:26,060 --> 00:37:29,102 Và một lần nữa, CSS chỉ là awesome, bởi vì nó nhận ra màu sắc của chúng tôi. 921 00:37:29,102 --> 00:37:30,810 Bạn không cần phải mặc lo lắng rằng chúng tồn tại. 922 00:37:30,810 --> 00:37:33,194 Họ làm. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON BUCHHOLTZ-AU: Chúng tồn tại. 924 00:37:35,130 --> 00:37:39,560 >> Tomas Reimers: Vì vậy, tôi nghĩ rằng có CSS 255 từ để nói về màu sắc. 925 00:37:39,560 --> 00:37:42,986 Nếu bạn có thể nghĩ đến một màu sắc bên ngoài những 255, như thế, tôi sẽ được ấn tượng. 926 00:37:42,986 --> 00:37:44,110 ALLISON BUCHHOLTZ-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 Tôi nghĩ các bạn có thể có chỉ đến ngay sau đó. 928 00:37:45,560 --> 00:37:47,727 >> Tomas Reimers: Vì vậy, ở đây, bạn sẽ thấy chúng tôi có hai hộp 929 00:37:47,727 --> 00:37:49,143 ngay trên đầu trang của mỗi khác, phải không? 930 00:37:49,143 --> 00:37:50,200 Hello và Goodbye. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON BUCHHOLTZ-AU: Không có khoảng trống ở giữa. 932 00:37:51,460 --> 00:37:53,390 Họ chỉ smooshed ngay trên đầu trang của mỗi khác. 933 00:37:53,390 --> 00:37:55,973 >> Tomas Reimers: Vì vậy, điều đầu tiên Tôi nghĩ chúng ta nên nói về 934 00:37:55,973 --> 00:38:02,960 là chúng ta hãy cũng say-- yeah. 935 00:38:02,960 --> 00:38:08,020 Vì vậy, CSS đại diện cho họ là loại hộp. 936 00:38:08,020 --> 00:38:10,100 Và như hộp, họ có nội dung. 937 00:38:10,100 --> 00:38:14,540 Và các nội dung hiện nay là loại các Hello hoặc GOODBYE và đó là nó. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Vì vậy, một trong những điều đầu tiên bạn có thể làm là bạn có thể thêm padding. 940 00:38:19,790 --> 00:38:25,610 Padding nói bao nhiêu không gian nó nên để lại cho mỗi bên. 941 00:38:25,610 --> 00:38:29,200 Vì vậy, chúng ta hãy nói rằng tôi muốn nói 10 điểm ảnh trên mỗi bên. 942 00:38:29,200 --> 00:38:31,234 Và tôi sẽ phân tích rằng trong một giây. 943 00:38:31,234 --> 00:38:33,150 ALLISON BUCHHOLTZ-AU: Tất cả những điều ở đây 944 00:38:33,150 --> 00:38:36,980 đang có được chủ yếu là ở các điểm ảnh cho phần còn lại của hội thảo. 945 00:38:36,980 --> 00:38:40,980 Bạn sẽ thấy rằng nó có một số không gian xung quanh nó, phải không? 946 00:38:40,980 --> 00:38:46,360 Vì vậy, những gì bạn không nhìn thấy ở đây là có loại vô hình này của padding 947 00:38:46,360 --> 00:38:49,600 mỗi bên, trong đó nói rằng, như thế, OK, mình có một hộp của bạn content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON BUCHHOLTZ-AU: Bạn có muốn chỉ cần kéo lên các yếu tố kiểm tra? 949 00:38:51,680 --> 00:38:53,659 >> Tomas Reimers: Vâng, đó là một ý tưởng tốt. 950 00:38:53,659 --> 00:38:56,700 ALLISON BUCHHOLTZ-AU: Ngoài ra, tôi tìm rằng các phần tử kiểm tra là một cách tốt 951 00:38:56,700 --> 00:39:01,280 để tìm hiểu xem có điều gì đó xảy ra sai, một cái gì đó bất ngờ xảy ra, 952 00:39:01,280 --> 00:39:04,570 kiểm tra các thẻ và nhìn thấy những gì nó giống như ghi đè là hữu ích. 953 00:39:04,570 --> 00:39:05,940 >> Tomas Reimers: Vì vậy, tôi không chắc chắn nếu các bạn có thể nhìn thấy màu sắc này. 954 00:39:05,940 --> 00:39:06,470 Có thể bạn? 955 00:39:06,470 --> 00:39:10,120 Bạn sẽ thấy sung này trên các loại cạnh. 956 00:39:10,120 --> 00:39:13,410 Và sau đó bạn nhìn thấy thực tế nội dung trong xanh, phải không? 957 00:39:13,410 --> 00:39:16,820 Vì vậy, đó là rất vấn đề cơ bản của mô hình hộp. 958 00:39:16,820 --> 00:39:17,674 Bạn có nội dung. 959 00:39:17,674 --> 00:39:18,590 Sau đó, bạn có padding. 960 00:39:18,590 --> 00:39:20,440 >> Đung Tại sao bạn không chỉ cần sử dụng hộp bên the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON BUCHHOLTZ-AU: Đúng vậy. 962 00:39:21,606 --> 00:39:24,745 Bởi vì nó chỉ cần lựa chọn các yếu tố ngay bây giờ. 963 00:39:24,745 --> 00:39:26,050 >> Tomas Reimers: Yup. 964 00:39:26,050 --> 00:39:27,060 Những điều khác. 965 00:39:27,060 --> 00:39:29,780 Vì vậy, chúng ta hãy nói về điều đó lệnh đệm cho một thứ hai. 966 00:39:29,780 --> 00:39:36,380 Vì vậy, trong CSS, đo lường cần phải có một đơn vị. 967 00:39:36,380 --> 00:39:39,740 Vì vậy, đầu tiên bạn phải số lượng. 968 00:39:39,740 --> 00:39:41,460 Vì vậy, trong trường hợp này, chúng tôi đã nói 10. 969 00:39:41,460 --> 00:39:44,780 Và sau đó là một tiếp theo chúng tôi đã nói là pixel, px. 970 00:39:44,780 --> 00:39:49,160 Những người khác mà bạn có thể có được những thứ như cm, inch. 971 00:39:49,160 --> 00:39:51,367 Bạn có thể làm những việc như thế, 10 inches là gì? 972 00:39:51,367 --> 00:39:52,700 Và nó sẽ là vô lý. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON BUCHHOLTZ-AU: Oh, cậu bé. 974 00:39:52,990 --> 00:39:53,460 >> Đung Whoa. 975 00:39:53,460 --> 00:39:54,460 >> Tomas VÀ ALLISON: Yeah. 976 00:39:54,460 --> 00:39:57,840 Tomas Reimers: Vì vậy, đó là tất cả các padding. 977 00:39:57,840 --> 00:39:59,255 Tôi sẽ quay trở lại pixels. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON BUCHHOLTZ-AU: Pixels xu hướng, như, tiêu chuẩn. 979 00:40:01,754 --> 00:40:04,589 Khi bạn nhìn vào rất nhiều các trang web, họ chủ yếu làm việc trong các điểm ảnh. 980 00:40:04,589 --> 00:40:07,755 Tomas Reimers: Vì vậy, bạn sẽ thấy hoặc pixels-- những người khác mà bạn thấy 981 00:40:07,755 --> 00:40:13,952 là em, mà là một em là bằng chiều cao của font 982 00:40:13,952 --> 00:40:15,160 mà bạn đang sử dụng. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON BUCHHOLTZ-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 Tomas Reimers: Đó là một cách tốt để nói, như thế, tôi muốn không gian nhiều như font của tôi 986 00:40:20,740 --> 00:40:21,514 là lấy. 987 00:40:21,514 --> 00:40:23,180 ALLISON BUCHHOLTZ-AU: Không biết điều đó. 988 00:40:23,180 --> 00:40:25,747 Bạn học được điều gì mới mỗi ngày. 989 00:40:25,747 --> 00:40:27,955 Tomas Reimers: Có một rất nhiều các phép đo trong CS. 990 00:40:27,955 --> 00:40:29,260 Tôi đề nghị bạn tìm họ. 991 00:40:29,260 --> 00:40:32,122 Đối với tất cả các trường hợp của bạn, tôi nghĩ pixel là đủ. 992 00:40:32,122 --> 00:40:33,830 Và họ cũng là những gì bạn sẽ thấy 993 00:40:33,830 --> 00:40:36,520 trong phần lớn các ví dụ thực hiện trực tuyến. 994 00:40:36,520 --> 00:40:38,320 Vì vậy, chúng tôi sẽ để nó ở pixels. 995 00:40:38,320 --> 00:40:42,420 >> Bạn cũng có thể, tôi nên say-- vậy bộ đệm tất cả các miếng đệm. 996 00:40:42,420 --> 00:40:49,789 Bạn cũng có thể làm một cái gì đó như "Padding-top" để chỉ set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON BUCHHOLTZ-AU: Có thể chúng tôi sẽ có "HELLO" trở lại. 998 00:40:52,080 --> 00:40:55,480 Tomas Reimers: --Để chỉ cần thiết lập padding trên đầu và không có gì khác. 999 00:40:55,480 --> 00:40:59,560 Vì vậy, bốn lệnh là padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 và padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON BUCHHOLTZ-AU: Cũng giống như bạn mong chờ cho một hộp. 1002 00:41:02,470 --> 00:41:03,530 >> Tomas Reimers: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Không có gì quá điên rồ đó. 1004 00:41:05,240 --> 00:41:08,230 Điều đó có ý nghĩa? 1005 00:41:08,230 --> 00:41:11,990 Vì vậy, đó là padding. 1006 00:41:11,990 --> 00:41:14,110 Tôi sẽ thiết lập tất cả các miếng đệm không trở lại đến 10. 1007 00:41:14,110 --> 00:41:17,010 Và sau đó tôi sẽ chuyển sang biên giới. 1008 00:41:17,010 --> 00:41:21,130 >> Vì vậy, những gì là biên giới là biên giới là một lệnh lạ. 1009 00:41:21,130 --> 00:41:24,450 Nó có loại ba thứ cùng một lúc. 1010 00:41:24,450 --> 00:41:28,930 Vì vậy, việc đầu tiên là lớn như thế nào bạn muốn nó được như một thước đo. 1011 00:41:28,930 --> 00:41:30,662 Một lần nữa, tôi chỉ sử dụng điểm ảnh. 1012 00:41:30,662 --> 00:41:32,620 Và điều cuối cùng tôi nên thêm vào các phép đo 1013 00:41:32,620 --> 00:41:35,270 là một trong những điều mà không cần một đơn vị là 0. 1014 00:41:35,270 --> 00:41:37,390 Nó thực sự không chính xác để cung cấp cho một đơn vị 0, 1015 00:41:37,390 --> 00:41:41,940 vì 0 là 0 trên inches, pixel, centimet, bất cứ điều gì. 1016 00:41:41,940 --> 00:41:43,960 Tất cả chỉ có nghĩa là 0, phải không? 1017 00:41:43,960 --> 00:41:46,710 Vì vậy, đầu tiên bạn cho nó đo. 1018 00:41:46,710 --> 00:41:48,650 >> Sau đó, bạn cho nó phong cách. 1019 00:41:48,650 --> 00:41:49,869 Vì vậy, tôi sẽ nói "rắn". 1020 00:41:49,869 --> 00:41:51,410 Và chúng ta sẽ nói về điều đó có nghĩa. 1021 00:41:51,410 --> 00:41:54,290 Và rồi cuối cùng, bạn cung cấp cho nó một màu sắc. 1022 00:41:54,290 --> 00:41:56,850 Vì vậy, tôi sẽ nói "đen". 1023 00:41:56,850 --> 00:41:59,637 Và đây là tất cả những điều chúng ta đã Bây giờ nhìn thấy trước đây, ngoại trừ cho phong cách, 1024 00:41:59,637 --> 00:42:00,720 nhưng chúng ta sẽ nói về điều đó. 1025 00:42:00,720 --> 00:42:04,120 Vì vậy, các bạn đã thấy phép đo, và bạn đã nhìn thấy màu sắc. 1026 00:42:04,120 --> 00:42:10,410 Và những gì xảy ra là chúng ta có được điều này viền đen tốt đẹp xung quanh nó, phải không? 1027 00:42:10,410 --> 00:42:11,620 Các bạn xem cách chúng tôi đã làm điều đó? 1028 00:42:11,620 --> 00:42:12,760 >> Đung Yeah. 1029 00:42:12,760 --> 00:42:14,850 >> Tomas Reimers: Cool. 1030 00:42:14,850 --> 00:42:17,370 Vì vậy, đó là những gì? 1031 00:42:17,370 --> 00:42:19,160 Vì vậy, đầu tiên của tất cả, nó là một pixel. 1032 00:42:19,160 --> 00:42:20,880 Đó là điều hiển nhiên đủ, phải không? 1033 00:42:20,880 --> 00:42:23,254 Giống như, nó dày một pixel. 1034 00:42:23,254 --> 00:42:26,170 Hoặc nó sẽ là một điểm ảnh, nhưng tôi phóng to, vì vậy nó là nhiều hơn một chút 1035 00:42:26,170 --> 00:42:26,490 hơn thế. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON BUCHHOLTZ-AU: Và chúng tôi có vô lý này có độ phân giải TV. 1037 00:42:27,967 --> 00:42:29,460 >> Tomas Reimers: Yeah. 1038 00:42:29,460 --> 00:42:33,640 Bạn có thể làm cho nó lớn hơn, nhỏ hơn, bất cứ điều gì. 1039 00:42:33,640 --> 00:42:35,630 Vì vậy, đây là một biên giới hai-pixel. 1040 00:42:35,630 --> 00:42:38,810 Bạn sẽ thấy đó là hai lần như dày. 1041 00:42:38,810 --> 00:42:40,172 Điều tiếp theo bạn phải là màu sắc. 1042 00:42:40,172 --> 00:42:41,130 Đó không phải là thú vị. 1043 00:42:41,130 --> 00:42:42,710 Tôi sẽ không nói chuyện về điều đó, thực sự. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON BUCHHOLTZ-AU: Nhưng phong cách có thể chỉ là một chút thú vị. 1045 00:42:45,110 --> 00:42:45,980 >> Tomas Reimers: Yeah. 1046 00:42:45,980 --> 00:42:48,560 Vì vậy, phong cách, có rất ít người mà tôi thấy sử dụng phổ biến. 1047 00:42:48,560 --> 00:42:55,690 Người đầu tiên của rắn, người tiếp theo của chấm, và nét đứt là người cuối cùng của. 1048 00:42:55,690 --> 00:42:59,290 Và đây là rải rác. 1049 00:42:59,290 --> 00:43:02,980 Bạn sẽ thấy rằng họ đang một loạt các dấu chấm, phải không? 1050 00:43:02,980 --> 00:43:09,030 Một cách tốt để loại được một biên giới đẹp đi, dấu gạch ngang cũng khá phổ biến. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON BUCHHOLTZ-AU: Và dĩ nhiên, tôi 1053 00:43:13,600 --> 00:43:16,660 chắc chắn có rất nhiều khác phong cách mà bạn có thể nhận được. 1054 00:43:16,660 --> 00:43:20,000 Và chúng ta có một tập hợp tuyệt vời của liên kết ở cuối cho các bạn 1055 00:43:20,000 --> 00:43:23,470 để loại kiểm tra nội dung và nhìn vào CSS mát mẻ hơn. 1056 00:43:23,470 --> 00:43:25,954 >> Tomas Reimers: Và sau đó điều cuối cùng, chúng tôi 1057 00:43:25,954 --> 00:43:27,870 sẽ nói về các mô hình hộp thực sự nhanh chóng. 1058 00:43:27,870 --> 00:43:30,070 Oh, và sau đó biên giới, chính xác như đệm, 1059 00:43:30,070 --> 00:43:33,270 bạn cũng có những thứ như cửa lại, cửa quyền, biên giới-top, 1060 00:43:33,270 --> 00:43:37,590 biên giới-dưới, cho phép bạn để có được một biên giới cụ thể. 1061 00:43:37,590 --> 00:43:40,650 Vì vậy, đây chỉ là biên giới trái quy định. 1062 00:43:40,650 --> 00:43:43,060 Điều đó có ý nghĩa? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON BUCHHOLTZ-AU: Đó là một mát mẻ cách để nhấn mạnh những điều hay thêm 1064 00:43:46,170 --> 00:43:47,545 dây chuyền giữa các yếu tố khác nhau. 1065 00:43:47,545 --> 00:43:48,670 Tomas Reimers: Tuyệt đối. 1066 00:43:48,670 --> 00:43:50,940 Vì vậy, đó là biên giới của chúng tôi. 1067 00:43:50,940 --> 00:43:52,790 Và lợi nhuận cuối cùng của. 1068 00:43:52,790 --> 00:43:55,892 Đệm như Margin của ngoại trừ nó không within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON BUCHHOLTZ-AU: Đó là không xung quanh phần tử của bạn 1070 00:43:57,975 --> 00:44:00,840 nhưng thực tế xung quanh toàn bộ hộp mà chúng tôi đã nhìn thấy. 1071 00:44:00,840 --> 00:44:02,770 >> Tomas Reimers: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison nói nó một cách hoàn hảo. 1073 00:44:04,090 --> 00:44:07,550 Nó không phải, như thế, bên trong bạn yếu tố, đó là xung quanh toàn bộ hộp. 1074 00:44:07,550 --> 00:44:10,900 Điều đó có nghĩa là những thứ như nền không áp dụng cho nó. 1075 00:44:10,900 --> 00:44:13,550 Và nó về cơ bản nói, như thế, tôi không muốn bất cứ điều gì 1076 00:44:13,550 --> 00:44:15,230 trong nhiều không gian này đối với tôi. 1077 00:44:15,230 --> 00:44:17,470 Vì vậy, như ở đây chúng tôi có một lề của 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 Vì vậy, không có gì trong vòng 10 pixels nên được tiếp theo với tôi. 1079 00:44:23,100 --> 00:44:26,210 Đó là loại của nó không gian nhưng loại không. 1080 00:44:26,210 --> 00:44:29,215 Vì vậy, đó là rất vấn đề cơ bản của mô hình hộp. 1081 00:44:29,215 --> 00:44:30,090 Điều đó có ý nghĩa? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Mát mẻ, thoáng mát. 1084 00:44:34,550 --> 00:44:35,800 ALLISON BUCHHOLTZ-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Vì vậy, bây giờ tôi nghĩ rằng chúng ta chỉ có nguồn mát của chúng tôi 1086 00:44:37,890 --> 00:44:41,220 rằng chúng tôi sẽ đưa các bạn qua rất nhanh. 1087 00:44:41,220 --> 00:44:44,815 Và chúng tôi sẽ actually-- tốt, chúng ta có internet chưa? 1088 00:44:44,815 --> 00:44:47,860 >> Tomas Reimers: Hãy xem nếu tôi có thể mở up-- 1089 00:44:47,860 --> 00:44:50,040 hãy để tôi chỉ nhìn thấy nếu tôi có thể có được internet một cách nhanh chóng 1090 00:44:50,040 --> 00:44:53,317 trong khi Allison nói về bất cứ điều gì Allison muốn nói về. 1091 00:44:53,317 --> 00:44:55,150 ALLISON BUCHHOLTZ-AU: Vì vậy, tôi không basically-- 1092 00:44:55,150 --> 00:44:57,930 biết những gì khác tôi có thể nói tại thời điểm này. 1093 00:44:57,930 --> 00:45:01,340 Nhưng đây là một số nguồn lực thực sự tốt. 1094 00:45:01,340 --> 00:45:04,629 Đây là những người mà Tomas và tôi đã sử dụng 1095 00:45:04,629 --> 00:45:06,420 và rằng chúng tôi thực sự dùng để chuẩn bị cho việc này. 1096 00:45:06,420 --> 00:45:09,940 W3Schools là một mà bạn chàng trai nên đã thấy trước. 1097 00:45:09,940 --> 00:45:12,440 Chúng tôi khuyên bạn nên nó cho một rất nhiều thứ với CSS. 1098 00:45:12,440 --> 00:45:15,060 Tôi biết tôi giới thiệu nó cho Phần của tôi tất cả các thời gian. 1099 00:45:15,060 --> 00:45:21,050 >> Một trong những điều tuyệt vời là nó cho phép bạn loại gây rối với CSS 1100 00:45:21,050 --> 00:45:23,830 và xem các thay đổi ngay lập tức trong này, 1101 00:45:23,830 --> 00:45:25,920 như thế, hai cửa sổ xem mà nó có. 1102 00:45:25,920 --> 00:45:29,980 Vì vậy, bạn không cần phải lo lắng về việc thiết lập trang web riêng của bạn, 1103 00:45:29,980 --> 00:45:33,090 hoặc thiết lập trong vhost của bạn thiết bị địa phương và chủ của địa phương, 1104 00:45:33,090 --> 00:45:34,980 và nhận được tất cả những công cụ làm việc. 1105 00:45:34,980 --> 00:45:36,830 Nó được nhúng vào bên trong trang. 1106 00:45:36,830 --> 00:45:39,042 >> Và nó có những chút những bài học mà bạn có thể 1107 00:45:39,042 --> 00:45:40,750 đi qua để tìm hiểu thêm về selectors, 1108 00:45:40,750 --> 00:45:44,610 hoặc tìm hiểu về thao tác của bạn font, hay một nền tảng, hoặc một hình ảnh. 1109 00:45:44,610 --> 00:45:46,990 Và bạn có những kết quả tức thời mà bạn 1110 00:45:46,990 --> 00:45:49,310 không cần phải làm bất cứ công việc chuẩn bị khác cho. 1111 00:45:49,310 --> 00:45:51,060 Vì vậy, tôi yêu W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Đó là tuyệt vời. 1113 00:45:51,960 --> 00:45:52,670 Là nó làm việc? 1114 00:45:52,670 --> 00:45:52,950 >> Tomas Reimers: Yeah. 1115 00:45:52,950 --> 00:45:53,720 Không, nó không phải. 1116 00:45:53,720 --> 00:45:55,636 Bạn có muốn tôi thử và khởi động lại máy tính của tôi? 1117 00:45:55,636 --> 00:45:56,410 Hay chúng ta muốn với: 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON BUCHHOLTZ-AU: Tôi có nghĩa là, tốt, điều này cũng sẽ được trực tuyến. 1119 00:46:01,490 --> 00:46:02,740 Tất cả các slide sẽ được trực tuyến. 1120 00:46:02,740 --> 00:46:05,470 Vì vậy, tôi chỉ khuyên bạn nên làm những. 1121 00:46:05,470 --> 00:46:07,880 >> Điều này là rất tốt vì chỉ giống như một tờ cheat. 1122 00:46:07,880 --> 00:46:10,690 Nó chỉ là tất cả các cơ bản lệnh mà bạn có. 1123 00:46:10,690 --> 00:46:13,070 Thật tuyệt vời khi bạn đầu tiên bắt đầu trang web của bạn. 1124 00:46:13,070 --> 00:46:15,080 Bởi vì có thể bạn không muốn nhận được vào tất cả 1125 00:46:15,080 --> 00:46:17,355 nitty thực gritty thiết kế nặng thứ. 1126 00:46:17,355 --> 00:46:20,230 Bạn chỉ cần phải định dạng theo một cách loại đó làm cho tinh thần và ý chí 1127 00:46:20,230 --> 00:46:21,490 làm cho thời gian được. 1128 00:46:21,490 --> 00:46:23,580 Và nếu bạn thực sự muốn để có được vào nó, tôi biết 1129 00:46:23,580 --> 00:46:27,240 này là, như, một trong những Tài liệu tham khảo yêu thích của Tomas. 1130 00:46:27,240 --> 00:46:30,130 Chúng tôi đã sử dụng nó để chuẩn bị, và nó là tuyệt vời. 1131 00:46:30,130 --> 00:46:33,030 Đó là phát triển đến từ Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> Tomas Reimers: Vì vậy, Mozilla là những người làm cho Firefox. 1133 00:46:36,490 --> 00:46:40,290 Và nó chỉ phát triển riêng của họ tài liệu tham khảo, mà tôi nghĩ là tuyệt vời. 1134 00:46:40,290 --> 00:46:44,870 Và nó có một tuyệt vời danh sách các tài nguyên. 1135 00:46:44,870 --> 00:46:45,530 Vì vậy, chúng tôi have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON BUCHHOLTZ-AU: Và sau đó lưu ý cuối cùng là 1137 00:46:48,060 --> 00:46:50,120 khi bạn đang cố gắng để thiết kế trang web của bạn, 1138 00:46:50,120 --> 00:46:53,550 lấy cảm hứng từ những điều mà bạn nghĩ là đẹp. 1139 00:46:53,550 --> 00:46:56,340 Kiểm tra các yếu tố, kiểm tra mã nguồn 1140 00:46:56,340 --> 00:46:59,370 có thể được siêu hữu ích cho cố gắng tìm ra 1141 00:46:59,370 --> 00:47:02,080 làm thế nào để tạo kiểu cho trang web của riêng bạn. 1142 00:47:02,080 --> 00:47:04,540 >> Thông thường, tôi cảm thấy ưng ý nhất cách, bên cạnh việc thử nghiệm, 1143 00:47:04,540 --> 00:47:06,290 chỉ là để nhìn vào điều đó là khá. 1144 00:47:06,290 --> 00:47:09,810 Tôi tìm thấy nó thực sự khó để chỉ loại thiết kế mọi thứ trên của riêng bạn, 1145 00:47:09,810 --> 00:47:11,090 đặc biệt là trong đầu. 1146 00:47:11,090 --> 00:47:14,740 Vì vậy, hãy nhìn vào trang web mà bạn thích nhìn. 1147 00:47:14,740 --> 00:47:16,880 Tìm ra những gì làm cho chúng hấp dẫn cho bạn. 1148 00:47:16,880 --> 00:47:19,170 Và sau đó cảm thấy tự do cố và nhân rộng đó. 1149 00:47:19,170 --> 00:47:20,410 >> Tomas Reimers: Đúng vậy. 1150 00:47:20,410 --> 00:47:23,120 Ngay cả như các trang web như thế này, bạn có thể nhìn thấy 1151 00:47:23,120 --> 00:47:25,460 có chắc chắn là một div ở đầu trang. 1152 00:47:25,460 --> 00:47:29,920 Và sau đó bạn có một div bên trong ở đây, đó là CSS khiếp sợ. 1153 00:47:29,920 --> 00:47:32,480 Và sau đó bạn có một loạt các liên kết ở đây. 1154 00:47:32,480 --> 00:47:34,770 Nếu bạn thực sự chỉ kiểm tra yếu tố, bạn có thể sắp xếp của 1155 00:47:34,770 --> 00:47:38,520 bắt đầu thấy những gì trang web như thế nào, và làm thế nào tôi có thể 1156 00:47:38,520 --> 00:47:40,493 lại rằng nếu tôi muốn. 1157 00:47:40,493 --> 00:47:41,890 Điều đó có ý nghĩa? 1158 00:47:41,890 --> 00:47:43,670 Vì vậy, chúng tôi chỉ có ba phút còn lại. 1159 00:47:43,670 --> 00:47:46,380 Vì vậy, câu hỏi? 1160 00:47:46,380 --> 00:47:47,650 Bất kỳ trong số họ? 1161 00:47:47,650 --> 00:47:48,350 Vâng. 1162 00:47:48,350 --> 00:47:50,780 >> Đung Đối với màu sắc hình chữ nhật, như thế nào sẽ bạn 1163 00:47:50,780 --> 00:47:53,499 have-- nếu bạn không muốn nó đi trên toàn bộ trang, có thể 1164 00:47:53,499 --> 00:47:56,400 bạn đã làm cho nó đi qua chỉ trang nửa hay chỉ là văn bản? 1165 00:47:56,400 --> 00:47:59,660 >> Tomas Reimers: Yeah, hoàn toàn. 1166 00:47:59,660 --> 00:48:02,780 Vì vậy, hãy để tôi thấy thực sự. 1167 00:48:02,780 --> 00:48:04,670 Tôi có hai ý tưởng. 1168 00:48:04,670 --> 00:48:07,265 Vì vậy, trước hết, bạn cũng có thể sử dụng phần trăm. 1169 00:48:07,265 --> 00:48:08,140 >> Đung Really? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON BUCHHOLTZ-AU: Vì vậy, một cái gì đó nhìn lên là vị trí tương đối. 1171 00:48:11,260 --> 00:48:13,385 Đó là một cái gì đó mà chúng ta không có thời gian để có được vào, 1172 00:48:13,385 --> 00:48:16,392 nhưng đó là điều tôi chắc chắn đề nghị các bạn kiểm tra ra. 1173 00:48:16,392 --> 00:48:17,580 >> Tomas Reimers: Vậy phần trăm. 1174 00:48:17,580 --> 00:48:21,524 Và xem cách chúng tôi đã làm cho nó chỉ 50% độ rộng? 1175 00:48:21,524 --> 00:48:24,190 ALLISON BUCHHOLTZ-AU: Nếu bạn thực sự biết số lượng điểm ảnh, 1176 00:48:24,190 --> 00:48:25,780 bạn có thể được chính xác hơn theo cách đó. 1177 00:48:25,780 --> 00:48:27,200 Bạn có thể fiddle xung quanh với nó. 1178 00:48:27,200 --> 00:48:27,700 Nhưng 50%. 1179 00:48:27,700 --> 00:48:31,970 Nếu chúng ta để thay đổi kích thước trình duyệt của chúng tôi, nó sẽ làm cho nó nhỏ hơn. 1180 00:48:31,970 --> 00:48:35,250 >> Tomas Reimers: Vâng, đó là về cơ bản 50% ngay bây giờ, tôi nghĩ. 1181 00:48:35,250 --> 00:48:38,820 Đó là 50%, và sau đó biên độ đã được thêm vào đó. 1182 00:48:38,820 --> 00:48:40,100 CSS có rất nhiều tật. 1183 00:48:40,100 --> 00:48:43,195 Vì vậy, ngay bây giờ đây là 50% độ rộng trang. 1184 00:48:43,195 --> 00:48:46,860 Nhưng hãy nhớ rằng bạn có 10 pixel lấy ra từ mỗi phía. 1185 00:48:46,860 --> 00:48:49,700 Vì vậy, nếu bạn là để di chuyển mà chống lại cạnh trái của trình duyệt, 1186 00:48:49,700 --> 00:48:51,550 sau đó nó sẽ trông giống như 50%. 1187 00:48:51,550 --> 00:48:53,884 Một lần nữa, như tôi đã nói, CSS có thể có rất nhiều dự đoán và kiểm tra. 1188 00:48:53,884 --> 00:48:56,049 Giống như, bạn nghĩ rằng có điều gì đó sẽ hành xử một cách, 1189 00:48:56,049 --> 00:48:57,805 nhưng nó cư xử một cách hoàn toàn khác nhau. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON BUCHHOLTZ-AU: Và bạn chỉ nên thông minh hơn, 1191 00:48:59,420 --> 00:49:02,020 và bạn chỉ nhận được một tốt hơn Trực giác cho nó như bạn di chuyển dọc. 1192 00:49:02,020 --> 00:49:02,730 >> Tomas Reimers: Và nó sẽ tồi tệ hơn và tồi tệ hơn. 1193 00:49:02,730 --> 00:49:03,496 Vì vậy, nó thực sự chỉ là một cuộc đua. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON BUCHHOLTZ-AU: Đó là siêu đáng khích lệ. 1195 00:49:05,454 --> 00:49:07,070 Chúng tôi muốn họ thích CSS. 1196 00:49:07,070 --> 00:49:08,810 >> Tomas Reimers: CSS là awesome. 1197 00:49:08,810 --> 00:49:10,354 Hãy nhớ rằng. 1198 00:49:10,354 --> 00:49:11,020 Các câu hỏi khác? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON BUCHHOLTZ-AU: Có vài điều. 1200 00:49:14,297 --> 00:49:14,880 Bất cứ điều gì khác? 1201 00:49:14,880 --> 00:49:15,140 Cool. 1202 00:49:15,140 --> 00:49:15,690 >> Tomas Reimers: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON BUCHHOLTZ-AU: Vâng, nếu bạn guys có bất kỳ câu hỏi sau này, 1204 00:49:18,523 --> 00:49:20,919 chúng tôi luôn có sẵn như bình thường. 1205 00:49:20,919 --> 00:49:22,960 Có thể bạn sẽ thấy một số của chúng tôi để sản phẩm cuối cùng 1206 00:49:22,960 --> 00:49:24,280 và chắc chắn ở hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> Tomas Reimers: Tuyệt đối. 1208 00:49:25,200 --> 00:49:25,720 Và tại hội chợ. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON BUCHHOLTZ-AU: Và tại hội chợ. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> Tomas Reimers: Rất mong nhận được nhìn thấy tất cả awesome-- của bạn 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON BUCHHOLTZ-AU: Chúng tôi sẽ xem tất cả các trang web tuyệt vời của bạn 1213 00:49:29,420 --> 00:49:30,572 rằng sẽ đẹp. 1214 00:49:30,572 --> 00:49:32,780 Tomas Reimers: Bạn có thể luôn luôn thấy, giống như, các trang web 1215 00:49:32,780 --> 00:49:36,234 đã có, như, CSS tốt và sau đó giống như những người đã không cố gắng để làm CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON BUCHHOLTZ-AU: Ngoài ra, một điều, một điều nữa để nhìn vào 1217 00:49:39,150 --> 00:49:40,445 là Bootstrap. 1218 00:49:40,445 --> 00:49:41,805 Vì vậy, Bootstrap là tuyệt vời. 1219 00:49:41,805 --> 00:49:42,240 >> Tomas Reimers: Google rằng nếu you-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON BUCHHOLTZ-AU: Google nó. 1221 00:49:43,573 --> 00:49:44,340 Đó là tuyệt vời. 1222 00:49:44,340 --> 00:49:45,620 Bạn sẽ thích nó. 1223 00:49:45,620 --> 00:49:48,000 Và bây giờ bạn có một sự hiểu biết cơ bản của CSS, 1224 00:49:48,000 --> 00:49:50,340 nó sẽ có ý nghĩa hơn rất nhiều. 1225 00:49:50,340 --> 00:49:50,890 Awesome. 1226 00:49:50,890 --> 00:49:51,480 Thanks, guys. 1227 00:49:51,480 --> 00:49:53,330 >> Tomas Reimers: Cảm ơn bạn rất nhiều. 1228 00:49:53,330 --> 00:49:54,219