Chào.
Chào mừng bạn đến với bài giảng kỹ thuật đầu tiên của chúng tôi trong khóa học CSS của chúng tôi.
Đó là về việc thêm phong cách vào trang của bạn.
Nếu bạn đã đến với khóa học này với tôi từ khóa học HTML của chúng tôi,
bạn biết rằng tôi biết rằng bạn có thể làm cho các tập tin HTML chung.
Nhưng cho đến bây giờ, bạn có thể không có kiểu dáng chúng ở tất cả.
Những gì tôi muốn bạn biết trước khi chúng tôi thậm chí bắt đầu tạo kiểu, và bạn bắt đầu đặt
xoắn nhỏ của riêng bạn trên các trang, là cùng một tập tin HTML có thể trông khác nhau
khi xem trên các trình duyệt khác nhau, và có một vài lý do cho điều đó.
Trước tiên, một số thẻ không được hỗ trợ trong một số trình duyệt trong khi chúng ở trong các trình duyệt khác.
Vì vậy, nếu bạn đã từng sử dụng thẻ chi tiết, bạn có thể thấy rằng đôi khi trang của bạn sẽ
có các mũi tên nhỏ hoặc các dấu hiệu nhỏ khác nhau trên chúng và những lần khác nó sẽ không.
Vì vậy, đi xuống để các thẻ được hỗ trợ.
Nhưng cũng có thể, mỗi trình duyệt đều có phong cách mặc định khác nhau của riêng mình.
Và những gì mà phong cách mặc định nói là đây là cách tôi muốn tiêu đề H1 của tôi để xem xét, hoặc
đây là bao nhiêu đệm tôi muốn xung quanh đoạn văn của tôi.
Vì vậy, nếu bạn đi đến cùng một trang chính xác trên các trình duyệt khác nhau, nó có thể khó để
nói, nhưng bạn sẽ thấy sự khác biệt nhỏ trong cách mọi thứ được thực hiện.
Nhưng nói chung, cái nhìn mặc định này thực sự đơn giản.
Và hầu hết những người tôi biết, họ không muốn trang của họ trông đơn giản.
Họ muốn đặt trong một số phong cách.
Vì vậy, hãy bắt đầu xem xét các cách bạn có thể làm điều này.
Một cách để thêm phong cách là suy nghĩ về việc thêm nó trực tiếp vào văn bản.
Bây giờ khi HTML phát triển, chúng tôi đã đi từ việc có các thẻ đó là rõ ràng về màu sắc,
và về trung tâm khác nhau, và những thứ như thế.
Để nói không, không, chúng tôi không muốn các thẻ liên quan đến phong cách.
Chúng tôi chỉ muốn các thẻ có liên quan đến nội dung.
Mọi người nói, được rồi, chúng ta có thể làm điều đó, nhưng tôi muốn làm cho nó đẹp đẽ.
Vì vậy, làm thế nào họ đã làm điều này là họ thêm thuộc tính phong cách.
Vì vậy, trong trường hợp này tôi đã lấy một thẻ h1 và thêm thuộc tính phong cách và
chỉ đơn giản là nói “color:blue”.
Và những gì điều này sẽ làm là nó sẽ làm cho tiêu đề h1 đặc biệt này
có phông chữ màu xanh cho nó.
Vì vậy, nó rất đơn giản.
Đó là một cách tốt đẹp để chỉ cần đi vào và thêm kiểu dáng đơn giản vào trang của bạn.
Tuy nhiên, điều này vẫn loại phá vỡ quy tắc
của chúng tôi muốn tách nội dung ra khỏi phong cách.
Bởi vì nếu bạn muốn thay đổi nó thành, ví dụ, màu đỏ hoặc màu xanh lá cây hoặc
một cái gì đó tương tự sau này, bạn sẽ phải đi vào và
thay đổi thẻ, bởi vì bạn sẽ phải thay đổi thuộc tính.
Vì vậy, tôi thực sự cố gắng để không sử dụng nó ở tất cả, và thay vào đó,
có thói quen làm những điều đúng đắn.
Và cách đúng đắn để tạo kiểu cho các trang của bạn là sử dụng CSS.
Bảng kiểu xếp tầng về cơ bản là một cách để bạn viết các quy tắc cho biết cách bạn
muốn tạo kiểu cho tất cả các đoạn văn, hoặc cách bạn muốn tạo kiểu cho tất cả các đầu đề của bạn, hoặc
cách bạn muốn tạo kiểu cho một số hình ảnh của bạn.
Đó là một
cách thực sự tốt đẹp, cụ thể mà tất cả mọi người có thể làm theo để thực hiện các lựa chọn kiểu dáng.
Và các quy tắc được thiết lập như thế này.
Đầu tiên bạn phải đặt lên bộ chọn
của bạn, và bộ chọn chỉ là một cách ưa thích để nói những gì bạn muốn phong cách.
Trong trường hợp của chúng tôi, chúng tôi sẽ bắt đầu bằng cách chỉ cho chọn
tên thẻ khác nhau như h1 hoặc đoạn văn.
Một khi bạn tìm thấy thẻ bạn muốn tạo kiểu,
bạn nói bạn muốn thay đổi thuộc tính nào.
Vì vậy, chúng ta có thể nhìn vào những thứ như màu sắc, màu nền,
bao nhiêu không gian chúng ta đặt xung quanh nó, chúng ta sẽ bao gồm tất cả những thứ đó.
Nhưng ngay bây giờ, chúng ta sẽ bắt đầu rất đơn giản và đối phó với màu sắc.
Sau đó, bạn phải cung cấp cho mỗi thuộc tính một giá trị
, nói rằng màu bạn muốn nó là.
Vì vậy, ở một bên, chúng tôi có rất chung chung, làm thế nào chúng tôi viết một quy tắc.
Và mặt khác, tôi đã viết một quy tắc rất cụ thể rằng, hey,
bất cứ khi nào bạn nhìn thấy một tiêu đề h1, tôi muốn bạn làm cho phông chữ màu xanh lam.
Vì vậy, chúng tôi đã làm chính xác những gì chúng tôi đã làm khi chúng tôi nhúng bằng cách sử dụng thẻ phong cách,
nhưng bây giờ nó rất chung chung, và chúng tôi không nói về một tiêu đề cụ thể.
Chúng tôi không nói về một thẻ cụ thể.
Vì vậy, khi bạn viết những quy tắc đó, cú pháp là rất quan trọng.
Rất nhiều lần, khi bạn viết HTML, trình duyệt thực sự tốt đẹp với bạn và
nếu bạn quên đóng một thẻ nó nói, không sao,
Tôi biết những gì cô ấy muốn tôi làm và nó sẽ đi trước và đặt trang lên anyway.
Khi bạn đang làm CSS,
nếu bạn đang cẩu thả với những gì chúng tôi gọi là cú pháp của bạn, bạn sẽ gặp rắc rối.
Vì vậy, dấu ngoặc và dấu chấm phẩy là rất quan trọng.
Vì vậy, để tôi cho các bạn thấy một lần nữa khi chúng tôi quay lại đây, các
bạn có thể thấy rằng tôi có một dấu ngoặc bắt đầu
và một dấu ngoặc đóng, và tôi có dấu chấm phẩy ngay ở cuối.
Bạn cần phải nhớ để bao gồm những điều đó.
Và một trong những lý do tôi nói về điều này là khi bạn bắt đầu viết mã của bạn,
khi bạn chọn một trình soạn thảo tốt, và hầu hết các biên tập viên là khá tốt, chẳng hạn như Sublime
hoặc TextWrangler, TextedIt, Notepad ++, họ sẽ đặt màu sắc cho bạn.
Vì vậy, tất cả đột nhiên nếu bạn đang nhìn vào các quy tắc CSS của
bạn và bạn giống như, woah, tôi loại mong đợi những điều sẽ được màu sắc khác nhau, nhưng
thay vào đó tất cả mọi thứ đều màu trắng hoặc tất cả mọi thứ đều màu đỏ.
Nó cung cấp cho bạn gợi ý này rằng bạn đã làm rối tung cú pháp quy tắc của bạn.
Trong cùng một dòng, tôi chỉ muốn ném vào đây rằng khi bạn đang viết quy tắc của bạn,
bạn có thể đưa ý kiến vào giúp bạn gỡ lỗi và
giúp bạn giải thích cho mình những gì bạn đang đi.
Và đây là cách nhận xét được thực hiện trong CSS.
Bạn chỉ cần thực hiện các /*, */ một lần nữa.
Vì vậy, điều gì sẽ xảy ra nếu bạn muốn làm nhiều hơn chỉ một tài sản?
Điều gì sẽ xảy ra nếu thay vì nói rằng bạn chỉ muốn màu xanh dương,
bạn cũng muốn màu nền là màu vàng?
À, không có vấn đề gì cả.
Bạn có thể có nhiều kết hợp giá trị thuộc tính như bạn muốn.
Bạn chỉ cần nhớ tách chúng bằng dấu chấm phẩy.
Vì vậy, trong trường hợp này, một lần nữa,
tôi đã đặt màu thành màu xanh và màu nền thành màu vàng.
Được rồi,
bây giờ anh biết cách viết một quy tắc làm thế nào để chúng ta thực sự làm việc?
Vâng có hai cách và cách
đầu tiên tôi sẽ nói với bạn về được gọi là sử dụng một Internal Style Sheet.
Vì vậy, như bạn có thể nhìn thấy ở đây trong mã của tôi, Tôi đã có các mẫu cơ bản của tập tin của chúng tôi.
Và bên trong các thẻ đầu, tôi đã đặt thẻ phong cách này vào, đó là nơi
bạn sẽ muốn đặt các quy tắc của bạn, chúng được định nghĩa ngay trong phong cách đó.
Vì vậy, bây giờ, bên trong thẻ phong cách, tôi đã thêm h1, màu xanh, và
tôi đã kết thúc thẻ phong cách của mình.
Vì vậy, những gì xảy ra bây giờ là khi trình duyệt mở trang của bạn,
nó được đến phần đầu nó nói, oh tuyệt vời,
cô ấy đã viết một số quy tắc, chúng ta hãy xem những gì cô ấy muốn tôi làm.
Và nó sẽ biết để đi qua trang của bạn và
áp dụng quy tắc này cho tất cả các thẻ H1.
Và nếu bạn có nhiều quy tắc bao gồm đoạn văn, hình ảnh, những thứ như thế,
nó sẽ biết, tôi muốn áp dụng điều này cho tất cả các trường hợp trong toàn bộ tập tin.
Được rồi.
Bây giờ có một cơ hội rất tốt bạn sẽ làm hỏng bởi vì tôi làm điều này 80%
thời gian khi tôi đang phát triển trong lớp học, và
những gì tôi làm là tôi quên đóng thẻ phong cách này.
Và nếu bạn quên đóng thẻ phong cách đó ở dưới cùng,
cũng thực sự trang của bạn có thể bị trống.
Vì vậy, đừng hoảng sợ khi bạn lần đầu tiên bắt đầu thực hiện việc này nếu trang của bạn trống,
nó có thể có nghĩa là bạn quên đóng thẻ phong cách.
Được rồi.
Vì vậy, các bảng kiểu nội bộ thực sự tốt đẹp
khi bạn chỉ cố gắng tạo kiểu cho một trang.
Được chứ?
Và tôi thường làm điều đó chỉ để tôi có thể giữ tất cả mã của tôi trong một tập tin thay vì đi
qua lại và qua lại.
Nhưng hãy tưởng tượng rằng bạn có trang web nơi bạn sẽ có 10,20, 1.000
trang khác nhau và bạn muốn tất cả chúng có một cái nhìn rất nhất quán về chúng.
Bạn không muốn phải vào và nói nếu bạn muốn thay đổi màu sắc,
bạn không muốn phải vào và mở tất cả các tập tin đó để
bạn có thể đổi màu thành đỏ hoặc xanh lá cây.
Thay vào đó, những gì bạn muốn sử dụng là bạn muốn sử dụng một cái gì đó được gọi là
bảng kiểu bên ngoài.
Cách nó hoạt động với một bảng kiểu bên ngoài là bạn đặt các quy tắc của bạn
trong một tệp khác.
Vì vậy, bạn mở một tập tin,
bạn sẽ lưu nó một cái gì đó như mystyle với một phần mở rộng tập tin .css.
Vì vậy, bây giờ trình duyệt biết, oh tất cả mọi thứ trong HTML, đó là nội dung.
Tất cả mọi thứ trong .css, đó là cách bố trí.
Bây giờ, khi bạn tạo bảng kiểu bên ngoài của bạn, nó trông giống như chúng tôi vừa làm
trong nội bộ, ngoại trừ bạn không sử dụng thẻ kiểu dáng.
Sau đó, một khi bạn đã đặt các quy tắc của bạn trong một tập tin riêng biệt,
tất cả những gì bạn cần làm là thêm một liên kết vào phần đầu.
Vì vậy, trong trường hợp này, tôi đã đi vào,
tôi đã đặt liên kết của tôi, tôi cần phải cho nó biết mối quan hệ cuz của bảng phong cách.
Và bạn phải nhớ để đặt tên tập tin.
Vì vậy, một lần nữa đây là nơi mà nó sẽ thực sự quan trọng
mà bạn đang đặt tên những thứ theo cách mà chúng tạo ra từ trước đến nay.
Bạn có thể liên kết đến nhiều trang kiểu khác nhau tùy ý,
hầu hết thời gian chúng tôi bắt đầu với một trang.
Vì vậy, bây giờ chúng tôi đã có bảng phong cách đó,
mỗi tập tin duy nhất liên kết đến nó tất cả sẽ chia sẻ bảng phong cách đó.
Vì vậy, nhớ khi tôi đề cập rằng bạn có thể có một trang web với 10, 20,
1000 trang và bạn quyết định thay đổi màu đó từ xanh sang đỏ hoặc xanh lá cây hoặc một
cái gì đó tương tự?
Điều này thật tuyệt.
Tất cả những gì bạn cần làm là mở style.css, thay đổi một dòng mã, và
bây giờ bạn đã chỉ thay đổi tiềm năng hàng ngàn trang Okay,
vì vậy chúng ta hãy nói một giây về ý tưởng này của bảng phong cách xếp tầng.
Điều đó có nghĩa là chúng ta đang xếp tầng?
Vâng, khi trình duyệt đi để làm cho trang của bạn, điều đầu tiên nó sẽ nhìn vào
là đi, được rồi, có lẽ họ không nói với tôi bất cứ điều gì.
Làm thế nào để tôi thường làm cho đầu đề h1?
Làm thế nào lớn để tôi tạo phông chữ đó?
Có loại giá trị mặc định riêng của nó.
Nhưng sau đó nó đi và nó trông và nó nói, oh có bất kỳ tờ phong cách bên ngoài.
Bởi vì nếu vậy, tôi sẽ ghi đè lên mặc định trình duyệt của tôi và
đặt trong các quy tắc đó là trong bảng phong cách bên ngoài này thay vào đó.
Tiếp theo nó sẽ kiểm tra phong cách nội bộ.
Đó là phong cách mà bạn có trong phần đầu.
Bởi vì nói chung, trình duyệt nghĩ, hm, có lẽ có một cái gì đó thực sự đặc biệt
về trang cụ thể này, và ở đây cô ấy muốn tôi làm những quy tắc này thay vào đó.
Cuối cùng, bất kỳ trong những phong cách nội tuyến mà bạn sử dụng thẻ thuộc tính,
những sẽ có ưu tiên cao nhất của tất cả.
Vì vậy, nó có thể thực sự khó hiểu, bởi vì bạn có thể bắt đầu viết ra các quy tắc khác nhau,
và bạn không thể tìm ra lý do tại sao một số đang hoạt động và một số thì không.
Đây là nơi phần tầng xuất hiện lần nữa.
Đầu tiên nó nhìn vào mặc định, sau đó bên ngoài, sau đó nội bộ, và sau đó nội tuyến.
Đó là lý do tại sao bạn thực sự muốn tránh sử dụng bất kỳ phong cách nội tuyến bởi vì
nó khá nhiều vô hiệu hóa tất cả các quy tắc kiểu dáng của bạn.
Được rồi, vì vậy chúng ta biết bốn trang này đi như thế nào, nhưng nếu bạn có một bộ chọn và,
bạn đã liên kết với hai hoặc ba trang kiểu khác nhau, và
cùng một H1 đã được định nghĩa là xanh dương, xanh lá cây và vàng, nhưng trong các tập tin khác nhau.
Làm thế nào để trình duyệt biết phải làm gì?
Vâng, cách nó hoạt động là các quy tắc từ tập tin gần đây nhất có ưu tiên.
Và những gì tôi muốn nói bởi tập tin gần đây nhất, nó có nghĩa là
nó đi lên phần đầu và nó đi một, hai, ba, và nó nhìn vào thứ tự bạn liệt kê chúng,
và cái cuối cùng bạn liệt kê là cái mà sẽ được ưu tiên.
Được chứ?
Vâng, nếu bạn có một bộ chọn trong cùng một tập tin, và
bạn đã viết H1 nhiều lần.
Điều này thực sự có thể xảy ra khá một chút.
Đặc biệt là nếu bạn quyết định đi ra ngoài và trở thành một phần của một công ty phát triển lớn,
bạn viết một số mã, và sau đó ai đó viết một số mã, hoặc,
như tôi nói với các bạn của tôi, có thể bạn đã đi ra ngoài và có một thời gian thực sự tốt vào một đêm,
và bạn về nhà và quyết định, tôi sẽ lập mã!
Và bạn quên rằng bạn đã viết một số quy tắc.
Vâng, nếu đó là trường hợp, một lần nữa,
trình duyệt sẽ nhìn vào trình duyệt mà nó đã thấy cuối cùng.
Vì vậy, trong trường hợp này, tôi có hai quy tắc cho h1.
Một người viết ở màu xanh lam.
Và tôi nói, hey tôi muốn bạn sử dụng gia đình phông chữ trên không này.
Và sau đó, có thể có rất nhiều thứ ở đây, có
thể là không có gì, và tôi nói hey, tôi muốn bạn sử dụng một gia đình phông chữ Times.
Làm thế nào mà trình duyệt sẽ nhìn vào nó là nó sẽ đi xuống,
doo-doo-doo-doo và nói, tôi sẽ làm cho tất cả phông chữ màu xanh, và
tôi sẽ đi trước và làm cho gia đình phông chữ Times.
Nó chỉ là luôn luôn sử dụng cái cuối cùng nó thấy.
Vì vậy, một lần nữa, quy tắc gần đây nhất có ưu tiên,
cho dù đó là bên trong mã của bạn hoặc nó đến từ các tập tin khác nhau.
Tuy nhiên, có một cách để ghi đè lên điều này.
Giả sử bạn đang viết một cái gì đó và bạn biết bạn muốn một cái gì đó như vậy.
Bạn không quan tâm nếu có ai khác ghi đè nó.
Bạn thực sự muốn chắc chắn rằng mọi người không sử dụng phong cách nội tuyến,
những thứ khác nhau như thế.
Những gì bạn có thể sử dụng là bạn có thể sử dụng! Thuộc tính quan trọng ngay tại đây.
Vì vậy, ngay đây tôi có font-family, Arial, và tôi có quan trọng ở đây.
Vì vậy, mặc dù sau đó tôi quyết định ghi đè lên nó với thời gian, trình duyệt sẽ nói không
, tôi biết rằng cô ấy thực sự muốn tôi sử dụng Arial, và nó hoạt động.
Vì vậy, chúng ta hãy tiếp tục xem xét một ví dụ về những gì tôi muốn nói bởi tất cả những tiền lệ đó.
Tôi biết chỉ nghe tôi có thể có một chút áp đảo, vì vậy tôi có một
ví dụ nhanh cho bạn thấy những cách khác nhau và sau đó tôi sẽ kết thúc bài giảng này.
Vì vậy, chúng ta hãy bắt đầu bằng cách sử dụng thuộc tính style.
Như bạn có thể thấy ở đây, tôi đã viết mã, và
tôi đã sử dụng thuộc tính phong cách cho tiêu đề h1 này, và một đoạn văn này.
Vì vậy, trong trường hợp này, tôi muốn tiêu đề h1 của tôi là màu xanh, và đoạn văn của tôi là màu đỏ.
Và điều tôi thực sự muốn cho
các bạn thấy là đoạn văn duy nhất được thay đổi thành văn bản màu đỏ hoặc phông chữ đỏ là đoạn đầu tiên.
Cái còn lại vẫn còn màu đen.
Vì vậy, cách duy nhất để tạo kiểu là nếu bạn đi vào và thay đổi
từng thẻ để làm cho nó trông giống như bạn muốn.
Nếu tôi muốn tất cả các đoạn văn được màu đỏ, tôi sẽ phải đi vào đó và
đặt phong cách bằng nhau, phong cách bằng nhau.
Trong ví dụ này chỉ có hai,
nhưng bạn có thể tưởng tượng làm thế nào nó sẽ trở nên thực sự khó chịu nếu bạn có rất nhiều, okay.
Trong ví dụ tiếp theo của chúng tôi, chúng tôi có một phong cách nội bộ.
Trong trường hợp này, tôi đã đặt thẻ phong cách của tôi lên trên cùng và tôi đã thêm quy tắc cho
đoạn văn và tiêu đề H1, và nó nên xử lý cả hai.
Vì vậy, bây giờ không còn gì ở đây nữa, thẻ của tôi là tất cả của chính nó.
Và nếu bạn nhìn vào kết quả, chúng ta hãy đi qua đây.
Bạn có thể thấy rằng bây giờ, mặc dù HTML của tôi không có bất kỳ loại phong cách
ở tất cả, cả hai đoạn văn có màu đỏ ở đây và như vậy là tiêu đề.
Được chứ?
Ví dụ cuối cùng tôi dành cho bạn là, tôi lấy những quy tắc chính xác này và
tôi đưa chúng vào một bảng kiểu bên ngoài.
Một lần nữa, không có thẻ phong cách ở đây.
Đó chỉ là những quy tắc riêng của mình.
Và sau đó tôi đã phải quay trở lại tập tin HTML, và bạn có thể nhìn thấy ngay ở đây,
gần đầu trang, tôi có hey, chúng ta hãy liên kết đến bảng phong cách tôi muốn.
Bây giờ, tôi muốn chỉ ra điều này rất cẩn thận với các bạn.
Nếu bạn nhận thấy, tôi có CSS/ExternalStyle tờ.
Điều này có nghĩa là bảng phong cách của tôi nằm trong một thư mục đặc biệt gọi là css.
Các nhà phát triển thực sự nhấn mạnh rằng bạn làm điều này,
bởi vì bạn muốn mã của bạn được loại tổ chức thành các phần khác nhau.
Vì vậy, một lần nữa, trong cùng một cách,
bây giờ tôi có một trang sử dụng bảng kiểu bên ngoài và trông thực sự tốt.
Vì vậy, tất cả các mã này sẽ có sẵn cho bạn để xem nó, nhưng
tôi muốn bạn loại chơi với nó càng nhiều càng tốt.
Nhưng, tôi muốn sử dụng ví dụ cuối cùng này để giúp
bạn hiểu cách thức hoạt động của tầng.
Vì vậy, ngay tại đây, tôi có bảng phong cách bên ngoài của tôi.
Tôi sẽ qua đây một chút.
Đi đến của tôi, và tôi sẽ thêm, Một điều cuối cùng.
Xin lỗi, chuyện này sẽ khó xử đấy.
Và tôi sẽ nói là anh biết gì không?
Thay vào đó, tôi muốn phông chữ đó là màu đen một lần nữa, và tôi kết thúc nó.
Tôi sẽ cho anh thấy chuyện gì sẽ xảy ra khi anh làm hỏng nhanh.
Tôi sẽ lưu nó, tôi sẽ tải lại trang của mình và mọi thứ biến mất.
Đây là những gì tôi đang nói đến.
Bạn thực sự muốn chắc chắn rằng bạn bao gồm thẻ phong cách đó.
Làm đi. Hãy chắc chắn rằng bạn đóng nó lại.
Được rồi.
Vì vậy, bây giờ những gì tôi đã xảy ra ở đây là trình duyệt của tôi có mặc định trình duyệt của nó.
Nó có một tờ phong cách bên ngoài, và bây giờ nó cũng có một tờ nội bộ.
Vì vậy, chúng ta hãy xem nó sẽ là màu gì,
nếu nó sẽ là màu xanh hoặc nếu nó sẽ là màu đen.
Và như bạn có thể thấy, nó màu đen.
Vì vậy, khi bạn bắt đầu tạo kiểu, nó sẽ rất quan trọng là bạn nhìn vào các
cách khác nhau để tách nội dung của bạn khỏi định dạng của bạn.
Cũng như nhìn vào các cách khác nhau mà bạn có thể thực hiện định dạng đó.
Vì vậy, một trong những điều đầu tiên tôi muốn bạn nghĩ đến
là làm thế nào ý tưởng về các
bảng kiểu bên ngoài và nội bộ thực sự đóng vai trò trong việc tách nội dung khỏi định dạng.
Và đồng thời tôi muốn các bạn hiểu rằng chúng ta không phải lúc nào cũng
tuân theo mọi quy tắc.
Trong đầu chúng tôi luôn phải bắt đầu với thực sự,
thực sự đơn giản ví dụ để giúp các bạn củng cố những gì đang xảy ra với CSS.
Vì vậy, tôi chỉ sẽ kết thúc điều này bây giờ với một ngắn
gọn, bản demo ngắn gọn từ một ví dụ họ có tại csszengarden.com bởi vì
tôi nghĩ rằng nó thực sự mang về nhà ý tưởng rằng CSS có thể rất mạnh mẽ.
Vì vậy, chúng ta hãy xem.
Vì vậy, tại trang web này,
CSS Zen Garden, Họ đã thực sự thực hiện một công việc thực sự tuyệt vời của hiển thị
tất cả các cách khác nhau bạn có thể định dạng một tập tin chính xác nhưng theo những cách khác nhau.
Vì vậy, trên đây, nếu bạn có một cái nhìn, bạn có thể thấy rằng đây là tờ phong cách của một người
để trang trí hoặc tạo kiểu tài liệu này.
Bây giờ, mà không thay đổi bất kỳ HTML nào ở tất cả, một người khác đến và nói, hey,
bạn biết gì, đó là tốt, nhưng tôi sẽ phong cách nó theo cách này.
Trông nó hoàn toàn khác.
Đó là cùng một HTML chính xác nhưng nó trông hoàn toàn khác nhau.
Trong cùng một cách, chúng tôi đã có một cái này ngay tại đây, cùng một HTML chính xác.
Nhưng bạn không thể nhìn bất kỳ khác nhau,
bởi vì họ đã thêm một số CSS và JavaScript vào nó đó là khác nhau.
Vì vậy, hãy đi với tôi.
Chúng ta sẽ mã hóa rất nhiều trong khóa học này.
Chúng ta sẽ chơi rất nhiều với khóa học này.
Anh sẽ làm rối tung rất nhiều trong khóa học này.
Nhưng tôi không thể chờ đợi
cho bạn phát triển một cái gì đó thực sự phản ánh cách bạn muốn trang của bạn trông.
Cảm ơn.