[MUSIC CHƠI] ALLISON BUCHHOLTZ-AU: Vì vậy, chúng tôi về cơ bản chỉ cần đi để cung cấp cho bạn một tóm tắt của CSS, bởi vì chúng tôi biết rằng nó đã không được bảo hiểm trong tất cả các phần. 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, 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. 

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. Tôi có nghĩa là, bạn không cần phải, nhưng tôi muốn đề nghị đó. [Cười] 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]. 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, do đó khi bạn đi ra ngoài và bạn nghiên cứu điều về CSS, nó không hoàn thành vô nghĩa, như CSS đôi khi là. 

Tomas Reimers: Yeah. Allison nói nó khá tốt. 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? Vì vậy, CSS là awesome. CSS-- 

ALLISON BUCHHOLTZ-AU: Đó là tên của hội thảo của chúng tôi. 

Tomas Reimers: Yeah. Đó là thực sự quan trọng bạn hiểu rằng đến lúc đó. Nếu bạn chỉ mất đi một điều, đó là CSS rằng nếu awesome. Hai là CSS là viết tắt của Cascading Style Sheets. Vì vậy, cốt lõi của nó, là CSS một phong cách, có nghĩa là nó cho phép bạn tạo kiểu cho một trang web. Và sau đó có nghĩa là gì, đó là một cách để thêm phong cách cho trang web của bạn. 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-- vì vậy những thứ như màu sắc, hình nền hình ảnh, biên giới, như, đệm, lợi nhuận. 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. 

Vì vậy, chúng tôi đã chỉ đi trước và mở cả của những người trong gedit. Vì vậy, đây là index.html. Và đây là main.css. Vì vậy, không có gì main.css. ALLISON BUCHHOLTZ-AU: Không có phong cách rất xa. Tomas Reimers: Không có. Và như bạn sẽ thấy, đó là một trang web thực sự xấu xí. ALLISON BUCHHOLTZ-AU: Nó chỉ là đồng bằng. Tomas Reimers: Yeah. Yeah, nó không xấu xí, nó chỉ là tối giản. Và sau đó ở đây chúng tôi có index.html. Và như vậy một cách nhanh chóng recap của HTML, Allison, bạn muốn chỉ nói về trang web? 

ALLISON BUCHHOLTZ-AU: Yeah. 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. 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. Ở đâu đó? 

Tomas Reimers: Oh. Vâng, bạn có thể nhìn thấy. ALLISON BUCHHOLTZ-AU: Và thông báo các tiêu đề là tiêu đề tab này phải lên đây. Và sau đó "Hello, world!" là các văn bản mà chúng tôi có chỉ hiển thị trên web trang, mà is-- đi lại. Back. Mà chỉ là trong cơ thể của chúng tôi here-- các văn bản đơn giản. Ngoài ra, có một điều để chú ý, nếu bạn nhìn ở đây, Tomas chuyển lên các hai từ slide của chúng tôi. 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. Họ có thể là bất cứ điều gì trong thứ tự mà chúng muốn. Điều quan trọng nhất mà chỉ là bạn có mỗi của những ba điều. 

Tomas Reimers: Cool. Thêm một loại doc? ALLISON BUCHHOLTZ-AU: Yeah. Tomas Reimers: Yeah. Cool. ALLISON BUCHHOLTZ-AU: Rõ ràng, mics tôi không thích tôi. 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. Vì vậy, yeah. Vì vậy, chúng ta có trang chính của chúng tôi. Đó là loại unstyled. Chúng tôi không có nhiều. Chúng tôi chỉ có cơ bản text. Chúng tôi có các style sheet. Chúng tôi có danh hiệu. Vì vậy, chỉ bare-xương các thành phần làm cho một trang web. 

Vì vậy, từ đó, chúng ta hãy nói về những gì là CSS và những gì nó trông giống như và tất cả điều đó. Vì vậy, cho that-- ALLISON BUCHHOLTZ-AU: Quay lại slide. Tomas Reimers: Trở về slide. Và Allison có thể đi qua. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Vì vậy, trong file CSS của bạn, bạn sẽ có rất nhiều những điều được gọi là bộ chọn. Điều đó sẽ chỉ là cơ sở của tập tin CSS của bạn. Nó chỉ đi được rất nhiều và rất nhiều trong số này. Vì vậy, chọn. Đây chỉ là giải phẫu tổng quát. Chúng ta sẽ đi qua ví dụ, bởi vì nếu các bạn không bao giờ xem phần tôi, tôi cảm thấy như mọi thứ trong trừu tượng không thực sự có ý nghĩa. Nó luôn luôn giúp để xem các ví dụ. 

Vì vậy, chúng tôi có một số chọn. Đó 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. 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ị. 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ể, hoặc đoạn văn với P, hoặc tiêu đề, hoặc bất cứ điều gì, bất cứ điều gì bạn muốn thẻ HTML của bạn được. 

Vì vậy, trong trường hợp này, chúng ta có cơ thể. Và chúng tôi có một số quy tắc, mà điều này tương ứng với những gì phong cách của bạn áp dụng vào. Vì vậy, trong trường hợp này, chúng ta có màu nền và trọng lượng font. Vì vậy, điều này sẽ thay đổi là nền tảng của bất cứ điều gì trong bất kỳ khóa cơ thể của tập tin HTML của chúng tôi. Và nó sẽ cung cấp cho nó giá trị này màu xanh nhạt. 

Vì vậy, nó sẽ làm cho các nền màu xanh nhạt. Và sau đó bất cứ điều gì trong cơ thể là sẽ có một font đậm. Vì vậy, nó chỉ cần đi đậm tất cả các văn bản của chúng tôi. Và đây chỉ là một selector. Nhưng bạn có thể có rất nhiều trong số này. Và như chúng ta sẽ thấy sau đó, một chút nhiều hơn như thế nào mà các công trình và các ví dụ khác đó. Bất cứ điều gì bạn muốn thêm? 

Tomas Reimers: No. Allison đã nhận nó. 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. Vì vậy, hãy thực hiện việc này. Nó hoàn hảo. 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. Và tôi sẽ lưu nó. Và sau đó chúng ta sẽ chạy nó. Vì vậy, lưu ý phụ, một trong những hầu hết những điều bực bội đượ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, và như thế, tại sao không phải là sự thay đổi xảy ra? Nó sẽ xảy ra. 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 và một số văn bản in đậm. 

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ì 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. Chúng tôi hoàn toàn sẵn sàng đến với những câu hỏi. 

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ó. Vì vậy, nếu có một điều không làm cho ý nghĩa bây giờ, chúng tôi không muốn điều đó bog bạn xuống sau đó. 

Tomas Reimers: Vì vậy, chúng ta hãy loại phân tích này. Vì vậy, bạn muốn bắt đầu bộ chọn ở đây? 

ALLISON BUCHHOLTZ-AU: Yeah. Như tôi đã nói trước đây, cơ thể chỉ chọn của chúng tôi ở đây. Vì vậy, nếu chúng ta nhìn lại để index-- ah của chúng tôi. 

Tomas Reimers: Mà tôi chỉ đóng cửa. Hãy cho tôi một giây. Vì vậy, File, Open, index.html. ALLISON BUCHHOLTZ-AU: Cool. 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? Vì vậy, chọn chỉ tương ứng với các thẻ mà chúng ta đang nói về. Vì vậy, cơ thể phải ở đây. Vì vậy, những gì chúng ta đang nói là everything-- chúng ta có thể quay trở lại? Tôi muốn tôi có thể chỉ như chạm vào màn hình. Nó muốn được mát mẻ hơn rất nhiều. 

Vì vậy, bất cứ điều gì trong những body, mà chúng ta đã thấy chỉ là, như, các văn bản, và cơ thể nói chung đề cập đến, như thế, nền. Nếu bạn đã bao giờ muốn thay đổi hình nền, đó sẽ được đưa vào thẻ cơ thể. Chỉ cần có những quy tắc áp dụng cho họ. 

Vì vậy, nếu chúng ta đi tới index.html và- thực sự, chúng ta có thể có một cái gì đó bên ngoài của cơ thể? 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. Nhưng bất cứ điều gì trong vòng các thẻ cơ thể sẽ bị ảnh hưởng bởi cơ thể này chọn mà chúng tôi đã thực hiện. Vì vậy, nếu bạn đã gõ cái gì khác there-- 

