2] An internal style sheet—CSS styles are written in the HTML file in the element using the element; and
3] Một phong cách nội tuyến
We will focus on the third way in this lesson. An inline CSS style applies to a single element. The CSS code is written in the ''style'' attribute of the HTML element to which you want to apply that style. For example, if you want your
element to be in a blue color, you'll write the inline CSS as follows:
Đây là Tiêu đề h1
Ví dụ này có một kiểu CSS nội tuyến được áp dụng để thay đổi màu phông chữ của tiêu đề h1 bằng cách đặt thuộc tính màu thành màu xanh lam, nhưng nếu bạn muốn áp dụng thêm thì sao? . Theo cách này, bạn có thể viết bao nhiêu cặp thuộc tính hoặc giá trị để tạo kiểu cho phần tử bằng cách tách từng cặp bằng dấu chấm phẩy
Ví dụ: nếu bạn muốn đoạn văn của mình được căn giữa với đường viền màu đen rộng 2 pixel, bạn có thể viết CSS nội tuyến như thế này
Bacon ipsum dolor amet hamburger boudin bò leberkas, giăm bông gà đùi bresaola
Landjaeger đuôi thịt viên. Jowl Landjaeger lợn, kevin kielbasa ức thăn ngắn ribeye trâu
Burgdoggen đất tròn picanha tri-tip trâu. T-bone prosciutto mông bóng, thịt lợn hamburger
dùi trống leberkas bánh hamburger bít tết alcatra thăn thịt viên boudin ức.
Viết nội tuyến CSS thật dễ dàng và bạn biết chính xác phong cách sẽ áp dụng cho phần tử nào. Nhưng đây không phải là phương pháp ưa thích vì nó trộn nội dung được đánh dấu bằng HTML với phần trình bày được thực hiện bằng CSS. Lý tưởng nhất là chúng tôi muốn giữ hai cái đó riêng biệt. Đây là lý do tại sao bạn nên cố gắng đặt tất cả các kiểu của mình trong một biểu định kiểu bên ngoài. Điều này không có nghĩa là bạn không bao giờ nên sử dụng kiểu nội tuyến. Rất hữu ích để kiểm tra một cái gì đó bằng cách sử dụng kiểu nội tuyến một cách nhanh chóng. Ngoài ra, nếu bạn có một trang rất đơn giản, bạn có thể chọn sử dụng kiểu nội tuyến và tránh sử dụng tệp biểu định kiểu bên ngoài riêng biệt
Đã xảy ra lỗi khi tải video này
Hãy thử làm mới trang hoặc liên hệ với bộ phận hỗ trợ khách hàng
Bạn phải cC tạo một tài khoản để tiếp tục xem
Đăng ký để xem bài học này
Bạn là học sinh hay giáo viên?
tôi là học sinh tôi là giáo viên
Tạo tài khoản của bạn để tiếp tục xem
Là thành viên, bạn cũng sẽ có quyền truy cập không giới hạn vào hơn 84.000 bài học về toán, tiếng Anh, khoa học, lịch sử, v.v. Ngoài ra, nhận các bài kiểm tra thực hành, câu đố và huấn luyện được cá nhân hóa để giúp bạn thành công
Nhận quyền truy cập không giới hạn vào hơn 84.000 bài học
Chỉ mất vài phút để thiết lập và bạn có thể hủy bất cứ lúc nào
Đã đăng ký?Tài nguyên do giáo viên tạo ra cho giáo viên
Hơn 30.000 bài học video & tài nguyên giảng dạy‐tất cả ở một nơi.
bài học video
Câu đố và Bảng tính
Tích hợp lớp học
kế hoạch bài học
Tôi chắc chắn sẽ giới thiệu Study. com đến các đồng nghiệp của tôi. Nó giống như một giáo viên vung cây đũa thần và làm việc cho tôi. Tôi cảm thấy như đó là một cứu cánh
Giống như hình ảnh và JavaScript, CSS đóng một vai trò quan trọng trong việc ảnh hưởng đến các chỉ số hiệu suất của trang web. CSS nội tuyến đề cập đến việc thực hành tích hợp một phần mã trực tiếp vào nơi nó sẽ được sử dụng. Điều này làm cho mã chạy nhanh hơn dẫn đến tải trang nhanh. Bây giờ, hãy đi sâu vào một số ưu điểm của CSS nội tuyến để hiểu giá trị của nó trong giải pháp phân phối CSS được tối ưu hóa
CSS nội tuyến cho phép bạn áp dụng các quy tắc kiểu cho các phần tử HTML cụ thể. Nội tuyến CSS có nghĩa là đặt CSS vào tệp HTML thay vì CSS bên ngoài. Vì CSS nội tuyến cho phép áp dụng một kiểu duy nhất cho một phần tử HTML, nên việc sử dụng nó bị hạn chế nhưng có lợi cho việc tạo các thuộc tính duy nhất. Ưu điểm của CSS nội tuyến là rất nhiều
Thí dụ
Đây là đoạn đầu tiên của tôi
Đây là đoạn thứ hai
Các kiểu nội tuyến sẽ ảnh hưởng đến thành phần HTML cụ thể mà bạn thêm thuộc tính kiểu với các giá trị thuộc tính CSS. Trong ví dụ trên, đoạn đầu tiên sẽ được tạo kiểu với màu đỏ ở cỡ chữ 20px. Các thuộc tính chỉ áp dụng cho đoạn đầu tiên chứ không áp dụng cho toàn bộ mã
Tại sao bạn nên sử dụng CSS nội tuyến?
CSS nội tuyến được coi là hữu ích vì nó làm giảm số lượng tệp mà trình duyệt cần tải xuống trước khi hiển thị trang web. Với một CSS bên ngoài, trước tiên trình duyệt sẽ tải một tệp HTML và sau đó tải xuống tệp CSS. Với CSS nội tuyến, bạn chỉ cần tải xuống một tệp HTML thay vì 2 tệp, giúp quá trình này nhanh hơn
Các loại CSS và cách sử dụng CSS nội tuyến
Bạn đã viết một số HTML và bây giờ muốn tạo kiểu cho nó bằng các kiểu CSS khác nhau. Có ba loại để lựa chọn
1. biểu định kiểu bên ngoài
Hầu hết các nhà phát triển giữ CSS của họ trong biểu định kiểu bên ngoài. Trong tệp HTML, sử dụng phần tử để liên kết biểu định kiểu bên ngoài có chứa CSS
Bây giờ, chỉ mục bên trong. css, bạn có thể có các thuộc tính CSS
P {
màu. màu đỏ;
cỡ chữ. 20px;
}
2. biểu định kiểu nội bộ
Bạn có thể tạo kiểu CSS bằng biểu định kiểu bên trong. Trong trường hợp này, bạn sẽ xác định các quy tắc CSS bên trong
3. CSS nội tuyến
Có một sự khác biệt tinh tế giữa CSS nội tuyến và nội bộ. Không giống như các biểu định kiểu bên ngoài hoặc bên trong, CSS nội tuyến không có dấu ngắt dòng hoặc dấu ngoặc nhọn. Bạn viết CSS của mình trên cùng một dòng khi bạn sử dụng các kiểu nội tuyến, như thế này
Đây là đoạn đầu tiên của tôi
Đây là đoạn thứ hai
Ưu và nhược điểm của CSS nội tuyến
Trong số nhiều ưu điểm của CSS nội tuyến, việc đặt CSS vào phần đầu của HTML đảm bảo rằng trình duyệt web của bạn không phải tải xuống một tệp bên ngoài riêng biệt. Nó tiết kiệm một chuyến đi khứ hồi đến trình duyệt
Google khuyến nghị “Để có hiệu suất tốt nhất, bạn có thể xem xét việc đưa trực tiếp CSS quan trọng vào tài liệu HTML. Điều này giúp loại bỏ các vòng lặp bổ sung trong đường dẫn quan trọng và nếu được thực hiện đúng cách, có thể được sử dụng để phân phối chỉ một độ dài đường dẫn quan trọng vòng tròn trong đó chỉ có HTML là tài nguyên chặn”
Đó là một phương pháp hay để nội tuyến CSS của trang đích hoặc trang chủ để chúng có thể tải nhanh hơn và được xem một cách hiệu quả. Nếu dự án của bạn lớn và phức tạp, bạn nên sử dụng CSS bên ngoài cho phần còn lại của trang web
Khi bạn so sánh CSS nội tuyến với. ưu tiên CSS bên ngoài, bạn có thể xem xét cái sau vì chúng được lưu vào bộ nhớ cache hoặc được trình duyệt ghi nhớ. Bạn không cần phải làm đi làm lại các bước tương tự khi truy cập một trang khác trên trang web
Một trong những nhược điểm của CSS nội tuyến là các tệp không được lưu trong bộ nhớ cache và mỗi lượt truy cập vào trình duyệt được coi là mới và được thực hiện khi khách truy cập vào một trang khác. Bộ nhớ đệm là lựa chọn tốt hơn nếu dự án phức tạp
Nếu bạn hỏi chúng tôi tại sao CSS nội tuyến lại được ưu tiên, thì có hai lý do
- Để triển khai ở một số ít định nghĩa kiểu, CSS nội tuyến là phương thức tiếp theo của bạn
- Ở mức cục bộ, nó có khả năng ghi đè các phương thức đặc tả kiểu khác
Tại eWay Corp, chúng tôi tin vào việc tạo ra sự khác biệt trong cách chúng tôi trực quan hóa và phát triển trang web. Những điều nhỏ nhặt quan trọng đối với chúng tôi vì đó là điều mang lại lợi thế cho các trang web