[Powered by Google Translate] [CSS] [Joseph Ong - Đại học Harvard] [Đây là CS50. - CS50.TV] 

Hôm nay chúng ta sẽ nói về CSS Cascading Style Sheets. 

Vì vậy, những gì chính xác là CSS? Vâng, chúng ta hãy phá vỡ CSS hạn xuống thành 2 phần: Cascading Style Sheets. Cascading là một ít phức tạp hơn, và đó là một cái gì đó chúng ta sẽ đề cập đến trong đoạn video khác. Tuy nhiên, để bắt đầu, Style Sheets gợi ý rất nhiều vào những gì CSS không. Nó cho biết thêm phong cách cho HTML của một trang web, thay đổi trang web như thế nào về mặt thẩm mỹ trông. Điều này có nghĩa là tất cả mọi thứ từ các phông chữ của văn bản đến các vị trí của nội dung trên trang đến những thứ khác mát mẻ như làm cho các góc của một hộp tròn hoặc thêm bóng vào văn bản. Bạn thậm chí có thể làm những điều điên như làm cho mọi việc sinh động trên màn hình. 

Vì vậy, làm thế nào để chúng ta sử dụng CSS với HTML? Hãy trang web này kém tôi chỉ viết. Nếu Rob xem tại trang web này ngay bây giờ, ông có thể nói một cái gì đó như, "Wow giới thiệu của tôi trông! Khủng khiếp. Joseph, bạn là một nhà thiết kế khủng khiếp." "Sử dụng mặc định phông Times Helvetica là tốt hơn rất nhiều." 

Vì vậy, những gì có thể là cách đơn giản nhất để áp dụng các kiểu dáng Rob muốn? Các lô cách rõ ràng nhất của những người ban đầu đã viết CSS là đặt những gì chúng ta gọi là phong cách khai báo đúng trong các yếu tố chính nó bằng cách sử dụng thuộc tính style HTML. Một tuyên bố phong cách đơn giản bao gồm các tài sản CSS của phần tử HTML, chúng tôi muốn thay đổi theo sau bởi một dấu hai chấm tiếp theo là giá trị mới của tài sản và dấu chấm phẩy ở cuối. Ví dụ, chúng ta hãy nói rằng Rob muốn có một đường viền màu đen xung quanh giới thiệu của mình. Đầu tiên chúng ta đặt thuộc tính style div Rob ở đây sau đó bên trong dấu ngoặc kép đặt một tờ khai CSS: "Border: 1px solid black;" Pixel 1 đề cập đến chiều rộng của biên giới, rắn đề cập đến phong cách của biên giới, và màu sắc cuối cùng xác định những gì là màu của biên giới. 

Nếu chúng ta muốn nhiều phong cách trên một phần tử, viết các tờ khai theo thứ tự. Ví dụ, nếu Rob muốn tiêu đề văn bản của mình trong Helvetica với một nền màu xanh và không gian xung quanh văn bản, chúng ta có thể làm điều này: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Dấu chấm phẩy cuối cùng thực sự là tùy chọn, nhưng người ta thường giữ nó trong cho vì lợi ích của tính nhất quán của. 

Chúng tôi sẽ tiết kiệm được giải thích một số mát và phức tạp hơn thuộc tính CSS video khác. Nếu bạn có một cái gì đó trong tâm trí, chỉ cần Googling hiệu ứng bạn muốn tiếp bằng CSS có lẽ sẽ cho bạn kết quả khá tốt. Điều thú vị là rằng CSS là khá rộng, do đó, tỷ lệ cược là nếu có bất cứ điều gì bạn muốn làm trong vòng lý do - CSS có thể có thể làm điều đó. Chúng tôi gọi đây là loại của kiểu dáng phong cách nội tuyến. Các phong cách là yếu tố, tốt, phù hợp với thẻ bắt đầu. 

Đối với folks người thực sự muốn được tổ chức, bạn có thể bắt đầu nhận được một ít peeved lộn xộn này tất cả sẽ. Hãy tưởng tượng nếu bạn phải làm điều này cho tất cả các yếu tố trên trang, cộng với HTML và CSS của bạn là tất cả trộn lẫn và lộn xộn. Gross, phải không? Để sửa lỗi này, mọi người cuối cùng bắt đầu đánh bắt trên để tách HTML của họ đánh dấu từ phong cách CSS của họ bằng cách sử dụng một cái gì đó được gọi là bộ chọn CSS. Selectors CSS được sử dụng để lựa chọn các yếu tố để tờ khai được áp dụng. Một bộ chọn kết hợp với một danh sách các tờ khai CSS thường được gọi là một quy tắc CSS. Những quy định này sẽ được đặt giữa các thẻ phong cách mở và đóng HTML, thường trong phần đầu của tài liệu. 