Tomas Reimers: Hãy lái xe về nhà mà. 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ó. Tôi sẽ đóng nó. Hoặc chúng ta hãy làm điều này một đoạn. Vì vậy, p là viết tắt của đoạn văn. Và trong đoạn văn đó. Và sau đó tôi nói, "Đây là văn bản." Cool. 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ể. Bạn sẽ thấy cách nó chỉ áp dụng cho đoạn mới hình thành, phải, không phải là toàn bộ điều. Điều đó có ý nghĩa? 

ALLISON BUCHHOLTZ-AU: Vì vậy, đây là tất cả các cơ quan, nhưng bây giờ chúng tôi chỉ chọn tương ứng với các đoạn văn. Vì vậy, chúng tôi chỉ có màu xanh đậm và cho đoạn cụ thể này, bởi vì đây là điều duy nhất được kèm theo trong thẻ p. 

Tomas Reimers: Liệu đó có ý nghĩa loại Cách thức đóng gói những thứ khác? ALLISON BUCHHOLTZ-AU: Ngoài ra, chỉ để nói, như thế, một trong những cách tốt nhất để thực sự có được thoải mái với CSS là để chỉ làm những việc như thế này, chỉ cần cố gắng nó ra. 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. Và như với hầu hết CS, thử nghiệm có thể thường xuyên dẫn đến một tốt hơn nhiều sự hiểu biết trực quan. 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. 

Tomas Reimers: Tuyệt đối 100% đồng ý ở điểm đó. 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. Vì vậy, chúng ta có hai quy tắc về điều này. Vì vậy, đầu tiên là một màu nền. 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. 

Vì vậy, trong CSS, CSS là loại của rất lỏng lẻo về cách bạn đang được cho phép để xác định màu. Vì vậy, bạn có thể xác định chúng bằng tên. Bạn cũng có thể làm một cái gì đó như "đỏ". 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 đỏ. 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, có thể không? 

ALLISON BUCHHOLTZ-AU: I nghĩ rằng bạn có thể sử dụng hex. Không thể bạn? 

Tomas Reimers: Yeah. Vì vậy, bạn có thể sử dụng hex. Nhưng tôi nghĩ tên-khôn ngoan. Là không có? ALLISON BUCHHOLTZ-AU: Bạn có thể làm một số khá. 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. 

Tomas Reimers: Chúng ta sẽ thử cá hồi. ALLISON BUCHHOLTZ-AU: I nghĩ rằng màu lục nhạt là ở đó. Tomas Reimers: Yeah. Thấy không? Vì vậy, bạn có thể nhận được khá sáng tạo. 

ALLISON BUCHHOLTZ-AU: Bạn có thể nhận được khá sáng tạo. Giống như, nếu bạn có thể nghĩ về Tên màu, nó có thể là ở đó. Nếu bạn thực sự muốn tốt chi tiết, bạn có thể đi hex. 

Tomas Reimers: Yeah. Vì vậy, hệ thập lục phân. 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, các bạn đã phải đối phó với các giá trị hex. Và loại để tóm tắt lại đó là những gì, hex có ba giá trị được lưu trữ trong đó. Vì vậy, đó là trong nhóm của hai gia số. Hai đầu tiên đại diện cho các giá trị đỏ. Điều thứ hai đại diện các giá trị màu xanh lá cây. Và điều cuối cùng là màu xanh? 

Vì vậy, FF sẽ xảy ra với đại diện một thập lục phân 255. Vì vậy, bạn có 255 màu đỏ, 255 màu xanh lá cây, và 0 cho màu xanh. Và các giá trị trong khoảng từ 0 đến 255. 

Đung phải. 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, và xác định các-biết thực sự màu sắc kết hợp quang phổ, và sau đó chúng ta có thể đặt nó trong? ALLISON BUCHHOLTZ-AU: Chính xác. 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. Có phải chúng ta sẽ nói về hình ảnh nền sau này? Hay chúng ta muốn làm điều đó? 

Tomas Reimers: Yeah. Tuyệt đối. 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. Và nếu bạn cần một số giúp việc tìm kiếm này, bạn Google có thể một cái gì đó như "chọn màu." ALLISON BUCHHOLTZ-AU: Oh, nó tốt như vậy. Tôi yêu Color Picker. 

Tomas Reimers: colorpicker.com là một ví dụ tốt. 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 đủ. 

ALLISON BUCHHOLTZ-AU: Mm-hm. 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 do đó bạn không có, như, xung đột sắc. Tomas Reimers: Và sau đó đây là giá trị hex lên đây. 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ừ. 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. Đó 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, và sau đó lấy số xuống. 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. 

ALLISON BUCHHOLTZ-AU: Và sau đó có also-- Tôi quên tên chính xác của trang web. Nhưng chắc chắn, tôi nghĩ, một cái gì đó từ Adobe 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 definitely-- nó đôi khi khó để tìm ra, 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 để 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. 

Tomas Reimers: Allison nói về một bằng Adobe Kuler gọi, tôi nghĩ. Đó là K-U-L-E-R. ALLISON BUCHHOLTZ-AU: Tôi nghĩ vậy. Tôi khá chắc chắn đó là một trong những. 

Tomas Reimers: Sở thích của tôi có luôn Color Scheme Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

Tomas Reimers: nào là now-- 

ALLISON BUCHHOLTZ-AU: Ah, đây là đẹp. 

Tomas Reimers: Và bạn về cơ bản có thể nói, như, Tôi muốn ba màu cạnh nhau. Và sau đó chúng ta hãy làm một cái gì đó tốt đẹp. 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. 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. 

Vì vậy, chỉ là một cách tốt để bắt đầu suy nghĩ về chủ đề màu hoặc những màu sắc trong một trang web có thể đi cùng nhau. 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ĩ. Và sau đó là điều khác mát Tôi đã luôn luôn tìm thấy về trang web này 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ụ có thể trông giống như sử dụng mà màu sắc. Dù sao. 

Quay lại CSS thực tế. 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. Tomas Reimers: Không, họ chắc chắn có thể hữu ích. Vì vậy, các quy tắc thứ hai, Allison? 

ALLISON BUCHHOLTZ-AU: Yeah. Nguyên tắc thứ hai chỉ là tương ứng với kích cỡ font chữ. Vì vậy, trọng lượng font là chỉ loại of-- nên trọng lượng sẽ được nếu bạn muốn chỉ là, như, bình thường hoặc, như, phông chữ mỏng hơn, hoặc trong trường hợp này, như thế, táo bạo. Tôi quên. 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? Tomas Reimers: Tôi không thực sự biết nếu có một mỏng hơn. ALLISON BUCHHOLTZ-AU: Tôi quên. Vì vậy, trọng lượng font chữ chúng ta thường chỉ cần sử dụng để làm đậm. Nếu bạn muốn nhận được sự thành nó, chúng ta sẽ chỉ cho bạn. W3Schools có tất cả các khác nhau điều bạn có thể làm cho phông chữ. Nhưng về cơ bản, nếu bạn muốn để thay đổi bất cứ điều gì về font, nó luôn luôn có được, như, font-một cái gì đó. 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ế. Nó sẽ có font-style bạn muốn làm cho nó giống như chữ thảo, hoặc nghiêng, hoặc có điều gì. Hoặc thậm chí font-màu sắc, nếu chúng tôi muốn thay đổi điều đó. 

Tomas Reimers: Yup. Vì vậy, bạn có thể thay đổi điều đó. Và loại chỉ để recap bây giờ, vì vậy bạn có thể thấy rằng chúng tôi có bộ chọn ở đây. Chúng tôi có các dấu ngoặc nhọn. Và sau đó chúng tôi có những quy định giới hạn bởi dấu chấm phẩy. Điều đó có ý nghĩa? Yeah? Cool. Vì vậy, nếu đó là good-- 

ALLISON BUCHHOLTZ-AU: Trở về. Tomas Reimers: Hãy nói cụ thể về loại selectors chúng ta có. 'Nguyên nhân ngay bây giờ chúng tôi đã loại chỉ thể hiện các thẻ. Nhưng các bạn có thể nhìn thấy nó hợp lý. Giả sử bạn có hai đoạn trên một trang và bạn muốn để có thể phong cách một trong nhưng không phải là khác, 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 thẻ để cung cấp cho họ phong cách khác nhau. 

