[MUSIC CHÆ I] 

DOUG LLOYD: Vì vậy, chúng ta hãy thêm một video để nói về một ngôn ngữ hơn. Lần này chúng ta sẽ nói về CSS. Vì vậy, CSS, mà là viết tắt Cascading Style Sheets, là một ngôn ngữ khác, chúng tôi sử dụng khi xây dựng trang web. Hãy suy nghĩ về nó như thế này. Nếu HTML là những gì chúng tôi sử dụng để tổ chức các nội dung, chúng tôi muốn đặt trên trang của chúng tôi, CSS là công cụ mà chúng ta thường sử dụng để tùy chỉnh cách trang web của chúng tôi nhìn, và làm thế nào những trải nghiệm người dùng thực sự là, tương tác với trang web của chúng tôi. 

Tương tự như HTML, CSS là không phải là một ngôn ngữ lập trình. Nó không có logic. Nó không có các biến. Nó không có bất kỳ loại đó chảy những thứ liên quan mà C không. Nó là một ngôn ngữ tạo kiểu. Và cú pháp của nó là khá đơn giản, và cũng chỉ mô tả làm thế nào các yếu tố của chúng tôi Trang có HTML nào đó yếu tố cần được sửa đổi. Cuối cùng, nếu bạn chưa có chưa xem video của chúng tôi trên HTML, hoặc không quen với HTML thông thường, bạn có thể muốn có một cái nhìn lúc đó đầu tiên, bởi vì cuộc thảo luận này của CSS sẽ phụ thuộc vào một số kiến ​​thức về HTML. 

Vì vậy, đây là một thực sự đơn giản CSS stylesheet. Ngay cả khi bạn chưa bao giờ lập trình với CSS trước, Tôi chắc rằng bạn có thể tìm ra chính xác những gì kiểu này không. Nó làm gì? Vâng, áp dụng đối với cơ thể của web của chúng tôi trang, tất cả mọi thứ giữa các thẻ cơ thể vào HTML của chúng tôi, và nó đặt màu nền của trang sang màu xanh. Vâng, đó là một kiểu rất đơn giản. Nó thực sự rất con người ngôn ngữ thân thiện, CSS. Vì vậy, ngay cả khi bạn chưa bao giờ sử dụng nó trước, bạn có thể có thể đoán những gì đã làm. Trong thực tế, nếu chúng ta nạp một trang, nơi stylesheet này được nhúng bằng cách nào đó, màu nền của trang của chúng tôi sẽ có màu xanh, và không phải là màu trắng tiêu chuẩn. 

Vì vậy, làm thế nào để chúng ta xây dựng stylesheets? Cũng lần đầu tiên, chúng ta phải xác định một chọn. Trong ví dụ trước, selector đó là cơ thể. Sau đó, chúng tôi có một mở ngoặc móc, và chúng tôi sẽ bắt đầu xác định stylesheet cho selector đó. Ở giữa dấu ngoặc nhọn, chúng tôi chỉ có một danh sách các cặp giá trị quan trọng. Các cặp giá trị trước đó là màu nền màu xanh chấm phẩy, nhưng chúng ta có thể làm được nhiều hơn và nhiều hơn nữa trong số này. Bạn có thể có nhiều điều áp để mà tag, mà cơ thể selector. Mỗi người trong số họ bị ngăn cách bởi một dấu chấm phẩy, và chúng tôi kêu gọi mỗi người trong số họ một tuyên bố, một tờ khai CSS. Khi chúng tôi đang thực hiện với tất cả các kiểu dáng chúng tôi muốn áp dụng cho rằng tag đặc biệt, chúng ta chỉ có một xoăn đóng cú đúp để kết thúc kiểu, và chúng tôi đang thực hiện việc xác định các kiểu cho rằng chọn đặc biệt. 

Một số thuộc tính CSS chung là gì? Vâng, có lẽ bạn muốn đặt một đường viền xung quanh một cái gì đó. Vì vậy, bạn có thể nói, biên giới, đó sẽ là chìa khóa của bạn, và sau đó giá trị của bạn sẽ được, những gì phong cách, màu sắc, và chiều rộng bạn muốn nó được. Vì vậy, các phong cách có thể là một chất rắn đường, một đường chấm chấm, một nét đứt, một đường sống núi, đó sẽ là đường lượn sóng. Có lẽ bạn muốn có nó có màu xanh hoặc màu đen hoặc màu xanh lá cây. Có lẽ bạn muốn nó được 1 hoặc 2 hoặc 10 pixels. Bạn có thể chỉ định tất cả những điều đó. Có lẽ bạn muốn thiết lập nền màu sắc của trang của bạn trong một cách đặc biệt. Chúng ta đã thấy rằng, việc thiết lập nền của cơ thể là màu xanh. 

