Chào tất cả mọi người.
Chào mừng trở lại.
Đó là thời gian để chúng tôi bắt đầu dự án cuối cùng của chúng tôi.
Tôi thực sự hy vọng khi bạn hoàn thành việc này, bạn sẽ có một thứ
mà bạn cảm thấy thật sự tự hào và bạn sẽ muốn chia sẻ.
Một lần nữa, mục tiêu của chúng tôi là chúng tôi sẽ viết một phong cách bảng và
phong cách ba tập tin HTML khác nhau.
Bây giờ, khi bạn bắt đầu,
tôi sẽ giả định rằng bạn đã hoàn thành nhiệm vụ cấp thứ hai.
Bạn có thể cảm thấy tự do để thay đổi điều đó nhiều như bạn muốn, nhưng
tôi cần phải biết rằng những thay đổi đó đã hoàn thành.
Được rồi, để tôi cho các bạn thấy trước đây và sau của chúng tôi về
nơi chúng tôi sẽ đi với dự án cuối cùng này.
Vì vậy, chúng ta hãy nhìn vào những gì chúng tôi đã làm cho đến nay trong khóa học này.
Chúng tôi đã có cái nhìn HTML đầu tiên của chúng tôi.
Lần tiếp theo của chúng tôi, chúng tôi đã làm cho nó rất đơn giản.
Thứ ba của chúng tôi, nơi chúng tôi thêm vào trong một số phong cách khác nhau.
Và cuối cùng,
trên trang thứ tư của chúng tôi, nó
có thể trông không khác lắm ở trang đầu tiên này, nhưng nơi tôi thực sự muốn bạn tập trung vào trang Nhóm, và trên bảng này.
Bạn sẽ có thể thấy rằng tôi đã thực sự đi ra ngoài và
đặt rất nhiều phong cách vào bảng này.
Và lý do tôi chọn bàn là vì đây sẽ là cơ hội để chúng tôi đi vào và
sử dụng những lớp giả đó.
Sử dụng những yếu tố giả, sử dụng một số gradient,
tất cả những điều nhỏ nhặt có thể hơi khó để đạt được,
nhưng một khi bạn đã hoàn thành nó, nó có vẻ thực sự tốt.
Vậy chúng ta hãy nói về từng phần nhỏ này.
Vì vậy, một lần nữa, chỉ cần một chút nhắc nhở, làm cho một tờ phong cách duy nhất.
Tôi không muốn một bảng phong cách khác nhau cho
mỗi trang, bạn muốn một trang đó sẽ bao gồm tất cả mọi người.
Và chúng ta sẽ sử dụng các yếu tố giả và các lớp giả.
Vì vậy, nếu bạn có vẻ hơi bối rối về điều đó, đừng quên,
chúng tôi đã có slide bao gồm điều này cũng như một số mã của chúng tôi với nhau ví dụ.
Vì vậy, hãy bắt đầu với bảng vì đó là phần lớn của trang.
Ở mức tối thiểu, tôi muốn bạn tiếp tục và tạo kiểu phông chữ, chiều rộng
và lề.
Bây giờ khi bạn tạo kiểu phông chữ, có rất nhiều tùy chọn khác nhau bạn có thể xem xét.
Bạn có thể có các gia đình phông chữ khác nhau.
Bạn có thể thay đổi kích cỡ, trọng lượng và chiều cao đường.
Một trong những lý do tôi khuyên bạn nên chiều cao dòng, là khi bạn làm điều đó,
nó dễ dàng hơn nhiều để trung tâm văn bản trong các hàng nếu bạn đã thực hiện
chiều cao dòng giống như kích thước văn bản.
Đối với chiều rộng của bạn, tôi không muốn bàn của bạn chiếm toàn bộ trang.
Tôi muốn nó chiếm một nơi nào đó có lẽ là từ 75 đến 90%.
Và một trong những lý do tôi muốn các bạn làm điều đó,
là bởi vì tôi muốn các bạn tập trung vào bàn.
Tôi muốn anh chơi với tài sản lợi nhuận đó.
Và tìm ra cách bạn có thể chiếm đúng khoảng không gian và
đặt nó ngay nơi bạn muốn.
Tiếp theo chúng ta sẽ xem xét tiêu đề của bàn.
Vì vậy, tiêu đề bảng trông hơi khác với các hàng khác, và
nó thực sự có ý nghĩa quan trọng đó.
Vì vậy, bằng cách sử dụng các thẻ tiêu đề bảng, chúng tôi sẽ có thể loại tăng gấp đôi
ý tưởng này rằng chúng tôi đang tạo kiểu nó khác nhau và nó có nghĩa là một cái gì đó khác nhau.
Vì vậy, trước tiên, thay đổi màu nền.
Một khi bạn làm được điều đó để làm việc,
tôi muốn bạn thử đặt trong một màu nền gradient.
Bây giờ đừng quên để sử dụng gradient,
bạn sẽ cần phải đặt trong một số tiền tố trình duyệt.
Tiếp theo, thêm một đường viền nhưng tôi chỉ muốn bạn làm tròn hai góc trên cùng,
không phải toàn bộ điều, và sau đó cũng làm cho đường viền dưới cùng dày hơn.
Cuối cùng, khi bạn đã hoàn thành với điều này, hãy tiếp tục và
thêm ít nhất một tài sản khác, một cái gì đó mà bạn nghĩ sẽ trông tuyệt vời.
Một khi bạn đã hoàn thành tiêu đề bảng, chúng ta hãy đi trước và đặt một số kiểu dáng cho
các hàng bảng.
Điều đầu tiên tôi muốn bạn làm, và có một lý do cho điều này,
là tôi muốn bạn thiết lập độ mờ của các hàng bảng để một số giá trị của khoảng 0.8.
Một nơi nào đó quanh đó.
Nơi bạn vẫn có thể đọc văn bản, nhưng nó hơi mờ dần.
Tiếp theo, tôi muốn bạn đảm bảo rằng cột đầu tiên của mỗi hàng bảng
được căn bên trái và hai cột kia được căn giữa.
Bây giờ, bạn có thể làm kiểu dáng này trong các yếu tố hàng bảng của
bạn, hoặc bạn có thể đang làm nó trong các yếu tố bảng, những TD.
Nó thực sự phụ thuộc vào cách bạn nhảy vào và cố gắng để phong cách này.
Cuối cùng, tôi muốn bạn tiếp tục và đưa vào một lớp giả khác.
Khi ai đó di chuột qua bất kỳ hàng nào,
nó sẽ thay đổi từ một loại mờ dần thành một màu tối hơn.
Và tôi sẽ cho các bạn xem một ví dụ về điều đó trước khi tôi tiếp tục.
Vì vậy, nếu bạn nhận thấy trong bảng này,
các văn bản là một chút mờ dần ra khỏi là màu sắc phông chữ màu đen rắn.
Vì vậy, đó là nơi mà sự mờ đục xuất hiện.
Bây giờ, khi tôi di chuột qua mỗi tên đội,
bạn sẽ thấy rằng phông chữ trở nên tối hơn một chút.
Tôi đã không thay đổi màu phông ở đây, tôi đã không thay đổi gia đình phông chữ, hoặc
loại, hoặc bất cứ điều gì tương tự như thế.
Thay vào đó, những gì tôi đã thay đổi là độ mờ đục để thiết lập nó thành 1.
Vì vậy, bây giờ khi di chuột của tôi tắt,
nó quay trở lại loại giá trị ban đầu mờ dần.
Mỗi yếu tố bảng có thể mất bất kỳ số lượng kiểu dáng mà bạn
muốn cung cấp cho nó.
Nhưng những gì tôi muốn thấy bạn làm là tôi muốn thấy bạn phong cách đệm,
màu phông chữ và màu nền.
Và tôi muốn bạn thiết lập bán kính biên giới thành hai điểm ảnh.
Bạn sẽ không bao giờ có thể nhìn thấy sự
khác biệt không thể phân biệt hoặc tinh tế đó trên bàn.
Vì vậy, tôi muốn bạn đặt nó vào, chỉ như vậy khi tôi bảo bạn làm điều đó,
bạn nhận thấy rằng có một sự thay đổi thực sự ở đó.
Cuối cùng, đây sẽ là một cơ hội tuyệt vời
để bạn làm một điều mà tôi chưa bao giờ tự bảo vệ bản thân mình. Một
phần của việc trở thành một nhà thiết kế web là học cách đi ra ngoài đó và
tìm kiếm các thuộc tính khác nhau mà bạn có thể chơi với.
Vì vậy, tôi khuyến khích các bạn đi ra ngoài và nhìn vào bóng văn bản.
Đó là một cái gì đó tôi sử dụng trong ví dụ của tôi.
Vì vậy, nếu bạn thực sự muốn cố gắng sao chép nó, hãy tiếp tục và cố gắng sử dụng nó cho mình.
Một lần nữa, chúng ta sẽ sử dụng chấm điểm ngang hàng cho nhiệm vụ này.
Và điểm số sẽ dựa trên cả hai mức độ hoàn thành và một mức độ thẩm mỹ nào đó.
Các tiêu chuẩn mã hóa thích hợp luôn được áp dụng, nhưng
bạn có thể chỉ định kích thước màn hình ưa thích của bạn.
Vì vậy, nếu ai đó quyết định lấy CSS của bạn và áp dụng nó vào HTML, bạn
có thể cho họ biết điều này thực sự trông tốt nhất trên một màn hình lớn hoặc thiết bị di động nhỏ.
Bây giờ, thực sự có rất nhiều,
rất nhiều cách để bạn có thể thay đổi bảng kiểu này xung quanh.
Và vì vậy tôi không muốn anh lo lắng về việc đánh bại từng tiêu chuẩn.
Nhưng nếu bạn quyết định một điều gì đó hơi điên rồ, hơi khác một chút, và
điều gì đó mà người khác có thể không hiểu.
Tôi thực sự khuyên bạn nên đặt nó gần dưới cùng của bảng phong cách của bạn.
Vì vậy mà mọi người nhìn vào mã của bạn thực sự có thể tập trung vào các yêu cầu thực tế
và sau đó ngạc nhiên trước những đổi mới thực sự mát mẻ của bạn.
Vì vậy, tôi hy vọng rằng đây là một cái gì đó thực sự sẽ giúp củng cố sự
hiểu biết của bạn về CSS.
Nếu bạn gặp vấn đề, bạn nên cảm thấy tự do để sử dụng các bảng thảo luận và
thực sự yêu cầu mọi người bất cứ điều gì mà bạn không hoàn toàn chắc chắn về.
Hoặc chỉ cần chia sẻ một cái gì đó tuyệt vời mà bạn phải làm việc.
Chúc may mắn.