Chào mọi người, chào mừng trở lại.
Một trong những điều tôi thực sự muốn nhấn mạnh trong này Giới thiệu về khóa học CSS
Là có điều này cần phải dừng lại và thực hành và xem xét những gì chúng tôi đã học được cho đến nay.
Vì vậy, tôi sẽ đảm bảo rằng tôi bao gồm những thứ nhỏ nhặt mà tôi sẽ gọi là
Code Together.
Vì vậy, nếu bạn đang xem điều này ngay bây giờ, và bạn không có máy tính xách tay của bạn bên cạnh bạn hoặc
bất cứ điều gì bạn đang sử dụng để mã, tôi thực sự hy vọng bạn sẽ dừng lại, đi lấy nó, và
mã cùng với tôi bởi vì chỉ lắng nghe tôi không thực sự cung cấp cho bạn
trải nghiệm thực sự bạn cần để gõ nó vào và phạm sai lầm khi chúng ta đi cùng nhau.
Được rồi, chúng ta hãy đi trước và bắt đầu.
Những gì tôi sẽ làm trong video này là tôi sẽ quay trở lại một oldie nhưng
một goodie mà chúng tôi đã làm trong HTML lăm.
Và tôi muốn chúng ta đi vào cùng nhau và tạo kiểu cho nó.
Được rồi, chúng ta hãy bắt đầu bằng cách làm cho tập tin CSS của chúng tôi.
Tôi sẽ tiếp tục và tạo ra một cái mới bây giờ,
đi lên đây để tập tin, tập tin mới, hoặc bạn có thể làm lệnh N.
Và điều đầu tiên bạn muốn làm là bạn muốn lưu nó như một tập tin CSS, do
đó, theo cách đó biên tập viên của bạn biết để tô màu mọi thứ theo cách bạn muốn nó tô màu.
Bây giờ, bất cứ khi nào tôi đang thiết kế các trang,
tôi giữ tất cả các tập tin HTML của tôi trong một thư mục và các tập tin CSS của tôi trong một thư mục khác.
Và tôi thực sự khuyến khích các bạn làm điều tương tự.
Vì vậy, tôi sẽ đi trước và đi vào thư mục CSS của tôi.
Và tôi sẽ gọi điều này, chúng ta hãy gọi nó là together-1.css.
Nó thực sự quan trọng là bạn nhớ để đặt phần mở rộng tập tin đó, hoặc
mọi thứ sẽ không hoạt động.
Được rồi, đây là trang cũ, nhàm chán của tôi.
Những gì mọi người thường làm là họ tạo kiểu từ đầu trang và
làm việc theo cách của họ.
Vì vậy, tôi muốn bạn chọn các giá trị của riêng bạn, nhưng chúng ta hãy cùng nhau đi trước và tạo
kiểu cho tiêu đề của tôi.
Oops, điều sai lầm ở đây.
Và chúng ta có thể cho nó một nền tảng.
Tôi sẽ thử B3B3B3.
Chúng tôi có thể cung cấp cho nó một phông chữ lớn hơn nếu bạn muốn.
Tôi sẽ nói cỡ chữ.
Hãy làm cho nó 150%.
Chỉ là một chút gì đó khác biệt.
Tôi sẽ lưu lại điều này, và tôi luôn khuyến khích sinh viên thực hiện những thay đổi nhỏ cho
mã của họ và sau đó kiểm tra và xem những gì đã xảy ra.
Để xem chúng ta có thay đổi gì ở đây không.
Và bây giờ tôi sẽ tải lại nó và xem những gì đã xảy ra, và
nếu bạn để ý, không có gì xảy ra.
Vâng, vấn đề là tôi đã không liên kết các phong cách bảng một cách chính xác với các tập tin HTML.
Hãy nhớ làm thế nào tôi đã nói với bạn tôi luôn nghĩ rằng đặt mọi thứ trong một thư mục gọi là CSS?
Tôi cần phải bao gồm điều đó.
Được rồi, quay lại.
Nạp đạn lại.
Ồ, này! Tôi có một chút gì đó
đang diễn ra ở đó.
Được chứ?
Vì vậy, bây giờ chúng ta hãy tiếp tục và chỉ cần thêm một vài điều nữa.
Tôi biết nó không giống như ví dụ của tôi.
Nhưng một trong những điều tôi muốn làm tiếp theo là, tôi muốn đi trước và phong cách, để xem,
tiêu đề của tôi.
Hãy cho toàn bộ tiêu đề một màu nền.
Được rồi.
Bạn có thể chọn bất cứ thứ gì bạn thích.
Và tôi sẽ chọn nền tảng: Tôi nghĩ tôi có 66666, được rồi.
Và chúng ta hãy tiếp tục và tôi thực sự muốn sắp xếp văn bản đó.
Vì vậy, tôi sẽ gọi nó là text-align: trung tâm.
Lưu, làm mới.
Oh, chúng ta đang đến đó!
Trang này bắt đầu trông hơi khác nhau mọi lúc.
Có một điều khiến tôi bối rối là nó dường như không thích nền tảng của tôi.
Vì vậy, nếu tôi quay lại, tôi sẽ nhận ra, oh, tôi quên dấu hiệu # ngay trước mặt.
Và làm một, hai, ba, bốn, năm, sáu.
Lưu nó ở đây.
Làm mới.
Chúng ta đi đây.
Bây giờ những màu này thực sự xấu xí và thực sự khó khăn cho bạn để nhìn thấy.
Và tôi nhận ra điều đó.
Vì vậy, chúng ta hãy tiếp tục và chơi với những thứ để làm cho nó dễ dàng hơn một chút.
Chúng ta hãy đi trước và đưa vào.
Hãy thay đổi h1 vì vậy nó là một màu khác nhau và
chúng ta hãy tiếp tục và thay đổi điều hướng.
Vì vậy, chúng tôi có, tôi sẽ thay đổi phông chữ, chúng ta hãy thử các biến thể phông chữ.
Tôi thích biến thể phông chữ.
Nó cho phép bạn đặt mọi thứ vào chữ hoa, chữ thường, những thứ khác nhau như thế.
Chúng tôi cũng có kích thước phông chữ.
Tôi vẫn không hài lòng với kích thước, vì vậy tôi sẽ làm cho nó 150%,
và người cuối cùng tôi sẽ làm là phông chữ gia đình.
Bây giờ nếu bạn nhớ lại, với font-family nó rất phong tục để cung cấp cho nó nhiều hơn
một giá trị bởi vì không phải mọi trình duyệt đều hỗ trợ mỗi font-family.
Vì vậy, trong trường hợp của tôi, tôi sẽ tiếp tục và thử vào Arial,
Times New Roman.
Nếu bạn có một phông chữ được tạo thành từ nhiều từ,
bạn cần đặt chúng vào trong dấu ngoặc kép.
Và sau đó cuối cùng chỉ là Serif.
Đây là cách tôi viết mã.
Tôi viết mã cho những sai lầm.
Tôi viết mã bằng lỗi chính tả.
Thành thật mà nói, tôi hiếm khi mã trong một nút xuống áo trông rất khó chịu.
Cách để mã hóa là thoải mái với một cốc cốc và một thanh Hershey để
khi bạn hoàn thành, bạn sẽ có những vết cắn nhỏ của sô cô la.
Nhưng bây giờ, tôi sẽ cố hết sức để dẫn dắt anh đi cùng.
Tôi đã thay đổi rất nhiều thứ.
Để xem chuyện gì đã xảy ra.
Anh có thể thấy tôi sẽ làm lớn hơn một chút, chúng ta sẽ bắt đầu đến đó.
Chúng tôi có màu nền, chúng tôi có những thứ như thế.
Vì vậy, chúng ta hãy tiếp tục và chỉ tạo thêm vài thứ với nhau,
và sau đó chúng ta sẽ tiếp tục học thêm một chút.
Tôi muốn thấy bạn chọn những thứ của riêng bạn cho h2.
Vì vậy, h2 tôi sẽ chọn một màu khác nhau,
chúng ta hãy thử cùng một màu 666666 và một nền khác nhau.
Tôi sẽ sử dụng 00B7EA.
Vậy, nó có quan trọng không?
Liệu nó có quan trọng cho dù tôi gõ nó như EA chữ hoa, chữ thường?
Nó không quan trọng chút nào.
Điều quan trọng là bạn thường nhất quán để
bạn không gây rối bản thân khi bạn đang đi qua lại.
Được chứ?
Chúng ta sẽ làm mới lại.
Được rồi.
Nó bắt đầu trông khác nhiều.
Đây không phải là phong cách nhiều.
Chỉ có một, hai, ba, bốn, năm.
Năm quy tắc và chúng tôi đã có một cái nhìn khác nhau nhiều.
Tôi sẽ đi trước và làm cho màn hình nhỏ hơn bởi vì khi tôi đặt
trong đó kích thước phông chữ 150%, nó làm cho một sự khác biệt lớn.
Được rồi.
Một loại điều tuyệt vời cuối cùng tôi muốn bạn cố gắng làm là tiếp tục và
cố gắng tạo kiểu bản tóm tắt trong các chi tiết.
Bởi vì nếu tôi muốn làm cho chỉ, Tôi lớn lên ở Ashtabula Ohio phần, làm
thế nào bạn có thể làm cho chữ nghiêng đó nhưng không phải phần còn lại?
Được rồi, nếu bạn nhớ những gì mã HTML trông giống như,
hãy để tôi chỉ cho bạn một ví dụ nhanh, là ngay dưới đây tôi có thẻ chi tiết của tôi và
nếu bạn chưa nhìn thấy nó trước đây, Tôi đặt từ mở trong
đó có nghĩa là mặc định hiển thị nó là mở, vì vậy không ai phải bấm vào nó.
Tôi có chi tiết của mình.
Tôi có bản tóm tắt của tôi nơi mà phần My Childhood xuất hiện, và
sau đó tôi có tất cả phần này.
Vì vậy, nếu bạn muốn làm cho chữ nghiêng, và chỉ có điều đó, làm thế nào để bạn làm điều đó?
Được rồi.
Những gì chúng ta sẽ bắt đầu với, là chúng ta sẽ phong cách thẻ chi tiết.
Và tôi sẽ cuộn lên đây một chút để các bạn có thể thấy tốt hơn một chút,
hy vọng thế.
Và điều tôi muốn nói là tôi muốn làm mọi thứ nghiêng, và
cách bạn làm như vậy là bạn đi và đặt theo kiểu phông chữ: nghiêng.
Hiểu chưa?
Bây giờ đây sẽ không chính xác những gì chúng ta muốn bởi vì những gì tôi đã làm là tôi đã
in nghiêng mọi thứ.
Bây giờ anh muốn quay lại và nói, nhưng anh biết không?
Tôi không muốn tóm tắt.
Tôi không muốn tóm tắt bằng chữ nghiêng.
Oops, quay lại đây.
Tóm tắt và tôi có thể nói phông chữ.
Ôi, kiểu phông chữ.
Làm thế nào bạn làm cho nó để nó không nghiêng,
mặc định hầu hết mọi thứ không phải là, bạn thực sự có thể đặt trong từ bình thường.
Được rồi.
Vậy là vậy.
Bây giờ chúng ta có phần này in nghiêng và phần này in đậm.
Đối với hầu hết các phần chúng tôi đã hoàn thành nhưng tôi sẽ thêm một điều nhỏ,
bởi vì nó thực sự phổ biến cho mọi người để phong cách đầu
trang của họ và chân trang của họ một cách rất giống nhau.
Vì vậy, chúng ta hãy đi và thêm phong cách chân trang của tôi.
Và những gì tôi muốn làm là tôi muốn cho nó cùng một màu nền
mà tiêu đề của tôi có.
Vì vậy, nền tảng, một, hai, ba, bốn, năm, sáu, bùng nổ.
Và đây rồi.
Vì vậy, những gì chúng tôi đã làm bây giờ là chúng tôi đã đi từ một rất đơn giản, tập tin HTML cơ bản và
chúng tôi đã bắt đầu thêm một chút màu sắc, một chút kích thước phông chữ,
một chút khác nhau như thế.
Để tôi chỉ cho bạn xem tập tin gốc trông như thế nào một lần nữa và
chúng ta sẽ xem chúng cạnh nhau.
Tôi sẽ bình luận ra tờ phong cách của tôi.
Tôi sẽ mở nó ra và bạn có thể thấy đây là hai trang trông rất khác nhau.
Nhưng chúng hoàn toàn giống nhau HTML.
Được rồi, đây là những thứ bạn cần phải làm cho
bài tập về nhà trong phần này.
Vậy hãy tập luyện ở đây, quay lại và xem tôi,
nếu nó giúp bạn vượt qua được một chút.
Nhưng điều quan trọng là, mã, mã, mã, chúc may mắn.