Kinh nghiệm tiếp cận CSS nhanh

Kinh nghiệm tiếp cận CSS nhanh

Khái niệm

Như đã chia sẻ cùng các bạn ở bài viết "HTML quan trọng như thế nào?" thì mình có nói đến bộ ba thần thánh HTML, CSS và Javascript. Hôm nay, mình sẽ chia sẻ với các bạn cách tiếp cận CSS nhanh qua kinh nghiệm làm việc thực tế của mình.

CSS (Cascading Style Sheets) là một ngôn ngữ lập trình được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (Ví dụ: HTML).

Hiểu một cách đơn giản, HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các tiêu đề, đoạn văn bản, bảng biểu, ... thì CSS sẽ giúp chúng ta tạo "phong cách" cho các phần tử HTML đó như thay đổi màu sắc, màu chữ, kích thước, cấu trúc, ... CSS sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên của một thẻ HTML, tên một class, một ID hoặc nhiều kiểu khác. Sau đó nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Ví dụ:

body {
   background-color: lightblue;
}

h1 {
   color: white;
   text-align: center;
}

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

Cấu trúc

Trong một đoạn CSS bao gồm 4 thành phần: vùng chọn, cặp dấu ngoặc nhọn, thuộc tính và giá trị.

vùng chọn {
   thuộc tính : giá trị;
   thuộc tính: giá trị;
   .....
}

CSS sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm trong một cặp dấu ngoặc nhọn. Mỗi thuộc tính luôn có một giá trị riêng, giá trị có thể là số, chữ hoặc tên giá trị được định nghĩa sẵn trong CSS. Phần thuộc tính và giá trị được phần tách nhau bởi dấu hai chấm(:) và kết thúc bằng dấu chấm phẩy(;). Một vùng chọn có thể sử dụng không giới hạn các thuộc tính.
Tham khảo các thuộc tính của CSS qua CSS Reference của Mozilla.

Cách sử dụng

Có 3 cách để có thể sử dụng CSS:

- Inline CSS: Inline được áp dụng trực tiếp vào một đối tượng HTML bằng thuộc tính style.

<p style="font-weight:bold; text-decoration:underline; color:#000000;">Đoạn text cần in đậm, gạch chân, màu đen</p>

- Internal CSS: CSS được đặt ở đầu trang web để áp dụng kiểu dáng cho toàn bộ trang ấy, đoạn CSS được viết trong cặp thẻ <style> rồi đặt vào trong phần header của web (giữa <head> và </head>)

<style type="text/css">
   body {font-family:tahoma; color:#000000;} /* Kiểu chữ trong trang Web là "Tahoma", màu chữ thông thường là đen */
</style>

- External CSS: CSS được viết vào một tệp tin riêng biệt(*.css), sau đó được tham chiếu đến các trang web khác nhau.

Ví dụ về nội dung tệp my_style.css:

body {font-family:tahoma; color:#000000;}


Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ <head>):

<link rel="stylesheet" type="text/css" href="my_style.css"/>

Mẹo học nhanh

- Viết code thật nhiều:

Các cụ ngày xưa có câu: "Trăm hay không bằng tay quen", cứ làm nhiều, viết nhiều là thành quen, khi quen rồi thì nhìn sẽ biết cần phải sử dụng vùng chọn nào, thuộc tính nào và giá trị ra sao.

- Inspect code trên browser:

Cách này sẽ giúp bạn có thể nhìn thấy luôn sự thay đổi của các đối tượng HTML khi được thay đổi style, giúp bạn hiểu hơn về các thuộc tính của CSS và giá trị của nó. Các bạn có thể thêm trực tiếp vào phần Styles, có thể thêm class của đối tượng sau đó viết thuộc tính và giá trị CSS.

- Tham khảo các thuộc tính trên các phần mềm thiết kế:

Hiện nay, hầu hết các phần mềm thiết kế đều có hỗ trợ tự động tạo ra CSS để giúp các bạn làm việc đơn giản hơn rất nhiều. Chỉ cần chọn vào thành phần cần trên thiết kế, bạn sẽ được thấy các thuộc tính và giá trị CSS tương ứng.

Tổng kết

Trên đây là những kinh nghiệm nhỏ trong quá trình làm việc mình tích lũy và muốn chia sẻ cùng các bạn để có cái nhìn tổng thể, cũng như có hướng tiếp cận nhanh nhất với CSS. Hy vọng sẽ giúp ích được cho các bạn trong quá trình học tập và làm việc với CSS.

Việc học CSS không khó, nhưng cũng cần sự tỉ mỉ, kiên trì để nắm bắt được các thuộc tính và giá trị của CSS, biết cách sử dụng như thế nào cho phù hợp và kết hợp tốt với HTML, Javascript để tạo ra những trang web đẹp và mượt mà.

Chúc các bạn có những góc nhìn tích cực với CSS và thành công trên sự nghiệp!