Các cách đưa CSS vào HTML. Kết nối CSS với tài liệu HTML

Có một số cách để kết nối các bảng CSS với tài liệu HTML.

Phong cách tích hợp

Bạn có thể đặt kiểu CSS trực tiếp trong đánh dấu HTML bằng cách thêm quy tắc CSS vào thẻ mong muốn bằng thuộc tính style.

Màu văn bản màu đỏ

Kiểu CSSđược đăng ký vào thẻ bằng cách sử dụng thuộc tính phong cách. Bằng cách này, chúng ta có thể áp dụng các kiểu CSS cho bất kỳ thẻ nào trên trang HTML. Trong ví dụ này chúng tôi đã sử dụng Thuộc tính màu CSS cho một đoạn văn, thiết lập ý nghĩa của nó màu đỏ. Chúng ta có thể đặt nhiều thuộc tính CSS cùng một lúc; để làm điều này, đừng quên phân tách từng cặp thuộc tính-giá trị bằng một ký hiệu ";" .

Dấu trừ Cách tiếp cận này là tài sản này sẽ chỉ áp dụng cho một thẻ p cụ thể, các đoạn khác sẽ không thấy thuộc tính này, đây là một điểm trừ lớn tương ứng. Ngoài ra, một trang như vậy chỉ đơn giản là không thể duy trì. Việc thay đổi thuộc tính CSS nội tuyến phải được lặp lại cho mỗi trang mới.

Điểm trừ thứ ba cách tiếp cận này chậm tốc độ tải trang Và đánh dấu HTML lộn xộn. Chúng tôi sẽ không thể lưu trữ dữ liệu thuộc tính CSS, tức là. Mỗi khi trang được tải, trình duyệt sẽ tính toán lại các thuộc tính.

Thêm cách tiếp cận này là bạn không cần tạo CSS tệp và bạn có thể nhanh chóng thực hiện các thay đổi trong chế độ gỡ lỗi và xem kết quả của chúng.

Bảng định kiểu nội bộ

Cách thứ hai để kết nối các kiểu CSS là thêm kiểu CSS vào trang thông qua thẻ

Bây giờ, nếu bạn có thể sử dụng bộ chọn CSS để chọn một nhóm thẻ trên một trang, nhưng vấn đề khi tạo trang mới, một lần nữa, phương pháp này vẫn chưa được giải quyết. Ngoài ra, bạn vẫn không thể lưu các kiểu CSS vào bộ đệm.

Kết nối các bảng định kiểu bên ngoài

Cách thuận tiện nhất để làm việc với các bảng CSS là sử dụng các biểu định kiểu bên ngoài. Chúng được gọi là bên ngoài vì mã CSS được đặt riêng biệt với đánh dấu HTML và được kết nối với trang bằng dòng

Ở đâu trong thuộc tính href bạn phải chỉ định đường dẫn đến tập tin css ( Một tệp chứa tất cả các kiểu CSS của chúng tôi, phần mở rộng tệp phải là .css).

Vì vậy, chúng ta có thể thêm chuỗi kết nối vào tệp này vào mỗi trang mới. Và tất cả các kiểu hoạt động trong trang HTML đầu tiên cũng sẽ được áp dụng cho các kiểu tiếp theo.

Vì hiện tại chúng ta có CSS ​​trong một tệp riêng biệt nên trình duyệt sẽ tải xuống khi nó được truy cập lần đầu tiên và trong tương lai, nếu tệp không bị thay đổi thì nó sẽ sử dụng CSS đó thêm (tệp sẽ nằm trong bộ đệm của trình duyệt), do đó , trang sẽ tải nhanh hơn rất nhiều và nếu đồng thời bạn sử dụng tính năng giảm thiểu các tệp css và js thì việc tải sẽ diễn ra nhanh hơn rất nhiều lần.

Chúng ta cũng có thể đặt mã CSS vào các tệp khác nhau. Ví dụ: đối với thiết kế văn bản, tệp phông chữ.css và đối với mọi thứ khác, tệp style.css. Và kết nối chúng lại với nhau vào trang HTML, bởi vì... Bạn có thể kết nối nhiều tệp CSS với một trang HTML cùng một lúc.

Sử dụng lệnh @import

Ngoài việc kết nối trực tiếp tới trang bằng thẻ liên kết, có thể kết nối các kiểu bên trong tệp CSS bằng lệnh @nhập khẩu.

