01 trên 10
Tạo CSS Style Sheet
Cũng giống như cách chúng ta tạo một tệp văn bản riêng cho HTML, bạn sẽ tạo một tệp văn bản cho CSS. Nếu bạn cần hình ảnh cho quá trình này, vui lòng xem hướng dẫn đầu tiên. Dưới đây là các bước để tạo bảng định kiểu CSS của bạn trong Notepad:
- Chọn Tệp> Mới trong Notepad để có cửa sổ trống
- Lưu tệp dưới dạng CSS bằng cách nhấp vào Tệp
- Điều hướng đến thư mục my_website trên ổ cứng của bạn
- Thay đổi "Lưu dưới dạng:" thành "Tất cả tệp"
- Đặt tên tệp là "styles.css" (bỏ dấu ngoặc kép) và nhấp vào Lưu
02 trên 10
Liên kết CSS Style Sheet với HTML của bạn
Khi bạn đã có một bảng định kiểu cho trang Web của mình, bạn sẽ cần phải liên kết nó với trang Web. Để làm điều này bạn sử dụng thẻ liên kết. Đặt thẻ liên kết sau vào bất kỳ vị trí nào trong các thẻ
trong tài liệu pets.htm của bạn:03 trên 10
Sửa Lề trang
Khi bạn viết XHTML cho các trình duyệt khác nhau, một điều bạn sẽ học là tất cả chúng đều có lề và quy tắc khác nhau về cách chúng hiển thị mọi thứ. Cách tốt nhất để đảm bảo rằng trang web của bạn trông giống nhau trong hầu hết các trình duyệt là không cho phép những thứ như lề để mặc định cho lựa chọn trình duyệt.
Tôi thích để bắt đầu các trang của tôi ở góc trên bên trái, không có thêm đệm hoặc lề xung quanh văn bản. Ngay cả khi tôi sắp xếp các nội dung, tôi đặt lề thành 0 để tôi bắt đầu với cùng một phiến đá trống. Để thực hiện việc này, thêm phần sau vào tài liệu styles.css của bạn:
html, body {
lề: 0px;
padding: 0px;
đường viền: 0px;
trái: 0px;
trên cùng: 0px;
}
04 trên 10
Thay đổi phông chữ trên trang
Phông chữ thường là thứ đầu tiên bạn muốn thay đổi trên một trang Web. Phông chữ mặc định trên một trang Web có thể xấu xí, và thực sự là lên trình duyệt Web, vì vậy nếu bạn không xác định phông chữ, bạn thực sự sẽ không biết trang của bạn sẽ trông như thế nào.
Thông thường, bạn sẽ thay đổi phông chữ trên các đoạn văn hoặc đôi khi trên toàn bộ tài liệu. Đối với trang web này, chúng tôi sẽ xác định phông chữ ở cấp tiêu đề và đoạn văn. Thêm tài liệu sau vào tài liệu styles.css của bạn:
p, li {
phông chữ: 1em Arial, Helvetica, sans-serif;
}
h1 {
phông chữ: 2em Arial, Helvetica, sans-serif;
}
h2 {
phông chữ: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
phông chữ: 1.25em Arial, Helvetica, sans-serif;
}
Tôi bắt đầu với 1em làm kích thước cơ sở của tôi cho các đoạn văn và các mục danh sách, sau đó sử dụng nó để đặt kích thước cho các tiêu đề của tôi. Tôi không mong đợi để sử dụng một tiêu đề sâu hơn h4, nhưng nếu bạn có kế hoạch để bạn sẽ muốn phong cách nó là tốt.
05 trên 10
Làm cho các liên kết của bạn thú vị hơn
Các màu mặc định cho các liên kết là màu xanh lam và màu tím cho các liên kết chưa được truy cập và truy cập tương ứng. Mặc dù đây là tiêu chuẩn, nhưng nó có thể không phù hợp với bảng màu của các trang của bạn, vì vậy hãy thay đổi nó. Trong tệp styles.css của bạn, hãy thêm thông tin sau:
đường dẫn {
họ phông chữ: Arial, Helvetica, sans-serif;
màu sắc: # FF9900;
text-decoration: gạch dưới;
}
a: đã ghé thăm {
màu: # FFCC66;
}
a: hover {
nền: #FFFFCC;
font-weight: bold;
}
Tôi thiết lập ba kiểu liên kết, liên kết a: là mặc định, a: được truy cập khi nó được truy cập, tôi thay đổi màu và a: hover. Với một: hover Tôi có liên kết có được một màu nền và đi đậm để nhấn mạnh đó là một liên kết được nhấp vào.
06 trên 10
Tạo kiểu cho phần điều hướng
Vì chúng ta đặt phần navigation (id = "nav") đầu tiên trong HTML, hãy tạo kiểu cho nó trước. Chúng ta cần phải cho biết nó rộng như thế nào và đặt một lề rộng hơn ở phía bên phải để các văn bản chính sẽ không va chạm với nó. Tôi cũng đặt một đường viền xung quanh nó.
Thêm CSS sau vào tài liệu styles.css của bạn:
#nav {
chiều rộng: 225px;
lề phải: 15px;
border: medium solid # 000000;
}
#nav li {
kiểu danh sách: none;
}
.footer {
kích thước phông chữ: .75em;
rõ ràng: cả hai;
chiều rộng: 100%;
text-align: center;
}
Thuộc tính kiểu danh sách thiết lập danh sách bên trong phần điều hướng để không có dấu đầu dòng hoặc số và phần .footer tạo phần bản quyền để nhỏ hơn và được căn giữa trong phần.
07 trên 10
Định vị phần chính
Bằng cách định vị phần chính của bạn với vị trí tuyệt đối, bạn có thể chắc chắn rằng nó sẽ ở chính xác nơi bạn muốn nó ở lại trên trang Web của bạn. Tôi đã làm cho tôi rộng 800px để chứa các màn hình lớn hơn, nhưng nếu bạn có một màn hình nhỏ hơn, bạn có thể muốn làm cho nó hẹp hơn.
Đặt thông tin sau vào tài liệu styles.css của bạn:
#chủ yếu {
chiều rộng: 800px;
trên cùng: 0px;
vị trí: tuyệt đối;
trái: 250px;
}
08 trên 10
Tạo kiểu cho đoạn của bạn
Vì tôi đã đặt phông chữ ở trên, tôi muốn cung cấp cho mỗi đoạn thêm một chút "đá" để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền ở trên cùng để làm nổi bật đoạn văn nhiều hơn chỉ là hình ảnh một mình.
Đặt thông tin sau vào tài liệu styles.css của bạn:
.dòng trên cùng {
border-top: dày đặc # FFCC00;
}
Tôi quyết định làm nó như một lớp được gọi là "topline" thay vì chỉ định nghĩa tất cả các đoạn văn theo cách đó. Bằng cách này, nếu tôi quyết định tôi muốn có một đoạn mà không có dòng màu vàng trên cùng, tôi có thể chỉ cần bỏ qua class = "topline" trong thẻ đoạn và nó sẽ không có đường viền trên cùng.
09 trên 10
Tạo hình ảnh
Hình ảnh thường có đường viền xung quanh, điều này không phải lúc nào cũng hiển thị trừ khi hình ảnh là một liên kết, nhưng tôi muốn có một lớp trong biểu định kiểu CSS của tôi tự động tắt biên giới. Đối với biểu định kiểu này, tôi đã tạo lớp "noborder" và hầu hết các hình ảnh trong tài liệu là một phần của lớp này.
Phần đặc biệt khác của những hình ảnh này là vị trí của chúng trên trang. Tôi muốn họ là một phần của đoạn văn mà họ đang ở mà không cần sử dụng các bảng để sắp xếp chúng. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính CSS nổi.
Đặt thông tin sau vào tài liệu styles.css của bạn:
#main img {
float: trái;
lề phải: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px none;
}
Như bạn có thể thấy, cũng có các thuộc tính lề được đặt trên các hình ảnh, để đảm bảo rằng chúng không bị đập vỡ đối với văn bản được thả nổi bên cạnh chúng trong các đoạn văn.
10 trên 10
Bây giờ hãy nhìn vào trang đã hoàn thành của bạn
Khi bạn đã lưu CSS của mình, bạn có thể tải lại trang pets.htm trong trình duyệt Web của mình. Trang của bạn sẽ trông giống như trang được hiển thị trong ảnh này, với các hình ảnh được căn chỉnh và điều hướng được đặt chính xác ở phía bên trái của trang.
Thực hiện theo các bước tương tự này cho tất cả các trang nội bộ của bạn cho trang web này. Bạn muốn có một trang cho mỗi trang trong điều hướng của mình.