Vì vậy, chúng tôi có ba cơ bản loại selectors. ALLISON BUCHHOLTZ-AU: Yeah. Vì vậy, chúng tôi đã có tag, đó là những gì chúng tôi đã nói về ngay bây giờ. Vì vậy, đó là loại giống như cơ thể hoặc p của bạn. 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, 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. Và điều này có thể áp dụng cho nhiều điều. 

Giả sử bạn có năm đoạn và hai trong số ba người cần phải được theo kiểu giống nhau, bạn sẽ áp dụng một lớp với nó. Và đây chỉ là cách chúng ta làm điều đó. 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. Nhưng nếu bạn đã có thể một số tag p, sau đó, bạn sẽ viết, lớp bằng bất cứ lớp học bạn muốn áp dụng cho nó. 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, chúng tôi chỉ có thể viết như thế này. Tất nhiên, tôi nghĩ rằng một ví dụ sẽ làm cho nó cụ thể hơn. 

Một trong những khác chúng tôi có là id, mà chúng biểu thị với một băm, hoặc pound, hoặc hashtag. Tomas Reimers: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Điều đó làm việc, quá. Và một trong những điều này thực sự phải là duy nhất. Họ chỉ nên áp dụng cho một điều trên trang của bạn. 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ì, này phải là duy nhất. Và trong cùng một cách mà chúng ta chỉ nói, như, class = "class1 class2," điều này chỉ có thể được id của bất cứ điều gì chúng ta có. Tomas Reimers: Yeah. Vì vậy, hãy chắc chắn nói chuyện về ví dụ ở đây. Và tôi chỉ cần đi để lặn thẳng trở lại vào các mã. Vì vậy, chúng ta hãy nhìn vào HTML của chúng tôi. Và vì vậy chúng tôi ngay bây giờ có một đoạn. Đây là văn bản. Tôi chỉ cần đi để sửa đổi nó. "Đây là văn bản 1." Và sau đó chúng ta sẽ có một "này là text 2." 

ALLISON BUCHHOLTZ-AU: Thứ hai một. Tomas Reimers: Yup. Vì vậy, bây giờ chúng tôi có "Đây là văn bản 2," phải không? 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 là chúng ta sẽ find-- ALLISON BUCHHOLTZ-AU: Ooh. Tomas Reimers: Yeah. 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. " 

ALLISON BUCHHOLTZ-AU: Và màu vàng ra đáng yêu. 

Tomas Reimers: Và bạn sẽ thấy mà chọn của chúng tôi ngay bây giờ, áp dụng cho p, hoặc đoạn, ảnh hưởng đến cả hai người, vì cả hai đều đáp ứng điều kiện là họ đang cả một thẻ p. Điều đó làm cho tổng cảm giác. Vì vậy, câu hỏi là, tốt, những gì nếu chúng ta muốn chỉ có một? Vì vậy, chính xác như Allison đã nói, chúng ta có hai cách khác để làm điều đó. Tôi sẽ bắt đầu với id. 

ALLISON BUCHHOLTZ-AU: Hãy bắt đầu với id. 

Tomas Reimers: Và cả hai trong số này là các thuộc tính. Vì vậy, các thuộc tính tồn tại trong HTML. Và những gì họ đang là một cái gì đó mà bạn thêm bên trong các thẻ đó là tách biệt với tên thẻ. Vì vậy, bạn có thể có nhiều thuộc tính. Yeah? 

ALLISON BUCHHOLTZ-AU: tôi chỉ cần đi để nói, từ ví dụ của bạn từ PSET 7, nếu bất kỳ của bạn cố gắng để gắn kết thứ đến trung tâm, bạn có thể đã sử dụng "Văn bản align = center." Và bạn nhận thấy nó có thể nên đã làm trung tâm văn bản của bạn hoặc thanh điều hướng của bạn. Vì vậy, đó chỉ còn một thuộc tính mà bạn có thể làm quen với. Tomas Reimers: Có một bó của các thuộc tính mà bạn sẽ thấy. Yeah. Giống như tài liệu tham khảo tốt để PSET 7. Chúng tôi có id. Bạn cũng có thể có lớp học, mọi thứ như thế này. Một thẻ duy nhất có thể có nhiều thuộc tính. 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. Chúng tôi sẽ gọi nó là đặc biệt, vì thế này, chúng tôi sẽ làm cho đậm, và gạch dưới, và bất cứ điều gì. ALLISON BUCHHOLTZ-AU: Đó là sẽ được siêu đặc biệt. Tomas Reimers: Vì vậy, đây một, chúng tôi có id đặc biệt. Vì vậy, con đường để chọn mục đó, sau đó, là trong main.css, hơn là có một thẻ p, bạn làm #Special, OK? Và đó chọn điều với id đặc biệt. Liệu điều này có ý nghĩa với tất cả mọi người? Đung Yeah. Tomas Reimers: Cool. Vì vậy, bây giờ nếu chúng ta quay trở lại, chúng tôi sẽ see-- tả. Yeah. Chúng ta sẽ thấy rằng nó chỉ chọn một với id đặc biệt. Yeah? Âm thanh mát. Vâng. 

Đung một cái gì đó có thể có một thuộc tính của cả lớp và một id? 

Tomas Reimers: Yes. Đung OK. 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? Tomas Reimers: Tuyệt đối. Chúng tôi chắc chắn sẽ để nói về điều đó. 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. Vì vậy, chúng ta hãy giả vờ tôi đã có ba đoạn I muốn để kiểu đầu tiên hai nhưng không phải là thứ ba. 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. Nhưng bạn không thể, bởi vì một id, chính xác như Allison đã nói, có phải là duy nhất. 

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. Và một class-- những gì nó cho phép bạn phải làm là về cơ bản nói, này thuộc như là một phần của một nhóm. Trong trường hợp này, nhóm của chúng tôi được gọi là đặc biệt. Và những gì chúng ta sẽ làm sau đó là chúng ta sẽ say-- hơn pound, chúng ta sẽ sử dụng dấu chấm. OK? 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, không nằm trong HTML. ALLISON BUCHHOLTZ-AU: Yes. Biệt quan trọng. 

Tomas Reimers: Tôi có đã đấu tranh rất nhiều, 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. Xem cách nó chọn cả hai những người thân với lớp đó? Cool. 

Bây giờ, mọi thứ có thể có nhiều lớp. 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 và thứ hai có hai một màu sắc font của màu xanh. OK. 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ể. 

ALLISON BUCHHOLTZ-AU: Might không đề nghị nó cho trang web của bạn. Nhưng đối với các mục đích của chúng tôi, nó sẽ làm. 

Tomas Reimers: Nó không một màu sắc tốt. 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. Tôi không biết, mặc dù. Tomas Reimers: cao của Allison trường có một bảng màu tuyệt vời. [Cười] 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 và chúng tôi có Khá. Tôi đề nghị, cho điều này, bạn sử dụng tên nhiều mô tả. ALLISON BUCHHOLTZ-AU: Yeah, tôi sẽ gọi này, như, màu vàng hoặc màu xanh. 

Tomas Reimers: Chúng tôi không thực sự làm cho một website thực sự, đó là lý do tại sao chúng tôi không làm điều đó. Nhưng nếu bạn thực sự đã có một website thực sự, bạn có thể có, như thế nào, bài viết tiêu đề, nội dung bài viết, từ đầu tiên, những điều như thế, mà cho phép bạn được nhiều hơn mô tả. Đây là những thực sự giống như các biến. Họ nên được đặt tên theo một cách mà bạn có thể, like-- yeah, như vậy. Perfect. 

Vì vậy, màu nền. 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". Và chúng ta sẽ làm cho nó màu xanh. Đó là mát mẻ. Vì vậy, bây giờ chúng tôi có hai đầu tiên có đặc biệt. Người tiếp theo sẽ có "class = khá." ALLISON BUCHHOLTZ-AU: Và sau đó bạn sẽ thấy muốn thêm "đẹp" cho một trong những trung. Tomas Reimers: Yup. Và sau đó để ở giữa, để thêm "đẹp", những gì sẽ xảy ra là bạn chỉ cần có một không gian. Vì vậy, các thuộc tính lớp là một danh sách không gian cách nhau của tất cả các lớp học áp dụng cho các thẻ đó. OK? 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à "Đặc biệt, không gian, xinh đẹp". Nó thuộc về hai classes-- đặc biệt và khá. Có? Cool. 

Và sau đó nếu chúng ta nhìn những gì xảy ra, chúng tôi sẽ thấy rằng một trong những đầu tiên có nền vàng chữ đen. One-- thứ hai 

