Sáu lợi thế của css là gì?

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ọithẻ sẽ được thực hiện, bất kể nó được lồng sâu như thế nào bên trongnhãn heading 1

heading 2

heading 4

heading 5

Mọi

thẻ sẽ bị ảnh hưởng bên trongthẻ. 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ủanhãn heading 1

heading 2

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ủathẻ. 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;
}

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;
}

Để 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;
}

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;
}

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

Ưu điểm của CSS là gì?

Ưu điểm của HTML và CSS là gì?

Những lợi thế của việc sử dụng biểu định kiểu xếp tầng CSS để tạo một trang web là gì?