Chèn link css vào html

CSS là một ngôn ngữ chuyên dùng để trình bày hình thức thể hiện của văn bản HTML cho người dùng, như văn bản đó được định dạng ra sao [cơ chữ, font chữ, màu sắc ...], bố cục, dàn trang thế nào ...

CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu: Cascading là cách làm việc của CSS, các CSS tác dụng vào phần tử HTML có thể bị đè [định nghĩa lại] bởi CSS khác hoặc kết hợp cùng với CSS khác. Còn Style Sheets điều khiển cách hiện thị nội dung trang web.

Ví dụ, CSS định nghĩa màu chữ đỏ cho phần tử

đặt ở một file css, thì ở file css khác nó có thể định nghĩa lại thành màu xanh, hoặc cho thêm thuộc tính là chữ đậm, kết quả cuối cùng là sự kết hợp của 2 định nghĩa CSS [thuộc tính trước định nghĩa chỗ này có thể ghi đè hoặc bổ xung bởi thuộc tính định nghĩa ở chỗ khác]. Đó là ý nghĩa của từ Cascading. Khi làm việc với CSS bạn sẽ dần lĩnh hội được khái niệm này.

CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang.

Để học về CSS trước tiên phải hiểu cơ bản về HTML, rồi mới có thể thực hành css trong html.

Tại sao cần dùng CSS?

CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp nên. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS.

Nhúng CSS vào HTML

Để áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline, Internal và External

• Inline: mã CSS viết tại thuộc tính style của phần tử HTML
• Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ
• External: mã CSS ở một file riêng biệt [thường có phần mở rộng .css] sau đó nạp vào HTML bằng phần tử html [liên kết css với html]

Kiểu inline và Internal thì chèn css vào html trực tiếp trong văn bản HTML.

Nhúng CSS dạng inline - thuộc tính style

Cách này là đặt mã CSS vào thẳng thuộc tính style của phần tử. Mã CSS chỉ tác động nên chính phần tử đó.

Ví dụ đoạn mã CSS sau đặt màu chữ phần tử là trắng, màu nền phần tử là đỏ

color:white; background-color:red;

Giờ gán đoạn CSS đó cho một phần tử [ví dụ ≶p>] trong HTML, ở dạng inline thì thực hiện như sau:

Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange ...

Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ

Cách này bạn sẽ dùng thẻ , tạo ra khu vực để viết CSS, bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt trong thẻ . Như ví dụ sau, trong khối nó sẽ định nghĩa kiểu cho mọi phần tử

, đều có màu trắng, nền đỏ.

Nhúng CSS dạng External, thẻ nạp file CSS vào HTML

Cách link css vào html này các mã CSS bạn viết tập trung vào các file độc lập với file HTML [thường đặt phần mở rộng là css] sau đó dùng thẻ đặt ở phần để nạp vào HTML theo cú pháp, ví dụ file ngoài là demo.css

    
      
   
   
      
Đoạn văn 1. 
      
Đoạn văn 2. 
   

Trong file demo.css bạn viết nội dung CSS [không có thẻ style], ví dụ:

p {
   color:white;
   background-color:red;
}

Kết quả sẽ tương tự như ví dụ trên, chỉ có điều mã CSS đã đặt ra một file độc lập. Thuộc tính href trỏ đến địa chỉ URL của file CSS, ở ví dụ trên là địa chỉ dạng tương đối vì file CSS và HTML cùng thư mục.

Ví dụ nữa, thử tích hợp các CSS định nghĩa bởi Framework Bootstrap, ở đường dẫn: //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Sau khi tích hợp thì sẽ có các lớp CSS sử dụng ngay như display-1, text-success ...

Trong bài này tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của website bao gồm inline css, internal css , external css.

Inline Css

Đây là cách thêm css trực tiếp trên thẻ html cần định dạng. Tập hợp các style css được khai báo bên trong thuộc tính style của thẻ.

Ưu điểm: Style cho một đối tượng html rất nhanh chóng.

Nhược điểm: Những style css chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc.

Ví dụ 1: Thiết lập đoạn văn có màu đỏ, chúng ta có thể thiết lập như code bên dưới.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?

Internal Css

Đây là cách thêm đoạn code css ở một khu vực riêng trong file html.

Ưu điểm: Phân biệt rõ ràng đoạn code css và những nội dung html còn lại.

Nhược điểm: Những style css chỉ áp dụng được trong phạm vi một file cụ thể nơi mà nó được khai báo. Nó không thể sử dụng chung cho nhiều page khác nhau.

Ví dụ 2: Thiết lập font-size: 18px và color: orange cho thẻ tiêu đề h2.

    
    Title



    h2 {
        color: orange;
        font-size: 18px;
    }

Unitop.vn - Học lập trình web đi làm

External Css

Với hình thức này tất cả những code css được đưa vào trong file có đuôi mở rộng .css [ví dụ: main.css].

Ưu điểm: Giúp Css có thể dùng chung cho nhiều page khác nhau của website và dễ dàng quản lý.

Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua file main.css

Cấu trúc file thư mục:

index.html
css
----main.css

File main.css nằm trong thư mục css/

p{
    color: #f15c25;
}

Nội dung file index.html

    
    Unitop.vn - Học lập trình web đi làm
    


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?

Trong đó dòng code

giúp liên kết đến file main.css nằm trong thư mục css của dự án.

Tổng kết

Qua bài này tôi chia sẻ đến bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể bạn có thể lựa chọn cách thích hợp.

Nếu website chỉ có một page bạn có thể sử dụng internal css là đủ. Nhưng nếu dự án có hệ thống file lớn thì bạn nên sử dụng cách external css.