CSS Là Gì, Phân Biệt CSS và HTML – CSS Cơ Bản

Posted on by mtoplistChuyên mục:Top List

Giới Thiệu CSS Là Gì

CSS (viết tắt của từ Cascading Style Sheet) là ngôn ngữ định kiểu theo tầng được dùng để tạo bố cục, trang trí, thiết lập màu nền, màu chữ, kích thước… cho trang web.

Demo Giới Thiệu về Ngôn Ngữ CSS

Sử dụng HTML để thêm nội dung và mô tả cho trang. Sử dụng CSS giúp chúng ta tạo ra có được một website trông bắt mắt hơn.

CSS Là Ngôn Ngữ Định Kiểu Tầng

CSS được gọi là ngôn ngữ định kiểu theo tầng vì mã CSS được áp dụng theo nguyên tắc theo tầng (hay cascading). Điều này có nghĩa là nếu một đoạn code CSS được viết để định kiểu cho một phần tử HTML nào đó thì tất cả các các phần tử bên trong nó (hay phần tử con) của nó cũng sẽ được thừa kế kiểu trang trí này.

body {
    background-color: #32a4e7;
    color: #fff;
}

CSS Là Ngôn Ngữ Định Kiểu Theo Tầng

Ngoài việc thừa kế từ phần tử cha, thì các phần tử con có thể được thêm các kiểu trang trí khác hoặc viết đè các kiểu trang trí của phần tử cha.

Hãy xem ví dụ dưới đây để thấy các phần tử con h1 và p thừa kế cũng như viết đè các quy luật CSS áp dụng để trang trí cho phần tử cha body như thế nào:

body {
    color: black; /* thiết lập màu chữ */
    font-size: 14px; /* thiết lập cỡ chữ */
}

h1 {
    color: red; /* thiết lập màu chữ mới cho các phần tử h1 */
    font-size: 18px; /* thiết lập cỡ chữ mới cho các phần tử h1 */
}

p {
    color: blue; /* thiết lập màu chữ mới cho các phần tử p */
}

Định Kiểu Tầng CSS – Thừa Kế và Viết Đè Luật CSS Áp Dụng Cho Phần Tử Cha

HTML và CSS

HTML là ngôn ngữ đánh dấu với HTML từng thẻ sẽ được dùng với ý nghĩa khác nhau.

<html>
<head>
   <meta charset="utf-8">
   <title>Ví Dụ Giải Thích Thích Tính Kế Thừa và Viết Đè trong CSS</title>
</head>
<body>
    <h1>Tiêu Đề - Phần Tử H1</h1>
    <p>Nội dung văn bản, phần tử P</p>
    <div>Nội dung văn bản, phần tử DIV</div>
</body>
<html>

HTML được dùng để thêm nội dung và mô tả ý nghĩa của từng nội dung sử dụng các thẻ, tuy nhiên nó không quy định cách thức hiển thị các nội dung trên trang như thế nào.

Ngược lại với HTML, CSS không được sử dụng để thêm nội dung hay mô tả ý nghĩa của nội dung trên trang. CSS được sử dụng để thiết lập cách trình bày hay hiển thị của nội dung trên trang web.

body {
    color: black; /* thiết lập màu chữ */
    font-size: 14px; /* thiết lập cỡ chữ */
}

h1 {
    color: red; /* thiết lập màu chữ mới cho các phần tử h1 */
    font-size: 18px; /* thiết lập cỡ chữ mới cho các phần tử h1 */
}

p {
    color: blue; /* thiết lập màu chữ mới cho các phần tử p */
}

mtoplist