CSS (Cascading Style Sheet) là một trong 3 ngôn ngữ bắt buộc phải học để trở thành một lập trình viên web Front-end. Bài học hôm nay sẽ giới thiệu về ngôn ngữ này, các bạn cần phải đọc qua bài học trước: Show
Chức năng của CSSCSS là một ngôn ngữ rất mạnh mẽ, nếu so sánh HTML là bộ khung xương của con người và CSS là lớp da như trên mạng thường nói thì cũng không đúng lắm. CSS có thể thay đổi rất sâu những trạng thái của thành phần HTML (HTML element), tức là nó thậm chí có thể biến xương đùi thành xương ngón chân, hoặc xương ngón tay thành xương sườn. Trong lập trình Front-end, CSS được dùng để dàn trang (layout) và tạo kiểu (style) cho các thành phần của trang web. Nếu so sánh CSS với lớp da người thì chưa chính xác lắm, vì CSS mạnh mẽ hơn nhiều. Trên thực tế, HTML giống như nét phác thảo trên một bức tranh, còn CSS lại là những gì còn lại để hoàn thiện nên bức tranh đó. Một bức tranh hoàn chỉnh có thể dựa trên những nét phác thảo, nhưng nó cũng có thể trông hoàn toàn khác. Cách nhúng CSS vào trang webCách nhúng sẽ ảnh hưởng đến tác dụng của CSS trên trang web, tùy theo chủ ý của lập trình viên. Trên thẻ HTML (Inline CSS)Hầu như tất cả thẻ HTML đều có thuộc tính style dùng để khai báo những hiệu ứng CSS được áp dụng cho riêng HTML element đó. Các bạn nên ghi nhớ thuật ngữ “Inline CSS” để phòng khi đọc sách tiếng Anh hoặc tìm kiếm trên Google. Trong ví dụ sau, chúng ta sẽ quy định cho cái <strong> thứ hai không in đậm nữa mà phải in nghiêng và có màu xanh. <strong>1. In đậm nè</strong> <br> <strong style="font-weight: normal; font-style: italic">2. In nghiêng rồi</strong> <br> <strong>3. Lại in đậm nè</strong>Khai báo trong trang web (Internal CSS)Một lần nữa, chúng tôi khuyến khích ghi nhớ thuật ngữ tiếng Anh, phần dịch tiếng Việt chỉ dành cho người mới học dễ hình dung. Mã CSS được viết bên trong cặp thẻ <style> </style> đặt trong trang web HTML. Về lý thuyết thì cặp thẻ <style> này có thể được đặt ở bất kỳ đâu trong mã nguồn HTML và đều có tác dụng ở toàn bộ trang web, nhưng trên thực tế người ta thường đặt nó ở phần <head> của trang web để dễ quản lý và theo dõi. <html> <head> <style> h1 { color: red; } </style> </head> <body> <h1>Dòng này có màu xanh</h1> <style> h1 { color: blue; } </style> </body> </html>Trang web tham chiếu tới file .css (External CSS)Cách cuối cùng là viết riêng một file mã nguồn CSS với tên có đuôi là .css, sau đó mã nguồn HTML sẽ tham chiếu tới file đó bằng thẻ <link>. Ưu điểm của cách tham chiếu file này là có thể dùng chung mã nguồn CSS cho nhiều trang web, mỗi khi cần thay đổi giao diện, chỉ cần sửa ở một file mà có tác dụng ở mọi nơi. Ví dụ nội dung file style.css: h1 { color: blue; } h2 { color: violet; }File HTML tham chiếu tới file style.css: <html> <head> <link href="./path/to/style.css" rel="stylesheet"> </head> <body> <h1>Dòng này có màu xanh</h1> </body> </html>Sự ưu tiên tác dụng (CSS Precedence)Inline CSS có độ ưu tiên cao nhất, chỉ có lệnh !important mới ghi đè được nó. Đối với Internal và Extenal CSS, các CSS rule tuân theo quy luật “mức độ chi tiết (specificity)”, với những rule có specificity bằng nhau, rule nào được khai báo sau sẽ “đè” lên rule trước đó, cho nên mới có tên là “cascade” (chồng đè). Hãy xét ví dụ sau đây: Trong 3 dòng <h1>, dòng đầu tiên áp dụng Inline CSS nên chữ của nó có màu tím (violet) bất kể thuộc tính color đã được khai báo nhiều lần ở chỗ khác, thậm chí ID selector #firsthead cũng không thể thắng được nó. Riêng thuộc tính border-left-color vì có lệnh !important đi kèm nên mới ghi đè được màu xanh lá lên đường viền bên trái. Cái <h1> thứ 2 và thứ 3 có chữ màu cam do tác dụng của CSS rule ở dòng thứ 37. Như đã nói ở trên, khối mã CSS <style> dù nằm ở đâu trong trang web cũng có tác dụng ở toàn cục. Đường viền bên trái của chúng có màu xanh dương là do tác dụng từ file style-two.css, nó phủ nhận tác dụng của border-left-color của khối mã ở dòng 13 và thẻ <link> ở dòng 10 theo quy luật: rule nào được khai báo sau (hoặc tham chiếu) sau thì ghi đè rule trước đó. Kinh nghiệm thực tế (Pro Tips)Để dễ đọc và dễ bảo trì mã nguồn, sau đây là những khuyến nghị có được từ kinh nghiệm thực tế:
Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm:
1. Khai báo trực tiếp ở thẻ HTML (Inline style)Chúng ta có thể khai báo mã CSS trực tiếp trên một thẻ HTML bằng cách sử dụng thuộc tính style. Ví dụ sau đây sử dụng cách khai báo CSS trực tiếp để thay đổi màu chữ và căn lề trái của một thẻ <h1>: Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm:
1. Khai báo trực tiếp ở thẻ HTML (Inline style)Chúng ta có thể khai báo mã CSS trực tiếp trên một thẻ HTML bằng cách sử dụng thuộc tính style. Ví dụ sau đây sử dụng cách khai báo CSS trực tiếp để thay đổi màu chữ và căn lề trái của một thẻ <h1>: Cách làm này có ưu điểm là đơn giản, dễ thực hiện. Tuy nhiên, nhược điểm lớn nhất của nó là chúng ta phải khai báo các thuộc tính style cho tất cả các thẻ HTML mà chúng ta muốn điều khiển. Điều này khiến cho lượng mã CSS tăng lên đáng kể và khó quản lý. Chẳng hạn, khi chúng ta muốn thay đổi màu sắc của các thẻ <h1> thì chúng ta phải tìm đến tất cả các thẻ này và sửa khai báo CSS cho chúng. 2. Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)Cách tiếp theo để khai báo các thuộc tính CSS đó là sử dụng thẻ <style> trong một tài liệu HTML.Bên trong thẻ <style> chúng ta có thể đưa ra tất cả các khai báo CSS cần thiết rồi sau đó áp dụng cho từng thẻ HTML.Thông thường, thẻ <style> được đặt bên trong thẻ <head>, nhưng đó không phải là bắt buộc, chúng ta có thể đặt chúng ở bất cứ đâu. Một tài liệu HTML có thể có rất nhiều thẻ <style> khác nhau. Trong ví dụ sau đây, chúng ta sẽ khai báo các thuộc tính CSS trong thẻ <style> để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>. Cách làm này thường phổ biến hơn cách 1, bởi vì chúng ta dễ dàng quản lý hơn. Chẳng hạn, nếu muốn thay đổi màu sắc của các tiêu đề, chúng ta chỉ cần cập nhật màu sắc một lần duy nhất mà không cần phải tìm đến tất cả các thẻ <h1> như trước.Tuy nhiên, cách làm này vẫn còn hạn chế đó là chúng ta phải khai báo các thẻ <style> cùng với các thuộc tính CSS cho từng trang HTML. Như vậy, nếu website có 100 trang thì chúng ta phải lặp lại 100 lần các đoạn mã CSS giống nhau. Để khắc phục hạn chế này, chúng ta sử dụng cách nhúng file .css riêng biệt. 3. Khai báo trong file .css riêng biệt (External style sheet)Với cách làm này, chúng ta tạo một file có đuôi là .css, chẳng hạn là style.css. Trong file này chúng ta khai báo tất cả các thuộc tính CSS mong muốn. Sau đó, chúng ta nhúng file .css này vào trong tài liệu HTML bằng cách sử dụng thẻ <link>.Thẻ <link> được đặt ở trong thẻ <head> của tài liệu HTML. Trong ví dụ sau, chúng ta sử dụng một file mystyle.css để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>. Như vậy, việc lựa chọn cách nhúng CSS phù hợp là tuỳ thuộc vào chúng ta. Nhiều khai báo Style sheet trùng nhauTrong trường hợp có nhiều khai báo trùng nhau thì khai báo cuối cùng sẽ được sử dụng. Sau đó, trong thẻ <style> của tài liệu HTML chúng ta cũng có khai báo tương tự, nhưng với màu sắc khác: Trong trường hợp này, thẻ <h1> sẽ hiển thị màu cam (orange). Đè kiểuKhi có nhiều khai báo CSS cho cùng một thẻ HTML thì các khai báo này sẽ tuân thủ theo độ ưu tiên như sau:
Có nghĩa là các khai báo trực tiếp trên thẻ HTML (Inline style) sẽ có độ ưu tiên cao nhất, sau đó là đến các khai báo External Style và Internal Style, và cuối cùng, nếu không có khai báo nào cả thì các kiểu mặc định của trình duyệt sẽ được sử dụng. <h1 style="color:blue;margin-left:30px;"> This is a heading </h1>Cách làm này có ưu điểm là đơn giản, dễ thực hiện. Tuy nhiên, nhược điểm lớn nhất của nó là chúng ta phải khai báo các thuộc tính style cho tất cả các thẻ HTML mà chúng ta muốn điều khiển. Điều này khiến cho lượng mã CSS tăng lên đáng kể và khó quản lý. Chẳng hạn, khi chúng ta muốn thay đổi màu sắc của các thẻ <h1> thì chúng ta phải tìm đến tất cả các thẻ này và sửa khai báo CSS cho chúng. 2. Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet)Cách tiếp theo để khai báo các thuộc tính CSS đó là sử dụng thẻ <style> trong một tài liệu HTML.Bên trong thẻ <style> chúng ta có thể đưa ra tất cả các khai báo CSS cần thiết rồi sau đó áp dụng cho từng thẻ HTML.Thông thường, thẻ <style> được đặt bên trong thẻ <head>, nhưng đó không phải là bắt buộc, chúng ta có thể đặt chúng ở bất cứ đâu. Một tài liệu HTML có thể có rất nhiều thẻ <style> khác nhau. Trong ví dụ sau đây, chúng ta sẽ khai báo các thuộc tính CSS trong thẻ <style> để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>. <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> </body> <h1>This is a heading</h1> <body>Cách làm này thường phổ biến hơn cách 1, bởi vì chúng ta dễ dàng quản lý hơn. Chẳng hạn, nếu muốn thay đổi màu sắc của các tiêu đề, chúng ta chỉ cần cập nhật màu sắc một lần duy nhất mà không cần phải tìm đến tất cả các thẻ <h1> như trước.Tuy nhiên, cách làm này vẫn còn hạn chế đó là chúng ta phải khai báo các thẻ <style> cùng với các thuộc tính CSS cho từng trang HTML. Như vậy, nếu website có 100 trang thì chúng ta phải lặp lại 100 lần các đoạn mã CSS giống nhau. Để khắc phục hạn chế này, chúng ta sử dụng cách nhúng file .css riêng biệt. 3. Khai báo trong file .css riêng biệt (External style sheet)Với cách làm này, chúng ta tạo một file có đuôi là .css, chẳng hạn là style.css. Trong file này chúng ta khai báo tất cả các thuộc tính CSS mong muốn. Sau đó, chúng ta nhúng file .css này vào trong tài liệu HTML bằng cách sử dụng thẻ <link>.Thẻ <link> được đặt ở trong thẻ <head> của tài liệu HTML. Trong ví dụ sau, chúng ta sử dụng một file mystyle.css để thay đổi màu nền của trang web, màu chữ và căn lề trái của thẻ <h1>. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> </body> <h1>This is a heading</h1> <body>Như vậy, việc lựa chọn cách nhúng CSS phù hợp là tuỳ thuộc vào chúng ta. Nhiều khai báo Style sheet trùng nhauTrong trường hợp có nhiều khai báo trùng nhau thì khai báo cuối cùng sẽ được sử dụng. Sau đó, trong thẻ <style> của tài liệu HTML chúng ta cũng có khai báo tương tự, nhưng với màu sắc khác: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head>Trong trường hợp này, thẻ <h1> sẽ hiển thị màu cam (orange). HTML: <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>Đè kiểuKhi có nhiều khai báo CSS cho cùng một thẻ HTML thì các khai báo này sẽ tuân thủ theo độ ưu tiên như sau:
Có nghĩa là các khai báo trực tiếp trên thẻ HTML (Inline style) sẽ có độ ưu tiên cao nhất, sau đó là đến các khai báo External Style và Internal Style, và cuối cùng, nếu không có khai báo nào cả thì các kiểu mặc định của trình duyệt sẽ được sử dụng. Chẳng hạn, trong ví dụ sau thì màu của thẻ <h1> sẽ là đỏ. <head> <style> h1{ color:green; } </style></head><body> <h1 style="color:red;">This is a heading</h1></body> |