Cách sử dụng CSS trong HTML

Cách sử dụng CSS trong HTML

CSS là gì?

CSS ( Cascading Style Sheets ) là một ngôn từ dùng để định dạng cho những thành phần HTML ( Ví dụ : chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền, …. ) dựa trên những cặp thuộc tính : giá trị thuộc tính
Với việc sử dụng CSS, ta hoàn toàn có thể định dạng ra những thành phần HTML thật đặc biệt quan trọng và chuyên nghiệp .
Hướng dẫn học Lập Trình Web

Theo phong cách học từ a đến z

Bạn đang đọc: Cách sử dụng CSS trong HTML

Hướng dẫn học HTML
Hướng dẫn học CSS

Cách sử dụng CSS

Có ba cách để sử dụng CSS : Inline, Internal, External

1) Inline CSS

Ta đặt thuộc tính style vào thẻ mở của thành phần HTML, giá trị của thuộc tính style là những cặp thuộc tính định dạng CSS ( Bạn hoàn toàn có thể tìm hiểu thêm cách sử dụng CSS bằng Inline trong bài Thuộc tính Style trong HTML ) .
Ví dụ :

Xem ví dụ

2) Internal CSS

Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ

Cặp thẻ

thì được đặt bên trong cặp thẻ

Ví dụ :





    
        
    
    
        
    

Xem ví dụ
Để định dạng cho một thành phần, ta sử dụng cú pháp :

element {
    property1 : value;
    property2 : value;
    property3 : value;
    ....
    propertyN : value;
}

Ví dụ :





    
        
    
    
        

heading 1

heading 2

heading 3

Xem ví dụ

3) External CSS

Với Internal CSS :

  • Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

  • Rồi cặp thẻ

    thì đặt bên trong cặp thẻ

Với External CSS :

  • Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS
  • Trong cặp thẻ của tập tin HTML, ta dùng thẻ

    để nhúng tập tin CSS vào trang web.

Ví dụ :
Tôi có một tập tin dinhdang.css ( cùng cấp với tập tin HTML ) có nội dung là

h1 {
    color:red;
    font-size:50px;
    font-family:Courier;
}

Khi thực thi tập tin HTML có nội dung





    
        
    
    
        

Hello HTML

Màn hình trình duyệt sẽ hiển thị là

Cách tạo tập tin CSS giống với cách tạo tập tin HTML (thay .html bằng .css)
Ta có thể nhúng vào trang web nhiều tập tin CSS bằng cách viết nhiều thẻ

Một số thuộc tính định dạng CSS quan trọng

Thuộc tính Ý nghĩa Xem ví dụ
color Thiết lập màu chữ cho thành phần. Giá trị của thuộc tính color hoàn toàn có thể xác lập theo :

  • Tên màu (Ví dụ: green, blue, red, yellow, pink, black, white,….)
  • Giá trị Hex (Ví dụ: #00FF00, #99FF66, #66CC99,….)
  • Giá trị RGB (Ví dụ: rgb(255,0,0), rgb(120,0,150),….)
Xem ví dụ
background-color Thiết lập màu nền cho thành phần. Giá trị của thuộc tính background-color hoàn toàn có thể xác lập theo tên màu, giá trị Hex, giá trị RGB giống như thuộc tính color . Xem ví dụ
font-size Thiết lập kích cỡ chữ cho thành phần. Giá trị của thuộc tính font-size hoàn toàn có thể xác lập theo :

  • px
  • em (1em = 16px)
Xem ví dụ
font-family Thiết lập kiểu chữ cho thành phần. Dưới đây là một số ít kiểu chữ phổ cập :

  • Times New Roman
  • Book Antiqua
  • Arial Black
  • Lucida Sans Unicode
  • Palatino Linotype
  • Georgia
  • Lucida Console
  • Arial
  • Tahoma
  • Impact
  • Verdana
  • monospace
  • Courier
Xem ví dụ
text-align

Canh lề cho nội dung của phần tử. Thuộc tính text-align có ba giá trị:

  • left (canh cho nội dung nằm bên trái)
  • center (canh cho nội dung nằm ở giữa)
  • right (canh cho nội dung nằm bên phải)
Xem ví dụ
border Tạo đường viền bao xung quanh thành phần. Giá trị của thuộc tính border có 3 tham số :

  • Tham số thứ nhất là độ dày của đường viền
  • Tham số thứ hai là kiểu đường viền (Có một số kiểu như: groove, ridge, inset, outset, none, hidden, dotted, dashed, solid, double,….)
  • Tham số thứ ba là màu của đường viền.
Xem ví dụ
width, height Thiết lập chiều rộng và chiều cao cho thành phần. Có thể xác lập theo đơn vị chức năng px hoặc % Xem ví dụ
Sau khi xem xong bài viết này, chúng tôi khuyến khích bạn học HTML song song với loạt bài Hướng dẫn sử dụng CSS để đạt được hiệu suất cao cao nhất .