ALLISON BUCHHOLTZ-AU: --has đậm nền vàng với chữ màu xanh. Và cuối cùng chúng tôi chỉ có chữ màu xanh mà chúng ta gán cho nó. 

Tomas Reimers: Cool? Làm thế nào selectors làm việc? Awesome. 

ALLISON BUCHHOLTZ-AU: Chúng ta có muốn nói về cuộc xung đột hiện nay sau đó? 

Tomas Reimers: Vì vậy, yeah. Tuyệt đối. 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? Hãy giả vờ là người đầu tiên thiết lập một cái gì đó like-- ALLISON BUCHHOLTZ-AU: Có thể này thay đổi nền? Tomas Reimers: Yeah. Vì vậy, chúng ta sẽ làm cho "đẹp" thay đổi hình nền cho cá hồi. 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. Tomas Reimers: Yeah. 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. Vì vậy, chúng tôi sẽ chỉ làm điều đó. Tôi cũng nghĩ rằng Sunset là một màu thực. Đung Sunset là một màu sắc thật không? ALLISON BUCHHOLTZ-AU: Hãy thử nó. Tomas Reimers: Sau khi bản demo này chỉ bởi vì trong trường hợp nó messes lên, Tôi không muốn được gỡ rối. Vì vậy, chúng ta biết cá hồi là một màu sắc thật sự. Vì vậy, bất kỳ dự đoán về những gì sẽ xảy ra? 

ALLISON BUCHHOLTZ-AU: Bất kỳ ý tưởng? 

Đung [không nghe được]. 

Tomas Reimers: Yeah. Vì vậy, bạn đã nhận nó đúng. Về cơ bản, nó có Quy tắc cuối cùng mà nó đã được đưa ra. 

ALLISON BUCHHOLTZ-AU: Vì vậy, đây là nơi tầng có hiệu lực. 

Tomas Reimers: Vì vậy, nhớ làm thế nào chúng tôi có mà tầng style sheets? 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 áp dụng trên đầu trang của mỗi khác, và họ cũng có thể ghi đè lên nhau. 

ALLISON BUCHHOLTZ-AU: Vì vậy, bất cứ điều gì của ở phía dưới sẽ ghi đè lên bất cứ điều gì ở đầu trang. Bạn có thể có những quy định mà hoàn toàn phủ nhận một cái gì đó trước. Đó 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, 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. 

Tomas Reimers: Hoặc có thể bạn không muốn ghi đè lên các quy tắc. 

ALLISON BUCHHOLTZ-AU: Hoặc có thể bạn làm. Vâng. 

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ứ, 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ữ trọng lượng để in đậm đối với hầu hết thứ, nhưng đối với một, 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 tài sản, bạn có thể làm một cái gì đó như "font-weight = bình thường" mà sau đó sẽ lùi lại mà thay đổi táo bạo. Yeah? 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. 

ALLISON BUCHHOLTZ-AU: Sự thử nghiệm. 

Tomas Reimers: Thực hành, thực tập, thực hành, và thử nghiệm. 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 vào cuối ngày, mà nếu bạn muốn làm something-- như, bạn có một ý tưởng thô, nhưng bạn vẫn có thể cần để thử nó ra để đảm bảo bạn biết những gì nó trông như thế nào. 

Đung Khi bạn đang áp dụng lớp học, nhiều hơn một cho cùng một đoạn hoặc phần, hiện nó có vấn đề gì để bạn có thể gõ chúng vào trong dấu ngoặc kép? 

Tomas Reimers: Không, không phải ở tất cả. 

ALLISON BUCHHOLTZ-AU: Điều quan trọng là các lệnh trong CSS của bạn. Đung bạn có thể lặp lại các câu hỏi? Tomas Reimers: Oh. ALLISON BUCHHOLTZ-AU: Trong vòng lớp học, khi bạn đang đem lại cho các lớp học một cái gì đó trong HTML, không Có vấn đề gì mà tự họ đang ở trong? Nó không quan trọng thứ tự. Thứ tự của những gì quan trọng là selectors class trong CSS của bạn, trong bảng phong cách của bạn. 

Tomas Reimers: Sound tốt? 

ALLISON BUCHHOLTZ-AU: Lovely. 

Tomas Reimers: Và sau đó chúng ta sẽ tiếp tục với: ALLISON BUCHHOLTZ-AU: Chúng ta có gì tiếp theo? Tôi quên. Oh, chúng ta chỉ có những ví dụ. Nhưng chúng tôi đã thực hiện những loại. Chúng tôi đã thực hiện các ví dụ trên bay. 

Tomas Reimers: Chúng tôi nhận được để kết hợp các selectors sớm. 

ALLISON BUCHHOLTZ-AU: Oh, chúng tôi nhận được để kết hợp các bộ chọn. Tomas Reimers: Vì vậy, một số ví dụ là chúng tôi có # Bảng dog--, hoặc hashtag, hoặc octothorpe, hoặc bất cứ điều gì bạn muốn gọi that-- sắc nét. 

ALLISON BUCHHOLTZ-AU: chó Sharp. 

Tomas Reimers: Sau đó, bạn có .pets. Một cái gì đó có một id của con chó, chỉ có một con chó trên trang. Một cái gì đó có một id của mèo, chỉ có một con mèo. Có thể có rất nhiều vật nuôi trên trang. Đó là lý do tại sao chúng tôi đã cho rằng các lớp học. Bạn có một ví dụ của p. Và sau đó vì vậy một trong những Ví dụ cuối cùng, mà 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. Vì vậy p.pets. 

Vì vậy, cho rằng, chúng ta hãy quay trở lại mã và giới thiệu another-- yeah. Vì vậy, trở lại đây. 

ALLISON BUCHHOLTZ-AU: I cảm thấy như thế này là really-- như chỉ nhìn qua ví dụ thực sự là cách để tìm hiểu điều này. Vì vậy, đó là những gì chúng tôi đang làm. 

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? Vì vậy, chúng tôi chắc chắn không thể làm điều đó với một id. 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. 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 hoặc nó đã có một cái gì đó khác. Tôi không thể làm điều đó với điều đó. Các thẻ chắc chắn không phải là duy nhất, phải không? Và không phải là lớp học. Nhưng bạn có thể kết hợp những điều này. 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à có các lớp học đặc biệt và trong đó có các lớp học khá. 

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. Bạn có thể kết hợp này. Vì vậy, bạn có thể làm .special. Không có không gian. Chỉ cần .special.pretty. Điều đó có nghĩa là một cái gì đó mà là cả hai đặc biệt và khá. Điều đó có ý nghĩa? Và nếu chúng tôi đi đây, những gì bạn sẽ thấy là quy tắc này chỉ áp dụng cho các thứ hai, trong đó có cả những người. Và bạn có thể làm điều đó cho rất nhiều thứ. Bạn có thể say-- hãy giả vờ tôi chỉ muốn để làm những điều mà có lớp khá và đó cũng là một thẻ đoạn. Vì vậy p.pretty. Hãy giả vờ rằng tôi đã có một cái gì đó đẹp trên cơ thể tag. OK? Tôi có thể chạy và tôi có thể thấy rằng nó chỉ sẽ áp dụng đối với những điều mà có đoạn có lớp khá. Và bạn có thể kết hợp này, về cơ bản, như nhiều như bạn muốn. Vì vậy, bạn chỉ có thể đặt chúng lại với nhau. Điều đó có ý nghĩa? ALLISON BUCHHOLTZ-AU: Vì vậy, loại này là hữu ích hơn khi, Tomas đã nói trước đó, có thể bạn có một trang web rất phức tạp, và bạn đã có rất nhiều những quy định này bằng văn bản, và bạn chỉ cần kết hợp hai từ trước. Giống như thay vì viết một toàn bộ selector mới và thay đổi nó ở đó, bạn chỉ có thể kết hợp họ, nơi nó chồng. 

Tomas Reimers: Hoặc bạn có thể tìm thấy out-- đôi có một lớp học mà làm cho màu chữ giống như màu xanh, và có một lớp học mà làm cho các nền màu xanh. Và điều này sẽ không làm việc. 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 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 và điều này một bóng này khác màu xanh. Phải không? 

