Thanh điều hướng bootstrap 5 w3
|
Hướng dẫn ngắn này dành cho những người muốn bắt đầu sử dụng CSS và chưa bao giờ viết CSS style sheet trước đây Show Nó không giải thích nhiều về CSS. Nó chỉ giải thích cách tạo tệp HTML, tệp CSS và cách làm cho chúng hoạt động cùng nhau. Sau đó, bạn có thể đọc bất kỳ số nào để thêm nhiều tính năng hơn vào tệp HTML và CSS. Hoặc bạn có thể chuyển sang sử dụng một chuyên dụng giúp bạn thiết lập các trang web phức tạp Ở phần cuối của hướng dẫn, bạn sẽ tạo một tệp HTML trông như thế này Trang HTML kết quả, với màu sắc và bố cục, tất cả đều được thực hiện bằng CSS Lưu ý rằng tôi không khẳng định rằng điều này là đẹp ☺ Bước 1. viết HTMLĐối với hướng dẫn này, tôi khuyên bạn chỉ nên sử dụng những công cụ đơn giản nhất. e. g. , Notepad (trong Windows), TextEdit (trên Mac) hoặc KEdit (trong KDE) sẽ hoạt động tốt. Khi bạn hiểu các nguyên tắc, bạn có thể muốn chuyển sang các công cụ nâng cao hơn hoặc thậm chí sang các chương trình thương mại, chẳng hạn như Style Master, Dreamweaver hoặc GoLive. Nhưng đối với biểu định kiểu CSS đầu tiên của bạn, bạn không nên bị phân tâm bởi quá nhiều tính năng nâng cao Không sử dụng trình xử lý văn bản, chẳng hạn như Microsoft Word hoặc OpenOffice. Chúng thường tạo các tệp mà trình duyệt Web không thể đọc được. Đối với HTML và CSS, chúng tôi muốn các tệp văn bản đơn giản, thuần túy Bước 1 là mở trình soạn thảo văn bản của bạn (Notepad, TextEdit, KEdit hoặc bất cứ thứ gì bạn yêu thích), bắt đầu với một cửa sổ trống và nhập nội dung sau My first styled pageMy first styled page Welcome to my styled page! It lacks images, but at least it has style. And it has links, even if they don't go anywhere… There should be more here, but I don't know what yet. Made 5 April 2004by myself. Trên thực tế, bạn không cần phải gõ nó. bạn có thể sao chép và dán nó từ trang Web này vào trình chỉnh sửa (Nếu bạn đang sử dụng TextEdit trên máy Mac, đừng quên cho TextEdit biết rằng văn bản thực sự là văn bản thuần túy, bằng cách đi tới menu Định dạng và chọn “Tạo văn bản thuần túy”. ) Các từ trong < và > được gọi là các thẻ và như bạn có thể thấy, tài liệu được chứa trong các thẻ và. Giữa và có chỗ cho nhiều loại thông tin không được hiển thị trên màn hình. Cho đến nay nó chứa tiêu đề của tài liệu, nhưng sau này chúng tôi cũng sẽ thêm biểu định kiểu CSS vào đó Đây là nơi văn bản thực sự của tài liệu đi. Về nguyên tắc, mọi thứ trong đó sẽ được hiển thị, ngoại trừ văn bản bên trong, đóng vai trò là nhận xét cho chính chúng tôi. Trình duyệt sẽ bỏ qua nó Trong số các thẻ trong ví dụ,
Trình chỉnh sửa KEdit hiển thị nguồn HTML
Lưu ý rằng tôi đã không đóng các phần tử “li” và “p”. Trong HTML (chứ không phải trong XHTML), được phép bỏ dấu và tôi đã làm ở đây để làm cho văn bản dễ đọc hơn một chút. Nhưng bạn có thể thêm chúng, nếu bạn thíchGiả sử rằng đây sẽ là một trang của một trang Web có nhiều trang tương tự. Như thường thấy đối với các trang Web hiện tại, trang này có một menu liên kết đến các trang khác trên trang giả định, một số nội dung độc đáo và chữ ký Bây giờ chọn “Save As…” từ menu File, điều hướng đến thư mục/thư mục mà bạn muốn đặt nó (Desktop cũng được) và lưu tệp dưới dạng “mypage. html”. Đừng đóng trình chỉnh sửa, chúng tôi sẽ cần nó lần nữa (Nếu bạn đang sử dụng TextEdit trên Mac OS X trước phiên bản 10. 4, bạn sẽ thấy tùy chọn Don't append the. txt trong hộp thoại Lưu dưới dạng. Chọn tùy chọn đó, bởi vì tên “mypage. html” đã bao gồm tiện ích mở rộng. Các phiên bản mới hơn của TextEdit sẽ nhận thấy. phần mở rộng html tự động. ) Tiếp theo, mở tệp trong trình duyệt. Bạn có thể làm điều đó như sau. tìm tệp bằng trình quản lý tệp của bạn (Windows Explorer, Finder hoặc Konqueror) và nhấp hoặc nhấp đúp vào “mypage. tập tin html”. Nó sẽ mở trong trình duyệt Web mặc định của bạn. (Nếu không có, mở trình duyệt của bạn và kéo tập tin vào nó. ) Như bạn có thể thấy, trang trông khá nhàm chán… Bước 2. thêm một số màu sắcBạn có thể thấy một số văn bản màu đen trên nền trắng, nhưng nó phụ thuộc vào cách trình duyệt được định cấu hình. Vì vậy, một điều dễ dàng chúng ta có thể làm để làm cho trang phong cách hơn là thêm một số màu sắc. (Để mở trình duyệt, chúng ta sẽ sử dụng lại sau. ) Chúng tôi sẽ bắt đầu với một biểu định kiểu được nhúng bên trong tệp HTML. Sau đó, chúng tôi sẽ đặt HTML và CSS trong các tệp riêng biệt. Các tệp riêng biệt là tốt vì việc sử dụng cùng một biểu định kiểu cho nhiều tệp HTML sẽ dễ dàng hơn. bạn chỉ phải viết biểu định kiểu một lần. Nhưng đối với bước này, chúng tôi chỉ giữ mọi thứ trong một tệp Chúng ta cần thêm một [vân vân. ]Dòng đầu tiên nói rằng đây là một biểu định kiểu và nó được viết bằng CSS (“text/css”). Dòng thứ hai nói rằng chúng ta thêm phong cách cho phần tử “body”. Dòng thứ ba đặt màu của văn bản thành màu tím và dòng tiếp theo đặt nền thành một loại màu vàng lục
Ví dụ cho thấy các quy tắc có thể được kết hợp. Chúng tôi đã đặt hai thuộc tính, vì vậy chúng tôi có thể tạo hai quy tắc riêng biệt body { color: purple }
body { background-color: #d8da3d }
nhưng vì cả hai quy tắc đều ảnh hưởng đến phần thân, nên chúng tôi chỉ viết "phần thân" một lần và đặt các thuộc tính và giá trị lại với nhau. Để biết thêm về bộ chọn, hãy xem chương 2 của Lie & Bos Nền của phần tử nội dung cũng sẽ là nền của toàn bộ tài liệu. Chúng tôi chưa cung cấp bất kỳ phần tử nào khác (p, li, địa chỉ…) bất kỳ nền rõ ràng nào, vì vậy theo mặc định, chúng sẽ không có (hoặc. sẽ trong suốt). Thuộc tính 'color' đặt màu của văn bản cho phần tử nội dung, nhưng tất cả các phần tử khác bên trong nội dung kế thừa màu đó, trừ khi được ghi đè rõ ràng. (Chúng tôi sẽ thêm một số màu khác sau. ) Bây giờ hãy lưu tệp này (sử dụng “Lưu” từ menu Tệp) và quay lại cửa sổ trình duyệt. Nếu bạn nhấn nút “Tải lại”, màn hình sẽ thay đổi từ trang “nhàm chán” sang trang có màu (nhưng vẫn khá nhàm chán). Ngoài danh sách các liên kết ở trên cùng, văn bản bây giờ sẽ có màu tím trên nền màu vàng lục Cách một trình duyệt hiển thị trang khi một số màu đã được thêm vào Bước 3. thêm phông chữMột điều dễ làm khác là tạo sự khác biệt trong phông chữ cho các thành phần khác nhau của trang. Vì vậy, hãy đặt văn bản ở phông chữ “Georgia”, ngoại trừ tiêu đề h1, mà chúng tôi sẽ cung cấp cho “Helvetica. ” Trên Web, bạn không bao giờ có thể chắc chắn người đọc của bạn có phông chữ nào trên máy tính của họ, vì vậy chúng tôi cũng thêm một số lựa chọn thay thế. nếu không có Georgia, Times New Roman hoặc Times cũng được, và nếu vẫn thất bại, trình duyệt có thể sử dụng bất kỳ phông chữ nào khác có chân. Nếu không có Helvetica, Geneva, Arial và SunSans-Regular có hình dạng khá giống nhau và nếu không có cái nào hoạt động, trình duyệt có thể chọn bất kỳ phông chữ nào khác không có chân Trong trình soạn thảo văn bản, thêm các dòng sau (dòng 7-8 và 11-13) My first styled page [etc.] Nếu bạn lưu lại tệp và nhấn “Tải lại” trong trình duyệt, bây giờ sẽ có các phông chữ khác nhau cho tiêu đề và văn bản khác Bây giờ văn bản chính có phông chữ khác với tiêu đề Bước 6. thêm một đường ngangBổ sung cuối cùng cho biểu định kiểu là một quy tắc ngang để tách văn bản khỏi chữ ký ở dưới cùng. Chúng tôi sẽ sử dụng 'đường viền trên cùng' để thêm một đường chấm chấm phía trên yếu tố (dòng 34-37).My first styled page [etc.] Bây giờ phong cách của chúng tôi đã hoàn thành. Tiếp theo, hãy xem cách chúng ta có thể đặt biểu định kiểu trong một tệp riêng để các trang khác có thể chia sẻ cùng một kiểu Bước 7. đặt biểu định kiểu trong một tệp riêngBây giờ chúng ta có một tệp HTML với biểu định kiểu được nhúng. Nhưng nếu trang web của chúng tôi phát triển, có lẽ chúng tôi muốn nhiều trang chia sẻ cùng một phong cách. Có một phương pháp tốt hơn là sao chép biểu định kiểu vào mọi trang. nếu chúng tôi đặt biểu định kiểu trong một tệp riêng, tất cả các trang có thể trỏ đến nó Để tạo một tệp biểu định kiểu, chúng ta cần tạo một tệp văn bản trống khác. Bạn có thể chọn “Mới” từ menu Tệp trong trình chỉnh sửa để tạo một cửa sổ trống. (Nếu bạn đang sử dụng TextEdit, đừng quên đặt lại văn bản thuần túy bằng cách sử dụng menu Định dạng. ) Sau đó cắt và dán mọi thứ bên trong chúng tôi. Chúng thuộc về HTML, không phải CSS. Trong cửa sổ soạn thảo mới, bây giờ bạn sẽ có biểu định kiểu hoàn chỉnh.body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Chọn “Save As…” từ menu File, đảm bảo rằng bạn đang ở trong cùng thư mục/thư mục với mypage. html và lưu biểu định kiểu dưới dạng “mystyle. css” Bây giờ hãy quay lại cửa sổ với mã HTML. Xóa mọi thứ khỏi gắn thẻ và thay thế bằng phần tử, như sau (dòng 5).My first styled page [etc.] Điều này sẽ cho trình duyệt biết rằng biểu định kiểu được tìm thấy trong tệp có tên “mystyle. css” và vì không có thư mục nào được đề cập, trình duyệt sẽ tìm trong cùng thư mục mà nó tìm thấy tệp HTML Nếu bạn lưu tệp HTML và tải lại trong trình duyệt, bạn sẽ không thấy thay đổi nào. trang vẫn được tạo kiểu theo cùng một cách, nhưng bây giờ kiểu đó đến từ một tệp bên ngoài kết quả cuối cùng Bước tiếp theo là đặt cả hai tệp, mypage. html và phong cách của tôi. css trên trang web của bạn. (Chà, trước tiên bạn có thể muốn thay đổi chúng một chút…) Nhưng cách thực hiện điều đó tùy thuộc vào nhà cung cấp dịch vụ Internet của bạn |