Như đã đề cập ở trên, bạn có thể kết nối nhiều tệp CSS cùng lúc trong một tệp HTML bằng đường liên kết. Nhưng đó không phải là tất cả.

Nếu cần (nếu bạn có một dự án lớn với nhiều tệp CSS), bạn có thể nhập tất cả các tệp CSS vào một tệp CSS chung và kết nối nó với tài liệu, sau đó tất cả các CSS khác sẽ được nhập vào đó.

Vì nhập tệp CSS chuỗi được sử dụng

@import url("style.css");

Trong dấu ngoặc là đường dẫn đến tệp css đã nhập.

Cho đến khi các kiểu CSS được kết nối với trang HTML, việc sử dụng chúng sẽ không có tác dụng gì. Có một số cách có thể thực hiện được điều này.

Dành cho những ai thích xem ở dạng video.

Để minh họa cách hoạt động của từng phương thức này, hãy lấy ví dụ một tệp html có nội dung sau.

Nhiệm vụ của các kiểu CSS sẽ được kết nối là tạo thành phần đoạn văn

Màu đỏ.

Trong tất cả các ví dụ, kết quả trên trang web sẽ giống nhau. Bạn sẽ thấy đoạn văn bản màu đỏ này.

Lựa chọn 1. Bên trong thẻ mở sử dụng thuộc tính style.

Các phần tử trên trang nằm bên trong phần tử nội dung có thể được thêm thuộc tính kiểu. Giá trị của thuộc tính này có thể là thuộc tính và giá trị CSS nên được áp dụng cho phần tử này.

Hãy xem cách này hoạt động như thế nào với một ví dụ cụ thể. thuộc tính style được thêm vào phần tử

Đoạn văn

Xin lưu ý rằng trong trường hợp này không cần sử dụng bộ chọn, vì phần tử mà kiểu được thêm vào đã được xác định.

Lựa chọn 2. Bên trong phần tử phong cách.

Một cách khác để thêm các kiểu CSS là sử dụng phần tử

Tùy chọn 3. Kết nối một tập tin kiểu bên ngoài.

Và tùy chọn cuối cùng để kết nối các kiểu CSS là sử dụng phần tử liên kết, cho phép bạn kết nối các tệp bên ngoài với trang HTML.

Hãy chú ý đến các thuộc tính được chỉ định cho phần tử này.

Chúng cũng là bắt buộc. Thuộc tính href chỉ định đường dẫn đến tệp css cần được đưa vào.

Tệp style.css chứa mã sau:

P(màu:đỏ;)

3 cách đưa style CSS này rất thường được sử dụng trong thực tế. Tôi khuyến khích bạn thử nghiệm những ví dụ này trên máy tính của mình. Trong tương lai, điều này sẽ rất hữu ích cho bạn.

Xin chào các độc giả thân yêu của trang blog. Sau một loạt bài viết dành cho HTML, tôi quyết định giới thiệu cho bạn CSS, vì các công cụ đánh dấu không đủ để thiết kế tài liệu. Nhìn chung, học HTML chỉ là giai đoạn đầu tiên trong quá trình học cách tạo website, bước tiếp theo là học CSS. Vậy hãy cùng tìm hiểu CSS là gì và tại sao chúng cần thiết?.

Nếu bạn nhìn vào các trang có HTML thuần túy, chúng sẽ trông kém hấp dẫn. Văn bản đơn điệu, bảng không có khung, màu đen trắng buồn tẻ... Tất nhiên, bạn có thể làm cho các trang web sáng hơn bằng cách sử dụng HTML, nhưng cách tiếp cận này chỉ làm lộn xộn mã nguồn và không mang lại bất kỳ sự linh hoạt nào. Vì vậy, trong cách bố trí hiện đại, người chịu trách nhiệm thiết kế bên ngoài các trang website là Ngôn ngữ tạo kiểu CSS hoặc chỉ là một tờ định kiểu.

Cascading Style Sheets(đây là tên viết tắt CSS - Cascading Style Sheets) là một tập hợp các tham số (kiểu) mô tả thiết kế của chính trang web và các thành phần riêng lẻ của nó. Các cài đặt này kiểm soát nền trang, màu văn bản, căn chỉnh đoạn văn, tùy chọn viền bảng, v.v.

