Vai trò , cú pháp, vị trí

Vai trò

CSS giúp chúng ta làm đẹp và bố cục website, CSS sẽ tác động vào thẻ HTMl mà chúng ta chọn, chính vì thế mà chúng ta có 1 quan tâm nhỏ ở đây đó là, thẻ HTMl có cấu trúc phân tầng, hay có mối quan hệ cha con, cho nên khi chúng ta áp dụng CSS vào đối tượng cha , thì đối tượng con cũng được thừa hưởng theo. Khi áp dụng CSS vào phần tử nào đó thì chúng ta cần xem xét mối tương quan của thẻ đó với các phần tử xung quanh, để xem nó đang được thừa hưởng những yếu tố nào, nó đang bị chi phối bởi những thành phần nào, từ đó chúng ta sẽ biết được và điều chỉnh 1 cách chính xác nhất những gì chúng ta muốn.

Cú pháp

 css cơ bản

Trong ví dụ trên Thẻ được chọn là phần tử mà chúng ta muốn định kiểu, các giá trị được bao quanh bởi cặp dấu { } Thuộc tínhgiá trị được phân tách bởi dấu 2 chấm : . Kết thúc mỗi dòng giá trị thì được kết thúc bằng dấu chấm phẩy ; . Ta thấy trong tài liệu HTML các thẻ được sắp xếp lồng vào nhau theo dạng hình cây, thẻ này lồng trong thẻ kia , thẻ này là con, là cháu chắt, của thẻ kia .... chính vì thế để chọn được đúng thẻ html khi chúng ta mới học CSS thường hay gặp khó khăn. Bản thân ngôn ngữ CSS cũng cung cấp cho chúng ta nhiều cách để chọn chính xác nhất phần tử mà chúng ta muốn. Chúng ta sẽ cùng tìm hiểu trong các bài tiếp theo nhé. Theo kinh nghiệm lúc đầu khi mình mới học css thì việc khó khăn và làm mình lúng túng nhất đó là làm sao chọn được đúng thẻ mình cần css, rồi khi chọn được rồi áp dụng các thuộc tính css vào thẻ đó thì các chỗ khác lại nhảy tùm lum lên và mình không hiểu vì sao nó lại như thế , và rồi mình đã hiểu ra được là các thẻ html liên quan với nhau trong các mối quan hệ cha con .... chính vì thế khi áp dụng các thuộc tính css vào mỗi thẻ chúng ta cũng nên quan tâm việc áp dụng các thuộc tính vào thẻ đó sẽ làm thay đổi các thẻ xung quanh như nào, thuộc tính nào của các thẻ xung quanh đã bị thay đổi , từ đó chúng ta sẽ hiểu rõ hơn và kiểm soát được mọi thứ.

Vị trí

Inline CSS : đặt thuộc tính và giá trị trực tiếp trong thẻ HTML

<h1 style="color:blue;font-size: 18px;" >Đây là thẻ tiêu đề H1 </h1>
Nếu website của chúng ta có 100 trang và mỗi trang của chúng ta có 3 thẻ H1 thì không lẽ chỗ nào đặt thẻ H1 chúng ta cũng lại phải đặt css như này, rồi chỗ này H1 màu như này chỗ kia màu khác thì làm sao ... từ đó có rất nhiều vẫn đề nảy sinh dẫn đến mã code của chúng ta thật thảm họa. Chính vì thế cách này rất ít được dùng trong thực tiễn, nhưng trong 1 vài trường hợp nó lại rất hữu dụng nên cách này vẫn dược dùng nhé các bạn.

Internal CSS : CSS cục bộ cho 1 trang

 Css cơ bản

Với cách css này chúng ta nhóm lại và để vào thẻ <head> mục đính là để khắc phục những nhược điểm của Inline CSS, ví dụ như trên thì toàn bộ mọi thẻ H1 trong trang sẽ có màu xanh và cỡ chữ là 16px. Cách này được sử trong 1 trang tài liệu HTMl duy nhất, và nó vẫn chưa được tối ưu nhất vì website của chúng ta rất ít khi chỉ có 1 trang và mỗi trang đều dùng cách này thì code sẽ lặp đi lặp lại, việc sửa chữa thay thế gặp khó khăn ... Chính vì vậy mà chúng ta có cách 3 và là cách được sử dụng phổ biến nhất .

External CSS : Tạo 1 file riêng và nhúng vào trang website

Cách này khắc phục được những khuyết điểm của 2 cách trên và mang đến nhiều lợi ích to lớn như : chúng ta viết code chỉ ở 1 nơi nên việc chỉnh sửa và thay đổi dễ dàng, chúng ta chỉ phải viết 1 lần nhưng có thể áp dụng cho tất cả mọi trang, và nhiều lợi ích khác nữa . Cách làm khá đơn giản file html thì có phần mở rộng .html, chúng ta tạo file có phần mở rộng .css và dẫn nó đặt vào thẻ <head> trong văn bản html thông qua thẻ <link>
<link rel="stylesheet" href="style.css">
Lúc này việc định dạng các thẻ chúng ta nhóm vào file style.css thông qua thẻ link và thuộc tính href của thẻ link chúng ta dẫn file style.css và nhúng vào trang văn bản HTML. Lúc này các thẻ trong HTML chỉ có chức năng duy nhất là xây dựng nên khung website và không còn phải ôm thêm việc định dạng cho thẻ nữa.

Qua bài này chúng ta đã hiểu thêm được 1 chút về vai trò , cú pháp, vị trí của CSS trong việc làm đẹp website. Chân thành cảm ơn bạn đã đọc. Chúc bạn 1 ngày thành công.

Tag: CSS