ALLISON BUCHHOLTZ-AU: Good đối với những loại ngoại lệ. Tomas Reimers: Vì vậy, để suy nghĩ về vấn đề có thể xảy ra khi bạn kết hợp chúng. Cool. Vì vậy, trở lại trình bày của chúng tôi. ALLISON BUCHHOLTZ-AU: Chúng tôi gần như ở đó. Tomas Reimers: Và nó đã ngừng kết nối. ALLISON BUCHHOLTZ-AU: Oh, không. ALLISON BUCHHOLTZ-AU: CS tại văn phòng, internet đi xuống. Oh, sự trớ trêu. 

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, bởi vì chúng tôi có tất cả các slide ở đây. Vì vậy, chúng ta hãy nói về mối quan hệ của các thẻ. ALLISON BUCHHOLTZ-AU: Đúng vậy. Vì vậy, chỉ cần loại đi tắt của những gì Tomas nói, đây chỉ là một cách khác để làm điều đó. Vì vậy, chúng tôi có một số cha mẹ Selector với một chọn con. 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. Ah. 

Tomas Reimers: Oh, xin lỗi. 

ALLISON BUCHHOLTZ-AU: Và Về cơ bản, điều này có nghĩa là chọn tất cả các em, như tất cả các loại selectors, trong chọn phụ huynh này. Và đó là những chỉ nó bao giờ sẽ được áp dụng cho. Tôi không biết nếu bạn có một cách tốt hơn of-- Tomas Reimers: Vì vậy, tôi đoán cách để suy nghĩ 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. Và sau đó có nghĩa một phần tử mà phù hợp với tất cả các. , Đ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ứ trong some-- tôi muốn bạn tìm một selector. Và sau đó trong đó, tôi muốn bạn để phù hợp với những điều mới mẻ. Phải không? 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. 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. 

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õ. 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ì. Và sau đó chúng tôi có một liên kết, OK? Vì vậy, hãy nhớ rằng, một là một liên kết. Nó sẽ không đi đâu cả. Và chúng ta sẽ để cho nó liên kết lớp, tôi đoán. Hãy cho nó class-- cho tôi một ý tưởng. ALLISON BUCHHOLTZ-AU: Cool. Tomas Reimers: Coo-- hãy đi một lớp khá. Tại sao không? 

ALLISON BUCHHOLTZ-AU: OK. Tomas Reimers: Vì vậy, thứ ngay bây giờ khá sẽ làm cho nền màu xanh, màu nền của cá hồi. Điều đó có ý nghĩa. Và nếu chúng ta làm this-- 

ALLISON BUCHHOLTZ-AU: Bạn có muốn chèn thêm chữ do đó, các siêu liên kết thực hiện? Tomas Reimers: Đó sẽ là một cuộc gọi tốt. ALLISON BUCHHOLTZ-AU: "Nguyên nhân quyền Hiện tại chúng tôi chỉ sẽ vượt gì. Tomas Reimers: Vì vậy, đây là một liên kết. "Đây là một liên kết." Oh, và điều này sẽ là một đường link khác. Hãy cung cấp cho nó các lớp "mát mẻ". Bạn nói đúng. Cool. Vì vậy, ngay bây giờ chúng tôi đang đi để lấy này. Chúng tôi đang đi để ném một. Chúng tôi có một trong các tag đặc biệt, và chúng tôi cũng sẽ có một trong các tag khá. Và ngay bây giờ những gì chúng ta đang đi làm là chúng ta sẽ làm cho cool-- những gì chúng ta muốn nó làm gì? ALLISON BUCHHOLTZ-AU: Chúng ta có thể làm cho nó lớn hơn? Tomas Reimers: Hãy cung cấp cho nó một đường viền. ALLISON BUCHHOLTZ-AU: Chúng tôi có thể biên giới. Tomas Reimers: Yeah. 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 sẽ giải thích tất cả trong một giây. Đối now-- 

ALLISON BUCHHOLTZ-AU: Để mô hình hộp. Tomas Reimers: Nhưng bây giờ, chúng tôi chỉ cần đi để cho nó một biên giới. Vì vậy, điều đó có nghĩa bạn đang là sẽ thấy những liên kết này. Và bạn sẽ thấy rằng họ có những, như, viền đen xấu xí, mà là mát mẻ. 

ALLISON BUCHHOLTZ-AU: Trang web của chúng tôi là rất đẹp. 

Tomas Reimers: Yeah. Trang web của chúng tôi là tuyệt vời. Vì vậy, hai là liên kết, và họ xuất hiện. Bây giờ chúng ta hãy giả vờ tôi chỉ muốn làm điều này 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. Vì vậy, hãy nhớ rằng điều này có một nền tảng của cá hồi, bởi vì nó là của lớp khá. 

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 khá, nên có biên giới. Vâng, những gì bạn có thể làm là bạn có thể nói, .special, không gian, .cool. Và điều đó đang làm gì, khi bạn nghĩ về nó, là nó về cơ bản nói, OK, tìm thấy tôi tất cả mọi thứ phù hợp đặc biệt. Sau đó, trong những thẻ, tìm tôi tất cả mọi thứ đó là mát mẻ. ALLISON BUCHHOLTZ-AU: Vì vậy, một cách khác đó có thể là tốt để suy nghĩ về điều này, đưa nó trở lại C, là giống như ý tưởng của phạm vi. Vì vậy, khi bạn có một số chọn, giống như những người 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 nằm trong phạm vi của bạn, phải không? Nhưng khi chúng ta có những mối quan hệ cha-con, 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ể, như, như, chúng tôi đang tìm kiếm trong một chức năng cụ thể thay vì của toàn bộ tập tin của chúng tôi. Đung Vì vậy, với ý nghĩ đó, sẽ nó đã quan trọng nếu chúng ta có changed-- ALLISON BUCHHOLTZ-AU: Trình tự? Đung --Thông class trong CSS để .cool, không gian, .special? ALLISON BUCHHOLTZ-AU: Vâng, bởi vì sau đó sẽ nói, phạm vi nó để tất cả mọi thứ mà có mát mẻ, và sau đó nhìn vào những gì has-- Tôi có nghĩa là, như, trong trường hợp này, Tôi không nghĩ rằng nó sẽ thay đổi nó. 

Tomas Reimers: Nếu chúng ta đã nói những gì? Xin lỗi. 

ALLISON BUCHHOLTZ-AU: Nếu chúng tôi Phạm vi đó để nguội và sau đó tìm kiếm những điều ngoài đặc biệt, nó sẽ là như nhau, thực sự. 

Tomas Reimers: Vì vậy, nó sẽ không được. 

ALLISON BUCHHOLTZ-AU: Nó không sẽ? Oh, oh tốt. Tôi sai. 

Tomas Reimers: Vì lý do nó different-- mistake-- chung được rằng ngay bây giờ chỉ link đó có mát, phải không? 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? Có hai thẻ ở đây, phải không? Đó là một trong những điều này và một này. Cả hai kết hợp mát mẻ. Không có gì khác không. Vì vậy, nếu bạn nói, .cool, không gian, .special, những gì bạn sẽ nói là, trong những thẻ này, những gì là đặc biệt? ALLISON BUCHHOLTZ-AU: Hm. Đó là những gì it-- phải. Bởi vì nó giống như một cái gì đó chỉ ở đây. 

Tomas Reimers: Vì vậy, nó sẽ chọn gì. 

ALLISON BUCHHOLTZ-AU: Trong khi với đặc biệt, chúng tôi trong các thẻ ở đây. 

Tomas Reimers: Những và những người. Đung OK. Vì vậy, những thẻ từ dấu gạch chéo? 

Tomas Reimers: Yes. Điều đó có ý nghĩa? Làm thế nào nó về cơ bản cố gắng để thu hẹp phạm vi. ALLISON BUCHHOLTZ-AU: Yeah. Tôi nghĩ có lẽ đó là Cách dễ nhất để suy nghĩ về nó. 

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. 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ẻ? Và trong vòng một này, cái này thì mát. Trong thời hạn này, không có gì là mát mẻ. Vì vậy, đây là thẻ duy nhất còn lại. 

ALLISON BUCHHOLTZ-AU: Trong khi mát chỉ là trong các thẻ một có. Tomas Reimers: Chính xác. Và những gì đặc biệt trong những? Không có gì. Bây giờ, những gì tôi sẽ nói là nếu không có không gian, 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? Nếu bạn nói .special.pretty, đó là giống như .pretty.special. 