Sau đó, bạn có thể sử dụng một từ khóa, vì vậy CSS có màu sắc nhất định được xây dựng vào nó, xanh dương, xanh lá cây, màu đen, một màu sắc rất đơn giản, chúng tôi biết. Nhưng bạn cũng có thể chỉ định bất kỳ hex màu sắc mà bạn muốn. Nhớ lại rằng màu sắc có thể được xác định bởi một bộ ba số hex 0-255, rg và b, màu đỏ, xanh lá cây, và màu xanh thành phần. Và vì vậy chúng tôi có thể xác định bất kỳ màu theo ý muốn bằng cách, thay vì sử dụng màu xanh hoặc màu xanh lá cây hoặc màu đen, sử dụng bảng Anh và sau đó sáu chữ số hex, và đó sẽ cung cấp cho chúng tôi màu sáu chữ số. Vì vậy, đó là màu nền. 

Chúng tôi cũng có tiền cảnh màu sắc, mà thường là sẽ được các văn bản của trang của bạn. Và tương tự như vậy bạn có thể làm điều đó với từ khóa và hay sáu chữ số hex. Vì vậy, bạn có thể chỉ định bất kỳ màu nào bạn muốn cho các văn bản của trang của bạn đối với một đặc biệt màu nền, lên trên. Bạn cũng có thể thay đổi và đối phó với font chữ, và cách thức văn bản được hiển thị trên trang. 

Vì vậy, bạn có thể thay đổi kích thước font chữ của bạn. Bạn có thể sử dụng các từ khóa, ví dụ như thêm, thêm nhỏ, hoặc xx nhỏ, hoặc trung bình, lớn, và như vậy. Bạn có thể sử dụng các điểm cố định, 10 điểm, 12 điểm, và như vậy. Bạn có thể sử dụng tỷ lệ phần trăm, 80%, 20%, trong đó 100% là các phông chữ mặc định kích thước, mà thường là sẽ là một cái gì đó giống như 11 hoặc 12 điểm. Hoặc thậm chí bạn có thể căn cứ nó đi kích thước phông chữ gần đây nhất. Nếu bạn chỉ viết một cái gì đó và bạn biết những gì bạn muốn là cho nó nhỏ hơn, nhưng bạn không biết chính xác những gì kích thước bạn muốn nó được, tốt, bạn có thể chỉ cần nói, kích thước phông chữ nhỏ hơn. Và nó sẽ căn cứ tắt của, chỉ lên trên, đó là kích thước font. Và bạn có thể nhận được nhỏ hơn hoặc lớn hơn. Vì vậy, có rất nhiều khác nhau cách để xác định kích thước font. 

Bạn cũng có thể xác định những gì gia đình font bạn muốn. Nếu bạn có một đặc biệt tên, có một cách trong CSS-- chúng tôi sẽ không nói về nó here-- để xác định một kiểu chữ rất cụ thể và nhúng nó vào trang của bạn. Bạn cũng có thể sử dụng tên chung. Có rất nhiều phông chữ web an toàn được xác định trước trong CSS. Và nếu bạn là một người sử dụng của Microsoft Văn phòng trong 20 năm qua, bạn có thể quen với rất nhiều các phông chữ web an toàn đã, Times New Roman, Arial, Chuyển phát nhanh mới, Georgia, Tahoma, Verdana, và như vậy. Những người được coi là tất cả các phông chữ web an toàn. Và trên thực tế, một phần của Lý do họ đã đến được đã được sử dụng để làm web-- mỗi trang đã truy cập mặc định này đặt các phông chữ với serifs khác nhau, và tất cả điều này thứ chữ, chúng tôi sẽ không nhận được vào, nhưng thường truy cập trong CSS của bạn, thậm chí nếu bạn không nếu không xác định phông chữ. Cuối cùng, bạn có thể sắp xếp văn bản của bạn, thay vì nó là, theo mặc định, phù hợp sang bên trái, bạn có thể sắp xếp nó sang bên phải, hoặc bạn có thể sắp xếp nó làm trung tâm, hoặc hợp lý để nó đánh cả hai lề. Vì vậy, đó là tất cả các tùy chọn mà bạn có thể sử dụng để thay đổi văn bản của bạn trông như thế nào, và làm thế nào nó được hiển thị trên trang của bạn. 

