c Tìm hiểu về các ví dụ CSS đơn giản

CSS là gì? Tìm hiểu về các ví dụ CSS

19/02/2021

CSS là gì? Nó là viết tắt của Cascading Style Sheets. Cách mô tả CSS hiển thị HTML phần tử .

CSS là gì?

<kiểu>

phần thân {background-color: lightblue; text-align: center;}

h1 {color: blue; font-size: 40px;}

p {font-family: verdana; font-size: 20px;}

</style>

CSS Cú pháp là gì?

Quy tắc CSS bao gồm bộ chọn (selector) và khối khai báo (khối khai báo):

CSS Cú pháp

The selector trỏ tới HTML phần tử thành type (h1).

Khối khai báo (trong ngoặc nhọn) chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.

Mỗi khai báo bao gồm CSS thuộc tính tên và một giá trị, được phân tách bằng dấu hai chấm.

Trong ví dụ sau, tất cả các phần tử <p> sẽ được căn giữa, màu đỏ và có cỡ chữ là 32 pixel:

Thí dụ

<style>

p {font-size:32px; color:red; text-align:center;}

</style>

Ví dụ tương tự cũng có thể được viết như thế này:

<style>

p {

font-size: 32px;

color: red;

text-align: center;

}

</style>

External Style Sheet – Biểu định kiểu bên ngoài

Một biểu định kiểu CSS có thể được lưu trữ trong một tệp bên ngoài :

mystyle.css

body {background-color: orange; font-family:verdana}

h1 {color: white;}

p {font-size: 20px;}

Biểu định kiểu ngoài được liên kết với các trang HTML bằng tag <link> :

Thí dụ

<!DOCTYPE html>

<html>

<link rel=”stylesheet” href=”mystyle.css”>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

Inline Style

Thí dụ

<!DOCTYPE html>

<html>

<link rel=”stylesheet” href=”mystyle.css”>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

<p style=”font-size:25px”>This is a paragraph.</p>

</body>

</html>

Cascading Order

Nếu các kiểu  khác nhau được quy định cho các phần tử HTML,  các kiểu sẽ xếp thành các kiểu mới  mới với mức độ ưu tiên sau:

  • Độ ưu tiên 1: Inline styles
  • Ưu tiên 2: External and internal style sheets
  • Ưu tiên 3: Browser default – Mặc định của trình duyệt
  • Nếu các kiểu khác nhau được xác định trên cùng mức ưu tiên, kiểu cuối cùng có mức ưu tiên cao nhất.

Thí dụ

<!DOCTYPE html>

<html>

<link rel=”stylesheet” href=”mystyle.css”>

<style>

body {background-color: lightblue;}

</style>

<body style=”background-color: olivedrab”>

<h1>Multiple Styles Cascades into One</h1>

<p>Try experimenting by removing styles to see how the cascading stylesheets work.</p>

<p>Try removing the inline first, then the internal, then the external.</p>

</body>

</html>

Hy vọng với những kiến thức trong bài viết về CSS sẽ mang lại cho bạn thêm nhiều kiến thức mới. Chúc bạn thành công.

Theo W3schools

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments