Nhúng CSS vào HTML WDI BLog

CSS là gì ? 3 cách nhúng CSS vào HTML10 phút đọc

Đây là bài đầu tiên trong series bài viết hướng dẫn “học CSS cơ bản” trên WDI Blog của mình.Series bài viết này dành cho những bạn mới làm quen với CSS nên mình sẽ viết thật chi tiết dễ hiểu với nhiều hình ảnh minh họa cùng ví dụ cụ thể kèm theo.

Kiến thức đầu tiên mình muốn bạn nắm vững khi làm quen với CSS đó là hiểu khái niệm CSS và vai trò của nó với webiste.Sau đó bạn sẽ tìm hiểu thêm về cách viết CSS cũng như cách nhúng CSS vào HTML.

Chỉ cần bạn theo dõi kĩ và hiểu hết các bài viết của series này mình tin chắc bạn sẽ đủ kiến thức làm bất kì website tĩnh nào mà bạn muốn.

Nếu bạn đã sẵn sàng rồi thì chúng mình cùng bắt đầu thôi.

CSS là gì ?

CSS là viết tắt của Cascading Style Sheets, nó là một trong ba ngôn ngữ không thể thiếu của một website.Như bạn đã biết HTML là ngôn ngữ siêu văn bản và chỉ tạo ra cấu trúc cho một website dạng text mà thôi.Khi kết hợp tài liệu HTML với mã CSS chúng ta sẽ có một website đẹp mắt đủ các màu sắc, hình dạng.

Kể từ khi CSS3 ra đời chúng ta còn có thể làm nhiều việc hơn là định dạng cho một yếu tố HTML, ví dụ như chúng ta có thể tạo ra chuyển động với các hiệu ứng animation hay làm cho website hiển thị tốt trên nhiều thiết bị với thuộc tính media…vv.

CSS là gì ? Nhúng CSS vào HTML 01

Website khi áp dụng CSS

Trên đây là hình ảnh một trang web của mình khi áp dụng CSS.

CSS là gì ? Nhúng CSS vào HTML 02

Website khi không áp dụng CSS

Còn đây là hình ảnh của trang web đó khi không áp dụng CSS.

Qua hai hình ảnh ví dụ ở trên mình chắc nhiều bạn cũng đã hình dung được vai trò của CSS trong website rồi phải không nào.Giờ chúng ta sẽ tiếp tục tìm hiểu cách viết CSS nhé.

Cách viết CSS cơ bản

Để áp dụng CSS vào HTML cần thỏa mãn hai điều kiện sau :

  • Chọn yếu tố đặc định cần áp dụng CSS từ trong tài liệu HTML (1)
  • Áp dụng thuộc tính CSS cho yếu tố đó (2)
CSS là gì ? Nhúng CSS vào HTML 03

Hình ảnh minh họa cho cách viết CSS

Tương ứng với điều kiện đầu tiên (1)Selector và điều kiện thứ hai (2)Declaration block trong hình ảnh minh họa ở trên.Giờ mình sẽ giải thích chi tiết từng phần cho bạn hiểu nhé.

Selector : vị trí khai báo yếu tố cần áp dụng thuộc tính CSS trong tài liệu HTML.Có rất nhiều cách khai báo selector và mình sẽ giới thiệu đến bạn trong các bài viết sắp tới.Ngoài cách khai báo selector (tên yếu tố HTML) thì bạn cũng có thể gắn class hay id cho yếu tố HTML rồi gọi nó ra tại vị trí của selector.

Nói chung vai trò của một selector / class / id ở đây là thông báo hay gọi ra yếu tố HTML cần phải được định dạng thông qua CSS.

Declaration Block : toàn bộ thuộc tính CSS và giá trị của nó sẽ được khai báo trong khối này.Khối này cũng có một cách gọi khác là style của yếu tố HTML.Số lượng thuộc tính và giá trị của nó là không giới hạn trong một khối Declaration Block.

Property : xin lỗi các bạn ở hình ảnh minh họa trên mình nhầm lẫn, không phải là Attribute mà phải là Property mới đúng.Property đại diện cho tên thuộc tính CSS mà bạn muốn áp dụng cho yếu tố HTML.Hiện tại có hàng trăm thuộc tính CSS và khi áp dụng thuộc tính CSS bạn có thể thay đổi từ màu sắc, hình nền và cả hình dạng, kích thước …. của yếu tố HTML.

Value : là giá trị của thuộc tính CSS mà bạn muốn áp dụng cho yếu tố HTML.Ví dụ như ở hình ảnh minh họa trên mình muốn thay đổi kích thước chữ của yếu tố p16px thì ngay sau thuộc tính font-size mình nhập 16px là xong.

Tùy theo mỗi thuộc tính CSS mà cách viết giá trị value cũng khác nhau.Ví dụ như với thuộc tính thay đổi màu sắc là color thì bạn không thể nhập giá trị số như ở thuộc tính fonr-size ở trên được mà bạn cần nhập mã màu kiểu #333 chẳng hạn.Bạn chú ý là cuối mỗi value phải là dấu chấm phẩy (;) nhé.

Ngăn cách giữa thuộc tính CSS và giá trị của nó là dấu hai chấm (:).

Bạn có thể tham khảo tài liệu CSS Reference của Mozilla dưới đây để có cái nhìn khái quát những thuộc tính CSS đang tồn tại ở thời điểm hiện tại.Bạn hãy kích thử vào thuộc tính bất kì là sẽ ra đầy đủ thông tin về thuộc tính đó như giá trị áp dụng, ví dụ minh họa và trình duyệt hỗ trợ.