Selectors của bạn không phải có thẻ chỉ. Trước đây chúng ta đã thấy một cơ thể tag chọn, và chọn thẻ trông chỉ như thế. Bạn đặt tên cho một từ khóa, và sau đó bạn xác định một stylesheet cho tag đó. Nhưng bạn cũng có thể làm điều gì đó được gọi là một bộ chọn ID. Một bộ chọn ID trông khá tương tự. Nhưng cần chú ý, mà bây giờ tôi không sử dụng một thẻ HTML, tôi đang sử dụng, trong trường hợp này, #unique, hoặc băm độc đáo. Nếu bạn nhớ lại từ chúng tôi video trên HTML, chúng tôi nói chuyện khoảng cách các thẻ có thể có các thuộc tính. 

Và một trong những thuộc tính mà áp dụng khá nhiều tất cả các thẻ HTML, nhưng chúng tôi không nói về nó, là một cái gì đó gọi là thẻ ID. Vì vậy, CSS đặc biệt này sẽ chỉ áp dụng cho thẻ HTML mà có một ID rất cụ thể, mà bạn đã đặt tên. Vì vậy, nếu bạn có một nơi nào đó trong mã của bạn, một nơi nào đó trong tập tin HTML của bạn, một thẻ và bạn xác định như là một thuộc tính thẻ đó, ID bằng độc đáo, đây Đặc biệt stylesheet ở đây sẽ chỉ áp dụng ở giữa mà tag với ID của độc đáo. 

Bạn cũng có thể làm điều gì đó được gọi là một bộ chọn lớp. Vì vậy, ngoài việc có ID thuộc tính, bạn cũng có thể thêm một thuộc tính lớp để các thẻ HTML. Và khi bạn sử dụng một thuộc tính lớp, nó có thể được áp dụng cho nhiều thẻ. Vì vậy, nếu bạn có một vài điều mà được tương tự, có lẽ bạn muốn nói, tag mở blah, blah, blah, blah, lớp học bằng các học sinh. Và sau đó đặc biệt này stylesheet sẽ áp dụng để mỗi thẻ có class là sinh viên. Trong trường hợp này, chúng tôi muốn đặt màu nền sang màu vàng, và chúng tôi muốn thiết lập opacity, mà là một từ khóa, chúng tôi đã không nói chuyện về, nhưng chỉ đề với cách minh bạch một cái gì đó là, đến 70%, trong trường hợp này. 

Có hai lựa chọn cho viết stylesheet. Bạn có thể viết chúng trực tiếp vào HTML của bạn bằng cách đặt các stylesheets ở giữa các thẻ style. Và những thẻ phong cách đi vào bên trong của các thẻ đầu của trang web của bạn. Cách có lẽ nhiều người ưa thích để làm nó là để viết một tập tin .css riêng biệt, và sau đó liên kết nó thành của bạn tài liệu bằng cách sử dụng thẻ liên kết. Thẻ liên kết, một lần nữa, là khác nhau từ các siêu liên kết, nếu bạn nhớ lại từ video của chúng tôi một HTML. Và thẻ liên kết là cách chúng tôi kéo trong các tập tin riêng biệt. Nó gần giống như tương đương với # include cho lập trình web. 

Vì vậy, chúng ta hãy nhìn vào table.HTML. Nếu bạn nhớ lại từ chúng tôi Video HTML, tôi thấy một ví dụ về một rất nhân đơn giản bảng trông khá xấu xí, và có thể có một cách để làm cho nó tốt hơn với CSS, để làm cho nó thực sự nhìn giống như một phép nhân bảng, hoặc cái gì đó không phải là chỉ dính nhau không có bộ phận thực tế giữa các hàng và các cột. Vì vậy, hãy đi qua để CS50 IDE, và có một cái nhìn cách CSS có thể, loại, tinh chỉnh những gì chúng ta bắt đầu với trước, và làm cho nó một cái gì đó tốt hơn rất nhiều. 

