search

Ý nghĩa css

1 năms trước
Trả lời: 0
Lượt xem: 87

Nếu bạn mới bắt đầu làm quen với ngôn ngữ CSS. Bài viết này rất bổ ích để bạn hiểu khái niệm CSS là gì và bố cục, cấu trúc chuẩn xác khi sử dụng CSS một cách hiểu quả

Show

Nội dung

CSS là gì?

CSS viết tắt của Cascading Style Sheets được sử dụng để mô tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Hay nói cách khác CSS là ngôn ngữ tạo kiểu cho trang web

Ý nghĩa css
CSS là gì?

Nếu như HTML có nhiệm vụ định dạng các phần tử trên trang web như tạo bố cục hay các đoạn văn bản thì CSS giúp mình thêm các kiểu vào các phần tử HTML như chữ, màu sắc, nền, bố cục, ranh giới,…

Đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C). Thay vì đặt các thẻ định dạng kiểu dáng cho văn bản HTML ngay trong nội dung của nó, thì bạn nên sử dụng CSS để làm điều đó một cách chuyên nghiệp và dễ quản lý trong việc bổ sung và chỉnh sửa được nhanh hơn

<style>

body {
background-color: lightblue; 
text-align: center;
}

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

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

</style>

Cách hoạt động của CSS

Phương thức hoạt động của CSS sẽ được tìm dựa trên vùng lựa chọn, có thể là thẻ HTML, ID, lớp,… Sau đó thực hiện thêm các thuộc tính cần thay đổi ngay trên đó. Bộ chọn sẽ trỏ về phần tử HTML mà bạn cần muốn tạo kiểu và việc khai báo các thuộc tính sẽ cách nhau bởi dấu chấm phẩy “;”

Ý nghĩa css
Chi tiết cách thức hoạt động của CSS

Mỗi lần khai báo bao gồm tên CSS và giá trị, cách nhau bởi dấu hai chấm “. ”. Block khai báo được đặt trong dấu ngoặc kép “{}”. Bạn có thể xem ví dụ cụ thể dưới đây

<style>
p {
color: red;
text-weight: bold;
}
<style>

Ý nghĩa css

Chương trình khuyến mãi "Vui Xuân Như Ý - Lì Xì Đầy Ví"

Ưu điểm của CSS

Một số điểm ưu tiên của CSS có thể được biết đến như

  • Dễ dàng cập nhật style CSS
  • Tạo kiểu dáng riêng biệt, không bị trùng lặp
  • Tích hợp tệp CSS dễ dàng trên HTML
  • Tiết kiệm thời gian vì mã rút ngắn
  • Chế độ làm rối các mã HTML của trang web bằng các thẻ (in đậm, in nghiêng, gạch chân, màu chữ,…). Làm mã nguồn của trang web gọn gàng

Bố cục và cấu trúc đoạn mã CSS

Sắp xếp mã cục bộ CSS

Bố cục của CSS là dạng hộp có hình chữ nhật và mỗi hộp sẽ có các khoảng trống trên trang bao gồm

Ý nghĩa css
Bố cục của CSS
  • Lề. Là khoảng cách xung quanh bên ngoài của phần tử
  • Biên giới. As a đường liên kết nằm bên ngoài phần đệm
  • đệm. Không gian xung quanh nội dung

Constructor of a CSS đoạn code

Một đoạn mã CSS sẽ bao gồm vùng chọn, thuộc tính và giá trị, không có định dạng như dưới đây

vùng chọn {

   thuộc tính : giá trị;

   thuộc tính: giá trị;

   .....

}

in which

  • Đầu tiên, sẽ khai báo vùng chọn cần CSS
  • Mỗi thuộc tính có một giá trị riêng, giá trị có thể là định dạng số hoặc chữ tùy thuộc vào danh sách CSS
  • Giá trị sẽ nằm trong dấu ngoặc kép {} và cách thuộc tính bằng dấu hai chấm “. ”
  • Cuối mỗi thuộc tính khai báo sẽ luôn có dấu chấm phẩy “;”
  • Có thể thêm nhiều thuộc tính mà không bị giới hạn

Định nghĩa các phần

  • Selector (Bộ chọn). Là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách cho nó
  • Khai báo (Khải báo). Khối khai báo sẽ bao gồm một hoặc nhiều báo cáo được phân cách bằng dấu “;”. Có thể xem ví dụ dưới đây
p {
  color: blue;
  text-align: center;
}
  • Properties (Thuộc tính). Là những cách mà bạn muốn tạo style cho trang HTML của mình
  • Thuộc tính value. The value is side réferential sign and being different by the sign (. )

Ví dụ về đoạn mã HTML

<html>
<head>
   <meta charset="utf-8">
   <title>CSS là gì?</title>
</head>
<body>
    <h1>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>

Ví dụ về CSS để trình bày cách hiển thị nội dung HTML ở trên theo ý muốn

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

h1 {
    color: black; /* thiết lập màu chữ mới cho các phần tử h1 */
    font-size: 20px; /* 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 */
}

Ngoài ra, CSS có rất nhiều thuộc tính khác mà bạn cần biết để thực hiện các thay đổi đa dạng, sinh động hơn cho trang web của mình. Bạn có thể tham khảo các thuộc tính tại đây

Cách sử dụng CSS

Ý nghĩa css
3 cách sử dụng style css

CSS nội tuyến

Cách này sẽ áp dụng trực tiếp trên một đối tượng xác định rõ nhất bằng cách sử dụng thuộc tính 

<style>
p {
color: red;
text-weight: bold;
}
<style>
1

<!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>

>> Xem thêm. Quy ước mã là gì?

CSS nội bộ

Internal CSS là đặt CSS ở đầu trang web để áp dụng kiểu dáng cho toàn bộ trang, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