Bởi vì những gì loại bỏ các không gian hỏi là, khi bạn nói .special, bạn đang hỏi, OK, mà những người rất đặc biệt? Và sau đó những người, mà những cũng khá, đó là như nhau, ngữ pháp, như hỏi, những gì là đẹp, và sau đó những người, những gì cũng đặc biệt không? Phải không? Đó là sự khác biệt của những gì là bên trong là gì. Đung OK. Tomas Reimers: Yeah. Awesome. Vì vậy, với ý nghĩ đó then-- 

ALLISON BUCHHOLTZ-AU: Tôi nghĩ cuối cùng của chúng tôi điều (IN Fancy BRITISH ACCENT) các mô hình hộp. 

Tomas Reimers: Các box-- [cười khúc khích] Tôi rất thích cách Allison nói rằng. Vì vậy, điều mô hình hộp. 

ALLISON BUCHHOLTZ-AU: Chỉ cần có một hộp, tôi sẽ có mô hình hộp của bạn. Tomas Reimers: Vì vậy, chúng ta hãy nói về điều đó. 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. Bởi bây giờ, các bạn có lẽ, như, bậc thầy của selectors-- bạn biết, 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. 

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ó? Vì vậy, tôi đoán cơ bản nhất cách để suy nghĩ về điều đó là, tốt, những gì chính xác là một yếu tố trong CSS? Chúng tôi đã dành rất nhiều thời gian nói về, một thẻ là gì, hoặc những gì là cơ bản nhất đại diện của một thẻ không? 

Một cách tốt để suy nghĩ về nghĩa là, những gì hình dạng là cá hồi? Hình dạng gì là, như thế, cá hồi màu nền? 

Đung Đó là một hình chữ nhật. 

Tomas Reimers: Đó là một hình chữ nhật, phải không? 

ALLISON BUCHHOLTZ-AU: Không phải là một câu hỏi trick. [Cười] 

Tomas Reimers: Không phải cố gắng để lừa các bạn này muộn. Vì vậy, chúng ta có hình chữ nhật này. Và các tag là một p, phải không? Vì vậy, mà cho chúng ta tốt niềm tin rằng các đoạn đượ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, nó được. 

ALLISON BUCHHOLTZ-AU: Tôi có nghĩa là, trình duyệt thường hình chữ nhật, do đó, nó làm cho tinh thần. 

Tomas Reimers: Ý tưởng ở đây là rằng tất cả các thẻ trong CSS được biểu diễn như là một hình chữ nhật. Và mỗi hình chữ nhật có bốn bộ phận theo CSS, OK? Bạn có nội dung thực tế. Đó là nơi mà các văn bản nằm. 

ALLISON BUCHHOLTZ-AU: Có lẽ hình ảnh của bạn. 

Tomas Reimers: Yeah. Bạn có đệm, đó là chỉ một số loại không gian màu trắng. Sau đó, bạn có một biên giới. Và sau đó bạn có lợi nhuận, mà là không gian màu trắng bên ngoài mà. Vì vậy, mà làm cho không có ý nghĩa cho bất cứ ai, vì vậy chúng tôi sẽ nói về điều đó trong một giây. 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? Xin lỗi khi I-- 

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. 

Tomas Reimers: Chúng tôi chắc chắn nên. 

ALLISON BUCHHOLTZ-AU: Tôi cảm thấy như tất cả mọi người có thể được hưởng lợi từ một hình ảnh dễ thương, là tất cả. 

Tomas Reimers: Có thể chúng tôi tất cả các lợi ích từ a-- 

Đung Ừ, chắc chắn. Tomas Reimers: OK, mát mẻ. Vì vậy, chúng ta nên đặt một dễ thương hình ảnh trong một nơi nào đó. 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ờ. Tomas Reimers: Chắc chắn. ALLISON BUCHHOLTZ-AU: Cuối tuần. Có một cái gì đó adorab-- 

Tomas Reimers: Thế còn một con mèo? 

ALLISON BUCHHOLTZ-AU: Một con mèo con làm việc, quá. 

Tomas Reimers: Cool, vì có một trang web cho rằng. Nó được gọi là PlaceKitten. ALLISON BUCHHOLTZ-AU: Đó là tuyệt vời. Tomas Reimers: Yes. ALLISON BUCHHOLTZ-AU: Just for, như, hình ảnh giữ chỗ trong trang web của bạn. Tomas Reimers: Mm-hm. Ngoài ra còn có PlacePuppy. Và có PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Thật không? 

Tomas Reimers: Oh, chúng tôi không có thể truy cập internet ở đây. 

ALLISON BUCHHOLTZ-AU: [rên rỉ] Bi thảm. Tomas Reimers: Nếu không, Tôi sẽ cho các bạn thấy làm thế nào để đưa hình ảnh trong trang web của bạn. 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. Nhưng bây giờ, chúng tôi chỉ sẽ nói trong các màu sắc sau đó. Chúng tôi muốn đưa hình ảnh của kittens-- 

ALLISON BUCHHOLTZ-AU: Chúng tôi đã làm. 

Tomas Reimers: --Thông của internet xuống cho thời điểm hiện tại. Vì vậy, chúng ta có hai divs, và chúng tôi sẽ cung cấp cho họ hai ids. Chúng tôi sẽ gọi nó là "Đầu tiên" và "thứ hai." Vì vậy, id = "đầu tiên." Và chúng tôi sẽ cung cấp cho họ hai màu sắc. 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"? ALLISON BUCHHOLTZ-AU: Dot hoặc băm? Đung Sharp. Tomas Reimers: Sharp, hoàn hảo. Sharp, băm, bất cứ điều gì we-- 

ALLISON BUCHHOLTZ-AU: Rất nhiều thứ để gọi nó. 

Tomas Reimers: OK. Chúng tôi sẽ giải quyết trên hashtag, và đó là những gì chúng ta sẽ đi với. OK? 

ALLISON BUCHHOLTZ-AU: hashtag. 

Tomas Reimers: Vì vậy, hashtag đầu tiên. 

ALLISON BUCHHOLTZ-AU: Vì vậy, bạn có thể tweet seminar-- hashtag CSS, hashtag mát. Tomas Reimers: hashtag khiếp sợ. ALLISON BUCHHOLTZ-AU: Hashtag khiếp sợ, vâng. Tomas Reimers: OK. Vì vậy, chúng tôi có "đầu tiên" và "thứ hai." Vì vậy, đầu tiên, chúng ta sẽ có một màu nền của màu đỏ. ALLISON BUCHHOLTZ-AU: Uh, đại tràng. Tomas Reimers: Yup. ALLISON BUCHHOLTZ-AU: Sẽ chỗ-checker của bạn. Tomas Reimers: Allison đã cho tôi. Background-color của blue-- 

Tomas Reimers: Tím! 

Tomas Reimers: Purple. ALLISON BUCHHOLTZ-AU: Yes. 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. 

Tomas Reimers: Violet. ALLISON BUCHHOLTZ-AU: Violet. Điều đó làm việc. 

Tomas Reimers: Vì vậy, chúng tôi sẽ có hai divs. Họ sẽ được hoàn toàn trống rỗng. Chúng ta có lẽ nên có một số văn bản. Vì vậy, "đầu tiên" là có được "HELLO". Và "thứ hai" sẽ say-- 

ALLISON BUCHHOLTZ-AU: Tạm biệt. 

Đung - "THẾ GIỚI." Xin chào, tạm biệt. ALLISON BUCHHOLTZ-AU: Tôi thấy chúng trong buổi hòa nhạc tuần khác. Tomas Reimers: The Beatles? ALLISON BUCHHOLTZ-AU: Đối với tập số thực. Chúng không phải là tuyệt vời. Tôi không thích nó. 

Tomas Reimers: Chúng tôi có "HELLO" và "Goodbye". 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. Bạn không cần phải mặc lo lắng rằng chúng tồn tại. Họ làm. 

ALLISON BUCHHOLTZ-AU: Chúng tồn tại. 

Tomas Reimers: Vì vậy, tôi nghĩ rằng có CSS 255 từ để nói về màu sắc. 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. ALLISON BUCHHOLTZ-AU: Yeah. Tôi nghĩ các bạn có thể có chỉ đến ngay sau đó. 

Tomas Reimers: Vì vậy, ở đây, bạn sẽ thấy chúng tôi có hai hộp ngay trên đầu trang của mỗi khác, phải không? Hello và Goodbye. 

ALLISON BUCHHOLTZ-AU: Không có khoảng trống ở giữa. Họ chỉ smooshed ngay trên đầu trang của mỗi khác. 