Do đó, bằng cách sử dụng ngôn ngữ HTML, bạn hình thành cấu trúc của các trang web, ví dụ: bạn đặt . Và với sự trợ giúp của các quy tắc CSS, bạn chỉ định cách hiển thị các thành phần này của tài liệu HTML trong trình duyệt. Nghĩa là, bạn đặt loại và màu phông chữ, căn chỉnh văn bản, màu nền của các thành phần, các mức thụt lề khác nhau, v.v. Hơn nữa, một quy tắc CSS có thể ảnh hưởng đến cách trình bày trực quan của một số thành phần của trang web cùng một lúc.

Do đó, rất có thể bạn sẽ cần kiến ​​thức tối thiểu về khả năng của các biểu định kiểu xếp tầng cả khi tạo một trang web từ đầu và khi thực hiện các thay đổi đối với một dự án hiện có. Trước hết, kiến ​​thức này sẽ rất cần thiết khi làm công việc thiết kế website.

Thêm kiểu hoặc cách kết nối CSS với tài liệu HTML

Trước khi nói về cú pháp hoặc thuộc tính của các biểu định kiểu xếp tầng, bạn cần tìm hiểu cách kết nối chúng với tài liệu HTML. Có ba cách để kết nối css với html.

1. Phương pháp đầu tiên là đặt các kiểu trong một tệp riêng biệt hoặc một số tệp có phần mở rộng .css. Trong trường hợp này, để kết nối các kiểu CSS, hãy sử dụng liên kết, chứa đường dẫn đến tệp kiểu bên ngoài. Thẻ meta này được đặt trong phần tiêu đề của trang web tương ứng giữa các thẻ head. Đây là định dạng để viết nó:

Đường dẫn đến tệp kiểu được ghi lại dưới dạng giá trị của thuộc tính href. Thuộc tính rel cho trình duyệt biết tệp mà thẻ liên kết đề cập đến là gì. Giá trị "biểu định kiểu" cho biết tệp này là biểu định kiểu bên ngoài. Thuộc tính type chỉ định loại MIME của tệp. Đối với biểu định kiểu bên ngoài, loại MIME là "text/css".

Đây là dòng kết nối các kiểu CSS trong mã html sẽ trông như thế nào:

...
.css"/>
...

Ưu điểm của phương pháp này là tờ phong cách bên ngoài có thể được liên kết đến nhiều trang web cùng một lúc.

2. Cách thứ hai là viết cái gọi là phong cách toàn cầu, được viết trực tiếp bằng mã html của trang web. Họ bị nhốt vào một phòng đôi thẻ phong cách và thường được đặt ở phần đầu giữa các thẻ đầu:

...

...

Nhược điểm của phương pháp này là các quy tắc CSS của kiểu chung chỉ được áp dụng cho trang web mà chúng được viết.

3. Phương pháp thứ ba được gọi là kiểu tích hợp hoặc kiểu bên trong. Để làm điều này, bạn chỉ cần đặt vào thẻ html được yêu cầu Thuộc tính kiểu, bao gồm một tập hợp các thuộc tính CSS làm tham số:

Đoạn có nền màu xám và văn bản màu đỏ

Hơn nữa, các thuộc tính được chỉ định trong thuộc tính style chỉ áp dụng cho một phần tử html. Thông thường, phương pháp kết nối kiểu này được sử dụng ở giai đoạn gỡ lỗi thiết kế trang web và sau đó các thuộc tính CSS thu được sẽ được chuyển sang một tệp có kiểu bên ngoài.

Tạo kiểu CSS. Cú pháp biểu định kiểu xếp tầng - quy tắc, thuộc tính, bộ chọn.

Bộ chọn (
Giá trị tài sản;
Giá trị tài sản;
...
Giá trị tài sản
}

Những thứ kia. quy tắc kiểu bao gồm bộ chọn kiểu và danh sách thuộc tính kiểu với các giá trị của chúng trong dấu ngoặc nhọn (“(” và “)”):

• bộ chọnđược sử dụng để liên kết với các thành phần của trang web mà nó sẽ mở rộng tác dụng của nó;
• Các cặp “Thuộc tính: Giá trị” được phân tách bằng dấu chấm phẩy (";") và có thể có bao nhiêu tùy ý;
• giữa cặp cuối cùng “Thuộc tính: Giá trị” và dấu ngoặc nhọn đóng, có thể bỏ qua ký hiệu dấu chấm phẩy;
• thuộc tính phong cáchđại diện cho một trong các tham số của thành phần trang html: màu văn bản, loại phông chữ, lượng thụt lề;
• dấu cách và ngắt dòng khi viết các quy tắc CSS không quan trọng, trình duyệt sẽ bỏ qua chúng, vì vậy bạn có thể định dạng mã theo ý muốn;
• Mã cũng không phân biệt chữ hoa chữ thường.

