Cách sử dụng CSS trong HTML, CSS là gì, tài lệu học CSS, hướng dẫn học CSS

Cách sử dụng CSS trong HTML, CSS là gì, tài lệu học CSS, hướng dẫn học CSS

Cách sử dụng CSS trong HTML

CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử 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 các cặp thuộc tính:giá trị thuộc tính

Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt 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
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 phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS (Bạn có thể tham khảo cách sử dụng CSS bằng Inline trong bài Thuộc tính Style trong HTML).

Ví dụ

<img src="http://webcoban.vn/public/home/img_demo/h2.jpg" style="width:200px;height:100px">

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ẻ <style type="text/css"></style>

Cặp thẻ <style type="text/css"></style> thì được đặt bên trong cặp thẻ <head></head>

Ví dụ

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            img{
                width:400px;
                height:400px;
            }
        </style>
    </head>
    <body>
        <img src="../public/home/img_demo/h2.jpg">
    </body>
</html>

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

element {
    property1 : value;
    property2 : value;
    property3 : value;
    ....
    propertyN : value;
}
Ví dụ

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            h1{
                color:red;
            }
            h2{
                color:blue;
                font-size:50px;
                background-color:gray;
            }
            h3{
                color:green;
                font-size:70px;
                font-family:Courier;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>heading 1</h1>
        <h2>heading 2</h1>
        <h3>heading 3</h1>
    </body>
</html>

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ẻ <style type="text/css"></style>
  • Rồi cặp thẻ <style type="text/css"></style> thì đặt bên trong cặp thẻ <head></head>

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ẻ <head></head> của tập tin HTML, ta dùng thẻ <link rel="stylesheet" type="text/css" href="đường dẫn đến tập tin CSS"> để nhúng tập tin CSS vào trang web.

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;
}
Ví dụ

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="dinhdang.css">
    </head>
    <body>
        <h1>Hello HTML</h1>
    </body>
</html>

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

Hello HTML
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ẻ <link rel="stylesheet" type="text/css" href="đường dẫn đến tập tin CSS">

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 phần tử. Giá trị của thuộc tính color có thể xác định 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),....)
background-color Thiết lập màu nền cho phần tử. Giá trị của thuộc tính background-color có thể xác định theo tên màu, giá trị Hex, giá trị RGB giống như thuộc tính color.
font-size

Thiết lập kích cỡ chữ cho phần tử. Giá trị của thuộc tính font-size có thể xác định theo:

  • px
  • em (1em = 16px)
font-family

Thiết lập kiểu chữ cho phần tử. Dưới đây là một số kiểu chữ phổ biến:

  • Times New Roman
  • Book Antiqua
  • Arial Black
  • Lucida Sans Unicode
  • Palatino Linotype
  • Georgia
  • Lucida Console
  • Arial
  • Tahoma
  • Impact
  • Verdana
  • monospace
  • Courier
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)
border

Tạo đường viền bao xung quanh phần tử. 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.
width, height Thiết lập chiều rộng và chiều cao cho phần tử. Có thể xác định theo đơn vị px hoặc %
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 quả cao nhất.

Cách sử dụng CSS trong HTML

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi