Cách chạy file CSS trên trình duyệt

Tệp CSS là tệp biểu định kiểu xếp tầng (CSS) được sử dụng để định dạng nội dung của trang web. Nó chứa các thuộc tính toàn cầu được tùy chỉnh để hiển thị các phần tử HTML. Ví dụ: các tệp CSS có thể xác định kích thước, màu sắc, phông chữ, khoảng cách dòng, thụt lề, đường viền và vị trí của các thành phần HTML

Thêm thông tin

CSS ban đầu được phát hành vào năm 1996 và hiện đang được phát triển bởi World Wide Web Consortium (W3C). Các nhà phát triển và thiết kế web sử dụng các tệp CSS để tạo giao diện tương tự trên các trang trên một trang web. Bằng cách lưu trữ các thuộc tính hiển thị cho nhiều trang trong một tệp duy nhất, các tệp CSS cũng giảm khối lượng công việc và mã HTML được tạo

Bất kỳ trang web nào tham chiếu tệp CSS sẽ được sửa đổi dựa trên các thuộc tính trong tệp CSS. Ví dụ: một nhà thiết kế có thể muốn thay đổi phông chữ và thêm phần đệm cho văn bản trên 200 trang trên trang web của mình. Nếu các trang tham chiếu cùng một tệp CSS, anh ấy chỉ cần thay đổi một tệp CSS thay vì 200 trang riêng biệt

Cú pháp CSS đơn giản và chủ yếu bao gồm các bộ chọn và khối khai báo. Bộ chọn xác định phần tử HTML sẽ được tạo kiểu và khối khai báo bao gồm một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy. Các khai báo bao gồm tên thuộc tính CSS, dấu hai chấm và giá trị cho thuộc tính

Cách mở tệp CSS

Bạn có thể mở và chỉnh sửa các tệp CSS bằng nhiều ứng dụng phát triển web và trình chỉnh sửa mã nguồn khác nhau. Ví dụ về các chương trình hỗ trợ tệp CSS bao gồm Adobe Dreamweaver (Windows và macOS), Adobe ColdFusion Builder (Windows và macOS) và Microsoft Visual Studio Code (đa nền tảng)

Vì các tệp CSS được lưu ở dạng văn bản thuần túy nên bạn cũng có thể mở chúng bằng các trình soạn thảo văn bản, bao gồm Microsoft Notepad (đi kèm với Windows) và Apple TextEdit (đi kèm với macOS). Tuy nhiên, bạn nên sử dụng các công cụ phát triển web hoặc trình chỉnh sửa mã nguồn để chỉnh sửa các tệp CSS, nếu có thể, vì chúng cung cấp các tính năng nâng cao hơn, chẳng hạn như đánh dấu cú pháp

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

1. Chọn Tệp > Mới trong Notepad để có một cửa sổ trống
2. 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
3. Điều hướng đến thư mục my_website trên ổ cứng của bạn
4. Thay đổi "Lưu dưới dạng. " thành "Tất cả tệp"
5. Đặ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à mục danh sách, 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, 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

Định dạng

trí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 1 tháng 1 năm 2023)

Các tệp CSS được trình duyệt đọc như thế nào?

CSS hoạt động như thế nào trong trình duyệt?