Phần mở rộng nào được sử dụng để lưu tệp CSS?

Bạn đang gặp sự cố khi mở tệp CSS hoặc chỉ tự hỏi chúng chứa gì?

Tệp CSS là gì?

Các tệp CSS có nhiều cách sử dụng và Cascading Style Sheet là một trong số đó. Đọc thêm về các cách sử dụng khác ở cuối trang

Tệp biểu định kiểu xếp tầng

CSS là viết tắt của Cascading Style Sheet. Các tập tin có chứa các. phần mở rộng tệp css được sử dụng để định dạng nội dung của trang web được liên kết. Mặc dù định dạng tệp CSS được liên kết phổ biến nhất với các trang web được viết bằng ngôn ngữ đánh dấu HTML và XHTML, nhưng nó cũng có thể được áp dụng cho các tài liệu XML

Tệp CSS chứa các thuộc tính xác định cách hiển thị các phần tử HTML của một trang web được liên kết, chẳng hạn như màu sắc, phông chữ, kích thước, khoảng cách dòng, đường viền và các phần tử hình ảnh khác

Các tệp CSS tương tự như các tệp mẫu, cho phép người dùng tạo nhiều trang web có giao diện tương tự mà không cần tạo mọi trang web từ đầu

Điều hướng đến menu Tệp, chọn “Lưu dưới dạng…” và đảm bảo rằng các tệp mypage được đặt trong cùng thư mục/thư mục với tệp của bạn. Để bắt đầu, hãy sao chép tệp HTML này vào trình duyệt safari của bạn và dán thuộc tính “kiểu”. Sau đó, nhấp vào nút HTML khi quay lại cửa sổ

Mục lục

Làm cách nào để bạn lưu tệp Html? Làm cách nào để lưu tệp. Tôi nên lưu tệp css ở đâu? tôi lưu tệp css ở đâu? làm cách nào để lưu phần mở rộng tệp css? làm cách nào để mở tệp css. Tiện ích mở rộng nào được sử dụng để lưu tệp css? Làm cách nào để lưu tệp css trên máy Mac? Làm cách nào để mở tệp css trong Chrome? tôi nên lưu tệp css dưới dạng gì? tôi có nên đặt css vào tệp riêng không?

Hôm nay chúng ta sẽ viết và lưu tệp CSS đầu tiên của mình. Hãy bắt đầu bằng cách mở một chương trình soạn thảo văn bản. Nếu bạn đang sử dụng PC Microsoft Windows, hãy mở chương trình có tên Notepad (giữ phím Windows trên bàn phím và nhấn R, sau đó nhập notepad và nhấn enter). Nếu bạn đang sử dụng máy tính Macintosh, hãy khởi chạy ứng dụng có tên “TextEdit” (có thể tìm thấy ứng dụng này trong thư mục Ứng dụng của bạn)

Hãy viết đoạn CSS đầu tiên của chúng ta

Hãy tưởng tượng chúng ta có một trang web đơn giản với tiêu đề và chúng tôi muốn tiêu đề có màu cam và được căn giữa. Thêm đoạn mã sau vào tài liệu văn bản trống mới của bạn

h1 {
color: orange;
text-align: center;
}

Hy vọng, bạn nhớ mã này từ bài học trước của chúng tôi. Nhiệm vụ của ngày hôm nay là lưu tệp CSS của chúng ta và liên kết nó với một trang HTML

Bước 1. Lưu tệp CSS

Tạo một thư mục mới trên màn hình của bạn (hoặc một vị trí khác mà bạn thích) và đặt tên là CSS-Test. Bây giờ, quay lại chương trình soạn thảo văn bản của bạn, lưu tài liệu của bạn dưới dạng “style. css”

Phần mở rộng nào được sử dụng để lưu tệp CSS?

Liên kết tệp CSS với trang HTML

Tệp CSS mới của chúng tôi sẽ vô giá trị nếu chúng tôi không áp dụng nó cho một trang web. Hãy tạo một trang HTML nhanh cho bài học này. Tạo một tệp trống mới trong Notepad (hoặc TextEdit) và thêm đoạn mã sau






CSS-Test



CSS-Test

This is box one.

This is box two.

Nếu bạn đã đọc vài Bài học HTML đầu tiên của tôi, thì mã này ít nhất cũng hơi quen thuộc. Tôi sẽ giải thích nó khi bài học tiếp tục; . htm”

Phần mở rộng nào được sử dụng để lưu tệp CSS?

Liên kết hai tệp với nhau

Chúng ta vẫn cần yêu cầu trình duyệt web tải “style. css” khi “index. trang htm” được xem. Thêm mã sau vào “chỉ mục. htm” ngay phía trên thẻ đóng của chúng tôi

Dòng mã này cho trình duyệt của chúng tôi biết rằng chúng tôi muốn liên kết một Biểu định kiểu, nó nằm trong cùng thư mục với trang HTML của chúng tôi và nó được đặt tên là “kiểu. css”

Bây giờ, khi bạn xem “chỉ mục. htm” trong trình duyệt web, bạn sẽ thấy tiêu đề màu cam ở giữa

Phần mở rộng nào được sử dụng để lưu tệp CSS?

Hãy tạo kiểu cho hai hộp đó

If you look at the code of our HTML page, you’ll see two

elements. We added an HTML attribute of “id” for these two elements and assigned them values of “box-one” and “box-two.” We can use an element’s “id” to select and style it with CSS. For example, let’s make the first box gray, and the second box yellow. Add the following code to your CSS file, directly below our original

rule:

#box-one {
background-color: gray;
}

#box-two {
background-color: yellow;
padding: 10px;
}

When an element has an “id” we can access it with a CSS selector by placing a pound sign (#) in front of it’s id value. So to select the first

element we simply type “#box-one” and then begin our CSS Rule.

Hộp ưa thích mới của chúng tôi

Khi bạn lưu tệp CSS của mình và làm mới trang HTML của chúng tôi trong trình duyệt web, bạn sẽ thấy một cái gì đó rất giống với cái này

Phần mở rộng nào được sử dụng để lưu tệp CSS?

Yay cho phong cách

Nó có thể không đẹp, nhưng chúng tôi đã định kiểu trang HTML đầu tiên của mình bằng CSS. Hãy tóm tắt lại kiến ​​thức CSS của bạn cho đến nay. Bạn biết

  • Cú pháp cơ bản của CSS (đã được trình bày trong bài học trước của chúng ta)
  • Cách liên kết tệp CSS với trang HTML
  • Cách chọn một số thành phần HTML nhất định và tạo kiểu cho chúng

Trong bài học tiếp theo, chúng ta sẽ tiếp tục tìm hiểu về Bộ chọn CSS và các cách khác nhau để nhắm mục tiêu các phần tử cụ thể bằng CSS của bạn

Nếu bạn thích xem các bài học video thay vì đọc các bài học viết, hãy xem khóa học video 8 giờ của tôi và tham gia cùng hơn 4.000 người khác đã học HTML, CSS và thiết kế đáp ứng ở cấp độ chuyên nghiệp