Thí dụ
sử dụng của
Một tiêu đề
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 heading
This is a paragraph.
Try it Yourself »Related Pages
HTML tutorial: HTML CSS
CSS tutorial: CSS Tutorial
HTML DOM reference: Style Object
Default CSS Settings
Most browsers will display the
Thuộc tính style trong HTML được sử dụng để thêm định dạng [kiểu trang trí] cho một phần tử, chẳng hạn như màu, chữ, kích thước, v.v. v
Ví dụ
Tôi có màu đỏ
Tôi có màu xanh
Tôi có kích thước 30px
Xem ví dụ
Thuộc tính HTML Style
Chúng ta sử dụng thuộc tính style để thiết lập định dạng style cho một phần tử HTML
Thuộc tính style có cú pháp như sau
Trong đó, property là CSS thuộc tính, value là giá trị CSS
CSS là gì thì chúng ta sẽ xem trong loạt bài viết về CSS nhé
Màu nền
Thuộc tính CSS background
hoặc background-color
được sử dụng để xác định màu nền cho phần tử HTML
Ví dụ 1. Đặt màu nền cho trang web bằng màu xanh da trời
Tiêu đề heading 1
Văn bản paragraph.
View results
Ví dụ 2. Đặt màu nền cho 2 phần tử khác nhau như trên
Tiêu đề heading 1
Văn bản paragraph.
View results
Màu
Thuộc tính CSS
0 verify color text for an HTML sectionVí dụ
Tiêu đề heading 1
Văn bản paragraph.
View results
Nét chữ
Thuộc tính CSS
1 xác định phông chữ được sử dụng cho một phần tử HTMLVí dụ
Tiêu đề heading 1
Văn bản paragraph.
View results
Cỡ chữ
Thuộc tính CSS
2 xác định kích thước văn bản cho một phần tử HTMLVí dụ
Tiêu đề heading 1
Văn bản paragraph.
View results
Căn chỉnh văn bản
Thuộc tính CSS
3 xác định căn bản chỉnh sửa văn bản theo chiều ngang [trái, phải, giữa. ] for an HTML section CSS mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, trang hoặc trong các phương tiện tiện ích khác
CSS giúp tiết kiệm rất nhiều công việc. Nó có thể điều khiển bố cục cục bộ của nhiều trang web cùng một lúc
Có thể thêm CSS vào phần tử HTML bằng 3 cách
Nội tuyến [Nội tuyến] – by way used property style in HTML HTML section
Internal [Nội bộ] – bằng cách sử dụng phần tử < kiểu > trong phần < head . >.
Bên ngoài [Từ bên ngoài] – bằng cách sử dụng tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS được giữ nguyên các mẫu trong các tệp CSS riêng biệt [Bên ngoài]. Tuy nhiên, ở đây chúng ta sử dụng kiểu nội tuyến và nội bộ, vì chúng biểu thị và giúp bạn thực hiện dễ dàng hơn
CSS nội tuyến [inline]
Một CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML đơn
CSS nội tuyến sử dụng thuộc tính kiểu của phần tử HTML.
Ví dụ sau đặt màu chữ cho phần tử < h1 > to color xanh dương.
Ví dụ
This is a Blue Heading
CSS internal type [nội bộ]
Một CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML đơn
CSS nội bộ được xác định trong phần của trang HTML, bên trong phần tử :
Ví dụ
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
This is a heading
This is a paragraph.
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ụ
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
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ử