10 ưu điểm của CSS
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 Show
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ử CSSHakon 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ápCú 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ọnBạ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 IDChú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
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ớpTươ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 chungBộ 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ómGiả 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 CSSChú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 2heading 3heading 4heading 5Mọi thẻ sẽ bị ảnh hưởng bên trongthẻ. Bộ chọn conBộ 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 2heading 3heading 4heading 5có 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
Chỉ có anh em liền kề, tôi. e. , tiêu đề 3 có hiệu lực Bộ chọn anh chị em chungKhô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 nhauCó ba cách để chúng ta có thể sử dụng CSS
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. 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ếnCSS 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
Phần 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ì?Lợi ích của CSS là gì? . 1) Tốc độ trang nhanh hơn. Nhiều mã hơn có nghĩa là tốc độ trang chậm hơn. . 2) Trải nghiệm người dùng tốt hơn. CSS không chỉ làm cho các trang web dễ nhìn mà còn cho phép định dạng thân thiện với người dùng. . 3) Thời gian phát triển nhanh hơn. . 4) Thay đổi định dạng dễ dàng. . 5) Khả năng tương thích trên các thiết bị 3 công dụng của CSS là gì?CSS (Cascading Style Sheets) được sử dụng để tạo kiểu và bố cục trang web — ví dụ: để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, hãy chia nội dung đó thành . .
Lợi thế của việc sử dụng CSS Brainly là gì?CSS mang lại hiệu quả cho trình thiết kế web ; . Ít mã hơn đơn giản có nghĩa là thời gian tải nhanh hơn. |