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
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 ☺
Home 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ụ,
- giới thiệu một "Danh sách không có thứ tự", tôi. e. , một danh sách trong đó các mục không được đánh số. Các
- là sự khởi đầu của một “Mục danh sách. " Các
là một “Đoạn. ” Và đây là “Anchor”, là thứ tạo ra một siêu liên kết
Trình chỉnh sửa KEdit hiển thị nguồn HTML
- “ul” là một danh sách có một siêu liên kết cho mỗi mục. Điều này sẽ đóng vai trò là “menu điều hướng trang web” của chúng tôi, liên kết đến các trang khác của trang Web (giả định) của chúng tôi. Có lẽ, tất cả các trang trên trang web của chúng tôi đều có một menu giống nhau
- Các phần tử “h1” và “p” tạo thành nội dung duy nhất của trang này, trong khi chữ ký ở dưới cùng (“địa chỉ”) sẽ lại giống nhau trên tất cả các trang của trang web
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ắc
Bạ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
- bộ chọn (trong ví dụ. “body”), cho trình duyệt biết phần nào của tài liệu bị ảnh hưởng bởi quy tắc;
- thuộc tính (trong ví dụ, 'màu' và 'màu nền' đều là thuộc tính), thuộc tính này chỉ định khía cạnh nào của bố cục đang được đặt;
- và giá trị ('purple' và '#d8da3d'), cung cấp giá trị cho thuộc tính style
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 ngang
Bổ 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êng
Bâ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