Vì vậy, chúng tôi đang ở trong CS50 IDE bây giờ, và nếu không quen thuộc, chúng ta sẽ kéo lên trong này bảng trang HTML. Table.HTML cơ bản chỉ xác định các nội dung của một multiple-- nó được cho là có một bảng cửu chương bốn bốn. Nó khá dễ hiểu. Và chúng ta sẽ nghĩ rằng nó sẽ nhìn tổ chức khá tốt. Nhưng trong thực tế, khi chúng ta xem trước trang này, chúng ta thấy rằng nó là loại xấu xí, phải không? Rõ ràng chúng ta có hàng và cột ở đây. Có một số loại ly thân. Nhưng nó không phải là một sự tách biệt có ý nghĩa. Chúng tôi không thực sự nhận được quá nhiều thông tin ở đây. Và không có sự tách biệt giữa các hàng và cột về các quy tắc ngang hoặc dọc. Chúng tôi có thể có thể thực hiện điều này nhìn một chút tốt hơn. Vì vậy, hãy cố gắng. Vì vậy, tôi sẽ đóng tab này lên đây. Và tôi sẽ đóng table.HTML của tôi, và tôi có một phiên bản khác tại đây gọi table2.HTML. Chúng tôi sẽ mở mà lên. Cơ thể của trang là khá giống nhau, nhưng tôi đã thay đổi chút ở đầu trang. Và tôi sẽ di chuyển lên đây. Chú ý rằng thời gian này, tôi sử dụng các thẻ phong cách nhúng. Tôi đã mở một thẻ phong cách, và tôi bây giờ xác định một kiểu CSS chỉ bên trong của nó. Tôi có một kiểu mà nói, bảng. Đó là chọn từ khóa của tôi. Tôi không sử dụng dấu chấm hoặc băm, mà tôi sẽ làm nếu tôi đã được sử dụng một ID hoặc chọn lớp. Tôi có một chọn thẻ bảng here--. Phong cách này sẽ áp dụng đối với mỗi thẻ bảng. Rõ ràng tôi muốn đặt một một điểm ảnh rộng, đường viền màu xanh rắn, bên bàn của tôi. Đó là âm thanh như nó sẽ có thể giúp tình hình, phải không? Chúng ta sẽ có những điều trông tốt hơn rất nhiều. Vì vậy, điều này là tốt. Phong cách, tôi đã chỉ nhúng stylesheet của tôi ở đây. Nó chắc chắn là một cách chấp nhận được để làm điều đó. Hãy xem những gì trông như thế nào. Vì vậy, tôi sẽ quay trở lại xuống đây, và Tôi sẽ sẽ xem trước table2.HTML của tôi. Vâng, đó không hẳn là những gì tôi muốn, nhưng nó là chính xác những gì chúng tôi yêu cầu. Chúng tôi cho rằng phong cách này là sẽ áp dụng để bàn của chúng tôi. Bảng của chúng tôi bây giờ có một một điểm ảnh rộng, rắn viền màu xanh xung quanh nó. Chúng tôi không thực sự nhận được tại các ô của bảng. Chúng tôi chỉ nhận được tại bàn. Vì vậy, CSS làm việc. Nó đã áp dụng một stylesheet để bàn của chúng tôi. Nhưng không hoàn toàn làm những gì chúng tôi muốn nó làm. Làm thế nào để chúng ta có được để làm những gì chúng ta muốn nó làm gì? 

Vâng, chúng ta hãy xem một trong nhiều phiên bản này trong table3.HTML. Vì vậy, tôi chỉ cần đi để đóng các tab. Tôi sẽ quay trở lại qua đây để tôi nộp cây, và mở ra table3.HTML. Một lần nữa, nó sẽ trông khá tương tự ở đây lúc đầu. Nhưng thông báo, thời gian này, thay vì sử dụng một kiểu nhúng ngay trong đó, Tôi sẽ liên kết trong một stylesheet bằng cách sử dụng thẻ liên kết. Vì vậy, tôi dường như liên kết trong một stylesheet gọi tables.CSS, và cũng bằng này stylesheet chỉ means-- tốt, tập tin này liên quan đến những gì là những gì Tôi doing-- là một kiểu mà tôi sử dụng cho trang web của tôi. Vì vậy, nếu tôi thực sự muốn nhìn thấy những gì Tôi đang làm với CSS ở đây, Tôi cần phải đi mở table.CSS nộp là tốt. Vì vậy, chúng tôi sẽ quay trở lại qua đây một lần nữa để cây tập tin của chúng tôi. Có table.CSS. Chúng tôi sẽ bật nó mở. Bây giờ chúng ta đang thấy một chút của CSS. Rõ ràng, tôi có một cặp vợ chồng điều đang xảy ra ở đây. Tôi dường như muốn đặt một năm điểm ảnh rộng, đường viền màu đỏ rắn, xung quanh bàn của tôi. Chúng tôi đã biết rằng đó là đi chỉ cần đi theo chu vi. Chúng tôi thấy rằng trong table2.HTML. Với mỗi hàng, tôi dường như muốn xác định rằng chiều cao hàng là 50 điểm ảnh cao. Vì vậy, cho mỗi hàng, nhớ đó là những gì các tag tr nào, Tôi đang làm cho nó 50 điểm ảnh cao. 

