Nếu bạn mới bắt đầu làm quen với ngôn ngữ CSS. Bài viết này rất bổ ích để bạn hiểu khái niệm CSS là gì và bố cục, cấu trúc chuẩn xác khi sử dụng CSS một cách hiểu quả

Nội dung

CSS là gì?

CSS viết tắt của Cascading Style Sheets được sử dụng để mô tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Hay nói cách khác CSS là ngôn ngữ tạo kiểu cho trang web

Nếu như HTML có nhiệm vụ định dạng các phần tử trên trang web như tạo bố cục hay các đoạn văn bản thì CSS giúp mình thêm các kiểu vào các phần tử HTML như chữ, màu sắc, nền, bố cục, ranh giới,…

Đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium [W3C]. Thay vì đặt các thẻ định dạng kiểu dáng cho văn bản HTML ngay trong nội dung của nó, thì bạn nên sử dụng CSS để làm điều đó một cách chuyên nghiệp và dễ quản lý trong việc bổ sung và chỉnh sửa được nhanh hơn

body {
background-color: lightblue; 
text-align: center;
}

h1 {
color: blue; 
font-size: 40px;
}

p {
font-family: verdana; 
font-size: 20px;
}

Cách hoạt động của CSS

Phương thức hoạt động của CSS sẽ được tìm dựa trên vùng lựa chọn, có thể là thẻ HTML, ID, lớp,… Sau đó thực hiện thêm các thuộc tính cần thay đổi ngay trên đó. Bộ chọn sẽ trỏ về phần tử HTML mà bạn cần muốn tạo kiểu và việc khai báo các thuộc tính sẽ cách nhau bởi dấu chấm phẩy “;”

Mỗi lần khai báo bao gồm tên CSS và giá trị, cách nhau bởi dấu hai chấm “. ”. Block khai báo được đặt trong dấu ngoặc kép “{}”. Bạn có thể xem ví dụ cụ thể dưới đây

p {
color: red;
text-weight: bold;
}

Chương trình khuyến mãi "Vui Xuân Như Ý - Lì Xì Đầy Ví"

Ưu điểm của CSS

Một số điểm ưu tiên của CSS có thể được biết đến như

• Dễ dàng cập nhật style CSS
• Tạo kiểu dáng riêng biệt, không bị trùng lặp
• Tích hợp tệp CSS dễ dàng trên HTML
• Tiết kiệm thời gian vì mã rút ngắn
• Chế độ làm rối các mã HTML của trang web bằng các thẻ [in đậm, in nghiêng, gạch chân, màu chữ,…]. Làm mã nguồn của trang web gọn gàng

Bố cục và cấu trúc đoạn mã CSS

Sắp xếp mã cục bộ CSS

Bố cục của CSS là dạng hộp có hình chữ nhật và mỗi hộp sẽ có các khoảng trống trên trang bao gồm

• Lề. Là khoảng cách xung quanh bên ngoài của phần tử
• Biên giới. As a đường liên kết nằm bên ngoài phần đệm
• đệm. Không gian xung quanh nội dung

Constructor of a CSS đoạn code

Một đoạn mã CSS sẽ bao gồm vùng chọn, thuộc tính và giá trị, không có định dạng như dưới đây

vùng chọn {

   thuộc tính : giá trị;

   thuộc tính: giá trị;

   .....

}

in which

• Đầu tiên, sẽ khai báo vùng chọn cần CSS
• Mỗi thuộc tính có một giá trị riêng, giá trị có thể là định dạng số hoặc chữ tùy thuộc vào danh sách CSS
• Giá trị sẽ nằm trong dấu ngoặc kép {} và cách thuộc tính bằng dấu hai chấm “. ”
• Cuối mỗi thuộc tính khai báo sẽ luôn có dấu chấm phẩy “;”
• Có thể thêm nhiều thuộc tính mà không bị giới hạn

Định nghĩa các phần

• Selector [Bộ chọn]. Là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách cho nó
• Khai báo [Khải báo]. Khối khai báo sẽ bao gồm một hoặc nhiều báo cáo được phân cách bằng dấu “;”. Có thể xem ví dụ dưới đây

p {
  color: blue;
  text-align: center;
}

• Properties [Thuộc tính]. Là những cách mà bạn muốn tạo style cho trang HTML của mình
• Thuộc tính value. The value is side réferential sign and being different by the sign [. ]

Ví dụ về đoạn mã HTML

   
   CSS là gì?


    
Phần Tử H1
    
Nội dung văn bản, phần tử P
    
Nội dung văn bản, phần tử DIV

Ví dụ về CSS để trình bày cách hiển thị nội dung HTML ở trên theo ý muốn

body {
    color: #000000; /* thiết lập màu chữ */
    font-size: 17px; /* thiết lập cỡ chữ */
}

h1 {
    color: black; /* thiết lập màu chữ mới cho các phần tử h1 */
    font-size: 20px; /* thiết lập cỡ chữ mới cho các phần tử h1 */
}

p {
    color: blue; /* thiết lập màu chữ mới cho các phần tử p */
}

