trong đó “bản định kiểu. css” là tên tệp CSS của bạn. Nếu bạn gặp sự cố, hãy nhớ đảm bảo rằng bạn đã lưu nó với một. phần mở rộng tệp css, đây là một tùy chọn khi lưu từ Notepad ++
Theo mặc định, máy tính cho rằng hai tệp ở cùng một vị trí. Nếu không, bạn sẽ phải viết toàn bộ đường dẫn tệp để chỉ định vị trí
Các biểu định kiểu bên ngoài được tạo trong các tài liệu riêng biệt với một. phần mở rộng css. Một biểu định kiểu bên ngoài chỉ đơn giản là một danh sách các quy tắc CSS. Nó không thể chứa các thẻ HTML. Thẻ , nằm trong phần đầu của trang HTML, được sử dụng để liên kết với biểu định kiểu bên ngoài. Không có giới hạn về số lượng biểu định kiểu bên ngoài mà một trang HTML có thể sử dụng. Ngoài ra, biểu định kiểu bên ngoài có thể được kết hợp với biểu định kiểu nhúng. Làm theo các bước sau để tạo biểu định kiểu bên ngoài
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 quy 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 biểu định kiểu CSS của bạn trong Notepad
- Chọn Tệp > Mới trong Notepad để có một cửa sổ trống
- Lưu tệp dưới dạng CSS bằng cách nhấp vào Tệp < Lưu dưới dạng
- Đ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 cho tệp của bạn là "phong cách. css" [bỏ dấu ngoặc kép] và nhấp vào Lưu
Liên kết CSS Style Sheet với HTML của bạn
Khi bạn đã có biểu định kiểu cho trang web của mình, bạn sẽ cần liên kết nó với chính 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 ở bất kỳ đâu trong
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 được là dường như 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 sự lựa chọn của trình duyệt
Chúng tôi muốn bắt đầu các trang ở góc trên bên trái, không có thêm phần đệm hoặc lề xung quanh văn bản. Ngay cả khi chúng tôi sẽ đệm nội dung, chúng tôi đặt lề thành 0 để chúng tôi bắt đầu với cùng một phương tiện chặn trống. Để làm điều này, thêm phần sau vào phong cách của bạn. tài liệu css
html,body {
margin: 0px;
padding: 0px;
border: 0px;
left: 0px;
top: 0px;
}
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 và thực sự tùy thuộc vào chính 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ự không biết trang của mình 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 phần sau vào phong cách của bạn. tài liệu css
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Chúng tôi đã bắt đầu với 1em làm kích thước cơ sở cho các đoạn văn và danh sách mục, sau đó sử dụng kích thước đó để đặt kích thước cho tiêu đề của tôi. Chúng tôi không mong muốn sử dụng tiêu đề sâu hơn h4, nhưng nếu có kế hoạch, bạn cũng sẽ muốn tạo kiểu cho nó
Làm cho liên kết của bạn thú vị hơn
Màu mặc định cho các liên kết lần lượt là xanh lam và tím đối với các liên kết chưa được truy cập và đã truy cập. 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 phong cách của bạn. css, thêm vào như sau
a:link {
font-family: Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;
}
a:visited {
color: #FFCC66;
}
a:hover {
background: #FFFFCC;
font-weight: bold;
}
Chúng tôi thiết lập ba kiểu liên kết, một. liên kết làm mặc định, một. đã truy cập khi nó được truy cập, chúng tôi thay đổi màu sắc và một. bay lượn. Với một. di chuột qua, chúng tôi có liên kết có màu nền và in đậm để nhấn mạnh đó là liên kết được nhấp vào
Tạo kiểu cho Phần Điều hướng
Vì chúng ta đặt phần điều hướng [id="nav"] đầu tiên trong HTML, nên hãy tạo kiểu cho nó trước. Chúng ta cần chỉ ra độ rộng của nó và đặt lề rộng hơn ở phía bên phải để văn bản chính không va vào nó. chúng tôi cũng đặt một đường viền xung quanh nó
Thêm CSS sau vào phong cách của bạn. tài liệu css
#nav {
width: 225px;
margin-right: 15px;
border: medium solid #000000;
}
#nav li {
list-style: none;
}
.footer {
font-size: .75em;
clear: both;
width: 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à. chân trang tạo kiểu cho phần bản quyền nhỏ hơn và được căn giữa trong phần
Định vị phần chính
Bằng cách định vị phần chính của bạn với định vị 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ó ở trên trang web của bạn. Chúng tôi đã làm cho nó rộng 800px để phù hợp với 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 màn hình đó hẹp hơn
Đặt những thứ sau vào phong cách của bạn. tài liệu css
#main {
width: 800px;
top: 0px;
position: absolute;
left: 250px;
}
Tạo kiểu cho các đoạn văn của bạn
Vì tôi đã đặt phông chữ đoạn văn ở trên, nên tôi muốn tạo thêm một chút "cú hích" cho mỗi đoạn văn để 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 hơn là chỉ mỗi hình ảnh
Đặt những thứ sau vào phong cách của bạn. tài liệu css
.topline {
border-top: thick solid #FFCC00;
}
Chúng tôi quyết định làm điều đó dưới dạng một lớp gọi là "topline" thay vì chỉ xác định tất cả các đoạn theo cách đó. Bằng cách này, nếu chúng tôi quyết định muốn có một đoạn văn không có dòng màu vàng trên cùng, chúng tôi chỉ cần bỏ class="topline" trong thẻ đoạn văn và nó sẽ không có đường viền trên cùng
Tạo kiểu cho 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 chúng tôi muốn có một lớp trong biểu định kiểu CSS tự động tắt đường viền. Đối với biểu định kiểu này, chúng tôi đã tạo lớp "không biên giới" 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. Chúng tôi muốn chúng là một phần của đoạn văn mà chúng nằm trong đó mà không cần sử dụng bảng để căn chỉnh chúng. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính CSS float
Đặt những thứ sau vào phong cách của bạn. tài liệu css
#main img {
float: left;
margin-right: 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 hình ảnh, để đảm bảo rằng chúng không bị va chạm với văn bản nổi bên cạnh chúng trong đoạn văn
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 thú cưng. trang htm trong trình duyệt Web của bạn. Trang của bạn sẽ trông giống như trang được hiển thị trong hình này, với 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ự 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
Trích dẫn bài viết này
Sự sắp xếp
mla apa chicagotrích dẫn của bạn
Kyrnin, Jennifer. "Tạo kiểu trang web được tạo bằng Notepad bằng CSS. "ThinkCo. https. //www. suy nghĩ. com/css-and-notepad-created-web-page-3466582 [truy cập ngày 11 tháng 1 năm 2023]