[Tự học CSS] Tìm hiểu về Combinators và Opacity / Transparency trong CSS » Cafedev.vn

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

Cafedev chia sẻ cho ace về Combinators và Opacity / Transparency trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

1.Combinators(Tổ hợp) trong CSS

Bộ tổ hợp(Combinators) là thứ giải thích mối quan hệ giữa các bộ chọn.

Bộ chọn(selector) CSS có thể chứa nhiều bộ chọn đơn giản. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm một bộ tổ hợp.

Có bốn tổ hợp khác nhau trong CSS:

  • selector con cháu (dấu cách)
  • selector con (>)
  • selector anh chị em kế cận (+)
  • selector anh chị em chung (~)

1.1. selector con cháu (dấu cách)

Bộ chọn con cháu khớp với tất cả các phần tử là con của một phần tử được chỉ định.

Ví dụ sau chọn tất cả các phần tử < p >bên trong các phần tử < div >:

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Copy and chạy code

1.2. Child Selector – bộ chọn con

Bộ chọn con chọn tất cả các phần tử là con của một phần tử được chỉ định.

Ví dụ sau chọn tất cả các phần tử < p > là con của phần tử < div >:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>

Copy and chạy code

1.3. Adjacent Sibling Selector – Bộ chọn anh chị em liền kề

Bộ chọn anh chị em kế cận chọn tất cả các phần tử là anh chị em kế cận của một phần tử được chỉ định.

Các phần tử anh chị em phải có cùng một phần tử mẹ và “liền kề” có nghĩa là “ngay sau đó”.

Ví dụ sau chọn tất cả các phần tử < p > được đặt ngay sau phần tử < div >:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

1.4. Bộ chọn anh chị em chung

Bộ chọn anh chị em chung chọn tất cả các phần tử là anh chị em của một phần tử được chỉ định.

Ví dụ sau chọn tất cả các phần tử < p > là anh chị em của các phần tử < div >:

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

Copy and chạy code

2. Opacity / Transparency – Độ mờ / Độ trong suốt

Thuộc tính opacity chỉ định độ mờ đục / trong suốt của một phần tử.

  • Hình ảnh trong suốt

Thuộc tính opacity có thể có giá trị từ 0,0 – 1,0

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>
  • Hiệu ứng Di chuột trong suốt

Thuộc tính opacity thường được sử dụng cùng với:hover bộ chọn di chuột để thay đổi độ mờ khi di chuột qua

!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>
  • Hộp trong suốt

Khi sử dụng thuộc tính opacity để thêm độ trong suốt vào nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc:

<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Copy and chạy code

  • Độ trong suốt có thể dùng với RGBA
div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
  • Văn bản trong hộp trong suốt
 <html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Giải thích:

Đầu tiên, chúng tôi tạo phần tử < div > (class = “background”) với hình nền và đường viền.

Sau đó, chúng tôi tạo một < div > (class = “transbox”) khác bên trong < div > đầu tiên.

< div class=”transbox” > có màu nền và đường viền – div trong suốt.

Bên trong < div > trong suốt, chúng tôi thêm một số văn bản bên trong phần tử

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

mtoplist