Ngoài ra, CSS có rất nhiều thuộc tính khác mà bạn cần biết để thực hiện các thay đổi đa dạng, sinh động hơn cho trang web của mình. Bạn có thể tham khảo các thuộc tính tại đây

Cách sử dụng CSS

CSS nội tuyến

Cách này sẽ áp dụng trực tiếp trên một đối tượng xác định rõ nhất bằng cách sử dụng thuộc tính

p {
color: red;
text-weight: bold;
}

My First CSS Example

This is a paragraph.

This is a paragraph.

>> Xem thêm. Quy ước mã là gì?

CSS nội bộ

Internal CSS là đặt CSS ở đầu trang web để áp dụng kiểu dáng cho toàn bộ trang, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ rồi đặt vào trong phần header của website [giữa và ]:

CSS bên ngoài

CSS bên ngoài là cách thuận tiện nhất bởi vì nó nằm trong một tệp. css. Bạn có thể tạo một tệp CSS riêng với phong cách mà bạn muốn rồi tải lên. Cách này sẽ cải thiện thời gian tải trang trên trang web của bạn

Ví dụ có tên tệp. phong cách của tôi. css

body {
background-color: orange; 
font-family:verdana
}
h1 {
color: white;
}
p {
font-size: 20px;
}

Biểu định external style css được liên kết với các trang HTML bằng tag :

My First CSS Example

This is a paragraph.

thứ tự xếp tầng

Nếu các kiểu khác nhau được quy định cho các phần tử HTML, thì các kiểu sẽ xếp hạng các kiểu mới theo mức độ ưu tiên sau

• ưu tiên 1. CSS nội tuyến
• ưu tiên 2. Biểu định kiểu bên ngoài và bên trong
• Ưu tiên 3. Browser default – Mặc định của trình duyệt
• Nếu các kiểu khác nhau được xác định trên cùng mức ưu tiên, thì kiểu cuối cùng có mức ưu tiên cao nhất

p {
color: red;
text-weight: bold;
}

CSS version

CSS được xuất hiện lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Bắt đầu từ đó, các phiên bản CSS dần dần được hình thành qua nhiều giai đoạn. Từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Phiên bản mới sẽ giúp sửa các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn

Version 1

Với CSS phiên bản đầu tiên có các đặc điểm cụ thể như. thuộc tính phông chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính

Version 2

Phiên bản CSS 2 được W3C phát triển vào tháng 5 năm 1998. Với những tiến trình cải tiến từ phiên bản CSS đầu tiên và mang đến những tiến trình cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ các loại biểu định dạng âm thanh và văn bản hai chiều. Xuất các kiểu chữ chữ mới để định dạng văn bản

CSS2. 1

Ngoài ra, sau phiên bản 2 còn có một sự nâng cấp khác là CSS 2. 1 được phát hành vào tháng 4 năm 2011. Mục đích mục tiêu sửa lỗi và loại bỏ các tính năng kém hoặc không tương thích cho người dùng

CSS3

CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là mô-đun. Các mô-đun có khả năng mở rộng các tính năng đã được xác định trong CSS2. chặn duy trì khả năng tương thích ngược

Đặc biệt, CSS3 mang đến các bộ chọn [selector] và thuộc tính [thuộc tính] mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể tạo ra các hiệu ứng hình ảnh mà không cần phải tạo ra hình ảnh trước đó

CSS4

CSS 4 là phiên bản kế thừa CSS 3 hiện vẫn đang được cập nhật, phát triển và dự kiến ​​sẽ có rất nhiều phương thức mới được bổ sung như. Khả năng thay đổi, siêu liên kết…

>> Xem thêm các bài viết về CSS

• SASS/SCSS là gì?
• CSS3 là gì?
• Hướng dẫn sửa code HTML, CSS trong WordPress

CSS used to do what?

Vietnix xin liệt kê ra 3 lợi ích chính của CSS

Giải quyết vấn đề lớn

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một chương trình thời gian rất dài và công sức

Ví dụ. Nếu bạn đang phát triển một trang web có nhiều phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một trình quá dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một bản báo cáo của W3C

Nhờ CSS mà mã nguồn của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn. Nội dung trang web sẽ được tách bạch hơn trong định dạng hiển thị. Từ đó, quá trình cập nhật nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu gây rối cho mã HTML

Thời gian tiết kiệm điện

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp. Sử dụng CSS sẽ giúp bạn không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, bạn có thể tiết kiệm điện năng tối đa thời gian làm việc với nó, làm mã rút ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có

CSS tạo ra nhiều kiểu khác nhau nên có thể được áp dụng với nhiều trang web, từ đó giảm thiểu việc lặp lại định dạng của các trang web giống nhau

Cung cấp thêm các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web. CSS giúp người dùng sử dụng nhiều kiểu trên một trang web HTML nên có khả năng điều chỉnh trang của bạn trở nên vô hạn

Lời kết

Hy vọng với những kiến ​​thức trong bài viết về CSS là gì sẽ mang lại cho bạn thêm nhiều kiến ​​thức mới. Chúc bạn thành công. Nếu bạn còn thắc mắc gì về các ngôn ngữ lập trình khác nhau, hãy mạnh dạng bình luận dưới bài viết này. Vietnix luôn sẵn sàng hỗ trợ bạn