Để làm cho nó rõ ràng hơn, chúng ta hãy xem xét một vài ví dụ.

Hãy xem quy tắc CSS này:

• body là một bộ chọn đại diện cho tên của thẻ ;
• nền - thuộc tính kiểu được sử dụng để đặt tham số nền;
• #0000FF là giá trị của thuộc tính kiểu nền, là mã màu ở định dạng RGB.

Kết quả là kiểu này sẽ được áp dụng cho phần nội dung của trang web và tô màu nền trang theo màu đã chỉ định. Phong cách trong câu hỏi được gọi là kiểu ghi đè thẻ, vì bộ chọn là tên thẻ không có ký tự< и >.

Hãy xem một ví dụ khác:

h1 (
cỡ chữ: 24px;
màu xanh lá cây;
}

Kiểu này cho biết trình duyệt sẽ hiển thị bất kỳ văn bản nào được đặt trong thẻ

màu xanh lá cây và sẽ đặt kích thước phông chữ của nó thành 24 pixel.

Với tư cách là bộ chọn thẻ, ngoài tên thẻ, bạn có thể chỉ định Lớp học:

Văn bản màu vàng (màu: vàng)

Tên lớp phải bao gồm các chữ cái trong bảng chữ cái Latinh, số, dấu gạch nối và phải bắt đầu bằng một chữ cái. Và trong định nghĩa của một quy tắc CSS, phải có dấu chấm trước tên lớp, nghĩa là một lớp kiểu đang được xác định. Kiểu này sẽ được áp dụng cho tất cả các thẻ có thuộc tính được chỉ định thuộc tính lớp và giá trị của nó sẽ bằng tên lớp kiểu không có dấu chấm:

Đoạn này có văn bản màu cam

Trong ví dụ, chúng tôi liên kết với thẻ

Quy tắc Css sử dụng tên lớp yellowtext. Kết quả văn bản trong đoạn này sẽ hiển thị màu cam.

Bạn có thể chỉ định nhiều tên lớp kiểu làm giá trị của thuộc tính clsss, được phân tách bằng dấu cách. Trong trường hợp này, tác dụng của các lớp kiểu dáng sẽ là:

Chữ thảo (kiểu chữ: in nghiêng)

chữ in nghiêng màu vàng

Trong ví dụ này, vào thẻ

Chúng tôi đã đính kèm hai lớp cùng một lúc: văn bản màu vàng và văn bản chữ thảo. Kết quả nội dung thẻ sẽ hiển thị dưới dạng chữ màu vàng và in nghiêng.

Ngoài các lớp, các quy tắc css có thể được sử dụng làm bộ chọn định danh, trong đó chỉ định một tên duy nhất cho phần tử. Mọi thứ ở đây đều giống như trong trường hợp các lớp phong cách, chỉ có một vài điểm khác biệt:

• trong bộ chọn quy tắc CSS, tên của mã định danh cũng được chỉ định, nhưng thay vì dấu chấm ở phía trước tên của nó, ký hiệu băm “#” được đặt;
• liên kết với một phần tử html được thực hiện thông qua thuộc tính id, giá trị của nó được đặt thành tên của kiểu không có dấu băm;
• giá trị của thuộc tính id phải là duy nhất trong trang, nghĩa là trong mã html chỉ có thể có một phần tử có giá trị nhất định của thuộc tính id, nếu không mã sẽ không hợp lệ.

Chúng ta hãy xem một ví dụ cho rõ ràng:

#textcenter(text-align: center;)

văn bản trung tâm

Quy tắc css được gắn vào phần tử p (đoạn) bằng thuộc tính id, giúp căn chỉnh văn bản vào giữa trang. Không còn được phép tạo các phần tử trên trang có giá trị thuộc tính id này, nếu không mã html sẽ không hợp lệ.

Ngoài các phương pháp mô tả kiểu đã được xem xét, css cho phép bạn tạo phong cách kết hợp và thiết lập một số kiểu giống hệt nhau cùng một lúc. Hãy xem một ví dụ:

