Bài viết này sẽ giới thiệu cho bạn một chủ đề đơn giản nhưng thú vị đó là Các loại CSS và theo dõi nó bằng một minh họa lập trình. Các gợi ý sau đây sẽ được đề cập trong bài viết này,
Vì vậy, chúng ta hãy bắt đầu với bài viết này,
Trong CSS có ba loại
- CSS nội tuyến
- CSS nội bộ
- CSS bên ngoài
Biểu định kiểu xếp tầng được sử dụng để đặt kiểu cho trang web của bạn có chứa các phần tử HTML. Trong ba loại CSS này, 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
Ba phương pháp này là các phương thức khác nhau mà biểu định kiểu xếp tầng có thể được sử dụng để áp dụng một kiểu duy nhất trong các phương thức khác nhau này và như CSS nội tuyến đã đề cập và CSS bên ngoài là những phương thức thường được sử dụng
Hầu hết các trang web được tạo từ HTML hoặc ngôn ngữ đánh dấu siêu văn bản. Đây là cách tiêu chuẩn để trang trí văn bản web đơn giản bằng phông chữ, màu sắc, hình vẽ nguệch ngoạc đồ họa và siêu liên kết [văn bản có thể nhấp để đưa người dùng đến một nơi khác một cách kỳ diệu]. Nhưng các trang web có thể trở nên thực sự lớn. Khi điều đó xảy ra, HTML là một cách rất khó để làm một việc rất dễ. CSS [cascading style sheet] có thể giúp việc trang trí các trang web trở nên dễ dàng trở lại
Hãy nghĩ về CSS như một loại trang phục máy tính. CSS chủ yếu chỉ làm một việc. nó mô tả giao diện của các trang web. Thậm chí tốt hơn, CSS có thể dễ dàng tách khỏi HTML, do đó mã trang phục dễ tìm, dễ sửa đổi và có thể nhanh chóng thay đổi toàn bộ giao diện trang web của bạn. Giống như quy định về trang phục ở trường, bạn có thể thay đổi CSS của mình và diện mạo của học sinh sẽ thay đổi theo. Biểu định kiểu cho phép bạn nhanh chóng thay đổi toàn bộ trang web theo ý muốn, giống như cơn sốt thời trang cho phép mọi người thay đổi theo thời gian nhưng vẫn giữ nguyên con người
Một điều thực sự thú vị về CSS, đó là nó xếp tầng. Mỗi kiểu bạn xác định sẽ thêm vào chủ đề tổng thể, nhưng bạn có thể đặt kiểu gần đây nhất ghi đè lên các kiểu trước đó. Ví dụ: với CSS, chúng tôi có thể bắt đầu bằng cách nói rằng chúng tôi muốn tất cả văn bản của mình cao 12px [12 đơn vị]. Sau này chúng ta có thể nói rằng chúng ta cũng muốn nó có màu đỏ. Sau đó, chúng ta có thể nói với nó rằng chúng ta muốn một cụm từ được in đậm hoặc in nghiêng, hoặc màu xanh thay vì màu đỏ
Đã 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
Thử ngay bây giờ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
Trong bài viết này, bạn sẽ tìm hiểu về Các loại CSS [Cascading style sheet] với các ví dụ đơn giản và sự khác biệt chi tiết giữa các loại CSS này
Hãy bắt đầu nó
Mục lục
- Các loại css khác nhau là gì?
- 3 loại CSS với các ví dụ
- CSS nội tuyến
- Thuận lợi
- Nhược điểm
- CSS nội bộ
- Thuận lợi
- Nhược điểm
- CSS bên ngoài
- Thuận lợi
- Nhược điểm
- CSS nội tuyến
- Sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài
- Sự kết luận
- Câu hỏi thường gặp
- 3 loại CSS là gì?
Các loại css khác nhau là gì?
Có ba loại CSS
3 loại CSS với các ví dụ
CSS nội tuyến
CSS nội tuyến thường chỉ được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Chúng ta có thể viết CSS nội tuyến đơn giản bằng cách thêm thuộc tính style
vào mỗi phần tử HTML
Ví dụ
This is a heading
This is some pragraph
Loại CSS này không thực sự được khuyến nghị vì mỗi thẻ HTML cần được tạo kiểu riêng. Việc quản lý một trang web có thể khó khăn nếu chúng ta chỉ sử dụng CSS nội tuyến
Thuận lợi
- Bạn có thể dễ dàng và nhanh chóng viết CSS nội tuyến vào trang HTML.
- Nó hữu ích để thử nghiệm hoặc xem trước các thay đổi và thực hiện các bản sửa lỗi nhanh cho trang web của bạn
- Bạn không cần tạo hoặc liên kết một tài liệu riêng theo yêu cầu trong CSS bên ngoài
Nhược điểm
- Nói chung, CSS nội tuyến cần viết riêng từng thẻ HTML. Vì vậy, việc quản lý một trang web có thể khó khăn nếu chúng ta chỉ sử dụng CSS nội tuyến
- Việc thêm thuộc tính CSS vào mọi thẻ HTML rất tốn thời gian
- Việc tạo kiểu cho nhiều thành phần có thể ảnh hưởng đến kích thước trang và thời gian tải xuống của bạn
Thí dụ
Ví dụ thực hànhSimple Box Design
CSS nội bộ
CSS nội bộ còn được gọi là CSS nhúng. Nó thường được sử dụng để tạo kiểu cho một trang. Chúng tôi có thể viết CSS nội bộ bên trong thẻ trong các trang HTML
Ví dụ
h1{ background-color : yellow; color : red; }This is a heading
Loại CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang. Tuy nhiên, sử dụng kiểu này cho nhiều trang sẽ tốn thời gian vì bạn cần đặt kiểu CSS trên mọi trang trên trang web của mình
Thuận lợi
- Bạn có thể sử dụng bộ chọn ID và lớp để viết CSS nội bộ
- Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên bạn không cần phải tạo hoặc tải lên nhiều tệp
Nhược điểm
- Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên việc tạo kiểu cho nhiều trang sẽ trở nên tốn thời gian
- Việc thêm mã vào tài liệu HTML có thể tăng kích thước và thời gian tải của trang
Thí dụ
/* Using tag name as a selector here */ h1{ background-color:orange; } /* Using class as a selector here */ .box{ height:200px; width:300px; background-color:yellow; } /* Using ID as a selector here */ #circle{ height:200px; width:200px; background-color:red; border-radius:50%; }Ví dụ thực hànhSimple example of internal CSS
CSS bên ngoài
Với CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp. Chúng ta có thể viết CSS bên ngoài trong một. tập tin css. Mỗi trang HTML phải bao gồm tham chiếu đến tệp CSS bên ngoài bên trong thẻ
0, bên trong thẻSimple Box Design
0Simple Box Design
Ví dụ
tạo phong cách của tôi. css bằng bất kỳ trình soạn thảo văn bản nào [ví dụ:. - Sổ tay ++]
/* Using tag name as a selector here */ h1{ background-color:orange; } /* Using class as a selector here */ .box{ height:200px; width:300px; background-color:yellow; } /* Using ID as a selector here */ #circle{ height:200px; width:200px; background-color:red; border-radius:50%; }
Bây giờ bao gồm phong cách của tôi. css tệp bên ngoài trong trang HTML của bạn bằng cách sử dụng thẻ
0Simple Box Design
Trang HTML hoàn chỉnh sẽ trông giống như
Simple example of external CSS
Thuận lợi
- Vì mã CSS nằm trong một tệp riêng biệt nên các tệp HTML của bạn sẽ có cấu trúc rõ ràng hơn và kích thước nhỏ hơn
- Bạn có thể sử dụng cùng một. css cho nhiều trang khi bạn muốn mỗi trang có giao diện giống nhau
Nhược điểm
- Các trang của bạn có thể không được hiển thị chính xác cho đến khi CSS bên ngoài được tải
- Tải lên nhiều tệp CSS bên ngoài có thể làm tăng thời gian tải xuống của trang web
Sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài
Bảng dưới đây cho bạn thấy sự khác biệt giữa CSS nhúng nội tuyến và CSS bên ngoài. CSS nội bộ còn được gọi là CSS nhúng
Inline CSSInternal CSSExternal CSSInline CSS được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. CSS nội bộ được sử dụng để tạo kiểu cho một trang HTML cụ thể. CSS bên ngoài dùng để thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp. Bạn có thể viết CSS nội tuyến bằng thuộc tính style. Bạn có thể viết Internal CSS bằng thẻví dụ. - id, lớp, tên thẻ, v.v. Nó cũng cho phép bạn sử dụng bộ chọn. Phải mất thời gian để sử dụng vì mỗi yếu tố cần thêm. Cũng tốn thời gian nhưng so với Inline CSS thì ít hơn. Nó tiết kiệm thời gian vì bạn có thể sử dụng cùng một tệp trên nhiều trang cho cùng một giao diện.
Sự kết luận
Trong bài viết này, bạn đã học được 3 loại CSS [nghĩa là. CSS nội tuyến, CSS nội bộ và CSS bên ngoài] và sự khác biệt giữa CSS nội tuyến và CSS bên ngoài