Thí dụ

sử dụng của

Một đoạn văn

Thêm các ví dụ "Tự mình thử" bên dưới

Định nghĩa và cách sử dụng

This is a paragraph.

Tôi có màu đỏ
Tôi có màu xanh
Tôi có kích thước 30px

Tiêu đề heading 1
Văn bản paragraph.

Tiêu đề heading 1
Văn bản paragraph.

Tiêu đề heading 1
Văn bản paragraph.

Tiêu đề heading 1
Văn bản paragraph.

Tiêu đề heading 1
Văn bản paragraph.

This is a Blue Heading

CSS từ bên ngoài (bên ngoài)

Một CSS từ bên ngoài có thể được sử dụng để định kiểu cho nhiều trang HTML

Với CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉnh sửa một tệp duy nhất

Để sử dụng CSS từ bên ngoài, ta thêm một đường dẫn tới tệp CSS ở phần < head > của trang HTML.

Ví dụ

  



This is a heading
This is a paragraph.

Một tệp CSS bên ngoài có thể được viết bởi mọi trình soạn thảo. Tệp này không chứa bất kỳ đoạn mã HTML nào, và phải được lưu lại với đuôi “. css”

tập tin “phong cách. css” trông giống như sau

body {

    background-color: white;

}

h1 {

    color: mediumseagreen;

}

p {

    color: tomato;

}

Phông chữ CSS

Thuộc tính CSS color giúp xác định màu chữ được sử dụng.

Thuộc tính CSS họ phông chữ giúp xác định kiểu phông chữ được sử dụng.

Thuộc tính font-size Giúp xác định cỡ chữ được sử dụng.

Ví dụ

This is a heading
This is a paragraph.

Đường viền (đường viền)

Thuộc tính đường viền giúp xác định đường bao quanh phần tử HTML.

Ví dụ

p {
  border: 1px solid powderblue;
}

Ví dụ trên 1px là đường viền dày, solid là kiểu của đường viền, powderblue là màu của đường viền

Đệm CSS

Thuộc tính padding giúp xác định khoảng đệm (khoảng trống) giữa văn bản và đường viền.

Ví dụ

p {
  border: 1px solid powderblue;
  padding: 30px;
}

Lề

Thuộc tính lề giúp xác định một khoảng lề bên ngoài đường viền.

Ví dụ

p {
  border: 1px solid powderblue;
  margin: 50px;
}

Ví dụ ở hình trên, phần màu cam là lề, phần màu xanh lá là phần đệm và phần viền ở giữa lề và phần đệm chính là viền. Đây là 2 thuộc tính thông thường được sử dụng để thiết lập phần tử và bố cục trang web

Để dễ nhớ, các bạn có thể hiểu margin là bên ngoài, dùng để điều chỉnh khoảng cách với các phần tử khác. Và phần đệm là lề trong để điều chỉnh khoảng cách giữa nội dung và phần tử

Thuộc tính id

Để xác định một kiểu riêng cho một phần tử đặc biệt, vui lòng thêm thuộc tính id cho phần tử

<p id="p01"><I am different</p>

Sau that style for that element with the id can

Ví dụ

#p01 {
  màu .  màu xanh da trời;
}

Ghi chú. id của một phần tử nên là duy nhất trong một trang web, để bộ chọn id có thể chỉ ra chính xác phần tử đó

Thuộc tính class

Để xác định kiểu cho các loại phần tử đặc biệt, vui lòng thêm thuộc tính lớp cho phần tử

<p lớp="lỗi"><I am different</p>

Sau đó style cho các phần tử đó với tên lớp vừa đặt

Ví dụ

p. lỗi {
  màu .  đỏ;
}

Tham chiếu đến tệp CSS bên ngoài

Tệp CSS bên ngoài có thể được tham chiếu với đường dẫn tuyệt đối hoặc đường dẫn tương đối tới trang web hiện tại