h1.redtext, p mạnh (màu: đỏ)

Trong ví dụ này, hai bộ chọn được chỉ định, phân tách bằng dấu phẩy: “h1.redtext” và “p strong”. Bộ chọn đầu tiên cho biết rằng trong tất cả các phần tử h1 có giá trị thuộc tính lớp tương đương với văn bản màu đỏ, văn bản sẽ được hiển thị màu đỏ. Trong bộ chọn thứ hai, điều tương tự sẽ xảy ra với tất cả các phần tử mạnh được lồng trong thẻ p:

Tiêu đề này xuất hiện màu đỏ

văn bản thô, văn bản màu đỏ

Tạo nên tập tin css dễ dàng như html. Chỉ cần vào bất kỳ trình soạn thảo văn bản nào, ví dụ như Notepad và tạo một tệp ở đó với tiện ích mở rộng css. Hãy đặt cho nó một cái tên tiêu chuẩn - phong cách.css.

Chúc mừng! Tài liệu của bạn đã sẵn sàng. Hiện tại nó trống, nhưng sau này nó có thể chứa đầy nội dung liên quan. Dưới đây chúng ta sẽ xem xét những điều cơ bản - cách kết nối css.

Bảng phong cách bên ngoài

Có lẽ bên ngoài CSS- đây là giải pháp đúng đắn và tối ưu nhất cho trang web. Chỉ cần chỉ ra trên trang là đủ thẻ liên kết(được tạo để bao gồm các tệp khác) có liên kết đến biểu định kiểu và các kiểu được kết nối!

Chú ý

Dòng có thẻ liên kết giả định rằng style.css nằm trong cùng thư mục (thư mục) với tệp này.

Dòng có thẻ liên kết giả định rằng style.css nằm trong cùng thư mục (thư mục) với tệp của chúng tôi (ví dụ: index.html). Nếu vị trí của tệp css đã thay đổi thì thuộc tính href phải được sửa đổi cho phù hợp. Ví dụ: thường xảy ra trường hợp một thư mục riêng được tạo cho CSS (thuận tiện và hợp lý). Nhưng sau đó thuộc tính href sẽ trông khác:

Bảng định kiểu nội bộ

Đôi khi bạn có thể thấy một cấu trúc css khác được chèn trực tiếp vào thẻ html

Văn bản màu xanh, kích thước 14 pixel

Ưu điểm là bạn có thể đặt ngay kiểu trong cùng một tệp. Một nhược điểm đáng kể là các thuộc tính được chỉ định sẽ chỉ được gán cho một phần tử cụ thể, trong trường hợp này là một đoạn văn. Vì vậy, tất cả lợi ích của các thuộc tính kết nối từ xa đều bị mất.

Bảng định kiểu tích hợp sẵn

Co một cach dê dang hơn Chèn CSS. Nếu bạn không muốn tạo một tệp CSS riêng mà chỉ cần sử dụng một vài thuộc tính thì tùy chọn này là phù hợp. Hãy bắt đầu ngay với một ví dụ

Tiêu đề cấp một

Tiêu đề cấp hai, màu xanh

Tiêu đề cấp ba

Từ ví dụ, bạn có thể thấy rằng chúng tôi đã viết các kiểu ngay trước khi kết thúc thẻ đầu bên trong thẻ mở và đóng phong cách. Trên thực tế gắn thẻ phong cách cũng có thể được viết bằng thân hình, nhưng nếu bạn muốn các bài đăng của mình trông có cấu trúc và để người nhìn thấy mã này sau bạn không bối rối, thì tốt hơn hết bạn nên viết các kiểu ở một nơi.

Nhược điểm của biểu định kiểu tích hợp cũng rất rõ ràng - các mục như vậy sẽ phải được tạo riêng cho từng trang.

Chào buổi chiều! Trong bài viết này, tôi sẽ trình bày các phương pháp khác nhau để đưa CSS vào HTML. Tôi cũng sẽ giải thích sự tinh tế và sắc thái khác nhau của các cách khác nhau để kết nối các phong cách.

Kết nối nội bộ

Biểu định kiểu nội bộ là một tập hợp các kiểu, một phần mã của trang web phải luôn xuất hiện giữa thẻ mở và thẻ đóng Mã HTML trong phần thân của thẻ trang web. Ví dụ:

Văn bản màu vàng với phông chữ Verdana