Tomas Reimers: Vì vậy, điều đầu tiên Tôi nghĩ chúng ta nên nói về là chúng ta hãy cũng say-- yeah. Vì vậy, CSS đại diện cho họ là loại hộp. Và như hộp, họ có nội dung. Và các nội dung hiện nay là loại các Hello hoặc GOODBYE và đó là nó. OK? 

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. Padding nói bao nhiêu không gian nó nên để lại cho mỗi bên. 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. Và tôi sẽ phân tích rằng trong một giây. ALLISON BUCHHOLTZ-AU: Tất cả những điều ở đây đ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. Bạn sẽ thấy rằng nó có một số không gian xung quanh nó, phải không? 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 mỗi bên, trong đó nói rằng, như thế, OK, mình có một hộp của bạn content-- 

ALLISON BUCHHOLTZ-AU: Bạn có muốn chỉ cần kéo lên các yếu tố kiểm tra? 

Tomas Reimers: Vâng, đó là một ý tưởng tốt. 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 để tìm hiểu xem có điều gì đó xảy ra sai, một cái gì đó bất ngờ xảy ra, kiểm tra các thẻ và nhìn thấy những gì nó giống như ghi đè là hữu ích. 

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. Có thể bạn? Bạn sẽ thấy sung này trên các loại cạnh. Và sau đó bạn nhìn thấy thực tế nội dung trong xanh, phải không? Vì vậy, đó là rất vấn đề cơ bản của mô hình hộp. Bạn có nội dung. Sau đó, bạn có padding. 

Đung Tại sao bạn không chỉ cần sử dụng hộp bên the-- 

ALLISON BUCHHOLTZ-AU: Đúng vậy. Bởi vì nó chỉ cần lựa chọn các yếu tố ngay bây giờ. 

Tomas Reimers: Yup. Những điều khác. Vì vậy, chúng ta hãy nói về điều đó lệnh đệm cho một thứ hai. Vì vậy, trong CSS, đo lường cần phải có một đơn vị. Vì vậy, đầu tiên bạn phải số lượng. Vì vậy, trong trường hợp này, chúng tôi đã nói 10. Và sau đó là một tiếp theo chúng tôi đã nói là pixel, px. Những người khác mà bạn có thể có được những thứ như cm, inch. Bạn có thể làm những việc như thế, 10 inches là gì? Và nó sẽ là vô lý. 

ALLISON BUCHHOLTZ-AU: Oh, cậu bé. 

Đung Whoa. 

Tomas VÀ ALLISON: Yeah. Tomas Reimers: Vì vậy, đó là tất cả các padding. Tôi sẽ quay trở lại pixels. 

ALLISON BUCHHOLTZ-AU: Pixels xu hướng, như, tiêu chuẩn. 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. Tomas Reimers: Vì vậy, bạn sẽ thấy hoặc pixels-- những người khác mà bạn thấy là em, mà là một em là bằng chiều cao của font mà bạn đang sử dụng. 

ALLISON BUCHHOLTZ-AU: Mm. 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 là lấy. ALLISON BUCHHOLTZ-AU: Không biết điều đó. Bạn học được điều gì mới mỗi ngày. Tomas Reimers: Có một rất nhiều các phép đo trong CS. Tôi đề nghị bạn tìm họ. Đối với tất cả các trường hợp của bạn, tôi nghĩ pixel là đủ. Và họ cũng là những gì bạn sẽ thấy trong phần lớn các ví dụ thực hiện trực tuyến. Vì vậy, chúng tôi sẽ để nó ở pixels. 

Bạn cũng có thể, tôi nên say-- vậy bộ đệm tất cả các miếng đệm. Bạn cũng có thể làm một cái gì đó như "Padding-top" để chỉ set-- ALLISON BUCHHOLTZ-AU: Có thể chúng tôi sẽ có "HELLO" trở lại. Tomas Reimers: --Để chỉ cần thiết lập padding trên đầu và không có gì khác. Vì vậy, bốn lệnh là padding-top, padding-bottom, padding-left, và padding-right. 

ALLISON BUCHHOLTZ-AU: Cũng giống như bạn mong chờ cho một hộp. 

Tomas Reimers: Yeah. Không có gì quá điên rồ đó. Điều đó có ý nghĩa? Vì vậy, đó là padding. Tôi sẽ thiết lập tất cả các miếng đệm không trở lại đến 10. Và sau đó tôi sẽ chuyển sang biên giới. 

Vì vậy, những gì là biên giới là biên giới là một lệnh lạ. Nó có loại ba thứ cùng một lúc. 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. Một lần nữa, tôi chỉ sử dụng điểm ảnh. Và điều cuối cùng tôi nên thêm vào các phép đo là một trong những điều mà không cần một đơn vị là 0. Nó thực sự không chính xác để cung cấp cho một đơn vị 0, vì 0 là 0 trên inches, pixel, centimet, bất cứ điều gì. Tất cả chỉ có nghĩa là 0, phải không? Vì vậy, đầu tiên bạn cho nó đo. 

Sau đó, bạn cho nó phong cách. Vì vậy, tôi sẽ nói "rắn". Và chúng ta sẽ nói về điều đó có nghĩa. Và rồi cuối cùng, bạn cung cấp cho nó một màu sắc. Vì vậy, tôi sẽ nói "đen". 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, nhưng chúng ta sẽ nói về điều đó. Vì vậy, các bạn đã thấy phép đo, và bạn đã nhìn thấy màu sắc. 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? Các bạn xem cách chúng tôi đã làm điều đó? 

Đung Yeah. 

Tomas Reimers: Cool. Vì vậy, đó là những gì? Vì vậy, đầu tiên của tất cả, nó là một pixel. Đó là điều hiển nhiên đủ, phải không? Giống như, nó dày một pixel. 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 hơn thế. 

ALLISON BUCHHOLTZ-AU: Và chúng tôi có vô lý này có độ phân giải TV. 

Tomas Reimers: Yeah. Bạn có thể làm cho nó lớn hơn, nhỏ hơn, bất cứ điều gì. Vì vậy, đây là một biên giới hai-pixel. Bạn sẽ thấy đó là hai lần như dày. Điều tiếp theo bạn phải là màu sắc. Đó không phải là thú vị. Tôi sẽ không nói chuyện về điều đó, thực sự. 

ALLISON BUCHHOLTZ-AU: Nhưng phong cách có thể chỉ là một chút thú vị. 

Tomas Reimers: Yeah. Vì vậy, phong cách, có rất ít người mà tôi thấy sử dụng phổ biến. 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. Và đây là rải rác. Bạn sẽ thấy rằng họ đang một loạt các dấu chấm, phải không? 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. 

ALLISON BUCHHOLTZ-AU: Và dĩ nhiên, tôi chắc chắn có rất nhiều khác phong cách mà bạn có thể nhận được. 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 để loại kiểm tra nội dung và nhìn vào CSS mát mẻ hơn. 

Tomas Reimers: Và sau đó điều cuối cùng, chúng tôi sẽ nói về các mô hình hộp thực sự nhanh chóng. Oh, và sau đó biên giới, chính xác như đệm, bạn cũng có những thứ như cửa lại, cửa quyền, biên giới-top, biên giới-dưới, cho phép bạn để có được một biên giới cụ thể. Vì vậy, đây chỉ là biên giới trái quy định. Điều đó có ý nghĩa? 

ALLISON BUCHHOLTZ-AU: Đó là một mát mẻ cách để nhấn mạnh những điều hay thêm dây chuyền giữa các yếu tố khác nhau. Tomas Reimers: Tuyệt đối. Vì vậy, đó là biên giới của chúng tôi. Và lợi nhuận cuối cùng của. Đệm như Margin của ngoại trừ nó không within-- ALLISON BUCHHOLTZ-AU: Đó là không xung quanh phần tử của bạn nhưng thực tế xung quanh toàn bộ hộp mà chúng tôi đã nhìn thấy. 

Tomas Reimers: Yeah. Allison nói nó một cách hoàn hảo. Nó không phải, như thế, bên trong bạn yếu tố, đó là xung quanh toàn bộ hộp. Điều đó có nghĩa là những thứ như nền không áp dụng cho nó. Và nó về cơ bản nói, như thế, tôi không muốn bất cứ điều gì trong nhiều không gian này đối với tôi. Vì vậy, như ở đây chúng tôi có một lề của 10 pixels. Vì vậy, không có gì trong vòng 10 pixels nên được tiếp theo với tôi. Đó là loại của nó không gian nhưng loại không. Vì vậy, đó là rất vấn đề cơ bản của mô hình hộp. Điều đó có ý nghĩa? Mát mẻ, thoáng mát. ALLISON BUCHHOLTZ-AU: Awesome. 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 rằng chúng tôi sẽ đưa các bạn qua rất nhanh. Và chúng tôi sẽ actually-- tốt, chúng ta có internet chưa? 

