Thứ tự ưu tiên khi một class có nhiều value khác nhau và màu trong Css - #2

Đăng bởi: Minacode|Cập nhật:08-01-2024

Tiếp theo chuỗi bài viết liên quan đến học nhanh Css cùng Minacode. Bài viết này mình sẽ đề cập đến thứ tự ưu tiên khi một class có nhiều value khác nhau và khái niệm màu trong Css nhé! Nào Let's go thôi.

Thứ tự ưu tiên khi một class có nhiều value khác nhau

Nếu mình có một thẻ p với tên class là minacode-class.

 <p class="minacode-class">Chào mừng các bạn đến với Minacode</p>

Trong trường hợp class này được style với giá trị khác nhau:

+ Nội tuyến – Inline: color: red
+ Nội bộ - Internal: color: black
+ Bên ngoài – External: color: pink

Vậy các bạn nghĩ thẻ p của mình sẽ có màu gì? Thứ tự ưu tiên trong trường hợp này sẽ như sau:

+ Kiểu nội tuyến – Inline (ưu tiên cao nhất)
+ Nội bộ - Internal và Bên ngoài – External sẽ được quyết định bởi việc cái nào gần với thẻ Html hơn
+ Trình duyệt mặc định(ưu tiên thấp nhất)

Các bạn thử vận dụng và xem kết quả nhé!

Xem chi tiết các Cách thêm Css vào Html

Comment trong Css

Khái niệm comment được sử dụng để giải thích code hay đặt những ghi chú cần thiết để làm rõ nội dung. Chúng sẽ không được hiện thị ra ngoài trình duyệt. Một comment được đặt bên trong thẻ <style> và bắt đầu bằng /* và kết thúc bằng */:

/* This is a p comment */
p {
  color: red;
}

Bạn hoàn toàn có thể đặt comment ở các vị trí khác:

p {
  color: red;  /* Set text color to red */
}

Hay:

p {
  color: /*red*/blue; 
}

Màu trong Css

Màu nền CSS:

Bạn có thể đặt màu nền cho các thẻ HTML:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Minacode</h1>

<p style="background-color:Tomato;">
Chia sẻ kiến thức lập trình miễn phí
</p>

</body>
</html>

Ta có:

Màu văn bản CSS:

Bạn có thể đặt màu của văn bản:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Minacode</h3>

<p style="color:DodgerBlue;">Chia sẻ kiến thức lập trình miễn phí</p>

</body>
</html>

Ta có:

Màu viền CSS – Border:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Minacode</h1>

<h1 style="border: 2px solid DodgerBlue;">Minacode</h1>

<h1 style="border: 2px solid Violet;">Minacode</h1>

</body>
</html>

Ta có:

Giá trị màu trong CSS:

Trong Css, màu sắc cũng có thể được chỉ định bằng các kiểu màu như: RGB, HEX, HSL, RGBA và HSLA

<!DOCTYPE html>
<html>
<body>

<p>Chúng ta có màu nền cà chua cho thẻ p":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Có 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

</body>
</html>

Ta có:

>>Còn tiếp>>

Về MinaCode

Đọc Thơ Nhân Kỷ Niệm 10 Năm Thành Lập MB Nam Đà Nẵng

Banker To Coder

Hi All,

Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.

Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.

Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:

+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.

+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.

Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.

Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.

--Ngô Sỹ Nguyên--

Thứ tự ưu tiên khi một class có nhiều value khác nhau và màu trong Css - #2