Xin chào, hôm nay chúng ta sẽ nói về các bộ chọn tiên tiến.
Cho đến thời điểm này, khi chúng tôi đã viết các quy tắc của mình,
chúng tôi đã viết các quy tắc của chúng tôi cho một loại thẻ cụ thể.
Chúng tôi đã nói h1 hoặc p hoặc h2.
Vì vậy, chúng tôi thực sự chỉ tập trung vào một thứ bao gồm tất cả các yếu tố khác nhau của
loại đó.
Nhưng nếu bạn không muốn tạo kiểu cho tất cả các liên kết, chỉ cần một số liên kết?
Hoặc bạn không muốn tạo kiểu cho tất cả các danh sách của bạn,
bạn chỉ muốn tạo kiểu cho một số danh sách?
Vâng, bây giờ chúng ta sẽ nói về những loại bộ chọn tiên tiến này
sẽ cho phép chúng ta làm điều đó.
CSS sẽ cung cấp cho bạn rất nhiều tùy chọn mà trong bài giảng này tôi sẽ cố gắng để
bao gồm càng nhiều càng tốt, nhưng nó vẫn sẽ được tùy thuộc vào bạn để đi ra và
tìm kiếm một số chi tiết hơn của riêng bạn khi bạn cần họ.
Vì vậy, chúng ta hãy bắt đầu với các bộ chọn CSS theo DOM.
Nếu bạn nhớ mô hình đối tượng tài liệu
là cách trình duyệt chia trang của bạn thành cấu trúc giống cây.
Vì vậy, theo cách này, trình duyệt thực sự biết nếu một đoạn văn đến trực tiếp sau một
thẻ h1 hoặc nếu hai đoạn văn là anh chị em trong cùng một phần.
Chúng tôi sẽ sử dụng điều đó để tạo kiểu chỉ một số phần nhất định của trang của bạn.
Vì vậy, các bộ chọn hậu duệ là một cách để nói, hey, nếu bạn đang ở bên trong một thẻ nav,
tôi muốn bạn tạo kiểu tất cả các liên kết bên trong thẻ nav.
Thay vì làm tất cả chúng, chỉ những cái đó.
Nếu bạn muốn cụ thể hơn, bạn có thể sử dụng bộ chọn trẻ em.
Quy tắc này rất giống nhau, ngoại trừ nó nói,
tất cả các liên kết cần phải là những gì chúng ta gọi là hậu duệ trực tiếp của liên kết nav.
Nếu bạn có một đoạn văn trong đó và bạn có một số liên kết trong đó, bỏ qua điều đó.
Họ cần phải ở ngay bên dưới nhau.
Người cuối cùng là anh chị em liền kề.
Đó không phải là một trong những tôi thực sự sử dụng rất nhiều trong mã hóa của riêng
tôi, nhưng tôi muốn cho bạn biết nó là gì bởi vì có một cơ hội thực sự tốt
bạn sẽ thấy nó nếu bạn đang nhìn vào mã của người khác.
Làm thế nào các anh chị em lân cận hoạt động là các yếu tố phải là
những gì chúng ta gọi là cùng một cấp độ và đi theo nhau.
Vì vậy, nếu bạn có một phần có một h1 và
sau đó một danh sách có thứ tự, họ sẽ là anh chị em ruột.
Nếu bạn có một h1 và sau đó một số thứ khác và
danh sách có thứ tự đó nằm trong một đoạn văn, nó sẽ không hoạt động theo cách đó.
Tiếp theo, chúng ta sẽ nói về những gì chúng ta gọi là bộ chọn id.
ids được sử dụng để xác định một phần tử duy nhất trong DOM.
Cách ids làm việc là bạn sẽ đi vào, và
bạn sẽ, trong HTML của bạn, nói một cái gì đó dọc theo dòng id bằng tiêu đề, hoặc
id bằng chân trang là một trong những họ sử dụng để sử dụng rất nhiều.
Sau đó, trong bảng kiểu của bạn, sử dụng biểu tượng bảng Anh,
bạn có thể xác định những cái bạn muốn tạo kiểu.
Vì vậy, ngay bây giờ, có một phong trào nhỏ, nhưng
nó đang phát triển một chút, để di chuyển ra khỏi việc sử dụng id từ CSS.
Họ đang nói rằng có thực sự không có điểm trong
việc sử dụng nó bởi vì rất nhiều người chỉ thực sự sử dụng id này cho JavaScript và những thứ như thế.
Nhưng một lần nữa, đây là điều bạn sẽ thấy rất nhiều, vì vậy
tôi muốn giới thiệu với bạn về điều đó.
Vì vậy, chúng ta hãy xem một ví dụ thực sự nhanh chóng ở đây chỉ trên màn hình của nó hoạt động như thế nào.
Trong HTML của tôi, tôi sẽ tiếp tục và đưa vào nguồn của tôi, thẻ alt của tôi,
nhưng cũng ID="MainLogo”.
Sau đó, trong bảng phong cách của tôi, sử dụng biểu tượng # cùng với tên id,
trình duyệt sẽ biết, oh, bất cứ khi nào tôi nhìn thấy một trong những hình ảnh đó,
tôi muốn chắc chắn rằng tôi thêm đường viền này và lề này.
Các bộ chọn lớp tương tự như các id, nhưng sự khác biệt là, rằng các lớp có thể
áp dụng cho một loạt các phần tử, không chỉ một phần tử cụ thể trong DOM.
Vì vậy, hãy nghĩ đến hình ảnh thu nhỏ hoặc các phương tiện truyền thông biểu tượng xã hội.
Đó là ý tưởng rằng, bạn biết không,
tôi muốn có thể tạo kiểu cho một nhóm lớn mọi thứ theo cùng một cách,
nhưng tôi không muốn nhất thiết phải tạo kiểu cho tất cả chúng theo cách đó.
Bạn không muốn tất cả các hình ảnh của bạn là hình thu nhỏ,
nhưng bạn muốn có rất nhiều hình ảnh.
Bạn sẽ viết mã này một cách rất giống nhau.
Ở đây trong HTML của tôi, tôi có class="thumb”, class="thumb”, class="thumb”,
class="thumb”.
Và trong CSS của tôi, thay vì sử dụng #, bạn cần phải chắc chắn rằng bạn sử dụng
dấu chấm hoặc dấu chấm, cùng với tên lớp, và sau đó bạn có thể cung cấp cho nó bất kỳ quy tắc.
Và bằng cách này, trang sẽ đi qua và biết rằng ngoài
bất kỳ kiểu dáng nào bạn chỉ cần đặt trên hình ảnh, bạn cũng muốn kiểu dáng này cho hình thu nhỏ.
Vì vậy, chỉ để cố gắng giúp bạn làm cho nó rõ ràng hơn một chút,
sự khác biệt giữa việc sử dụng các lớp học và id là gì?
Đầu tiên, bạn muốn chắc chắn rằng bạn biết cú pháp.
Khoảng thời gian dành cho các lớp học, và đồng bảng Anh dành cho id.
Bạn không thể lộn xộn về điều này, bởi vì trình duyệt sẽ không sửa chữa nó cho
bạn nếu bạn đặt điều sai ở phía trước của lớp học hoặc tên id của bạn.
Bạn muốn nhớ rằng các lớp học có thể được sử dụng nhiều lần.
Nó có ý nghĩa trong mã HTML của bạn để xem class="thumb”, class="thumb”,
class="thumb” vì nó không được cho là một phần cụ thể của trang.
Với id, nó phải là duy nhất, bạn chỉ nên nhìn thấy id bằng,
ví dụ, tiêu đề, mà chúng tôi thậm chí không sử dụng một lần.
Bạn chỉ nên nhìn thấy id="phần chính” một lần.
Vì vậy, một lần nữa, chúng ta hãy nghĩ về hình ảnh và thanh điều hướng.
Nó rất phổ biến mà bạn muốn định dạng nhiều, nhưng
không phải tất cả các hình ảnh theo cùng một cách.
Và bạn sẽ sử dụng các lớp học cho điều đó.
Nơi bạn có thể sử dụng một id là, tôi chắc chắn rằng bạn đã ở một số nơi mà
trên trang web, bạn nhìn thấy thanh điều hướng và
trang mà bạn hiện đang ở trên được theo kiểu chỉ hơi khác nhau.
Và điều đó có ý nghĩa bởi vì bạn chỉ có thể ở một trang tại một thời điểm, và
đó là lý do tại sao bạn có thể chọn để sử dụng id
Vì vậy, chúng ta hãy đi trước và đi qua một ví dụ nhanh bằng cách sử dụng thanh điều hướng đó.
Vì vậy, đây là một tập tin HTML mẫu,
nơi mà tất cả những gì tôi đã làm là đặt trong bốn liên kết mà thậm chí không thực sự đi bất cứ nơi nào.
Tôi đã nhận xét ra bảng phong cách chỉ để
bạn có thể thấy nó sẽ trông như thế nào mà không có bất kỳ kiểu dáng nào.
Bạn có thể thấy, tôi có Trang chủ, Sở thích, Sơ yếu lý lịch, Sở thích, và
tôi có thêm một liên kết ở đây mà tôi gọi rất tệ ở đây.
Vì vậy, chúng ta hãy tiếp tục và
thử thêm một chút kiểu dáng bằng cách sử dụng các bộ chọn nâng cao này.
Đi qua đây.
Bạn có thể thấy rằng tôi đã sử dụng các yếu tố con của, thực sự,
chỉ là loại hậu duệ của, hey, tất cả các liên kết trong thanh điều hướng,
Tôi muốn phong cách khác nhau, tôi muốn cung cấp cho họ một màu nền khác nhau,
một chiều rộng khác nhau, những thứ như thế.
Bên cạnh đó, bất cứ điều gì đó là lớp hiện tại, Tôi muốn làm cho thậm chí khác nhau
hơn bất kỳ liên kết khác hoặc bất cứ điều gì khác chúng ta đã nhìn thấy theo cách đó.
Vì vậy, chúng ta hãy tiếp tục và bỏ bình luận bảng phong cách.
Cứu nó đi.
Từ cái này sang cái này đi.
Bạn có thể thấy rằng chỉ có các liên kết bên trong thanh điều hướng của tôi được tạo kiểu.
Cái này bị bỏ lại như cũ.
Và một trong những nơi tôi có lớp học = “hiện tại” trông khác với những người khác.
Vì vậy, nó thực sự đơn giản để sử dụng những thứ này, bạn chỉ cần biết về chúng.
Khi trang của bạn nâng cao hơn,
bạn sẽ muốn thu hẹp phạm vi của một số quy tắc.
Chúng ta chỉ muốn áp dụng chúng vào những thứ nhất định.
Và một trong những ký hiệu bạn có thể sử dụng cho điều đó là dấu chấm.
Vì vậy, trong bảng phong cách của bạn, bạn sẽ thực sự có p.main.
Điều này có nghĩa là đi và tìm tất cả các đoạn văn đang sử dụng lớp chính.
Hoặc bạn có thể có tiêu đề img.special.
Điều này có nghĩa là tìm thấy tất cả các hình ảnh có hình ảnh cổ điển đặc biệt
thuộc về tiêu đề.
Nó chỉ là một cách để bạn thực sự giảm bớt những gì đang được phong cách.
Trên cùng một mặt, bạn cũng có thể, những gì chúng tôi gọi, mở rộng phạm vi.
Vì vậy, giả sử rằng có một số kiểu dáng bạn muốn áp dụng cho cả
đầu trang và chân trang, hoặc cho các phần và bài viết.
Không phải là vấn đề.
Những gì bạn làm là bạn chỉ cần viết các yếu tố,
và bạn bao gồm một dấu phẩy ngay đó để cho nó biết.
Vì vậy, chỉ là một đánh giá nhanh chóng.
Và đây là một cái gì đó từ sớm hơn nhiều.
Bạn cần phải suy nghĩ về những gì xảy ra khi có nhiều quy tắc cho
cùng một bộ chọn.
Vì vậy, bạn có thể có một cái này ở đây với đoạn văn nơi nó có
những phẩm chất nhất định mà nó muốn chia sẻ giữa đoạn văn h1, id chính, và
lớp đặc biệt.
Nhưng sau đó, nếu bạn muốn có phong cách bổ sung cho
một đoạn văn, miễn là bạn đặt nó ở đâu đó bên dưới,
nó sẽ ghi đè và kết hợp với bất cứ thứ gì cao hơn.
Vì vậy, trừ khi một quy tắc có dấu chấm than quan trọng sau nó, nó luôn
chỉ sử dụng cái cuối cùng mà nó thấy, cùng với những cái trước đó không xung đột.
Ngoài các bộ chọn phần tử và các bộ chọn quan hệ DOM khác nhau,
chúng tôi cũng có một vài thứ nữa mà tôi muốn nói về một thời gian ngắn.
Đầu tiên là bộ chọn phổ quát, đó là ngôi sao hoặc
Shift tám trên bàn phím của bạn.
Điều này làm là,
nó sẽ áp dụng kiểu dáng của bạn cho mỗi yếu tố duy nhất trên trang.
Nó hoàn toàn điên rồ.
Tôi sẽ không làm thế đâu.
Tôi sẽ để anh làm điều đó, nhưng cứ tiếp tục và đặt trong một ngôi sao, và sau đó là phong cách,
có thể là biên giới, xung quanh mọi yếu tố.
Nó ảnh hưởng đến mọi thứ trên trang của bạn.
Đôi khi, nó là tốt đẹp cho gỡ lỗi.
Tiếp theo bạn có thể muốn suy nghĩ về việc sử dụng là những gì chúng ta gọi là
bộ chọn thuộc tính.
Thay vì đi trên các thẻ, bạn đi vào các thuộc tính đi vào bên trong các thẻ.
Vì vậy, trong trường hợp này, nó sẽ đi trước và nó sẽ muốn phong cách mọi liên kết mà bạn
có href="info.html”, và tôi sẽ làm một ví dụ nhanh về điều đó chỉ trong một giây.
Nhưng trước khi tôi làm điều đó, tôi muốn đề cập đến hai thứ nữa mà chúng ta sẽ xem xét sau này,
đó là các lớp giả và các yếu tố giả.
Chỉ cần một mức độ khác biệt chỉ là một số điều bạn muốn tạo kiểu
trên trang của bạn.
Nhưng trước tiên, chúng ta hãy đi trước và nhìn vào việc sử dụng các bộ chọn thuộc tính này.
Vì vậy, cách mà các bộ chọn thuộc tính hoạt động là họ tìm kiếm DOM cho
các phần tử có thuộc tính mà bạn đang tìm kiếm.
Ví dụ, bạn có thể muốn xem tất cả các hình ảnh sử dụng tệp gif hoặc
tất cả các hình ảnh có văn bản alt rỗng hoặc có thể
tất cả các liên kết đến các trang web của chính phủ hoặc các trang web phi lợi nhuận hoặc các trang web giáo dục.
Thật dễ dàng để chúng tôi tìm thấy những thứ đó và tiếp tục và tạo
kiểu cho chúng một chút khác biệt.
Cách chúng tôi làm điều đó là chúng tôi sử dụng toán tử để
khớp với các phần khác nhau của văn bản thay thế mà bạn đang tìm kiếm.
Vì vậy, trên đây, trong những gì chúng ta gọi là sự mở đầu, nó sẽ phù hợp với sự khởi đầu.
Vì vậy, trong trường hợp này, nó sẽ phù hợp với tất cả những liên kết bắt đầu với http://umich, và
nó không quan trọng như thế nào nó kết thúc.
Cái tiếp theo với ký hiệu đô la sẽ khớp với kết thúc chính xác.
Nó sẽ tìm thấy tất cả các tập tin kết thúc bằng .png.
Chúng tôi cũng có ký tự đại diện, nơi bạn đang đi và
nói nếu bạn thấy umich trong bất kỳ phần nào của bất kỳ tài liệu tham khảo siêu nào ở tất cả, áp dụng quy tắc này.
Vì vậy, những gì chúng ta sẽ nhìn vào là chúng ta sẽ nhìn vào một tập tin có
liên kết khác nhau Và mỗi một trong những có một loại khác nhau của phần mở rộng mà chúng ta muốn phong cách khác nhau.
Được rồi.
Vì vậy, những gì tôi có ở đây chỉ là một danh sách các liên kết.
Không có lớp học nào cả.
Không có gì đặc biệt về những thứ này, mà đi đến các trường đại học, tổ chức
, các địa điểm chính phủ khác nhau, và nếu bạn xem, theo mặc định, nó sẽ hiển thị như các
liên kết màu xanh truyền thống của bạn với gạch chân, văn bản ngay đó.
Nhưng điều tôi muốn làm là tôi muốn vào và nói,
bạn biết không, tất cả những cái kết thúc bằng .org?
Làm cho chúng một màu.
Tất cả những cái đó là .edu, một màu khác, và
tất cả những cái kết thúc bằng .gov, một màu thứ ba.
Hãy xem nó trông như thế nào.
Ở đây, bạn có thể thấy rằng nếu không có tôi phải đặt bất kỳ thông tin nào bên trong
các thẻ, trình duyệt đã tô màu cho họ màu thích hợp.
Được rồi, tôi vừa đề cập rất nhiều nội dung trong một đoạn video rất ngắn.
Bạn cần phải nhận ra rằng những ý tưởng này sẽ hợp nhất với nhau.
Bạn sẽ sử dụng các lớp học,
bạn sẽ sử dụng ID, bạn sẽ sử dụng các thuộc tính.
Và điều quan trọng tôi muốn bạn biết là khi bạn
đang thêm tất cả những điều này lại với nhau, thứ tự bạn viết các lớp học và các
id khác nhau trong văn bản của bạn không quan trọng.
Nó không quan trọng cho dù bạn có đặc biệt sớm tối hoặc tối sớm đặc biệt.
Điều thực sự quan trọng là thứ tự bạn viết các quy tắc của bạn trong bảng phong cách của bạn.
Các trình duyệt luôn bắt đầu lên trên cùng, và áp dụng từng quy tắc.
Bây giờ tin tốt từ bài giảng này là tôi muốn bạn nhận ra
rằng với sức mạnh của các lớp học và id và bảng phong cách tầng này là điều
này có nghĩa là bạn có thể sử dụng bảng phong cách từ những người khác để tạo kiểu mã của bạn.
Và bạn chỉ có thể thêm một lớp thay đổi một thuộc tính nhỏ
mà có thể bạn không thích về nó.
Bạn có thể ghi đè các bảng kiểu này và làm cho nó trở nên riêng của bạn.
Chỉ cần đảm bảo rằng bạn liên kết bảng phong cách của bạn cuối cùng.
Được rồi, chúng tôi đã đề cập rất nhiều, và
tôi hy vọng tôi không áp đảo bạn với đoạn video này.
Tôi chỉ muốn bạn nhớ rằng khi chúng tôi làm bộ chọn
loại và những điều mà tôi sẽ có bạn làm trong lớp này là chúng tôi thường
đang thêm chúng để thu hẹp phạm vi của nơi quy tắc được áp dụng.
Vì vậy, chúng tôi không muốn phong cách mọi thứ.
Chúng tôi chỉ muốn tạo kiểu một số thứ nhất định.
Một id được sử dụng để xác định một phần tử cụ thể trong một trang, và
các lớp học được sử dụng để liên kết các phần tử thực sự có xu hướng có giao diện tương tự.
Vì vậy, khi chúng ta tiếp tục, tôi biết tôi sẽ có vài ví dụ mật mã với tôi.
Tôi hy vọng bạn sẽ dừng lại, lấy máy tính xách tay của bạn ra, và
thực sự mã hóa với tôi để có được một ý tưởng về những thứ khác nhau có thể mạnh mẽ như thế nào.
Cảm ơn.