Hôm nay chúng ta sẽ nói về các liên kết kiểu dáng và danh sách kiểu dáng.
Khi nói đến thời gian để phong cách các liên kết trên trang của bạn,
điều thực sự quan trọng là bạn nhớ liên kết là những gì tạo nên một trang web.
Chính sự kết nối đó giúp mọi người có được kiến thức.
Đó là những gì giúp các công cụ tìm kiếm giúp liên kết văn bản và
nội dung của bạn với văn bản và nội dung của người khác.
Vì vậy, hôm nay chúng ta sẽ nói cụ thể về liên kết vì
tôi muốn bạn suy nghĩ về cách bạn đang tạo kiểu.
Nói chung, khi bạn đi đến phong cách một liên kết, bạn có thể sử dụng
tất cả các thuộc tính khác nhau giống nhau mà bạn đã sử dụng cho mọi thứ khác.
Tiêu đề của bạn, đoạn văn của bạn, những thứ như thế.
Tuy nhiên, các liên kết có một thuộc tính bổ sung đặc biệt
được gọi là văn bản trang trí.
Vì vậy, trong ví dụ này ngay tại đây, những gì tôi đang diễn ra là
thay vì có liên kết của tôi được nội tuyến, có nghĩa là họ đi cạnh nhau,
tôi sẽ nói, hey, tôi muốn liên kết của tôi được tách ra, một trên đầu trang của nhau.
Vì vậy, hy vọng, hầu hết các mã này trông quen thuộc với bạn.
Bạn có ý tưởng rằng màn hình hiển thị là khối, nó sẽ đi bên dưới nhau. Trọng
lượng font-weight, tôi muốn nó được một chút đậm.
Tôi đã thiết lập một màu mới và một màu nền mới.
Bây giờ tôi đã thiết lập một chiều rộng, và, nếu bạn cố gắng thiết lập một chiều rộng và
nó không hoạt động, chỉ cần nhớ, các liên kết theo mặc định là nội tuyến và
họ không mất một chiều rộng trừ khi bạn thay đổi chúng để chặn hoặc nội tuyến khối.
Tôi cũng sẽ sắp xếp các văn bản, thêm một số đệm, và trang trí văn bản này,
không, đây là mới.
Điều này nói rằng, hey,
tôi muốn thoát khỏi gạch dưới đó thường xuất hiện bên dưới liên kết.
Vì vậy, tôi đã đi từ cái này ở góc trên này
đến cái gì đó có kiểu dáng hơn một chút ở phía dưới này.
Trong thực tế, nó hầu như không giống như một liên kết ở tất cả.
Vậy hãy nói về điều đó.
Đôi khi khi cài đặt các liên kết của họ,
mọi người thực sự cố gắng làm cho nó trông giống như các nút.
Và chúng ta muốn tránh điều đó bởi vì chúng ta muốn trở thành ngữ nghĩa.
Nếu bạn muốn có một nút, hãy sử dụng một phần tử nút thay thế.
Và bạn có thể làm điều đó rất đơn giản bằng cách chỉ cần đặt vào thẻ nút thay vì
thẻ neo.
Và một lần nữa, trong cùng một cách bạn có thể phong cách nó theo nhiều cách khác nhau.
Nhưng những gì tôi muốn bạn hiểu là có rất
nhiều điều khác nhau bạn có thể làm với các liên kết và rất nhiều kiểu dáng bạn có thể làm với
chúng, đảm bảo rằng mọi người hiểu rằng đó là một liên kết mà họ đang nhìn vào.
Hoặc, nếu họ đang sử dụng bộ đọc màn hình, đó là một liên kết mà họ đang nghe.
Vì vậy, một điều mới về liên kết,
mà chúng ta chưa từng thấy trước đây, là ý tưởng rằng liên kết có trạng thái.
Bạn đã bao giờ nhận thấy rằng, khi bạn truy cập một trang web,
đôi khi một số liên kết có màu xanh, và một số trong số đó có màu tím?
Và, bạn nhận ra, sau một chút,
những chiếc màu tím, chúng ở đó bởi vì bạn đã đến thăm chúng, trước đây.
Vì vậy, những gì chúng ta có, là chúng ta có những trạng thái khác nhau.
Và tôi sẽ đi qua chúng rất nhanh và sau đó,
khi chúng ta nói về những gì được gọi là lớp giả, chúng ta sẽ nói về chúng nhiều hơn nữa.
Nhưng nhanh chóng, một với dấu hai chấm này ngay tại đây liên kết
chỉ đơn giản là nói đây chỉ là một liên kết bình thường, bạn đã nhìn thấy nó trước đây,
một; truy cập nói đây là một liên kết và trình duyệt của tôi nói với tôi.
Nó biết rằng tôi đã nhấp vào nó trước đây.
Theo mặc định của trình duyệt, nó sẽ là một màu khác nhau.
Chúng tôi cũng có một liên kết với các hoạt động di chuột qua nó.
Vì vậy, bạn có thể đã thấy rằng khi bạn cầm chuột lên một cái gì đó,
giống như tôi đang cầm bút ở đây.
Có phải nó sẽ làm điều gì đó điên rồ không?
Có lẽ nó sẽ thay đổi màu sắc hoặc những thứ khác nhau như thế.
Vì vậy, di chuột được kích hoạt bằng cách giữ chuột của bạn trên một liên kết.
Loại nào đưa ra một câu hỏi thú vị về
việc này hoạt động trên màn hình cảm ứng?
Khi bạn đang phát triển trang của bạn, bạn cần phải nhớ rằng di chuột không nhất thiết
phải hoạt động nếu mọi người đang truy cập nó trên điện thoại hoặc máy tính bảng hoặc một cái gì đó tương tự.
Điều đó đưa tôi đến một trạng thái khác gọi là tập trung.
Vì vậy, trạng thái tập trung là những gì xảy ra khi ai đó đang tab qua trang của bạn.
Khi họ nhấn tab nó sẽ nhảy từ yếu tố này sang yếu tố khác.
Và khi nó đến được liên kết cụ thể này, nó sẽ biết tôi đang tập trung, vì vậy
nếu bạn muốn làm một cái gì đó khác, có thể là điều tương tự bạn làm khi mọi người di chuột,
đây là cách bạn có thể kích hoạt hoạt hoạt động đó.
Okay, và cái cuối cùng là cái tôi thực sự hơi nghĩ là cái kỳ lạ nhất,
tôi thậm chí có thể gọi nó là câm, nhưng tôi đã không tạo ra Internet và HTML và
tôi tôn trọng, nhưng nó thực sự kỳ lạ, bởi vì cái này nói là hey,
đây là liên kết giống như tôi đang nhấp vào nó.
Và lý do tôi nghĩ rằng điều đó là kỳ lạ là bởi vì đối với hầu hết chúng ta,
khi chúng ta nhấp vào một liên kết, chúng ta sẽ đi đến một trang mới để
chúng ta thậm chí không nhìn thấy những gì phong cách đã xảy ra.
Được chứ?
Hãy tiếp tục và nói về cách chúng ta làm những điều này.
Nhưng trước khi tôi làm, một lần nữa chúng ta sẽ trở lại với ý tưởng ưu tiên này.
Tấm phong cách tầng là rất lớn về vấn đề này.
Nếu bạn quyết định rằng bạn muốn sử dụng các trạng thái khác nhau này,
có một vài quy tắc bạn cần phải nhớ khi bạn đang viết bảng kiểu dáng của mình.
Một, nếu bạn đang đi để sử dụng một:hover nó phải đến sau một:liên kết.
Và tiếp theo, một:truy cập và một:hoạt động họ phải đến sau một:di chuột.
Vì vậy, nó chỉ là hệ thống phân cấp này đang diễn ra trong khi bạn đang phủ lên các trang của bạn.
Vì vậy, chúng ta hãy nhìn vào một ví dụ bây giờ của một số mã và làm thế nào tôi tạo kiểu liên kết của tôi.
Trong ví dụ này,
những gì tôi có ở đây là tôi chỉ có ba liên kết mà tôi đã không theo bất kỳ cách nào.
Tôi có một liên kết để giới thiệu về thiết kế web,
một liên kết đến Đại học Michigan, và một liên kết đến Đại học Bang Kent,
đó là nơi tôi học đại học của tôi.
Nhưng những gì xảy ra khi tôi đi trước và tôi thêm một số CSS vào nó?
Trên đây trên đầu trang tôi có tất cả những điều điển hình chúng ta đã nói về trước đây,
chiều rộng và màu sắc.
Tôi đã thêm trang trí văn bản, và
những gì tôi cũng muốn thêm là ý tưởng này của lề nơi tôi có thể tập trung mỗi liên kết
của tôi một trên đầu trang của nhau với một chút không gian ở giữa chúng.
Được rồi, vì vậy chúng ta hãy nhìn vào những gì trông giống như và
bạn có thể thấy tôi có mỗi liên kết trông thực sự khác biệt nhiều, okay.
Và bạn có thể thấy khi tôi nhìn thấy cây bút của tôi,
khi tôi di chuột qua từng cái này, những gì xảy ra là màu sắc thay đổi.
Làm thế nào tôi có thể làm việc đó ở ngay đây.
Bất cứ khi nào liên kết của tôi đi vào trạng thái di chuột,
nó biết thay đổi màu nền và màu phông chữ.
Được rồi, cái gì là một:tập trung, và những gì tôi có ở đây một chút, một:hoạt động?
Những gì đang xảy ra ở đây là tôi đã đặt trong một:tập trung cho
những người đang tabbing thông qua trang của tôi.
Vì vậy, khi bạn xem tab của tôi, bạn có thể thấy Giới thiệu về Thiết kế Web đi vào
tập trung, và sau đó là Đại học Michigan,
và sau đó là Kent State, và tôi đang làm điều đó bằng cách đánh dấu thông qua trang.
Quy tắc cuối cùng, quy tắc hoạt động, là thứ mà tôi sẽ cho các bạn xem và
sau đó loại bỏ khỏi đó.
Cách hoạt động hoạt động là khi bạn đang thực sự nhấp vào một trang,
nó sẽ thêm một đường viền xung quanh liên kết đó.
Bây giờ, điều kỳ quặc là ngay khi tôi hoàn tất việc
nhấp chuột, chúng ta sẽ đi đến một trang mới.
Vì vậy, nó hơi vỡ ra, bạn không thực sự có thể nhìn thấy biên giới đó
trừ khi tôi cố tình giữ nó lại, giống như thế.
Vì vậy, trong ví dụ này, tôi đã cố gắng để cho bạn thấy hai cách khác nhau mà bạn có thể tạo
kiểu liên kết.
Bây giờ chúng ta hãy tiếp tục suy nghĩ về điều này một chút chi tiết hơn.
Khi bạn tạo kiểu các liên kết này, một lần nữa tôi không thể nhấn mạnh đủ tầm quan trọng của
khả năng truy cập, chúng tôi muốn đảm bảo rằng các liên kết của bạn là các liên kết và
mọi người biết rằng chúng ở đó.
Sau khi bạn đã hoàn tất việc chơi với các liên kết, chúng ta hãy tiếp tục và
bắt đầu suy nghĩ về kiểu dáng các mục danh sách.
Khi bạn tạo kiểu danh sách, loại thuộc tính mặc định tất cả chúng trông giống nhau.
Bạn đã có một, hai, ba hoặc vòng tròn, vòng tròn, vòng tròn, nhưng
chúng ta có thể thay đổi tất cả những điều đó, chúng ta có thể thay đổi những thứ ngoài phông chữ và
lề để xem phong cách mà danh sách của bạn đang tham gia.
Vì vậy, một số điều chúng ta có thể nhìn vào là kiểu danh sách
của bạn, kiểu danh sách của bạn.
Vị trí kiểu danh sách, và chỉ là kiểu danh sách chính nó.
Kiểu danh sách về cơ bản cho biết làm thế nào để bạn muốn tôi chỉ ra các
mục danh sách khác nhau?
Theo mặc định cho các danh sách có thứ tự một lần nữa, chúng ta có một, hai, ba, nhưng
bạn có thể đưa ra các giá trị khác nhau.
Bạn có thể nói rằng tôi muốn nó là số La Mã thấp hơn, số La Mã trên,
số alpha thấp hơn, bạn có thể chơi với chúng để có được cảm giác bạn muốn.
Vì vậy, trong trường hợp này chúng tôi đã đi từ 1 và 2 đến A
và B và nếu thay vào đó tôi đã làm alpha thấp hơn, chúng tôi đã có chữ thường a và chữ thường b
Khi bạn làm danh sách kiểu cho danh sách không có thứ tự, thường là những gì bạn có, và
nó phụ thuộc vào trình duyệt của bạn, là vòng tròn nhỏ hoặc đĩa nhỏ.
Chúng ta có thể thay đổi điều đó, và
chúng ta có thể đặt chính xác những gì anh muốn đảm bảo nó sẽ trở thành.
Một tùy chọn khác mà bạn có thể chơi là ý tưởng loại bỏ
các dấu hiệu mặc định hoàn toàn, và
thay vào đó, sử dụng một hình ảnh tùy chỉnh thay vì đánh dấu truyền thống đó.
Và khi bạn làm điều này,
nó sẽ trở lại với ý tưởng về vị trí kiểu danh sách.
Nhiều lần bạn sẽ di chuyển vị trí của bạn,
tùy thuộc vào kiểu danh sách mà bạn đang sử dụng.
Dưới đây tôi có một ví dụ về nơi tôi đang nói rằng tôi muốn hình ảnh phong cách danh sách của tôi.
Tôi đã có hình vuông đầu tiên, điều này nói, hey, nếu bạn không thể tìm thấy hình ảnh đi trước và
sử dụng hình vuông, nếu không tôi muốn bạn sử dụng hình ảnh này ngay tại đây.
Được chứ? Vì vậy, chúng ta hãy đi trước và
nhìn vào một ví dụ khác.
Trong tập tin list.html, những gì tôi đặt ở đây là hai loại danh sách khác nhau,
một danh sách không có thứ tự và một danh sách có thứ tự.
Và tôi chỉ điền vào họ với một số thông tin khác nhau.
Và khi bạn nhìn vào màn hình này, tôi sẽ làm cho nó lớn hơn một chút cho
bạn ở đây, nếu tôi có thể.
Bạn có thể thấy rằng các danh sách không có thứ tự chỉ sử dụng các vòng tròn, và
các danh sách có thứ tự đang sử dụng các số mặc định.
Vì vậy, chúng ta hãy chơi với điều này ngay bây giờ.
Chúng ta hãy đi trước và đặt trong một bảng phong cách.
Trong bảng phong cách của tôi, tôi đã đi vào đó nói, những gì tôi muốn làm với
phong cách danh sách của tôi là tôi muốn chuyển nó sang trên roman và chữ số và cũng sử dụng một hình vuông thay thế.
Vì vậy, đây là những gì nó trông như trước đây, và đây là những gì chúng ta trông như thế này sau đó.
Vì vậy, bạn có thể thấy, chỉ có một chút gì đó cho nó.
Và, đây là một cách rất đơn giản để thay đổi trang của bạn
từ cách người khác thường làm trang của họ.
Một lựa chọn khác tôi chỉ muốn cho bạn thấy,
bởi vì tất cả mọi người thực sự thích điều này, là ý tưởng sử dụng hình ảnh phong cách danh sách.
Vì vậy, tôi sẽ đi xuống đây và bỏ nhận xét mã này ra.
Và nếu bạn nhớ, nếu bạn đã chú ý đến ý tưởng này khi bạn được
ưu tiên quy tắc mới ở đây sẽ ghi đè lên tất cả các quy tắc trên nó.
Vì vậy, chúng ta hãy tiếp tục và chắc chắn rằng tôi đã lưu trang của tôi, và chúng ta hãy tiếp tục và tải lại.
Và trong trường hợp này, những gì đã xảy ra là chúng tôi đã gỡ bỏ những dấu hiệu thông thường
và tôi đã đặt tia chớp nhỏ của mình vào trong.
Vì vậy, làm những việc như thế này không phải là khó khăn, nhưng
thành thật mà nói, nó mất một chút thời gian, đặc biệt là nếu bạn đang sử dụng hình ảnh,
để đảm bảo rằng bạn đã có tất cả mọi thứ được viết giống hệt nhau.
Typos thực sự là kẻ giết người.
Nó không phải là vấn đề khó khăn, mà
là vấn đề về việc bạn đang rất cẩn thận khi bạn đang làm những việc này.
Được rồi, chúng ta hãy tiếp tục xem xét những gì chúng ta đã nói đến cho đến nay.
Và không chỉ trong bài giảng này, mà trong khóa học cho đến nay chúng ta đã nhận được ngày hôm nay.
Và những gì tôi muốn nhấn mạnh là cho đến bây giờ, chúng tôi đã tạo kiểu thẻ, và
những thẻ này luôn có thể lấy những cặp giá trị thuộc tính này và
bạn có thể chuyển đổi trang của mình thành một cái gì đó thực sự tuyệt vời.
Chúng ta sắp đi vào một cái gì đó mới mẻ và hơi khác một chút.
Chúng ta sẽ nói về các lớp giả, ID và các bộ chọn lọc.
Và tôi muốn đảm bảo rằng anh thoải mái
tự xây dựng những quy tắc khác nhau trước khi anh tiến bộ.
Bây giờ cảm thấy thoải mái không có nghĩa là bạn hoàn hảo.
Nó không có nghĩa là bạn biết làm thế nào để làm tất cả mọi thứ.
Điều đó có nghĩa là bạn đủ tự tin để đi ra ngoài và
bắt đầu sử dụng một số công cụ hiện có để cải thiện trang web của bạn.
Tôi đang liệt kê hai trong số họ ngay tại đây chỉ vì cả hai đều rất nổi tiếng
trong trường hợp của trang Chris Pederick, hoặc cá nhân tôi chỉ thấy chúng thực sự hữu ích.
Một tùy chọn khác chỉ là nhớ rằng bạn có thể đi ra ngoài đó và
bạn có thể thực hiện tìm kiếm web cho các công cụ nhà phát triển.
Bạn không phải là người đầu tiên, và bạn sẽ không phải là người cuối cùng gặp phải
vấn đề khi bạn đang tạo kiểu trang của mình.
Hy vọng chung của tôi là bạn sẽ thực sự đi vào các diễn đàn trong
khóa học Coursera hoặc trong bất kỳ lớp học nào bạn đang ở và yêu cầu các sinh viên của bạn giúp đỡ.
Bởi vì thực sự, cách duy nhất để học là luyện tập,
luyện tập, gặp vấn đề, được giúp đỡ và tiếp tục đi.
Khi bạn làm nhiều hơn và nhiều hơn nữa thiết kế web, tôi hy vọng rằng bạn đang có được sự tự tin
để giúp tạo ra một cái gì đó thực sự tuyệt vời mà bạn sẽ tự hào về.
Vậy thì cứ vào đó đi.
Cảm ơn.