Bài đăng này được xây dựng dựa trên hướng dẫn trước đó Trang web chính xác là gì? . Bạn sẽ cần lấy mã từ bài viết trước để làm theo các bước bên dưới

Sau khi hoàn thành hướng dẫn trước, chúng ta sẽ có tệp HTML đầu tiên của mình đã sẵn sàng để sử dụng. Bây giờ chúng tôi muốn bắt đầu làm cho nó trông thật đẹp. Để làm điều này, chúng ta sẽ học một số CSS…

Tại sao nên sử dụng HTML và CSS?

Rất vui vì bạn đã hỏi. HTML và CSS là hai loại  đánh dấu  (mã), có  cú pháp (the arrangement in which code is written). There’s an important distinction between the two. You can think of the HTML as the structure for the page, while the CSS gives the HTML it’s styling.

HTML = cấu trúc
CSS = kiểu

(Nhân tiện, HTML là viết tắt của HyperText Markup Language và CSS là viết tắt của Cascading Style Sheets, nếu bạn đang thắc mắc. )

Để biết ví dụ tuyệt vời về khái niệm tách nội dung khỏi phong cách bằng HTML và CSS, hãy xem trang web CSS Zen Garden. Thực sự, làm điều đó ngay bây giờ. Liên kết sẽ mở trong một tab hoặc cửa sổ mới và tôi sẽ nghỉ giải lao

Được rồi, chúng ta trở lại?

Trước đây, trang web này khá truyền cảm hứng—nó là một trong những ví dụ trực tuyến đầu tiên về mối quan hệ giữa HTML và CSS thực sự mạnh mẽ như thế nào. Khi bạn duyệt qua các thiết kế thay thế cho trang web, hãy lưu ý rằng mọi thiết kế đều sử dụng chính xác cùng một HTML. Thứ duy nhất thay đổi từ thiết kế này sang thiết kế khác là tệp CSS. Đây là một ví dụ tuyệt vời về những gì có thể đạt được chỉ bằng cách sử dụng CSS để thay đổi giao diện của trang web

Trong các hướng dẫn tiếp theo khi mã của chúng ta trở nên phức tạp, chúng ta sẽ tìm hiểu tầm quan trọng của việc tách biệt hai mã này. Bây giờ, hãy đào sâu và thực sự viết mã

Bước 1

Tạo một tệp mới có tên là “phong cách. css” và lưu nó vào cùng thư mục với tệp của bạn có tên là “index. html”. (Trong hướng dẫn trước, chúng ta đã tạo một thư mục “trang web”. Lưu tệp CSS của bạn ở đó. )

Liên kết các tệp HTML và CSS của bạn

Bước 2

Before we even write the CSS, we actually have to go back to our HTML. We need to write a new line to link the html file and the css file together. So, open up the index.html file from the previous tutorial and add the highlighted line of code below (line 5) to the section of your document. The result should look like this:

 
  
  
 
 
  
This is a heading 1 element
  
Hello world, this is a simple paragraph.
 

Dòng mã này liên kết tệp CSS mới với tệp HTML của bạn. Hãy phá vỡ nó. thuộc tính href thực sự chỉ định liên kết tương đối đến tệp css. Chúng ta sẽ truy cập vào các liên kết sau, bây giờ, chỉ cần đảm bảo rằng kiểu. tệp css nằm trong cùng thư mục với chỉ mục của bạn. tệp html. Thuộc tính rel báo cho trình duyệt biết đây là stylesheet. Thuộc tính type cho trình duyệt biết rằng tệp được liên kết này sẽ được hiểu là cú pháp CSS

Hiểu cú pháp CSS

Bước 3

Bây giờ đến CSS thực. Điều đầu tiên chúng ta sẽ làm là làm cho đoạn văn bản có màu khác. Vì vậy, hãy nhập hoặc dán nội dung này vào phong cách của bạn. tập tin css

p { color:blue; }

Mã này có vẻ khác với mã trong tệp HTML của chúng tôi vì nó có cú pháp khác. Tôi sẽ thêm một số khoảng trắng và ngắt đoạn mã đó như thế này

p { 
  color:blue; 
}

Cả hai ví dụ trên đều giống hệt nhau về trình duyệt của bạn. Nhưng các nhà phát triển thường viết ra CSS như ví dụ sau để phân biệt các kiểu một cách trực quan. Điều này hữu ích khi các tệp CSS của bạn bắt đầu tích lũy hàng trăm kiểu khác nhau và để tìm hiểu ý nghĩa của cú pháp

Toàn bộ văn bản ở trên về mặt kỹ thuật được gọi là bộ quy tắc hoặc đơn giản là quy tắc. Nó được chia thành một vài phần khác nhau

In this particular rule set, we can call p a selector. (This “selects” the part of the corresponding HTML will be effected—the p {} selects the 

 in our HTML file.)

Đoạn mã bao gồm và nằm giữa cặp dấu ngoặc nhọn { } được gọi là khối khai báo

Có một khai báo bên trong khối khai báo của chúng ta. màu. màu xanh da trời; . Các khai báo là các cặp tên-giá trị (tương tự như các thuộc tính HTML). Ở đây, tên của khai báo là "màu" và giá trị là "màu xanh". Điều quan trọng là phải phân tách tên và giá trị bằng dấu hai chấm .   và kết thúc phần khai báo bằng dấu chấm phẩy ; .

Bước 4

Chúng tôi sẽ thêm một bộ quy tắc mới để thay đổi màu của tiêu đề, như vậy

p { 
  color:blue; 
}
h1 {
  color:red;
}

Bây giờ, đầu 1 của chúng ta sẽ có màu đỏ và đoạn văn của chúng ta sẽ có màu xanh lam, như được thấy bên dưới và trong bản demo

Vì vậy, hãy lưu tệp CSS của bạn và sau đó xem tệp HTML tương ứng trong trình duyệt của bạn để đảm bảo rằng tệp của bạn trông giống như ví dụ trên

Tóm tắt lại

Được rồi, vậy là bạn vừa sử dụng thành công các bộ quy tắc trong tệp CSS để thay đổi giao diện của các thành phần trong tệp HTML của mình. Đây là nền tảng của mọi thứ chúng tôi sẽ làm để xây dựng trang web của mình. Đảm bảo rằng mã của bạn đang hoạt động và bạn dành một giây để hiểu tại sao điều này lại hiệu quả. Hy vọng rằng bạn đã có một số câu hỏi… chúng tôi sẽ tiếp tục xây dựng câu hỏi này và trả lời những câu hỏi đó trong phần còn lại của loạt bài

Bạn có nên tách CSS và HTML không?

Tôi có thể liên kết 2 CSS với HTML không?