Tomas Reimers: Hãy xem nếu tôi có thể mở up-- 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 trong khi Allison nói về bất cứ điều gì Allison muốn nói về. ALLISON BUCHHOLTZ-AU: Vì vậy, tôi không basically-- biết những gì khác tôi có thể nói tại thời điểm này. Nhưng đây là một số nguồn lực thực sự tốt. Đây là những người mà Tomas và tôi đã sử dụng và rằng chúng tôi thực sự dùng để chuẩn bị cho việc này. W3Schools là một mà bạn chàng trai nên đã thấy trước. Chúng tôi khuyên bạn nên nó cho một rất nhiều thứ với CSS. 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. 

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 và xem các thay đổi ngay lập tức trong này, như thế, hai cửa sổ xem mà nó có. 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, 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, và nhận được tất cả những công cụ làm việc. Nó được nhúng vào bên trong trang. 

Và nó có những chút những bài học mà bạn có thể đi qua để tìm hiểu thêm về selectors, 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. Và bạn có những kết quả tức thời mà bạn không cần phải làm bất cứ công việc chuẩn bị khác cho. Vì vậy, tôi yêu W3Schools. Đó là tuyệt vời. Là nó làm việc? 

Tomas Reimers: Yeah. Không, nó không phải. Bạn có muốn tôi thử và khởi động lại máy tính của tôi? Hay chúng ta muốn với: 

ALLISON BUCHHOLTZ-AU: Tôi có nghĩa là, tốt, điều này cũng sẽ được trực tuyến. Tất cả các slide sẽ được trực tuyến. Vì vậy, tôi chỉ khuyên bạn nên làm những. 

Điều này là rất tốt vì chỉ giống như một tờ cheat. Nó chỉ là tất cả các cơ bản lệnh mà bạn có. Thật tuyệt vời khi bạn đầu tiên bắt đầu trang web của bạn. Bởi vì có thể bạn không muốn nhận được vào tất cả nitty thực gritty thiết kế nặng thứ. 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í làm cho thời gian được. Và nếu bạn thực sự muốn để có được vào nó, tôi biết này là, như, một trong những Tài liệu tham khảo yêu thích của Tomas. Chúng tôi đã sử dụng nó để chuẩn bị, và nó là tuyệt vời. Đó là phát triển đến từ Mozilla. 

Tomas Reimers: Vì vậy, Mozilla là những người làm cho Firefox. 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. Và nó có một tuyệt vời danh sách các tài nguyên. Vì vậy, chúng tôi have-- 

ALLISON BUCHHOLTZ-AU: Và sau đó lưu ý cuối cùng là khi bạn đang cố gắng để thiết kế trang web của bạn, lấy cảm hứng từ những điều mà bạn nghĩ là đẹp. Kiểm tra các yếu tố, kiểm tra mã nguồn có thể được siêu hữu ích cho cố gắng tìm ra làm thế nào để tạo kiểu cho trang web của riêng bạn. 

Thông thường, tôi cảm thấy ưng ý nhất cách, bên cạnh việc thử nghiệm, chỉ là để nhìn vào điều đó là khá. 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, đặc biệt là trong đầu. Vì vậy, hãy nhìn vào trang web mà bạn thích nhìn. Tìm ra những gì làm cho chúng hấp dẫn cho bạn. Và sau đó cảm thấy tự do cố và nhân rộng đó. 

Tomas Reimers: Đúng vậy. Ngay cả như các trang web như thế này, bạn có thể nhìn thấy có chắc chắn là một div ở đầu trang. Và sau đó bạn có một div bên trong ở đây, đó là CSS khiếp sợ. Và sau đó bạn có một loạt các liên kết ở đây. Nếu bạn thực sự chỉ kiểm tra yếu tố, bạn có thể sắp xếp của bắt đầu thấy những gì trang web như thế nào, và làm thế nào tôi có thể lại rằng nếu tôi muốn. Điều đó có ý nghĩa? Vì vậy, chúng tôi chỉ có ba phút còn lại. Vì vậy, câu hỏi? Bất kỳ trong số họ? Vâng. 

Đung Đối với màu sắc hình chữ nhật, như thế nào sẽ bạn have-- nếu bạn không muốn nó đi trên toàn bộ trang, có thể bạn đã làm cho nó đi qua chỉ trang nửa hay chỉ là văn bản? 

Tomas Reimers: Yeah, hoàn toàn. Vì vậy, hãy để tôi thấy thực sự. Tôi có hai ý tưởng. Vì vậy, trước hết, bạn cũng có thể sử dụng phần trăm. 

Đung Really? 

ALLISON BUCHHOLTZ-AU: Vì vậy, một cái gì đó nhìn lên là vị trí tương đối. Đó là một cái gì đó mà chúng ta không có thời gian để có được vào, nhưng đó là điều tôi chắc chắn đề nghị các bạn kiểm tra ra. 

Tomas Reimers: Vậy phần trăm. Và xem cách chúng tôi đã làm cho nó chỉ 50% độ rộng? ALLISON BUCHHOLTZ-AU: Nếu bạn thực sự biết số lượng điểm ảnh, bạn có thể được chính xác hơn theo cách đó. Bạn có thể fiddle xung quanh với nó. Nhưng 50%. 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. 

Tomas Reimers: Vâng, đó là về cơ bản 50% ngay bây giờ, tôi nghĩ. Đó là 50%, và sau đó biên độ đã được thêm vào đó. CSS có rất nhiều tật. Vì vậy, ngay bây giờ đây là 50% độ rộng trang. Nhưng hãy nhớ rằng bạn có 10 pixel lấy ra từ mỗi phía. 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, sau đó nó sẽ trông giống như 50%. 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. Giống như, bạn nghĩ rằng có điều gì đó sẽ hành xử một cách, nhưng nó cư xử một cách hoàn toàn khác nhau. 

ALLISON BUCHHOLTZ-AU: Và bạn chỉ nên thông minh hơn, 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. 

Tomas Reimers: Và nó sẽ tồi tệ hơn và tồi tệ hơn. Vì vậy, nó thực sự chỉ là một cuộc đua. 

ALLISON BUCHHOLTZ-AU: Đó là siêu đáng khích lệ. Chúng tôi muốn họ thích CSS. 

Tomas Reimers: CSS là awesome. Hãy nhớ rằng. Các câu hỏi khác? 

ALLISON BUCHHOLTZ-AU: Có vài điều. Bất cứ điều gì khác? Cool. 

Tomas Reimers: Awesome. 

ALLISON BUCHHOLTZ-AU: Vâng, nếu bạn guys có bất kỳ câu hỏi sau này, chúng tôi luôn có sẵn như bình thường. Có thể bạn sẽ thấy một số của chúng tôi để sản phẩm cuối cùng và chắc chắn ở hackathon. 

Tomas Reimers: Tuyệt đối. Và tại hội chợ. 

ALLISON BUCHHOLTZ-AU: Và tại hội chợ. Oh. 

Tomas Reimers: Rất mong nhận được nhìn thấy tất cả awesome-- của bạn 

ALLISON BUCHHOLTZ-AU: Chúng tôi sẽ xem tất cả các trang web tuyệt vời của bạn rằng sẽ đẹp. Tomas Reimers: Bạn có thể luôn luôn thấy, giống như, các trang web đã có, như, CSS tốt và sau đó giống như những người đã không cố gắng để làm CSS. ALLISON BUCHHOLTZ-AU: Ngoài ra, một điều, một điều nữa để nhìn vào là Bootstrap. Vì vậy, Bootstrap là tuyệt vời. 

Tomas Reimers: Google rằng nếu you-- 

ALLISON BUCHHOLTZ-AU: Google nó. Đó là tuyệt vời. Bạn sẽ thích nó. Và bây giờ bạn có một sự hiểu biết cơ bản của CSS, nó sẽ có ý nghĩa hơn rất nhiều. Awesome. Thanks, guys. 

Tomas Reimers: Cảm ơn bạn rất nhiều.