Nhúng CSS vào HTML

Có ba cách nhúng CSS vào trong HTML đó là : External CSS, InternalCSS Inline CSS.

External CSS

Đây là cách phổ biến nhất khi nhúng một tập tin CSS vào trong HTML.Ở cách này bạn cần tạo ra một file có phần mở rộng là .css sau đó khai báo toàn bộ mã CSS trong file này.Tiếp theo bạn chỉ việc nhúng toàn bộ file CSS này vào trong HTML thông qua thẻ <link> là ok.

Với cách nhúng CSS vào HTML này bạn sẽ dễ dàng quản lý, nâng cấp code CSS do toàn bộ mã CSS đều được lưu vào một file nhất định.Tuy nhiên trình duyệt sẽ tốn thêm chút thời gian để gọi đến file CSS này và tải nó vào trong file HTML.

index.html

<link rel=”stylesheet” type=”text/css” href=”/css/style.css”>

Bên trong thẻ <head> mình đã khai báo vị trí dẫn đến file style.css mà mình đã tạo ra trước đó thông qua thẻ <link> như trên đây.Bằng cách này mình sẽ gọi đến file style.css mỗi khi trang web được tải và các thuộc tính CSS sẽ được áp dụng cho trang web ngay lập tức.

style.css

Ví dụ trong file style.css mình khai báo thuộc tính màu sắc color và kích thước chữ font-size cho thẻ <h1>.Khi mở file HTML trên trình duyệt thì đoạn text “This is a heading” nằm trong thẻ <h1> sẽ có màu đỏ và kích thước chữ là 25px.

Internal CSS

Đây là cách nhúng CSS vào HTML nên áp dụng trong trường hợp đoạn mã CSS bạn muốn áp dụng chỉ có tác dụng cho một trang HTML duy nhất.Cách này sẽ có tốc độ load file mã CSS nhanh hơn so với cách External CSS ở trên.

index.html

Với cách viết này bạn sẽ viết CSS trực tiếp trong tài liệu HTML thông qua thẻ <style>.Toàn bộ yếu tố HTML và thuộc tính CSS đều phải khai báo bên trong cặp thẻ <style> này.Những thuộc tính và giá trị CSS của nó chỉ có tác dụng trên tài liệu HTML hiện tại mà thôi.

Cặp thẻ <style> này sẽ phải nằm bên trong thẻ <head> như ở ví dụ trên đây.Cùng một thuộc tính CSS cho thẻ <h1> nhưng thay vì khai báo bên trong file style.css như ở ví dụ số 1 thì giờ mình sẽ khai báo bên trong cặp thẻ <style> như bạn thấy ở ví dụ 2 trên đây.

Inline CSS

Cách thứ ba để nhúng CSS vào HTML đó là viết trực tiếp thuộc tính và giá trị của nó bên trong thẻ HTML.Cách này ít gặp và thường sẽ không được khuyến khích sử dụng vì khó quản lý code và bảo trì về sau.

index.html

<h1 style=”color: red;font-size: 25px;”>This is a heading</h1>

Như ví dụ trên đây bên trong cặp thẻ mở của thẻ <h1> bạn thấy mình có khai báo một số thuộc tính CSS.Cách khai báo CSS theo kiểu Inline CSS như sau : bạn viết thuộc tính CSS và giá trị của nó bên trong dấu ngoặc kép của style=” “.

Chú ý khi nhúng CSS vào HTML

Mỗi kiểu nhúng CSS vào HTML đều có ý nghĩa riêng của nó nên bạn không nên tùy tiện sử dụng lẫn lộn chúng.Đặc biệt khi làm việc nhóm nó sẽ gây ra những rắc rối không ngờ được do xung đột code.

Bạn đã nghe tới độ ưu tiên trong CSS bao giờ chưa.Độ ưu tiên trong CSS nói về thứ tự áp dụng thuộc tính CSS cho một yếu tố HTML.Ví dụ yếu tố h1 mình sẽ khai báo cùng một thuộc tính color theo cả ba cách ở trên.Mỗi cách mình chỉ định một màu khác nhau nhé.

Chắc chắn giá trị color nằm trong cách viết Inline CSS sẽ có tác dụng, sau đi xóa đi Inline CSS thì giá trị color nằm trong cách viết Internal CSS sẽ có tác dụng.Cuối cùng mới đến giá trị color nằm bên trong cách viết External CSS.

Tóm lại thì thứ tự ưu tiên sẽ như sau : Inline CSS > Internal CSS > External CSS

Mình cũng đã có riêng một bài viết khác về thứ tự ưu tiên trong CSS, bạn có thể tham khảo qua link bên dưới đây.

Kết luận

Bài viết khá dài và kiến thức bao hàm trong đó khá nhiều nên để hiểu thật sâu bạn nên copy code ví dụ của mình hoặc tự tạo cũng ok rồi thực hành luôn khi có thời gian.Bằng cách này bạn sẽ nhanh chóng tiến bộ và đến những bài sau sẽ dễ học hơn nhiều.

Mình chỉ có thể dốc hết tâm sức viết nội dung thật chất lượng dễ hiểu gửi đến bạn với mong muốn bạn sẽ đủ kiến thức theo đuổi nghề lập trình.Còn thành công hay không phụ thuộc vào sự quyết tâm của bạn đó.Chúc bạn không nản chí và sớm gặt hái được thành công.

Hẹn gặp lại bạn trong bài viết sắp tới.

Bài viết sau

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x