Cuối cùng, tôi có nhận xét này. Và đây là cách chúng tôi thực hiện ý kiến ​​trong CSS. Nó rất giống để nắm bắt khối comments sao slash cú pháp. Tất cả các văn bản mà bạn muốn. Không có dấu gạch chéo slash mặc dù trong CSS. Đối với ý kiến ​​ngắn nội tuyến, chúng tôi có sử dụng định dạng này đặc biệt ở đây. Dường như tôi đang làm một rất nhiều điều trong thẻ td của tôi. Ghi thẻ td, hoặc bàn dữ liệu, mà thực sự chỉ là các cột bên trong hàng của chúng tôi, và rõ ràng cho mỗi phần dữ liệu trong bảng của tôi, tôi muốn để thiết lập màu nền cho có màu đen, màu sắc để có màu trắng, màu sắc là màu nền trước. Vì vậy, đây sẽ là các văn bản của trang web của tôi. Tôi muốn phông chữ lớn, 22 trỏ font, và tôi muốn nó là của gia đình font, Georgia. Vì vậy, tôi sẽ không để có các font mặc định. Tôi sẽ chỉ định Georgia, mà là một trong những phông chữ web an toàn mà chúng ta đã thấy trước đây. Tôi muốn văn bản của tôi phải được liên kết trung tâm, ở giữa hộp, Tôi không muốn nó bị bỏ lại phù hợp hoặc phải phù hợp. Và tôi muốn chiều rộng cột của tôi là 50 pixels rộng là tốt. Chúng ta hãy nhìn vào điều này có vẻ như, và xem nếu điều này có lẽ là một sự cải tiến. Vì vậy, tôi sẽ đi đến table3.HTML, mà thu hồi, bao gồm table.CSS như một liên kết, và chúng tôi sẽ xem trước nó. Đó là tốt hơn rất nhiều, phải không? Điều này thực sự bắt đầu xem xét một rất nhiều giống như một bảng cửu chương. Tôi đã có đường viền màu đỏ xung quanh bàn của tôi nhưng bây giờ Tôi cũng đã xác định rằng mỗi hàng là 50 pixels, hoặc đó là 50 pixels tall-- cớ me-- mỗi cột là 50 pixels. Các dữ liệu trong mỗi cột, và chỉ các dữ liệu, có một nền đen. Vì vậy, đó là lý do tại sao những người đường trắng là có. Bởi vì trong không gian giữa tất cả các tế bào, nó không phải là một biên giới và của chính nó, nó chỉ Tôi chỉ điền vào tế bào, mà thực sự làm cho các đường viền của bảng, mà dường như đã tồn tại từ lâu, nó là đường trắng chỉ mỏng. Bây giờ họ đang nhìn thấy được. Bây giờ chúng vọt ra trên màn hình. Và do đó, đây là một rất đơn giản stylesheet mà tôi đã áp dụng, và bây giờ bàn của tôi trông rất giống như một bảng bốn bốn nhân, thay vì một mớ hỗn độn chỉ lộn xộn, nơi mọi thứ rõ ràng là các hàng và cột, nhưng tổ chức không phải là siêu tốt. Chúng tôi đang thực sự chỉ trầy xước bề mặt về những gì bạn có thể làm với CSS ở đây. May mắn là các tài liệu CSS là khá đơn giản. Bạn sẽ sử dụng một số dạng của nó thuộc tính, khá thường xuyên. Những người chúng tôi nói chuyện về trước đó trong video này. Có một số bạn có thể sẽ không sử dụng tất cả. Và đó là tốt, quá. Nhưng chỉ cần biết, rằng có một rất nhiều tài liệu trên mạng. Vì vậy, ngay cả khi chúng tôi đã không bao gồm tất cả mọi thứ, bạn chắc chắn không phải trái trên của riêng bạn. Nhưng CSS là thực sự vui vẻ để thử nghiệm. Và tôi thật sự khuyến khích bạn để chơi xung quanh với các trang web của bạn, và xem làm thế nào bạn có thể làm cho họ xem và cảm nhận để cải thiện cho người sử dụng kinh nghiệm của quý khách đến thăm trang web của bạn. Tôi Doug Lloyd. Đây là CS50.