Hãy đưa ra một ví dụ về biểu định kiểu - tạo một tệp phong cách.css và viết các phong cách:

body ( họ phông chữ: Arial, Verdana, Sans-serif; /* Họ phông chữ */ cỡ chữ: 12pt; /* Cỡ chữ chính theo điểm */ màu nền: #f0f0f0; /* Màu nền trang web * / color: #000000; /* Màu nội dung văn bản */ ) h1 ( color: #a52a2a; /* Màu tiêu đề */ cỡ chữ: 24pt; /* Cỡ chữ theo điểm */ họ phông chữ: Georgia, Times, serif ; /* Họ phông chữ */ font-weight: normal; /* Độ dày văn bản bình thường */ )

Ở đây chúng tôi đã đặt kiểu cho nội dung trang và cho tiêu đề

. Bạn cũng có thể đặt các kiểu cụ thể cho bất kỳ thành phần trang nào khác trên trang web của mình.

Bây giờ hãy kết nối style sheet của chúng ta với trang web:

Chào thế giới!

Đây là trang đầu tiên của tôi có kiểu CSS

Vì vậy chúng tôi đã tìm ra nó CSS là gì, tại sao công nghệ này được sử dụng, đã học được cách kết nối các phong cách với trang web. Bài học này là phần giới thiệu về các biểu định kiểu xếp tầng. Trong các bài học khác chúng ta sẽ nói về công nghệ CSS chi tiết hơn.

tồn tại bốn cách để kết nối phong cách vào tài liệu HTML của bạn. Các phương thức được sử dụng phổ biến nhất là CSS nội tuyến và CSS bên ngoài.

CSS nội tuyến trong phần tử HTML

Dưới đây là một ví dụ về triển khai CSS dựa trên cú pháp trên:

Phần mở đầu

Đoạn văn.

Chúng tôi nhận được kết quả sau:

Thuộc tính

CSS nội tuyến - thuộc tính kiểu

Bạn có thể sử dụng thuộc tính trên bất kỳ thành phần HTML nào để xác định quy tắc kiểu. Những quy tắc này sẽ chỉ áp dụng cho phần tử này. Đây là cú pháp chung:

<элемент style = "...правила стиля...">

Thuộc tính

Ví dụ

Dưới đây là một ví dụ về CSS nội tuyến dựa trên cú pháp trên:

CSS nội tuyến

Chúng tôi nhận được kết quả sau:

Kiểu CSS bên ngoài - phần tử

Yếu tố có thể được sử dụng để bao gồm các tệp CSS bên ngoài trong tài liệu HTML của bạn.

Biểu định kiểu CSS bên ngoài là một tệp văn bản riêng biệt có phần mở rộng .css. Bạn xác định tất cả các quy tắc kiểu trong tệp văn bản này và sau đó bạn có thể đưa tệp CSS vào bất kỳ tài liệu HTML nào bằng cách sử dụng phần tử .

Đây là cú pháp chung để bao gồm tệp CSS bên ngoài:

Thuộc tính

Thuộc tính được liên kết với các phần tử hoặc các quy tắc được xác định trong bất kỳ tệp biểu định kiểu bên ngoài nào.

Xử lý bởi các trình duyệt cũ hơn

Có nhiều trình duyệt cũ không hỗ trợ CSS. Do đó, chúng ta phải quan tâm đến việc viết CSS nội tuyến trong tài liệu HTML của mình. Đoạn mã sau đây cho thấy cách sử dụng thẻ nhận xét để ẩn CSS khỏi các trình duyệt cũ hơn:

Bây giờ thật khó để tưởng tượng việc thay đổi giao diện và định dạng của tài liệu HTML mà không sử dụng biểu định kiểu CSS, vì HTML từ lâu đã không còn là ngôn ngữ tự cung cấp cho thiết kế và bắt đầu thực hiện các chức năng ban đầu của nó là cấu trúc và đánh dấu các tài liệu web. Trong bài viết này, chúng tôi sẽ trình bày chi tiết các cách khác nhau để bạn có thể kết hợp CSS vào tài liệu HTML.

Sơ lược về CSS và HTML

Trước đây, các trang web được thiết kế độc quyền bằng HTML. Ngày nay, cách tiếp cận này không được thực hiện và các công cụ CSS được sử dụng để tạo kiểu, có khả năng rất rộng để tạo ra các thiết kế tuyệt đẹp.

Để thiết kế trang web được hiển thị chính xác, bạn cần kết nối CSS với tài liệu HTML; các công cụ này hoạt động không thể tách rời nhau - HTML tạo ra cấu trúc và các biểu định kiểu chịu trách nhiệm về hình thức.

Có một số cách cơ bản để bạn có thể tùy chỉnh cách hiển thị kiểu trong mã HTML của mình, mỗi cách đều có ưu và nhược điểm riêng.

Kết nối tệp CSS

Đây là phương pháp chính được các nhà phát triển đánh giá là thiết thực và tiện lợi nhất.

Sử dụng phương pháp này, bạn có thể nhanh chóng thay đổi thiết kế của trang web nếu có cấu trúc nhất định của tài liệu HTML - ví dụ: đối với cùng một trang, bạn có thể viết một số tùy chọn thiết kế và kết nối chúng tùy theo nhu cầu tương ứng.

Để bao gồm một tệp có kiểu, trước tiên bạn phải định cấu hình cấu trúc tệp - việc này được thực hiện để bạn có thể ghi trực tiếp đường dẫn chính xác đến tài liệu mong muốn vào mã.

Tạo một thư mục chứa tài liệu HTML chính, trong cùng thư mục, tạo một tệp có tên style trong trình soạn thảo văn bản và lưu nó ở độ phân giải .css. Nó sẽ chứa mã CSS với tất cả các quy tắc tạo kiểu tài liệu được chỉ định.

Kết nối CSS được thực hiện bằng thẻ HTML với thuộc tính href. Nó trông như thế này:

Ở đây mã nằm ở nơi được coi là tối ưu nhưng không bắt buộc. Nó có thể được đặt ở bất cứ đâu trong tài liệu.

Phương pháp này thuận tiện vì tất cả các thay đổi đối với style sheet đều được thực hiện trong một tệp riêng biệt, giúp mã dễ hiểu và dễ đọc hơn, đồng thời làm cho tài liệu gọn gàng hơn.

Nếu bạn thực hiện các thay đổi đối với style.css và mở index.html trong trình duyệt, bạn sẽ có thể xem tất cả các thay đổi đã được nhập.

Theo cách tương tự, bạn không chỉ có thể đặt đường dẫn đến tệp trong cấu trúc trang mà còn có thể đặt liên kết đến trang có kiểu trên Internet. Trong trường hợp này, nó cũng nằm trong dấu ngoặc kép sau thuộc tính href.

Phương pháp bao gồm biểu định kiểu từ một tệp riêng biệt sẽ tối ưu hóa hiệu suất của trang web, vì nó cho phép trình duyệt tải dữ liệu từ bộ đệm, do đó trang tải nhanh hơn.

Các tờ định kiểu bên trong một tài liệu HTML

Đôi khi giá trị của tham số kiểu được đặt trực tiếp trong phần nội dung của tài liệu HTML bằng thuộc tính style.

Cú pháp:

Văn bản trong đoạn này có màu đỏ

Hạn chế rõ ràng là thiếu tính phổ quát; bạn sẽ phải chỉ định một giá trị cho mỗi thẻ.

Ngoài ra, việc kết nối bằng biểu định kiểu bên trong không cho phép trình duyệt lưu thông tin vào bộ đệm, không giống như phương pháp trước đó.

Phong cách toàn cầu

Nếu bạn cần tạo kiểu cho một phần tử cụ thể trong toàn bộ tài liệu HTML, hãy sử dụng thẻ

Kiểu đã chỉ định sẽ được áp dụng cho thẻ

, ngay khi nó được đăng ký trên trang.

Bao gồm CSS theo cách này sẽ được trình duyệt đọc ở mức độ ưu tiên cao hơn so với biểu định kiểu bên ngoài.

Cách thêm phông chữ vào trang web

Phông chữ là một trong những yếu tố thiết kế chính của bất kỳ trang web nào. Ấn tượng mà một trang web tạo ra cho người dùng trực tiếp phụ thuộc vào phông chữ được sử dụng. May mắn thay, bạn không phải giới hạn mình ở những tai nghe tiêu chuẩn; bạn có thể kết nối bất kỳ tai nghe nào khác - chúng tôi sẽ cho bạn biết cách thực hiện việc này.

Sử dụng CSS, phông chữ được kết nối như sau:

• Tìm và tải về một chiếc tai nghe phù hợp.
• Mở tệp CSS và viết đoạn mã sau vào đó:

Đầu tiên, tên của phông chữ được chỉ định, sau đó là đường dẫn đến phông chữ và cuối cùng là các tham số. Xin lưu ý rằng trong ví dụ này, tệp phông chữ nằm trong thư mục phông chữ, thư mục này nằm trong thư mục gốc. Để thuận tiện, tốt hơn hết bạn nên tạo các thư mục riêng cho các tệp và thành phần khác nhau (hình ảnh, tập lệnh, biểu định kiểu, v.v.).

Vì vậy, trong thư mục phông chữ, chúng ta có một tệp có tên OpenSans.ttf, với các tham số thông thường. Bây giờ nó sẽ được hiển thị trong trình duyệt.

Kết nối phông chữ qua Google Fonts

Một trong những cách phổ biến nhất để đưa phông chữ vào CSS và HTML là dịch vụ Google Fonts.

Giao diện trực quan - bạn cần tìm một phông chữ phù hợp theo tên hoặc các tham số được chỉ định, nhấp vào nút Chọn phông chữ này và dịch vụ sẽ tạo ngay một mã được chèn vào trường thẻ Tài liệu HTML, cũng như tệp CSS tương ứng với các kiểu.

Nó sẽ trông như thế nào trong HTML:

Và trong tệp CSS có kiểu:

Họ phông chữ: "Open Sans", sans-serif;

Phương pháp này thuận tiện vì nó cho phép bạn nhanh chóng tìm thấy phông chữ mong muốn từ cơ sở dữ liệu rất lớn và tiết kiệm rất nhiều thời gian, cũng như loại bỏ các vấn đề phát sinh do hiển thị phông chữ không chính xác trong một số trình duyệt.

Hãy tóm tắt lại

Vì vậy, chúng tôi đã xem xét các cách chính để kết nối các kiểu CSS với tài liệu HTML. Dựa trên các nhiệm vụ được đặt ra cho nhà phát triển trong từng trường hợp cụ thể, bạn có thể chọn tùy chọn có mức độ ưu tiên cao nhất.

Tuy nhiên, thiết kế trang web là một quá trình sáng tạo đòi hỏi một cách tiếp cận cẩn thận. Tận dụng khả năng nhận xét về mã và đừng quên tối ưu hóa trang web.

Xin chào các độc giả thân mến của trang blog. Bài viết hôm nay sẽ nói về các phương pháp hoặc cách đưa CSS style sheet vào. Tôi sẽ cho bạn biết làm thế nào bạn có thể kết nối CSS với trang web html bốn cách. Bốn phương thức kết nối này sẽ hữu ích cho bạn trong tương lai, vì đôi khi bạn cần sử dụng tất cả các phương thức kết nối này trên một trang web. Dành cho những ai chưa biết CSS style sheet là gì, .

Bắt đầu nào...

Các tờ định kiểu có liên quan.

Phương thức kết nối CSS - số 1

Phương pháp số 1 là cách thuận tiện nhất để xác định kiểu cho một trang web. Tất cả các kiểu cho trang web được lưu trữ trong một tệp riêng biệt và được sử dụng cho bất kỳ trang web nào. Để kết nối hoặc liên kết bảng CSS với trang html, hãy sử dụng thẻ LINK trong tiêu đề trang.

Phần mở đầu

Ưu điểm của phương pháp này:

1. Sử dụng một tệp kiểu CSS cho tất cả các trang của trang web;

2. Bạn có thể thay đổi giao diện của trang web thông qua biểu định kiểu mà không cần chỉnh sửa trang web;

3. Khi bạn thay đổi kiểu trong một tệp style.css, kiểu đó sẽ tự động được áp dụng cho tất cả các trang có kết nối trong tệp CSS. Nó rất thoải mái;

4. Khi một trang web được tải lần đầu tiên, tệp kiểu CSS sẽ được lưu vào bộ đệm trên máy tính cục bộ của người dùng, tách biệt với các trang web, vì lý do này trang web tải nhanh hơn nhiều.

Tờ phong cách toàn cầu.

Phương thức kết nối CSS - số 2

Phương pháp số 2 không hiệu quả và tiện lợi như phương pháp số 1, nhưng đôi khi phương pháp kết nối CSS này là cần thiết.
Kiểu này được kết nối và viết trong chính tài liệu và được đặt trong tiêu đề của trang web giữa các thẻ . Kết nối thẻ kiểu

Phần mở đầu

Trong ví dụ này tôi đã chỉ ra việc thay đổi kiểu tiêu đề

. Bây giờ trên trang web này bạn chỉ cần xác định thẻ

và các kiểu sẽ được tự động thêm vào nó.

Phong cách nội bộ.

Phương thức kết nối CSS - số 3

Phương pháp số 3 được sử dụng trong những trường hợp hiếm hoi. Kiểu nội tuyến được sử dụng để sửa đổi một thẻ trên trang web. Để kết nối một kiểu, hãy sử dụng tham số phong cách.

Ví dụ về kết nối bảng CSS:

Phần mở đầu

Phương pháp kết hợp các phong cách kết nối.

Phương thức kết nối CSS - số 4

Phương pháp này sử dụng nhiều kiểu cùng một lúc mà chúng tôi đã sử dụng ở trên (phương pháp số 1 - số 3).

Ví dụ về kết nối bảng CSS:

Phần mở đầu

Phần mở đầu

Kết quả là, theo ví dụ, chúng ta sẽ có tiêu đề đầu tiên màu đỏ với kích thước 50 pixel và tiêu đề tiếp theo có màu xanh lục và kích thước 90 pixel.

Tôi nhắc lại rằng tất cả các phương pháp sử dụng CSS được mô tả có thể được sử dụng độc lập hoặc có thể kết hợp với nhau. Điều này có thể được nhìn thấy trong phương pháp số 4.

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

Hãy tạo một trang HTML thông thường với đoạn mã sau:

Tiêu đề cấp một

Bây giờ tạo một tài liệu trống trong Notepad phong cách.css và lưu nó vào cùng thư mục chứa trang html:

Đây là trang phong cách của chúng tôi. Hãy kết nối các kiểu (style.css) với trang html. Có một thẻ trong html , chịu trách nhiệm kết nối các tập tin bên ngoài. Thêm vào tới trang html:

Tiêu đề cấp một

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

Biểu định kiểu này được chỉ định bên trong một phần tử HTML bằng thuộc tính phong cách. Đây là một ví dụ:

Đây là tiêu đề màu đỏ

Nhược điểm của phương pháp này là rõ ràng: tham số phong cách bạn phải chỉ định từng tiêu đề và do đó làm mất đi lợi thế của CSS.

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

Trong trường hợp này, biểu định kiểu được nhúng vào phần đầu của trang html. HTML có thẻ , với tham số kiểu, nó cho biết rằng một biểu định kiểu CSS đang được đưa vào. Đây là một ví dụ:

Tất cả các tiêu đề h1 trên trang của chúng tôi đều có màu đỏ. Nếu muốn, bạn có thể sơn lại một trong số chúng màu xanh lam; để thực hiện việc này, bạn cần sử dụng biểu định kiểu bên trong:

Tiêu đề này sẽ có màu đỏ

Trong tình huống này, nguyên tắc xếp tầng được áp dụng sẽ giải quyết được xung đột. Trong ví dụ của chúng tôi, bảng nội bộ có mức độ ưu tiên cao hơn và do đó tiêu đề sẽ chuyển sang màu xanh lam.

Nhược điểm của phương pháp này là rõ ràng... Cần phải tạo một biểu định kiểu cho mỗi trang HTML, vì vậy chúng ta sẽ sử dụng một biểu định kiểu bên ngoài.

Bây giờ chúng ta đã xem xét các cách kết nối CSS với HTML, tiếp theo chúng ta sẽ xem xét cú pháp CSS.