Xin chào, trong bài giảng hôm nay, chúng ta sẽ nói về tạo kiểu văn bản của bạn trên trang web của bạn. Một trong những cách tốt nhất và dễ nhất để thực sự làm cho trang của bạn trông hơi khác so với mặc định tiêu chuẩn là suy nghĩ về cách bạn có thể muốn tạo kiểu văn bản của bạn để loại mang lại tác động tối đa. Rất nhiều, nhiều lựa chọn và chúng ta sẽ nói về một số trong số họ hôm nay. Một trong những lựa chọn đó là suy nghĩ về cơ bản phông chữ của bạn. Một số điều bạn có thể tạo kiểu là họ phông chữ, kiểu phông chữ, biến thể phông chữ và kích cỡ phông chữ. Chúng tôi cũng có thể suy nghĩ về kiểu dáng màu sắc và nền của phông chữ của bạn. Chúng ta cũng có thể nói về sự liên kết. Và cuối cùng, chúng ta sẽ nói rất ngắn gọn về chiều cao dòng. Đây là tất cả bốn điều mà bạn có thể làm để chỉ thực sự loại nổi bật hoặc nhấn mạnh những điều khác nhau mà bạn muốn phong cách của bạn mang lại. Vì vậy, trước tiên chúng ta hãy nói về phông chữ gia đình. Họ phông chữ chỉ là các loại văn bản khác nhau. Vì vậy, nếu bạn đã sử dụng Word trước đây, bạn đã đi vào, bạn đã đi đến phông chữ gia đình và bạn có thể chọn Arial hoặc Wingdings hoặc tất cả các loại phông chữ khác nhau. Bạn có thể làm những việc tương tự trên trang web của mình. Vì vậy, tôi có một vài ví dụ trên đây cho các bạn về những điều phổ biến hơn. Bạn có Helvetica, Chuyển phát nhanh, Chuyển phát nhanh mới, Comic Sans, chữ thảo hoặc Verdana. Tôi đã cố gắng để đặt kiểu phông chữ ở đây trong slide, nhưng nó có thể là khó khăn cho bạn để xem. Và tôi cố ý làm điều đó, bởi vì những gì trông hiển nhiên đối với bạn khi bạn thiết kế không phải lúc nào cũng hiển nhiên đối với những người đang nhìn vào trang của bạn. Tôi cũng chọn những cái đặc biệt này vì tôi muốn cho bạn thấy rằng một số là một từ duy nhất, chẳng hạn như Helvetica. Nhưng Comic Sans MS là nhiều từ, vì vậy tôi phải đặt nó vào trong dấu ngoặc kép. Được rồi. Vì vậy, cách nó hoạt động là, một lần nữa, bạn sử dụng quy tắc cú pháp của bạn. Bạn có bộ chọn, tài sản của bạn, và sau đó là giá trị của bạn. Vì vậy, trong trường hợp này tôi đã nói bất cứ khi nào bạn nhìn thấy một tiêu đề h1, không sử dụng tiêu đề mặc định trình duyệt, thay vào đó tôi muốn bạn sử dụng phông chữ Arial. Vì vậy, nó thay đổi phông chữ một chút để trông giống như ví dụ này ở đây. Bây giờ mọi trình duyệt không hỗ trợ mọi thứ. Chúng tôi đã nhìn thấy điều này ngay cả với HTML 5. Một số trình duyệt hỗ trợ một số văn bản, một số thì không. Trong cùng một cách, một số trình duyệt hỗ trợ một số phông chữ và những người khác không tốt. Vì vậy, những gì bạn có thể làm là bạn có thể cung cấp các lựa chọn thay thế. Trong ví dụ này, tôi đã cung cấp cho trình duyệt ba lựa chọn thay thế khác nhau để sử dụng. Tôi về cơ bản nói, bất cứ khi nào bạn đi đến một thẻ h1, tôi thực sự muốn bạn sử dụng phông chữ Courier. Nhưng nếu bạn không có phông chữ Chuyển phát nhanh, hãy tiếp tục và sử dụng phông chữ Impact. Nếu bạn không có cái đó, hãy sử dụng Arial. Bây giờ, một trong những câu hỏi mà bạn có thể tự hỏi là, nếu nó không có bất kỳ ba phông chữ nào? Nó không có Courier, Impact, hoặc Arial. Vâng, nếu bạn nhớ, khi chúng tôi lần đầu tiên nói về bảng phong cách xếp tầng, chúng tôi đã nói nếu bạn cung cấp cho nó một quy tắc và nó không thể hỗ trợ nó, nó sẽ luôn luôn quay trở lại mặc định của trình duyệt. Vì vậy, bạn không cần phải lo lắng về phông chữ biến mất vì bạn đã cho nó một gia đình phông chữ xấu. Nó sẽ luôn đi qua. Vì vậy, khi bạn chọn các dòng chữ của bạn, có một vài điều bạn nên suy nghĩ về. Người đầu tiên có lẽ là quan trọng nhất, là một số phông chữ được nhiều người sử dụng thân thiện hơn so với những người khác. Về cơ bản có hai loại. Bạn có phông chữ serif và phông chữ sans-serif. Các phông chữ serif là những phông chữ có các cạnh lạ mắt dọc theo bên mà bạn sử dụng khi bạn đang học thư pháp hoặc những thứ khác nhau như thế. Các phông chữ sans-serif rất sạch sẽ, không có thả xuống hoặc bất cứ điều gì như thế. Vì vậy, khi đến lúc ai đó thổi tung trang web của bạn, kiểu như thực sự đi vào và tôi đang cố gắng nghĩ ra từ đúng đắn, khi họ muốn vào, và họ muốn làm cho nó trông to hơn. Serif phông chữ thực sự có thể nhận được lộn xộn, vì vậy tránh những bất cứ khi nào có thể. Cá nhân tôi không sử dụng phông chữ tùy chỉnh bản thân mình, nhưng tôi chưa bao giờ là một loại hình nghệ thuật của người. Vì vậy, nếu bạn quyết định rằng bạn muốn có phông chữ của riêng bạn, hoặc một số loại phông chữ tùy chỉnh an toàn web đặc biệt, bạn cần phải sử dụng một cái gì đó đặc biệt ở đây được gọi là quy tắc phông chữ. Và những gì chúng tôi làm, là bạn có thể thấy trong ví dụ đầu tiên, bạn nói, hey, tôi sẽ xác định khuôn mặt phông chữ của riêng mình. Tôi sẽ tình cờ gọi nó là MySpecialFont. Bạn có thể gọi nó bất cứ điều gì bạn muốn gọi nó, và sau đó bạn cần phải cung cấp cho nó một nguồn. Vì vậy, nguồn tin đó, đây là một nguồn tin mới mà bạn chưa từng thấy trước đây. Chúng tôi không sử dụng href, chúng tôi không sử dụng nguồn, chúng tôi đang sử dụng url. Và url nói đây là nơi bạn có thể tìm thấy các tập tin xác định phông chữ đặc biệt của tôi. Và một khi bạn làm điều đó, một khi bạn viết quy tắc khuôn mặt phông chữ một lần, trong suốt phần còn lại của bảng phong cách của bạn, bạn có thể tiếp tục và tham khảo nó. Vì vậy, bây giờ mỗi khi tôi sử dụng một phông chữ h1, bạn sẽ sử dụng MySpecialFont. Vì vậy, bây giờ chúng ta hãy nói về phong cách phông chữ. Đó là một từ huyền ảo hơn nhiều so với bạn có thể mong đợi, nhưng chúng tôi chỉ đơn giản là nói về bạn có muốn phông chữ của bạn trông bình thường , đó là mặc định, hoặc bạn muốn nó được nghiêng? Hoặc bạn muốn nó được xiên, mà về cơ bản chỉ là một loại nghiêng đặc biệt. Vì vậy, phông chữ bình thường sẽ xảy ra không có vấn đề gì nếu nó chỉ là làm thế nào nó sẽ được. Nếu ai đó đã viết một tờ phong cách và họ đã làm cho nó tất cả nghiêng, đó là khi bạn có thể muốn nói, không, không, tôi sẽ ghi đè lên nó và làm cho nó bình thường. nghiêng luôn là một loại nạc nhất định, về cơ bản, để phông chữ của bạn. Một xiên là khi bạn thực sự muốn được thêm đặc biệt và xác định chính xác góc bạn muốn có văn bản của bạn nghiêng về phía. Các biến thể phông chữ, chúng tôi thực sự chỉ có hai tùy chọn ở đây. Chúng tôi có bình thường và chúng tôi có mũ nhỏ. Mọi người sử dụng điều này khá một chút khi họ đang cố gắng để làm một cái nhìn rất phù hợp và nhưng hơi lạ mắt với nó. Vì vậy, ở đây tôi đã nói một lần nữa, luôn luôn sử dụng h1, tôi muốn biến thể phông chữ của tôi là nhỏ mũ. Vì vậy, bây giờ khi bạn nhìn vào văn bản của tôi, văn bản h1 của tôi xuống ở phía dưới, Tôi đã viết <h1> thay đổi mũ nhỏ. Nhưng khi trình duyệt hiển thị nó, nó sẽ hiển thị nó trong mũ nhỏ. Vì vậy, điều này giữ cho bạn không phải đi qua lại để ghi nhớ để thay đổi tất cả văn bản của bạn thành chữ hoa hoặc chữ thường. Nó không quan trọng làm thế nào bạn viết nó, trình duyệt sẽ luôn hiển thị nó trong chữ hoa. Bây giờ kích thước phông chữ là một cái gì đó mà chúng ta sẽ nói về khá nhiều trong toàn bộ khóa học này và trong các khóa học khác, chúng tôi sẽ làm là tốt, chẳng hạn như thiết kế đáp ứng, bởi vì nó thực sự là rất nhiều cách khác nhau để làm điều đó. Vì vậy, chúng ta hãy bắt đầu với những điều cơ bản nhất. Các tùy chọn của bạn là, bạn có thể sử dụng kích thước phông chữ tương đương với cực nhỏ, cực nhỏ, nhỏ và nhỏ hơn. Tôi không thực sự thích những điều đó, bởi vì nó không thực sự cho tôi một khung tham khảo. Bạn có thể có trung bình, bạn có thể có lớn, cực lớn, xx-lớn, và lớn hơn. Rất ít người sử dụng những lựa chọn này, nhưng họ ở ngoài đó nên tôi muốn nói cho bạn biết họ là gì. Thay vào đó, những gì nhiều người sử dụng là họ sử dụng pixel. Vì vậy, tôi sẽ bao gồm trên trang web loại tốt đẹp của bảng cho bạn liên quan đến bao nhiêu điểm ảnh đến một inch, bao nhiêu điểm ảnh để picos, vì vậy bạn có thể cảm nhận nó. Nhưng hầu hết mọi người làm điều gì đó dọc theo đường 20 pixel, 35 pixel, 80 pixel. Và đây là một cái nhìn rất nhất quán và nó là thứ mà mọi người có thể cảm nhận được nó trông như thế nào. Tuy nhiên, tôi có xu hướng sử dụng tỷ lệ phần trăm thay thế. Tỷ lệ phần trăm sẽ cho phép chúng ta thay đổi kích thước phông chữ như chúng ta thay đổi kích thước màn hình dễ dàng hơn nhiều. Vì vậy, nếu bạn đã nói sử dụng 100% nó sẽ là kích thước mặc định. Nếu bạn nói sử dụng 110% nó sẽ lớn hơn một chút. Nếu bạn sử dụng 75%, nó sẽ bằng 3/4 kích thước. Tiếp theo, chúng ta hãy nói về màu sắc và màu nền. Thuộc tính màu là màu của tiền cảnh, đó là từ ưa thích chỉ là văn bản chính nó. Được rồi. Màu nền là màu của nền sau phông chữ mà chúng ta đang nhìn vào. Và tùy thuộc vào loại văn bản bạn đang tạo kiểu, nó có thể trông rất khác nhau. Vì vậy, ở đây tôi đã làm một quy tắc, và bạn chưa từng thấy điều này trước đây. Tôi sẽ đi trước và phong cách hai bộ chọn khác nhau. Tôi sẽ phong cách h1 và span. Vì vậy, nếu bạn đặt một dấu phẩy ngay ở đó, tôi đã có nó ngay đây, giữa h1 và khoảng, bạn có thể đặt nhiều dấu phẩy như bạn muốn, và viết nhiều bộ chọn như bạn muốn. Trong trường hợp này tôi đã nói, hey, tôi muốn màu của tôi là màu xanh, và tôi muốn màu nền của tôi là màu xám. Và nếu bạn không chắc chắn những con số kỳ lạ này đến từ đâu, hãy xem video màu sắc. Nó sẽ giải thích mọi thứ cho anh ở đó. Vì vậy, bây giờ tôi đã đi vào, và trong HTML của tôi, tôi có màu sắc trong một thẻ h1, và tôi có từ nội tuyến bên trong một thẻ span. Và những gì tôi muốn bạn nhận thấy là đối với h1, phần tử khối, màu nền bao gồm toàn bộ chiều rộng của trang. Nhưng đối với span, đối với các phần tử nội tuyến, màu nền chỉ đi xung quanh chỉ là phần tử và bản thân văn bản. Tiếp theo chúng ta hãy nói về việc căn chỉnh văn bản. Căn chỉnh văn bản rất đơn giản. Nó có lẽ là một trong những điều dễ dàng nhất bạn có thể làm trong HTML. Và anh sẽ rất hạnh phúc. Bởi vì sau đó khi bạn quyết định bạn muốn sắp xếp những thứ khác, nó thật khó khăn và bạn chỉ muốn đặt mọi thứ vào văn bản. Vì vậy, tùy chọn của bạn là khi bạn sử dụng căn chỉnh văn bản bạn có thể sử dụng trái, có nghĩa là chỉ cần căn chỉnh văn bản sang trái. Đó là những gì chúng ta đã làm. Bạn có thể có quyền, có nghĩa là sắp xếp mọi thứ ở bên phải, trung tâm, và biện minh. Tập trung tất cả mọi thứ nhiều như anh, dọc theo giữa bộ phận đó. Justify cố gắng lan rộng nó ra để sử dụng càng nhiều không gian càng tốt. Vì vậy, để tôi cho các bạn thấy một số ví dụ vì đó là cách tốt nhất để hiểu những gì đang diễn ra ở đây. Ở đây tôi có một căn chỉnh bên trái. Tất cả mọi thứ dòng lên dọc theo phía bên tay trái của màn hình. Tiếp theo tôi đã sử dụng văn bản trong dòng bằng đúng. Và bạn có thể thấy rằng mọi thứ được xếp hàng ở bên phải. Trông thật kì lạ. Có rất ít lý do anh sẽ sử dụng cái này. Trừ khi anh có thứ gì đó khác đi theo bên cạnh ở giữa đây. Tiếp theo chúng ta sẽ làm là trung tâm. Mọi người sử dụng trung tâm khá một chút. Họ gần như sử dụng nó quá nhiều, nhưng nó là một cách tốt đẹp để loại chia tay văn bản của bạn và có nó trông hơi khác nhau. Vì vậy, biện minh thực sự rất khó để giải thích, và ngay cả khi bạn lần đầu nhìn vào nó, bạn có thể không nhận thấy những gì đang xảy ra. Nhưng với biện minh, trình duyệt đang đặt trong một chút không gian bổ sung để giúp bạn trải rộng nó ra vì vậy nó có chiều rộng chính xác giống nhau tất cả các cách dọc theo. Vì vậy, tôi sẽ cho các bạn thấy hợp lý với bên trái. Và tôi nghĩ đó là cách tốt nhất để thấy sự khác biệt, là về cơ bản bạn không có khoảng trống ở đây. Họ đã trải nó ra ngoài này, nên không có nơi nào có quá nhiều không gian trống. Tiếp theo chúng ta sẽ nói về chiều cao dòng, và chiều cao dòng là thực sự khác nhau bởi vì nó không ảnh hưởng đến phông chữ chính nó. Nó không ảnh hưởng đến văn bản của bạn. Nó ảnh hưởng đến bao nhiêu không gian xung quanh văn bản của bạn. Một số bạn có thể đã sử dụng Word trước đây, và bạn có thể đi và chỉ có bao nhiêu không gian có giữa các dòng. Có lẽ bạn muốn nó là một dòng, một và một nửa dòng, hai cách nhau. Đó là những gì chúng ta đang nói ở đây. Vì vậy, ví dụ đầu tiên của tôi, tôi nói dòng chiều cao bằng 50%. Và cái tiếp theo tôi đã nói chiều cao dòng bằng 200%. Vì vậy, trong quy tắc đầu tiên, đó là một quy tắc kỳ lạ để viết bởi vì tôi đang nói rằng tôi muốn mọi thứ chồng lên nhau. Trong quy tắc thứ hai, tôi muốn nói là tôi muốn bạn thực sự lan rộng ra xa. Oops, được rồi, tôi sẽ đi trước và đưa ra một ví dụ sau trực tuyến nơi tôi có thể cho bạn thấy chính xác những thứ này sẽ trông như thế nào. Hoặc thậm chí tốt hơn, tôi sẽ biến nó thành một khoảnh khắc có thể dạy và bạn vào đó và tự gõ nó và nhìn vào cách hai quy tắc khác nhau này ảnh hưởng đến văn bản. Vậy hãy xem lại. Tôi biết tôi đã trải qua rất nhiều thứ, và nó có thể là áp đảo. Vì vậy, một trong những điều quan trọng nhất là với tất cả những gì chúng tôi làm trong khóa học này , là mất 5, 10 phút, gõ vài thứ vào, xem xét và xem điều gì sẽ xảy ra. Hãy phạm càng nhiều sai lầm càng tốt, bởi vì đây là thời gian để phạm sai lầm, khi bạn có tôi và đám đông còn lại ở đây để trả lời các câu hỏi trên các bảng khác nhau. Thực hành về các vấn đề đồ chơi. Đừng tạo một trang web lớn và cố gắng tạo kiểu cho trang web đó. Tạo một trang với ba hoặc bốn đoạn văn, một vài liên kết, và thực hành trên đó, bởi vì nó không quan trọng, bạn không cần phải thực hành trên một trang lớn, bạn có thể thực hành trên các vấn đề nhỏ và nó thực sự tạo ra một sự khác biệt lớn. Và cuối cùng, nếu bạn quyết định rằng bạn đã sẵn sàng để lập trình và bạn đã sẵn sàng để thực hiện dự án lớn đó, hãy chắc chắn rằng bạn thiết kế các dự án lớn hơn của bạn trên giấy trước tiên. Tôi không thể nhấn mạnh đủ rằng nếu bạn bắt đầu lập trình và tạo kiểu mà không thực sự có một kế hoạch rõ ràng, bạn sẽ nhận được rất thất vọng và hy vọng, không hy vọng, bạn sẽ nhận được rất thất vọng và bạn sẽ bỏ. Và tôi không muốn anh làm điều đó. Vì vậy, hãy lên kế hoạch tất cả các dự án của bạn trên giấy trước. Nếu bạn làm theo những gợi ý này, nếu bạn luyện tập, luyện tập, nếu bạn làm vấn đề đồ chơi, nếu trước khi bạn nhảy vào những vấn đề lớn bạn phác thảo nó ra trước, tôi nghĩ bạn sẽ có rất nhiều niềm vui, và bạn sẽ có một trang tuyệt vời mà bạn sẽ tự hào về.