[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 hay Cascading Style Sheets. 

Vì vậy, chính xác những gì CSS là? Vâng, chúng ta hãy phá vỡ CSS hạn thành 2 phần: Cascading Style Sheets và. Tầng phức tạp hơn một chút, và đó là một cái gì đó chúng tôi sẽ giới thiệu trong video khác. Nhưng đối với người mới bắt đầu, Style Sheets rất nhiều gợi ý 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 cách các trang web thẩm mỹ trông. Điều này có nghĩa tất cả mọi thứ từ các phông chữ của văn bản vào vị trí của các nội dung trên trang với những thứ mát khác như làm cho các góc của một hộp tròn hoặc thêm bóng cho văn bản. Bạn thậm chí có thể làm những điều điên rồ 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 tôi sử dụng CSS với HTML? Có trang web nghèo nhìn này tôi chỉ viết. Nếu Rob đã xem xét trang web này ngay bây giờ, ông có thể nói một cái gì đó như thế, "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ế kinh khủng." "Sử dụng font chữ mặc định lần? 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 phong cách Rob muốn? Cách rõ ràng nhất nhiều người ban đầu đã viết CSS là để đưa những gì chúng ta gọi là tờ khai phong cách phù hợp trong các yếu tố chính sử dụng thuộc tính style của HTML. Một tuyên bố phong cách đơn giản bao gồm các thuộc tính CSS các phần tử HTML của chúng tôi muốn thay đổi theo sau là một dấu hai chấm theo sau là giá trị mới của tài sản và một dấu chấm phẩy ở cuối. Ví dụ, chúng ta hãy nói Rob muốn một đường viền đen xung quanh giới thiệu của mình. Trước tiên chúng ta đặt thuộc tính phong cách trên div Rob đây sau đó bên trong dấu ngoặc kép đặt một tuyên bố CSS: "Border: 1px solid đen;" 1 điểm ảnh đề 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ì màu sắc của biên giới là. 

Nếu chúng ta muốn có 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 văn bản tiêu đề của mình trong Helvetica với một nền màu xanh và không gian thêm xung quanh các 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 vì lợi ích của tính nhất quán. 

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

Cho những người 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 cách lộn xộn này tất cả đều. 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 web, cộng với bây giờ HTML và CSS của bạn được tất cả trộn lẫn và lộn xộn. Tổng, phải không? Để sửa lỗi này, người cuối cùng đã bắt đầu đánh bắt trên để tách đánh dấu HTML của họ từ phong cách CSS của họ bằng cách sử dụng một cái gì đó gọi là lựa chọn CSS. Lựa chọn 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 nhắc đến như một quy tắc CSS. Những quy định này sẽ được đặt giữa các thẻ HTML phong cách mở và đóng, thường trong phần đầu của tài liệu. 

Nó dễ dàng hơn nhiều để xem với một ví dụ, vì vậy 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, hãy đặt thẻ phong cách trong phần đầu của HTML. Tiếp theo, chọn. Chúng tôi sẽ bắt đầu bằng cách sử dụng một trong những bộ chọn đơn giản nhất, biểu tượng băm, mà lựa chọn một phần tử HTML bằng 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 của Rob bằng cách gõ các biểu tượng băm tiếp theo ID của div, cướp. Bây giờ các tờ khai. Chúng ta thêm dấu ngoặc mở và đóng và chuyển khai báo nội tuyến trước đó 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ẻ, giới thiệu của Rob vẫn có một đường viền đen xung quanh nó trừ sự xấu xa nội tuyến lộn xộn. 

Bây giờ, nếu chúng tôi muốn chọn h1 bên trong giới thiệu của 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 đó của chúng tôi." Điều đó làm việc, nhưng CSS có 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 kết hợp bộ chọn đơn giản. Ví dụ, một ký tự khoảng trắng có thể được sử dụng như 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 chọn khác. Nghe có vẻ phức tạp hơn nhiều so với thực tế. Đây là một ví dụ. Chúng tôi sẽ nhập # 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 thẻ mà chọn loại yếu tố như divs hoặc đoạn văn. Không gian kết hợp 2 bộ chọn đơn giản của chúng tôi, việc áp dụng các tờ khai CSS và dấu ngoặc nhọn để thẻ h1 sống bên trong các phần tử với id = "cướp". Chỉ để thuyết phục bạn rằng nó hoạt động, tôi sẽ thay đổi màu chữ là màu trắng, làm mới, và, xem xét, đánh đầu của Rob bây giờ 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 quy tắc thay vì phong cách nội tuyến chúng tôi có thể nhận được mã sạch hơn nhiều. Trong thực tế, nếu khối phong cách này bắt đầu nhận được một chút lớn, Tôi thậm chí có thể kéo những phong cách ra 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 liên kết tag của HTML. Ở đây tôi đang nói với nó rằng tôi đang liên kết trong một tấm phong cách bên ngoài, thuộc tính rel, và chỉ định đường dẫn đến tập tin với thuộc tính href của tôi. Bây giờ tôi đánh dấu HTML và CSS được tổ chức độc đáo trong các tập tin hoàn toàn riêng biệt, trong đó gần 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, các bộ chọn đơn giản bao gồm chọn ID và bộ chọn thẻ như những người chúng tôi chỉ thấy cũng như bộ chọn lớp học để lựa chọn các yếu tố với một lớp học nào đó, chọn thuộc tính cho việc lựa chọn các yếu tố của các thuộc tính khác như type = "radio" cho nút đầu vào đài phát thanh, và pseudoselectors như di chuột và tập trung để xác định phong cách khi tương tác như dùng chuột trê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 bộ chọn. Những người khác bạn có thể gặp bao gồm mũi tên cho trẻ em trực tiếp chỉ, dấu ngã cho tất cả anh chị em xảy ra sau khi các yếu tố, và dấu cộng cho 1 anh chị em mà đi kèm ngay sau khi các phần tử. 

Bằng cách kết hợp các bộ chọn 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. Chỉ với một vài dòng CSS bạn nhìn thấy tôi gõ đây, Tôi có thể nhanh chóng thực hiện một cái gì đó như cái nhìn này 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.