Làm thế nào để tạo một Master CSS File - núm vú

Nhiều nhà thiết kế tạo ra một phiên bản CSS chủ của riêng mình với mã HTML, sau đó họ thích ứng với nhu cầu của từng trang web, để giúp đẩy nhanh quá trình xây dựng một trang web từ đầu.

Khi bạn xây dựng nhiều trang web hơn và nhiều hơn nữa, một số phong cách sẽ trở thành một phần thường xuyên trong thực tiễn thiết kế tiêu chuẩn của bạn. Ví dụ, bạn có thể muốn đặt lề trang của bạn thành 0, chỉ định màu nền trang, chọn phông chữ mặc định cho tất cả các văn bản, tạo định nghĩa lại cho các đoạn văn và tiêu đề, xác định các thuộc tính kiểu cho ít nhất hai liên kết (liên kết và truy cập) tiểu bang, và tạo ra một phong cách bullet tùy chỉnh.

Sử dụng tệp này để kiểm tra các kiểu cho CSS của bạn khi bạn tạo tệp css chủ. Tệp HTML mẫu bao gồm văn bản đoạn văn, một nhóm 1, một nhóm 2, một danh sách không có thứ tự, và một vài hyperlinks hoạt động.

Để tạo tệp CSS chủ của chính bạn, hãy làm theo các bước sau:

Tạo một tài liệu trống mới, không có mã HTML, và lưu nó bằng tên tệp tin gốc. css.

Lưu tệp tin CSS này ở cùng vị trí trên máy tính của bạn làm mẫu của bạn. file html.
Trong khu vực mẫu của bạn. html, thêm liên kết vào tệp tin css bên ngoài mới, bao gồm loại phương tiện được đặt thành tất cả:
Liên kết này cho biết mẫu. tệp html để sử dụng định nghĩa kiểu trong CSS bên ngoài được liên kết.
Bên trong thầy. tập tin css, tạo một Tag định nghĩa lại phong cách cho thẻ đó đặt lề trên cùng, bên trái, dưới cùng và bên phải thành 0px; các padding trên cả bốn mặt của trang để 10px; và nền với màu cam nhạt ánh sáng với giá trị thập lục phân của # fc3bb6.

Mã phong cách của bạn sẽ giống như sau:
```
body {margin: 0px; đệm: 10px; background-color: # fc3bb6;}
```
Khi cả bốn mặt của một đối tượng sử dụng cùng một giá trị, như với khoảng cách lề và padding được hiển thị ở đây, giá trị cần được chỉ định trong CSS chỉ một lần. Tuy nhiên, khi giá trị khác nhau ở một hoặc nhiều cạnh, bạn phải chỉ định các giá trị cho mỗi bên:
```
body {margin: 10px 10px 0px 0px; padding: 20px 0px 0px 20px; background-color: # fc3bb6;}
```
Tạo một thẻ định nghĩa lại phong cách trong tệp tin CSS của bạn cho các thẻ
,
và
bằng cách chỉ định phông chữ, cỡ chữ và màu phông chữ cho mỗi tệp.

Sử dụng bất kỳ phông chữ, kích thước, trọng lượng và màu nào bạn thích vì bạn có thể tùy chỉnh các giá trị sau để khớp với bất kỳ dự án cụ thể nào. Dưới đây là ví dụ về mã mà bạn có thể sử dụng:
```
p {font-family: Georgia, "Times New Roman", Times, serif; kích thước phông chữ: 12px; màu sắc: # 000000;} h1 {font-family: Arial, Helvetica, sans-serif; kích cỡ phông chữ: 36px; phông chữ trọng lượng: đậm; màu: # 000066;} h2 font-family: Arial, Helvetica, sans-serif; kích thước phông chữ: 24px; phông chữ trọng lượng: đậm; color: # 000066;}
```
Để thay đổi kiểu đường link mặc định, bạn có thể tạo ra các kiểu phần tử giả cho mỗi trạng thái liên kết siêu.

Bạn có thể chỉ định bất kỳ thuộc tính nào bạn thích cho mỗi trong bốn trạng thái, từ việc thay đổi phông chữ hoặc trọng lượng phông chữ, để sửa đổi màu văn bản hoặc màu nền, để thay đổi trang trí văn bản mặc định.

Dưới đây là ví dụ về mã bạn có thể sử dụng cho bốn trạng thái liên kết:
```
a: link {font-weight: bold; text-decoration: gạch dưới; màu: # 0099cc;} a: visited {font-weight: bold; text-decoration: gạch dưới; màu: # 990000;} a: hover {font-weight: bình thường; văn bản-trang trí: không có; màu sắc: #ffffff; nền: # ff9933;} a: active {font-weight: bình thường; văn bản-trang trí: không có; màu sắc: #ffffff; background: # cc0000;}
```
Để sắp xếp danh sách không có thứ tự, bạn có thể định nghĩa lại thẻ
hoặc tạo kiểu lớp có thể được áp dụng một cách có chọn lọc cho bất kỳ thẻ
có thuộc tính lớp. Nếu muốn, chỉ định một hình ảnh để thay thế các đạn mặc định.

Định nghĩa kiểu dáng giống nhau cho dù bạn định nghĩa lại thẻ
hay tạo phong cách lớp học riêng của riêng bạn; chỉ có bộ chọn được viết khác, như là li hoặc có lẽ là. đạn.

Mã của bạn cho kiểu định nghĩa lại thẻ đạn bullet có thể trông giống như sau:
```
li {list-style-position: outside; list-style-image: url (hình ảnh / bullet. gif); font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
```
Lưu các tệp HTML và CSS và khởi chạy tệp HTML của bạn trong cửa sổ trình duyệt.

Để xem trang trong trình duyệt, bạn có thể nhấp đúp vào tệp HTML hoặc kéo và thả biểu tượng tệp vào bất kỳ cửa sổ trình duyệt mở nào.

Tệp sẽ hiển thị với tất cả các thuộc tính kiểu mà bạn vừa tạo trong tệp tin chính của bạn. Nếu không đúng hoặc nếu các phần tử nhất định không hiển thị chính xác, hãy mở lại các tệp và kiểm tra tính chính xác của tất cả mã của bạn, khắc phục bất kỳ lỗi nào bạn tìm thấy và thử lại. Đảm bảo bạn đã nhớ thêm khoảng thời gian (.) Trước tất cả tên lớp tùy chỉnh của bạn và ký hiệu số (#) trước tất cả các giá trị màu hệ thập lục phân của bạn.
Kiểm tra các kiểu liên kết mới của bạn trong cửa sổ trình duyệt bằng cách
1. Lướt qua liên kết để xem phong cách di chuột.
2. Nhấp và giữ chuột qua liên kết để xem phong cách hoạt động.
3. Nhấp vào liên kết và quay lại trang mẫu của bạn bằng cách nhấp vào nút Quay lại của trình duyệt để xem liên kết thay đổi từ trạng thái bình thường sang trạng thái liên kết truy cập như thế nào.

Giờ đây bạn đã có tệp tin tổng thể đầu tiên của CSS, chứ không phải mở lại bánh xe mỗi khi bạn bắt đầu một dự án web mới, bạn có thể sử dụng tệp này làm điểm bắt đầu. Tất nhiên, đối với một số dự án, việc xây dựng CSS từ đầu có thể dễ dàng hơn hoặc thực tế hơn, nhưng nếu có một tệp CSS chủ sẽ tiết kiệm thời gian cho bạn, bằng mọi cách sử dụng nó như là một kỹ thuật thiết kế.