Nếu bạn có bất kỳ kinh nghiệm nào về phát triển web, bạn có thể đã nghe thấy ba từ này – HTML, CSS và Javascript. Đây là những công nghệ cốt lõi của World Wide Web, thường được gọi là WWW. HTML là ngôn ngữ đánh dấu được sử dụng để thiết kế cấu trúc trong khi javascript làm cho trang web trở nên hấp dẫn. Cascading Style sheet, thường được gọi là CSS có một vai trò khác. Mặc dù một trang web chỉ hoạt động tốt với HTML và Javascript. Hãy nhìn vào hình ảnh sau đây. Nó là trang chủ của trang web amazon
Bây giờ, hãy nhìn vào hình ảnh dưới đây
Đây là cùng một trang chủ của trang web của amazon nhưng không có CSS. Cảm nhận sự khác biệt. Trang web trông rất buồn tẻ và không hấp dẫn. Đây là lý do tại sao CSS được sử dụng. CSS làm cho một trang web trở nên hấp dẫn và trang web thực sự trông giống như một trang web khi có CSS
Lịch sử CSS
Hakon Wium Lie lần đầu tiên đề xuất CSS vào năm 1994. Anh ấy đang làm việc với Tim Berners-Lee, cha đẻ của HTML tại CERN. Nhiều ngôn ngữ tạo kiểu khác cũng được nhắm mục tiêu vào thời điểm đó. CSS2 ra mắt vào năm 1998 với các tính năng tốt hơn như tuyệt đối, tương đối, cố định, định vị, chỉ mục z, khái niệm về loại phương tiện, văn bản hai chiều và các thuộc tính phông chữ mới như đổ bóng. Quá trình phát triển CSS3 bắt đầu vào cuối năm đó nhưng chưa bao giờ hoàn thành
cú pháp
Cú pháp của CSS rất đơn giản và dễ học. Có hai phần của bộ quy tắc CSS – bộ chọn và khai báo. Hãy hiểu cú pháp của CSS với sự trợ giúp của một ví dụ
p { color: red; font-size: 20px; }
thẻ là bộ chọn ở đây. Tuyên bố được viết bên trong dấu ngoặc nhọn. Trong ví dụ trên, có hai khai báo, được phân tách bằng dấu chấm phẩy. Có thể có bất kỳ số lượng khai báo
Một khai báo có hai phần - thuộc tính và giá trị. Ví dụ: color là thuộc tính và red là giá trị. Thuộc tính và giá trị được phân tách bằng dấu hai chấm
Bộ chọn
Bạn nghĩ CSS ở trên sẽ làm gì? . Nhưng điều gì sẽ được thực hiện trong HTML bởi điều này? . Trong trường hợp này, chúng tôi đã sử dụng p làm bộ chọn. CSS này sẽ được áp dụng cho mỗi
trong tệp HTML. Có nhiều loại bộ chọn khác nhau mà chúng ta có thể sử dụng trong CSS. Hãy thảo luận ngắn gọn về chúng
Bộ chọn phần tử
Trước đó, chúng tôi đã sử dụng bộ chọn phần tử
p { color: red; font-size: 20px; }
Như đã thảo luận trước đó, khi một phần tử HTML được sử dụng làm bộ chọn, nó sẽ ảnh hưởng đến tất cả các phần tử đó trong HTML
Bộ chọn ID
Chúng tôi xác định id cho một phần tử bằng thuộc tính id. Id có thể được cấp cho bất kỳ phần tử HTML nào
CSS will be applied to this paragraph
CSS will not be applied to this paragraph
Bây giờ chúng ta có hai
thẻ – một thẻ có id “demo1” và thẻ thứ hai có id “demo2”. Hãy áp dụng một số CSS cho
thẻ có id “demo1” sử dụng bộ chọn id
#demo1{ color: red; font-size: 20px; }
Thay vì viết tên của phần tử, chúng tôi đã sử dụng id của phần tử đầu tiên
trước thẻ có ký hiệu số [#]. CSS sẽ được áp dụng cho
thẻ nơi id là demo1. Thư hai
thẻ sẽ không bị ảnh hưởng
Bộ chọn lớp
Tương tự như id, chúng ta cũng có thể định nghĩa một lớp cho [các] thành phần HTML bằng thuộc tính lớp. Sự khác biệt duy nhất là, thay vì ký hiệu số, một dấu chấm đơn [. ] Được sử dụng
.demo1{ color: red; font-size: 20px; }
Sự khác biệt giữa id và bộ chọn lớp là thông thường, id là duy nhất cho mỗi phần tử trong khi một lớp có thể giống nhau
Bộ chọn chung
Bộ chọn chung được sử dụng để chọn mọi phần tử trong HTML. Nó được ký hiệu là [*]
* { color: red; font-size: 20px; }
Bộ chọn nhóm
Giả sử, chúng tôi muốn áp dụng cùng một CSS trên nhiều phần tử HTML. Vì vậy, thay vì viết cùng một khai báo cho nhiều phần tử, chúng ta có thể nhóm chúng lại
p, h1, h2{ color: red; font-size: 20px; }
Bộ kết hợp CSS
Chúng tôi cũng có thể tạo kết hợp giữa các bộ chọn. Có bốn tổ hợp trong CSS
Bộ chọn hậu duệ
Nó được sử dụng để khớp với tất cả các phần tử là hậu duệ của một phần tử đã chỉ định. Không gian được sử dụng để chỉ định bộ chọn hậu duệ
CSS sẽ được áp dụng trên tất cả các
các thẻ là hậu duệ của bất kỳ
thẻ trong tệp HTML. Mọi
thẻ sẽ được thực hiện, bất kể nó được lồng sâu như thế nào bên trong
nhãn
heading 1
heading 2
heading 3
heading 4
heading 5
Mọi
thẻ sẽ bị ảnh hưởng bên trong
thẻ.
Bộ chọn con
Bộ chọn con được sử dụng để áp dụng CSS cho tất cả các phần tử con được chọn của một phần tử. Dấu lớn hơn [>] được sử dụng để chỉ định bộ chọn con
CSS sẽ chỉ được áp dụng cho những
các thẻ là con trực tiếp của
nhãn
heading 1
heading 2
heading 3
heading 4
heading 5
có hai
các thẻ bên trong thẻ div. Nhưng chỉ có “heading 2” sẽ bị ảnh hưởng bởi vì “heading 3” không phải là con trực tiếp của
thẻ.
Bộ chọn anh chị em liền kề
Bộ chọn anh chị em liền kề được sử dụng để áp dụng CSS trên các anh chị em liền kề của phần tử đã chỉ định. Dấu cộng [+] được sử dụng cho các bộ chọn anh chị em liền kề
CSS sẽ chỉ được áp dụng cho điều đó
thẻ đó là anh chị em liền kề của
nhãn
heading 1
heading 2
heading 3
heading 4
heading 5
Chỉ có anh em liền kề, tôi. e. , tiêu đề 3 có hiệu lực
Bộ chọn anh chị em chung
Không giống như bộ chọn anh chị em liền kề, bộ chọn anh chị em chung được sử dụng để áp dụng CSS trên mọi anh chị em của phần tử đã chỉ định. Ký hiệu dấu ngã [~] được sử dụng cho bộ chọn anh chị em chung
Quan sát đoạn mã HTML sau
p { color: red; font-size: 20px; }0
tiêu đề 3, tiêu đề 4 và tiêu đề 5 sẽ bị ảnh hưởng vì ba tiêu đề này là anh em chung của thẻ div
CSS sẽ được áp dụng cho tất cả các
thẻ là anh chị em của
nhãn
Các cách sử dụng CSS khác nhau
Có ba cách để chúng ta có thể sử dụng CSS
- CSS bên ngoài
- CSS nội bộ
- CSS nội tuyến
CSS bên ngoài
Ý tưởng về CSS bên ngoài là thay đổi CSS của nhiều tệp bằng cách thực hiện thay đổi chỉ trong một tệp. Các kiểu được viết trong một tệp bên ngoài được liên kết với các tệp HTML bằng cú pháp thích hợp. Tệp CSS bên ngoài phải có một. phần mở rộng css
Giả sử, chúng ta có phong cách. css và chúng tôi muốn liên kết nó với tệp HTML. Tất cả những gì chúng ta phải làm là thêm atag vào phần đầu của tệp HTML
p { color: red; font-size: 20px; }1
Để liên kết tệp, chúng tôi đã sử dụng ba thuộc tính – rel, type và href.
quan hệ. Nó chỉ định mối quan hệ giữa tài liệu được liên kết và tài liệu hiện tại. Nó được yêu cầu
loại hình. Nó chỉ định loại phương tiện của tài liệu
href. Nó chỉ định vị trí của tập tin
CSS nội bộ
CSS nội bộ có thể được sử dụng để xác định CSS duy nhất cho một trang HTML. Không giống như CSS bên ngoài, không có tệp bên ngoài dành cho CSS, thay vào đó, CSS chỉ được viết bên trong tệp HTML. Thẻ style được đặt giữa thẻ head. Hãy hiểu điều này với sự giúp đỡ của một ví dụ
p { color: red; font-size: 20px; }2
CSS nội tuyến
CSS nội tuyến có thể được sử dụng để xác định CSS duy nhất cho một thành phần trong trang HTML. Thuộc tính style được thêm vào phần tử
p { color: red; font-size: 20px; }3
CSS nội tuyến có mức độ ưu tiên cao hơn CSS bên ngoài và bên trong
Ưu điểm và nhược điểm của CSS
- CSS tiết kiệm rất nhiều thời gian
- Nó giúp tạo ra những thay đổi nhất quán và tự phát
- Nó cải thiện tốc độ tải trang
- CSS có khả năng định vị lại
- Nó có khả năng tương thích thiết bị tốt hơn
- Có thể có sự cố giữa các trình duyệt khi sử dụng CSS
- Có nhiều cấp độ CSS như CSS, CSS 2, CSS 3. Điều này có thể gây nhầm lẫn cho những người không phải là nhà phát triển và người mới bắt đầu
Sự kết luận
Không có CSS, không thể phát triển web. Ban đầu CSS có thể trông khó khăn, nhưng sau khi học một vài khái niệm, CSS sẽ cảm thấy rất đơn giản và dễ dàng. Có nhiều tùy chọn để áp dụng CSS và chúng tôi đã thảo luận về một số tùy chọn phổ biến nhất
Acodez IT Solutions là một công ty thiết kế web và phát triển web ở Ấn Độ, cung cấp tất cả các loại dịch vụ thiết kế web cho khách hàng của chúng tôi ở Ấn Độ và nước ngoài. Chúng tôi cũng là đại lý tiếp thị kỹ thuật số cung cấp các giải pháp tiếp thị kỹ thuật số và tiếp thị trong nước cho khách hàng của mình với giá cả phải chăng. Để có thêm thông tin chi tiết, liên hệ chúng tôi ngay hôm nay