Nó dễ dàng hơn để xem với một ví dụ, do đó, chúng ta hãy bắt đầu bằng cách tạo ra một quy tắc CSS đơn giản. Trước tiên, chúng ta hãy đặt thẻ phong cách trong phần đầu của HTML của chúng ta. Tiếp theo, chọn. Chúng tôi sẽ bắt đầu bằng cách sử dụng một trong các selectors đơn giản, biểu tượng băm, lựa chọn một phần tử HTML thuộc tính ID của nó. Trong trường hợp này, chúng ta sẽ chọn div đại diện cho giới thiệu Rob bằng cách gõ các ký tự hash tiếp theo ID của div, cướp. Bây giờ các tờ khai. Chúng tôi thêm dấu ngoặc mở và đóng và thay đổi tờ khai trước đó nội tuyến của chúng tôi trên div Rob bên trong các dấu ngoặc, làm mới, và mát mẻ, Rob giới thiệu vẫn có một đường viền đen xung quanh nó trừ đi sự xấu xí lộn xộn nội tuyến. 

Bây giờ, nếu chúng tôi muốn chọn bên trong h1 intro Rob? Bạn có thể nghĩ, "Chúng ta hãy đặt một ID vào nó và sau đó di chuyển phong cách trước đây của chúng tôi." Điều đó làm việc, nhưng CSS có những cách khác cho phép bạn chọn các yếu tố bằng cách sử dụng những gì chúng ta gọi là combinators để trộn chọn đơn giản. Ví dụ, một ký tự khoảng trắng có thể được sử dụng như là một combinator để xác định tất cả các trường hợp của 1 chọn sống bên trong của bộ chọn khác. Đó là âm thanh rất nhiều phức tạp hơn thực tế. Dưới đây là một ví dụ. Chúng tôi sẽ gõ # cướp, thêm một không gian, và theo nó với một h1, khác chọn đơn giản gọi là một chọn từ khóa mà chọn loại yếu tố như divs hoặc đoạn văn. Không gian kết hợp 2 của chúng tôi chọn đơn giản, áp dụng tất cả các tờ khai CSS và các dấu ngoặc nhọn để thẻ h1 sống bên trong các phần tử với id = "cướp". Chỉ cần để thuyết phục bạn rằng nó hoạt động, tôi sẽ thay đổi màu chữ thành màu trắng, làm mới, và, nhìn, tiêu đề của Rob là màu trắng. 

Tất cả các công việc này đi để cho thấy rằng bằng cách sử dụng các quy tắc thay vì phong cách nội tuyến chúng ta có thể nhận được nhiều mã sạch hơn. Trong thực tế, nếu khối này phong cách bắt đầu nhận được một chút lớn, Tôi thậm chí có thể kéo các phong cách vào một tập tin khác nhau hoàn toàn. 

Để bao gồm các tập tin mới như CSS trong tài liệu này, tôi sẽ chỉ sử dụng thẻ liên kết của HTML. Ở đây tôi đang nói với nó rằng tôi đang liên kết trong tờ mẫu bên ngoài, thuộc tính rel, và xác định đường dẫn đến tập tin với thuộc tính href của tôi. HTML của tôi đánh dấu và CSS được tổ chức độc đáo trong các tập tin hoàn toàn riêng biệt, mà là hầu như luôn luôn là cách thiết kế thích làm việc với HTML và CSS. 

Trong trường hợp bạn đang tự hỏi, chọn đơn giản bao gồm selectors ID và thẻ selectors như những người chúng tôi chỉ thấy cũng như các lớp chọn để lựa chọn các yếu tố với một lớp học nào đó, thuộc tính chọn để lựa chọn các yếu tố của các thuộc tính khác như loại = "radio" cho đầu vào nút radio, và pseudoselectors như di chuột và tập trung để xác định phong cách khi tương tác thích khi rê chuột lên một yếu tố xảy ra. 

Các combinators thông thường bao gồm khoảng trắng cho tất cả trẻ em và dấu phẩy để phân biệt selectors. Những người khác bạn có thể gặp phải bao gồm các mũi tên chỉ cho trẻ em trực tiếp, dấu ngã cho tất cả các anh, chị, em ruột xảy ra sau khi các phần tử, và dấu cộng cho anh chị em 1 ngay lập tức sau khi các phần tử. 

Bằng cách kết hợp các selectors và combinators, bạn có thể mở rộng phạm vi của phong cách, bạn có thể đạt được trên một trang web nhất định và viết CSS hiệu quả hơn. Với chỉ một vài dòng CSS bạn nhìn thấy tôi gõ ở đây, Tôi có thể nhanh chóng làm cho một cái gì đó như thế này trông giống như một cái gì đó như thế này. 

Tôi là Joseph, và đây là CS50. 

[CS50.TV] 

Uh, nơi nào tôi bắt đầu? Hãy để tôi làm điều đó mà không cần - [cười] Được rồi. Thêm một - Hãy để tôi thay đổi từ ngữ đó. Ooh. Xin lôi.