Background trong CSS3

Bên dưới đây sẽ mô tả cho bạn tất cả các tính năng mới về background của CSS3, để biết các thuộc tính khác liên quan đến background, vui lòng xem lại bài hướng dẫn Backgroud trong CSS.

Với phiên bản CSS3, bạn có thể áp dụng nhiều hình loại background cho các phần tử.

CSS3 cung cấp một số thuộc tính mới để có thể chỉnh sửa background của một phần tử như cắt nền, nhiều nền và tùy chọn điều chỉnh kích thước nền.

Bên dưới đây sẽ mô tả cho bạn tất cả các tính năng mới về background trong CSS3, để biết các thuộc tính khác liên quan đến background, vui lòng xem lại bài hướng dẫn Backgroud trong CSS.

Thuộc tính background-size trong CSS3

Thuộc tính background-size có thể được sử dụng để chỉ định kích thước của hình nền. Trước CSS3, kích thước của hình nền được xác định bởi kích thước thực của hình ảnh. Kích thước hình nền có thể được chỉ định bằng cách sử dụng pixel hoặc giá trị % cũng như các từ khóa tự auto, containcover.

Lưu ý: Thuộc tính này không chấp nhận giá trị âm.

HTML:

<div class = "box"></div>

CSS:

.box {
    width: 250px;
    height: 150px;
    background: url("images/girl.png") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}

Bạn hãy chọn hình ảnh lớn một chút để thấy rõ sự tác động của giá trị contain trong background-size.

Mẹo: Thuộc tính background-size thường được sử dụng để tạo hình ảnh nền có kích thước đầy đủ chia tỷ lệ theo kích thước của chế độ xem hoặc tùy chọn của trình duyệt.

Thuộc tính background-clip trong CSS3

Thuộc tính background-clip có thể được sử dụng để chỉ định xem nền của phần tử có mở rộng ra đường viền hay không. Thuộc tính background-clip có thể nhận ba giá trị: border-box, padding-box, content-box.

Trong đó:

  • border-box: Nền của phần tử bao gồm cả đường viền
  • padding-box: Nền của phần tử bao gồm cả phần đệm (Không bao gồm đường viền)
  • content-box: Nền của phần tử chỉ bao gồm phần nội dung (Không bao gồm phần padding, border)

HTML:

<h2>Mặc định</h2>
<div class="box"></div>
<h2>Sử dụng giá trị border-box</h2>
<div class="box clip1"></div>
<h2>Sử dụng giá trị padding-box</h2>
<div class="box clip2"></div>
<h2>Sử dụng giá trị content-box</h2>
<div class="box clip3"></div>

CSS:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
}
.clip1 {
    background-clip: border-box;
}
.clip2 {
    background-clip: padding-box;
}
.clip3 {
    background-clip: content-box;
}

Bạn có thể xem lại bài viết CSS Box Model để biết rõ hơn.

Thuộc tính background-origin trong CSS3

Thuộc tính background-origin có thể được sử dụng để chỉ định vùng định vị của ảnh nền. Nó có thể nhận các giá trị giống như thuộc tính background-clip: border-box, padding-box, content-box.

HTML:

<div class="box"></div>

CSS:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("/examples/girl.png") no-repeat;
    background-size: contain;
    background-origin: content-box;
} 

Lưu ý: Thuộc tính background-origin bị bỏ qua nếu giá trị của thuộc tính background-attachment được chỉ định là ‘fixed’.

Tạo nhiều background trong CSS3

CSS3 cung cấp cho bạn khả năng thêm nhiều nền vào một phần tử duy nhất. Các nền được xếp chồng lên nhau. Số lượng lớp được xác định bởi số lượng giá trị được phân tách bằng dấu phẩy trong thuộc tính background-image hoặc background nền.

HTML:

<div class="box"></div>

CSS:

.box {
    width: 100%;
    height: 500px;
    background: url("/images/girl.png") no-repeat center,  url("/images/orange.png")  no-repeat center, url("/images/flower.png")  no-repeat 10% 30%, lightblue;
}

Giá trị đầu tiên trong danh sách hình nền được phân tách bằng dấu phẩy, tức là hình nền ‘girl.png’ sẽ xuất hiện ở trên cùng và giá trị cuối cùng, tức là màu ‘lightblue’ sẽ xuất hiện ở dưới cùng. Chỉ nền cuối cùng mới có thể bao gồm background-color.

Tổng kết background trong CSS3

Như vậy, trong bài hướng dẫn này mình đã chỉ bạn thêm một số thay đổi với background trong CSS3. Hi vọng nó giúp ích cho bạn.

Nếu bạn đang tích cực học để làm lập trình Front End thì tham khảo ngay KHÓA HỌC FRONT END (với React.js) để HỌC NHANH + ĐI LÀM SỚM nhé!

Màu sắc (COLOR) trong CSS3

Đến phiên bản CSS3, chúng ta có một số cách mới để xác định giá trị màu là rgba(), hsl() và hsla(). Trong phần bên dưới đây, chúng ta sẽ thảo luận về từng cách xác định màu này.

Trước phiên bản CSS3, chúng ta có thể sử dụng thuộc tính color với các giá trị mã màu HEX, tên màu hoặc rgb(). Đến phiên bản CSS3, chúng ta có một số cách mới để xác định giá trị màu là rgba(), hsl()hsla().

Màu sắc (COLOR) trong CSS3

Trong phần bên dưới đây, chúng ta sẽ thảo luận về từng cách xác định màu này.

1. Giá trị màu rgba() trong CSS3

Màu sắc có thể được xác định trong mô hình RGBA (Viết tắt của các từ Red-Green-Blue-Alpha) bằng cách sử dụng ký hiệu hàm rgba().

Mô hình màu RGBA là phần mở rộng của mô hình màu RGB với giá trị Alpha – Giá trị này chỉ định độ mờ đục của màu.

Tham số alpha chấp nhận giá trị từ 0.0 đến 1.0, trong đó:

  • 1.0 màu nguyên bản
  • 0.0 hoàn toàn trong suốt

HTML:

<h1>Tiêu đề này sử dụng màu rgba. Có độ mờ đục là 1.0</h1>
<p>rgba() với độ mờ đục là 0.5</p>

CSS:

h1 {
    color: rgba(0,0,0,1.0);
}
p {
    background-color: rgba(0%,0%,0%,0.5);
}

Kết quả ta được:

Ví dụ sử dụng màu rgba() trong CSS3

2. Giá trị màu HSL trong CSS3

Màu sắc cũng có thể được xác định theo mô hình HSL (Hue-Saturation-Lightness) bằng cách sử dụng ký hiệu hàm hsl().

Hue được biểu thị dưới dạng một góc (từ 0 đến 360) của bánh xe màu hoặc vòng tròn (tức là cầu vồng được biểu diễn trong một vòng tròn).

Góc này được cho dưới dạng một số nhỏ hơn đơn vị vì góc thường được đo bằng độ nên đơn vị này được ngầm hiểu trong CSS.

Độ bão hòa (Saturation) và độ sáng (Lightness) được biểu thị dưới dạng phần trăm.

  • Độ bão hòa 100% có nghĩa là đủ màu và 0% là màu xám.
  • Trong khi, độ sáng 100% là màu trắng, độ sáng 0% là màu đen và độ sáng 50% là bình thường.

Hãy thử xem ví dụ dưới đây:

HTML:

<h1>Tiêu đề sử dụng màu hsl</h1>
<p>Đoạn văn bản sử dụng màu hsl</p>

CSS:

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

Kết quả ta được:

Bạn có thể tham khảo bánh xe màu theo kiểu HSL ở dưới đây:

Ví dụ bánh xe màu theo mô hình HSL

3. Giá trị màu HSLA trong CSS3

Chắc đọc tên màu bạn cũng đoán ra rồi đúng không nào.

HSLA (Hue-Saturation-Lightness-Alpha) sử dụng ký hiệu hàm hsla(). Mô hình màu HSLA là phần mở rộng của mô hình màu HSL với giá trị Alpha – chỉ định độ mờ của màu.

Tham số alpha chấp nhận giá trị từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

HTML:

<h1>Tiêu đề sử dụng màu hsl với Alpha = 0.3</h1>
<p>Đoạn văn bản sử dụng màu hsl với Alpha = 0.3</p>

CSS:

h1 {
    color: hsl(360,70%,60%,.3);
}
p {
    background-color: hsl(480,50%,80%,0.3);
}

Kết quả ta được:

Như vậy, CSS3 cung cấp cho chúng ta tính năng rgba(), hsl() và hsla() tiện lợi hơn trong việc tinh chỉnh màu sắc. Thông thường trong khi LẬP TRÌNH WEB chúng ta sẽ hay sử dụng rgba(). Nhưng có các website muốn có màu sắc sống động là hiện đại thì họ sẽ sử dụng nhiều đến hsl() và hsla().

Border trong CSS3

CSS3 cung cấp hai thuộc tính mới để tạo kiểu đường viền của một phần tử theo cách thanh lịch hơn – thuộc tính border-image để thêm hình ảnh vào đường viền và thuộc tính border-radius để tạo các góc bo tròn mà không cần sử dụng bất kỳ hình ảnh nào như trong phiên bản trước.

Thiết kế các hình, đường viền là một phần công việc thường xuyên trong lập trình web front end nhưng không hề dễ dàng. Trong phiên bản CSS3 công việc này trở nên dễ dàng hơn nhiều.

CSS3 cung cấp hai thuộc tính mới để tạo kiểu đường viền của một phần tử theo cách thanh lịch hơn – thuộc tính border-image để thêm hình ảnh vào đường viền và thuộc tính border-radius để tạo các góc bo tròn mà không cần sử dụng bất kỳ hình ảnh nào như trong phiên bản trước.

Border trong CSS3

Phần sau sẽ mô tả cho bạn các thuộc tính đường viền mới này của CSS3, để biết các thuộc tính liên quan đến đường viền khác, vui lòng xem bài viết Border trong CSS.

Tạo đường viền bo tròn trong CSS3

Thuộc tính border-radius trong CSS3 có thể được sử dụng để tạo các góc tròn. Thuộc tính này thường xác định hình dạng của góc của cạnh viền ngoài. Trước CSS3, việc sử dụng hình ảnh để tạo các góc tròn khá khó chịu.

Ví dụ ta có HTML:

<div class = "box" ></div>

CSS để tạo góc bo tròn:

.box {
    width: 300px;
    height: 150px;
    background: yellow;
    border: 2px solid #003999;
    border-radius: 20px;
}

Kết quả ta có như sau:

Tao-Border-Radius-Trong-CSS3

Và trong nhiều trường hợp ta có thể dễ dàng tạo hình tròn như sau:

HTML:

<div class = "box" ></div>

CSS:

.box {
    width: 150px;
    height: 150px;
    background: yellow;
    border: 2px solid #003999;
    border-radius: 50%;
}

Kết quả ta được:

Tao-Hinh-Tron-Voi-Thuoc-Tinh-Border-Radius-Trong-CSS3

Tạo đường viền có hình ảnh với CSS3

Thuộc tính border-image trong CSS3 cho phép bạn chỉ định một hình ảnh hoạt động như một đường viền của phần tử.

Thiết kế của đường viền được tạo từ các cạnh và góc của hình ảnh được chỉ định trong URL ảnh của đường viền. Hình ảnh đường viền có thể được cắt (slice), lặp lại (repeat), co kéo (scale) và kéo dài (stretch) theo nhiều cách khác nhau để vừa với kích thước của vùng hình ảnh đường viền.

Trong đó, border-image là viết tắt của các thuộc tính sau:

  • border-image-source: Đường dẫn đến hình ảnh được sử dụng làm đường viền
  • border-image-slice: Cách cắt hình ảnh theo đường viền
  • border-image-width: Chiều rộng của hình ảnh đường viền
  • border-image-outset: Số lượng mà vùng hình ảnh đường viền mở rộng ra ngoài viền hộp
  • border-image-repeat: Xác định ảnh đường viền nên được lặp lại (repeat), làm tròn (round) hay kéo dài (stretch). Trong đó, round sẽ giúp các điểm giữa các cạnh được tiếp nối vừa vặn hơn.

Ví dụ ta có HTML:

<div class="box"></div>

CSS:

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}

Kết quả ta được:

Tao-Duong-Vien-Anh-Voi-Border-Image-Trong-CSS3

Tổng kết

Như vậy, bài viết này đã giúp bạn biết được cách tạo các đường viền bo tròn thanh lịch với thuộc tính border-radius trong CSS3 cũng như tạo các đường viền độc đáo với ảnh.

Học tiếp: Update…

Đọc thêm: Bộ chọn thuộc tính trong CSS

Bộ chọn thuộc tính trong CSS

Bộ chọn thuộc tính trong CSS cung cấp một cách dễ dàng và mạnh mẽ để áp dụng các quy tắc CSS lên các phần tử có thuộc tính nhất định.

CSS Atritube SelectorBộ chọn Thuộc tính chọn các phần tử HTML có thuộc tính cụ thể hoặc thuộc tính với giá trị được chỉ định.

Bộ chọn thuộc tính trong CSS

Bộ chọn thuộc tính là gì?

Bộ chọn thuộc tính trong CSS cung cấp một cách dễ dàng và mạnh mẽ để áp dụng các quy tắc CSS lên các phần tử có thuộc tính nhất định.

Điều này có nghĩa là, CSS Selector có thể nhắm đến thông qua thuộc tính “attribute

Tiếp theo dưới đây mình sẽ mô tả 7 bộ chọn thuộc tính phổ biến nhất.

#1: Bộ chọn [attribute]

Đây là bộ chọn thuộc tính đơn giản nhất. Nó sẽ áp dụng quy tắc CSS cho một phần tử nếu tồn tại một thuộc tính nhất định.

Ví dụ: chúng ta có thể tạo kiểu cho tất cả các phần tử có thuộc tính title bằng cách sử dụng các quy tắc như sau:

[title] {
    color: blue;
}

Bộ chọn [title] trong ví dụ trên khớp với tất cả các phần tử có thuộc tính title.

Bạn cũng có thể hạn chế lựa chọn này đối với một phần tử HTML cụ thể bằng cách đặt bộ chọn thuộc tính sau bộ chọn loại phần tử, như sau:

h1[title] {
    color: red;
}

Bộ chọn h1[title] chỉ khớp với các phần tử h1 có thuộc tính title. Thế nên, thẻ h1 mà không có thuộc tính title thì cũng không được áp dụng quy tắc CSS trên.

#2: Bộ chọn [attribute = “value”]

Bạn có thể sử dụng toán tử = để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính chính xác bằng giá trị đã cho:

input[type = "submit"] {
    border: 1px solid green;
}

Bộ chọn trong ví dụ trên khớp với tất cả phần tử <input> có thuộc tính type với giá trị bằng submit.

#3: Bộ chọn [attribute ~= “value”]

Thuộc tính của một phần tử HTML cũng có thể có nhiều giá trị.

Bạn có thể sử dụng toán tử ~= để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính là danh sách các giá trị được phân tách bằng dấu cách (như class = “alert warning”), một trong số đó chính xác bằng giá trị được chỉ định:

HTML:

<p class="warning">Cảnh báo cảnh báo</p>
<p class="warning highlight">Cảnh báo đặc biệt</p>

CSS:

[class ~= "warning"] {
    color: #fff;
    background: red;
}

Bộ chọn này sẽ khớp với bất kỳ phần tử HTML nào có thuộc tính class chứa các giá trị được phân tách bằng dấu cách, một trong số đó là warning.

#4: Bộ chọn [attribute |= “value”]

Bạn có thể sử dụng toán tử |= để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có thuộc tính là danh sách giá trị được phân tách bằng dấu gạch ngang ‘-‘ bắt đầu bằng giá trị được chỉ định:

HTML:

<p lang="en">Tiếng Anh</p>
<p lang="en-us">Tiếng Anh Mỹ</p>
<p lang="us">Tiếng Mẽo</p>

CSS:

[lang |= en] {
    color: #fff;
    background: blue;
}

Bộ chọn trong ví dụ trên khớp với tất cả các phần tử có thuộc tính lang chứa giá trị bắt đầu bằng en, cho dù giá trị đó có được theo sau bởi dấu gạch ngang và nhiều ký tự hơn hay không.

Nói cách khác, nó khớp với các phần tử có thuộc tính lang có các giá trị en, en-US en-GB, v.v. nhưng không phải là US-en, GB-en.

#5: Bộ chọn [attribute ^= “value”]

Bạn có thể sử dụng toán tử ^= để làm cho bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính bắt đầu bằng một giá trị được chỉ định.

Nó không nhất thiết phải là một từ toàn bộ.

HTML:

<a href="https://niithanoi.edu.vn">NIITHANOI.EDU.VN</a>
<a href="https://google.com">GOOGLE.COM</a>
<a href="https://laptrinhvienphp.com">LATRINHVIENPHP.COM</a>

CSS:

a[href ^= "https://"] {
    text-decoration: none;
}

Bộ chọn trong ví dụ trên sẽ nhắm mục tiêu tất cả các liên kết bắt đầu với https:// và bỏ gạch chân đi.

#6: Bộ chọn [attribute $= “value”]

Tương tự, bạn có thể sử dụng toán tử $= để chọn tất cả các phần tử có giá trị thuộc tính kết thúc bằng một giá trị được chỉ định.

Nó không nhất thiết phải là một từ toàn bộ.

a[href $= ".pdf"] {
    color: red;
}

Bộ chọn trong ví dụ trên chọn tất cả các phần tử liên kết đến tài liệu có đuôi là .pdf và đổi màu liên kết thành màu đỏ.

#7: Bộ chọn [attribute *= “value”]

Bạn có thể sử dụng toán tử *= để tạo bộ chọn thuộc tính khớp với tất cả các phần tử có giá trị thuộc tính chứa một giá trị được chỉ định.

HTML:

<p class = "course-java">KHÓA HỌC JAVA</p>
<P class = "course-php">KHÓA HỌC PHP</p>
<p class = "course-python">KHÓA HỌC PYTHON</p>
[class *= "course"] {
    color: #fff;
    background: red;
}

Bộ chọn trong ví dụ trên khớp với tất cả các phần tử HTML với thuộc tính class có giá trị chứa course.

Ví dụ: Bộ chọn này so khớp với các phần tử có thuộc tính class chứa course-java, course-php, course-python, v.v.

Bạn thấy bộ chọn thuộc tính này tiện lợi và dễ sử dụng chứ?

Tuy nhiên, tiện lợi là vậy nhưng bạn không nên lạm dụng nó. Bởi vì bộ chọn càng chính xác, càng ảnh hưởng đến hiệu suất.

Do đó, nó chỉ phù hợp với trường hợp rất đặc biệt.

Học tiếp: Border trong CSS3

Đọc thêm: Thuộc tính Opacity trong CSS

Thuộc tính opacity trong CSS

Độ mờ đục (opacity) bây giờ là một phần của đặc tả CSS3, nhưng nó đã có mặt từ rất lâu. Tuy nhiên, các trình duyệt cũ có nhiều cách khác nhau để kiểm soát độ mờ hoặc độ trong suốt.

Thuộc tính opacity trong CSS chỉ định độ mờ đục của một phần tử nào đó.

Độ mờ đục (opacity) bây giờ là một phần của đặc tả CSS3, nhưng nó đã có mặt từ rất lâu. Tuy nhiên, các trình duyệt cũ có nhiều cách khác nhau để kiểm soát độ mờ hoặc độ trong suốt.

Thuộc tính opacity trong CSS

Opacity trong Firefox, Safari, Chrome, Opera và IE9

Đây là cú pháp cập nhật nhất cho độ mờ đục (opacity) trong tất cả các trình duyệt hiện tại.

p {
    opacity: 0.7;
}

Quy tắc CSS trên sẽ làm cho phần tử <p> bị mờ mờ. Độ sắc nét chỉ còn 70% (hoặc độ trong suốt là 30%).

Thuộc tính opacity nhận giá trị từ 0,0 đến 1,0.

Thiết lập opacity: 1; sẽ làm cho phần tử hoàn toàn nguyên bản (tức độ trong suốt là 0%), trong khi opacity: 0; sẽ làm cho phần tử hoàn toàn trong suốt (tức là trong suốt 100%).

Opacity trong Internet Explorer 8 trở xuống

IE 8 và phiên bản cũ hơn hỗ trợ thuộc tính chỉ Microsoft filter: alpha để kiểm soát độ mờ đục của một phần tử.

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* fix cho IE7 */
}

Lưu ý: Bộ lọc alpha trong IE chấp nhận các giá trị từ 0 đến 100. Giá trị 0 làm cho phần tử hoàn toàn trong suốt (tức là 100% trong suốt), trong khi giá trị 100 làm cho phần tử hoàn toàn không trong suốt (tức là 0% trong suốt).

Opacity cho tất cả trình duyệt

Kết hợp cả hai bước trên, bạn sẽ có thể thiết lập độ trong suốt cho tất cả các trình duyệt.

p {
    opacity: 0.5;  /* Opacity trong các trình duyệt hiện đại */
    filter: alpha(opacity=50);  /* Opacity cho IE8 trở xuống */
    zoom: 1;  /* fix cho IE7 */
}

Cảnh báo: Việc thêm bộ lọc alpha để kiểm soát độ trong suốt trong IE 8 và các phiên bản thấp hơn sẽ tạo ra mã không hợp lệ trong CSS của bạn vì đây là thuộc tính chỉ của Microsoft, không phải thuộc tính CSS chuẩn.

Thiết lập Opacity cho ảnh

Bạn cũng có thể tạo hình ảnh trong suốt bằng cách sử dụng thuộc tính Opacity trong CSS.

img {
    opacity: 0.1;
}

Thay đổi opacity của hình ảnh khi di chuột qua

Ví dụ sau minh họa ứng dụng phổ biến của opacity trong CSS, trong đó độ mờ đục của hình ảnh thay đổi khi người dùng di chuyển con trỏ chuột qua hình ảnh.

// Bình thường cho mờ đi
img {
    opacity: 0.5;
}

// Khi di chuột qua thì cho sắc nét lên
img:hover {
    opacity: 1;
}

Thay đổi opacity cho phần tử

Khi sử dụng thuộc tính opacity trên một phần tử, không chỉ nền của phần tử bị mờ mờ đi mà tất cả các phần tử con của nó cũng bị ảnh hưởng.

Nó làm cho văn bản bên trong phần tử mờ đi, khó đọc nếu giá trị của độ mờ trở nên cao hơn.

Để tránh vấn đề này thì bạn nên sử dụng tách biệt opacity nếu không muốn nó tác động chung.

Sau đó chỉ cần sử dụng margin hoặc Position để căn chỉnh lại cho các phần tử con là được.

Ví dụ:

<div></div>
<p>Đoạn văn bản này được tách ra. Không bị ảnh hưởng bởi thuộc tính opacity</p>

Ở trên, ta có một div và một phần tử p.

Tuy nhiên, chúng ta tách nó ra, thay vì đặt p bên trong div.

Và sau đó sử dụng position để điều chỉnh vị trí của nó.

CSS:

div {
    width: 350px;
    height: 200px;
    float: left;
    background-color: blue;
    opacity: 0.1;
    position: absolute;
}
p {
    width: 300px;
    font-size: 18px;
    position: relative;
    top: 20px;
    left: 20px;
}

Như vậy, qua bài học này bạn đã biết cách sử dụng thuộc tính opactity trong CSS để kiểm soát độ mờ đục, quyết định cho nó mờ mờ hay trong suốt hoàn toàn.

Học tiếp: Bộ chọn thuộc tính trong CSS

Đọc thêm: Media Type trong CSS

Media Type trong CSS

CSS Media Types cho phép bạn định dạng nội dung trang web của mình để được trình bày chính xác trên nhiều loại thiết bị khác nhau như màn hình, bản in, … v.v.

CSS Media Typescho phép bạn định dạng nội dung trang web của mình để được trình bày chính xác trên nhiều loại thiết bị khác nhau như màn hình, bản in, … v.v.

CSS Media Type là gì?

Media Types trong CSS

CSS Media Types là một trong số các tính năng quan trọng nhất của CSS là bạn có thể chỉ định các quy tắc CSS riêng biệt cho các kiểu thiết bị kết xuất / kiểu kết xuất khác nhau.

Ví dụ, kết xuất để trình bày trên di động sẽ khác trên máy tính.

Kết xuất để in sẽ còn khác nữa.

Sử dụng media type là một trong những cách tốt nhất để xây dựng các trang Web thân thiện với máy in – Chỉ cần gán một quy tắc CSS khác cho loại ‘print‘.

Một số thuộc tính CSS chỉ được thiết kế cho một số phương tiện nhất định. Ví dụ: page-break-after chỉ áp dụng cho phương tiện được phân trang.

Tuy nhiên, có một số thuộc tính có thể được chia sẻ bởi các loại phương tiện khác nhau, nhưng có thể yêu cầu các giá trị khác nhau cho thuộc tính đó.

Ví dụ: Thuộc tính font-size có thể được sử dụng cho cả màn hình (screen) và phương tiện in (print), nhưng có thể với các giá trị khác nhau.

Một tài liệu thường cần một phông chữ lớn hơn trên màn hình máy tính so với giấy để dễ đọc hơn, các phông chữ sans-serif (không chân) cũng được coi là dễ đọc hơn trên màn hình, trong khi phông chữ serif (có chân) phổ biến để in.

Do đó, cần phải xác định tập hợp các quy tắc CSS để áp dụng cho một số loại kiểu kết xuất nhất định.

Dưới đây là ba phương pháp thường được sử dụng để chỉ định các media type

Phương pháp 1: Sử dụng quy tắc @media

Quy tắc @media được sử dụng để xác định các quy tắc CSS khác nhau cho các loại Media khác nhau trong một biểu định kiểu.

Theo sau @media thường là các danh sách các loại media được phân tách bằng dấu phẩy và khối khai báo CSS chứa các quy tắc bạn mong muốn.

Khai báo kiểu trong ví dụ dưới đây yêu cầu trình duyệt hiển thị nội dung body bằng phông chữ Arial 14 pixel trên màn hình (screen), nhưng trong trường hợp in, nó sẽ ở phông chữ Times 12 pt.

Tuy nhiên, giá trị của thuộc tính line-height được đặt thành 1.2 cho cả hai loại media:

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

Ghi chú: Các quy tắc CSS ngoài @media sẽ áp dụng chung. @media thì không hợp lệ trong CSS2.1.

Phương pháp 2: Sử dụng quy tắc @import

Quy tắc @import là một cách khác để thiết lập thông tin kiểu cho một phương tiện đích cụ thể.

Chỉ cần chỉ định các loại media được phân tách bằng dấu phẩy sau url() của các file CSS được import.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

Kiểu media print trong câu lệnh @import trên sẽ hướng dẫn trình duyệt tải một file CSS bên ngoài (print.css) và chỉ sử dụng các kiểu của nó khi in.

Lưu ý: Tất cả các câu lệnh @import phải xuất hiện ở đầu, trước bất kỳ khai báo CSS nào. Nếu có quy tắc CSS xung đột, quy tắc ở file CSS hiện tại luôn được ưu tiên hơn quy tắc CSS được import.

Phương pháp 3: Sử dụng phần tử <link>

Thuộc tính media trên phần tử <link> được sử dụng để chỉ định loại media đích. Và áp dụng các quy tắc CSS được liên kết.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

Trong ví dụ này, thuộc tính media chỉ thị cho trình duyệt tải một file CSS bên ngoài ‘screen.css‘ và chỉ sử dụng các quy tắc CSS của nó khi hiển thị trên màn hình.

Trong khi ‘print.css’ sẽ được sử dụng cho mục đích in ấn.

Mẹo: Bạn cũng có thể chỉ định nhiều loại media (mỗi loại được phân tách bằng dấu phẩy, ví dụ: media = “screen, print”)

Các loại media khác

Bảng sau liệt kê các loại media khác nhau có thể được sử dụng để nhắm mục tiêu các loại thiết bị khác nhau như máy in, thiết bị cầm tay, màn hình máy tính, v.v.

Loại Media Mô tả
allSử dụng cho tất cả các loại media
auralSử dụng cho loại thiết bị tương tác giọng nói và âm thanh
brailleSử dụng cho các thiết bị phản hồi xúc giác (chữ nổi)
embossedĐược sử dụng cho máy in chữ nổi phân trang
handheldĐược sử dụng cho các thiết bị nhỏ hoặc cầm tay – thường là các thiết bị màn hình nhỏ như điện thoại di động hoặc PDA.
printSử dụng cho máy in
projectionĐược sử dụng cho các bài thuyết trình được chiếu, ví dụ máy chiếu.
screenĐược sử dụng chủ yếu cho màn hình máy tính màu
ttyĐược sử dụng cho trong viễn thông, thiết bị đầu cuối hoặc thiết bị di động có khả năng hiển thị hạn chế.
tvĐược sử dụng cho các thiết bị loại tivi – màn hình có độ phân giải thấp, màu sắc, khả năng cuộn hạn chế, có sẵn âm thanh

Như vậy, qua bài này bạn đã biết cách tùy chỉnh CSS trên các loại thiết bị khác nhau, mục đích khác nhau.

Học tiếp: Thuộc tính Opacity trong CSS

Đọc thêm: Pesudo Element trong CSS

Pesudo Element trong CSS

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Pesudo Element trong CSS
Pesudo Element trong CSS

Pesudo Element là gì?

Pesudo Element (Phần tử giả) trong CSS cho phép bạn tạo kiểu cho các phần tử hoặc các phần của phần tử mà không cần thêm bất kỳ ID hoặc class nào vào chúng.

Nó sẽ rất hữu ích trong những trường hợp bạn chỉ muốn tạo kiểu cho chữ cái đầu tiên của đoạn văn hoặc bạn muốn chèn một số nội dung vào trước hoặc sau một phần tử nào đó, v.v. chỉ bằng cách thay đổi CSS.

CSS3 đã giới thiệu cú pháp dấu hai chấm (::) mới cho các pesudo element để phân biệt giữa chúng và các pesudo class.

Cú pháp của pesudo element như sau:

selector::pseudo-element { property: value; }

Tiếp sau đây là một số pesudo element phổ biến và cách làm việc với chúng

2. Pesudo class ::first-line

Pesudo class ::first-line sẽ giúp bạn có thể áp dụng các CSS cho dòng đầu tiên của một đoạn text.

Quy tắc CSS trong ví dụ sau định dạng dòng đầu tiên của văn bản trong một đoạn văn. Độ dài của dòng đầu tiên phụ thuộc vào kích thước của cửa sổ trình duyệt hoặc phần tử chứa nó.

HTML:

<p>
    Dòng đầu tiên trong đoạn văn bản này sẽ được tạo kiểu bởi sự chỉ định thông qua ::first-line. Dòng đầu tiên phụ thuộc vào kích thước của phần tử chứa nó hoặc cửa sổ trình duyệt.
</p>

CSS:

p {
    width: 300px;
}
p::first-line {
    color: red;
    text-transform: uppercase;
}

Lưu ý: Các thuộc tính CSS có thể áp dụng cho ::first-line là: Các thuộc tính font, các thuộc tính background, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

3. Pesudo element ::first-letter

Pesudo element ::first-letter giống như tên gọi của nó, được sử dụng để thêm CSS đặc biệt vào chữ cái đầu tiên của dòng đầu tiên của văn bản.

Quy tắc CSS trong ví dụ sau định dạng chữ cái đầu tiên của đoạn văn bản to hơn và in đậm.

HTML:

<p>Chữ cái đầu tiên của đoạn văn bản này sẽ được áp dụng css đặc biệt hơn thông qua ::first-letter</p>
p::first-letter {
    font-size: 50px;
    font-weight: bold;
}

Lưu ý #1: Pesudo element chỉ hoạt động nếu phần tử cha của nó là dạng block, dạng inline thì nó sẽ không hoạt động.

Lưu ý #2: Các thuộc tính chỉ áp dụng cho Pesudo element ::first-letter là: Các thuộc tính font, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (Chỉ khi float là none), color, margin and padding properties, border properties, background properties.

4. ::after và ::before

Pesudo element ::after::before có thể được sử dụng để chèn nội dung được tạo vào trước hoặc sau nội dung của phần tử nào đó.

Thuộc tính content được sử dụng cùng với các phần tử giả này, để chèn nội dung đã tạo.

Note: Ở bài trước, chúng ta đã sử dụng phần tử giả để thực hiện kỹ thuật clear-fix. Xem lại bài viết Căn chỉnh trong CSS để biết thêm rõ hơn.

Lưu ý: Để tăng khả năng đọc (tránh nhầm lẫn với pesudo class), trong CSS3 chúng ta sử dụng cú pháp ::after. Các trình duyệt vẫn chấp nhận :after như đã được giới thiệu trong CSS2.

Điều này rất tiện để làm cho phần tử phong phú thêm mà không cần chèn một phần tử thực vào trong HTML.

Bạn có thể chèn các chuỗi văn bản thông thường hoặc một đối tượng được nhúng như hình ảnh và các tài nguyên khác bằng cách sử dụng các pesudo element này.

Ví dụ:

CSS:

h1::before {
    content: url("images/sexy-girl-1.jpg");
}
h1::after {
    content: url("images/sexy-girl-2.jpg");
}

5. Kết hợp pesudo element và class khác

Nói chung, chúng ta chỉ cần tạo kiểu cho một đoạn văn bản nhất định hoặc các phần tử cấp khối khác với các pesudo element này.

Đây là tác dụng chính của pesudo element.

Các pesudo element có thể được kết hợp với các class khác để tạo ra hiệu ứng đặc biệt cho các phần tử có class đó.

Quy tắc CSS trong ví dụ sau sẽ hiển thị chữ cái đầu tiên của tất cả các đoạn văn có class = ‘article’ có màu đỏ và kích thước là 50px.

CSS:

p.article::first-letter {
    color: red;
    font-size: 50px;
}

Như vậy là qua bài này bạn đã biết thêm về cách sử dụng pesudo element trong CSS.

Trong lập trình web thực tế, để dễ dàng quản lý code hơn, các lập trình viên thường hạn chế đến mức tối đa việc thay đổi HTML.

Do đó, các pesudo class hay pesudo element rất hay được sử dụng.

Nếu bạn đang quan tâm và muốn chinh phục lĩnh vực lập trình web thì đừng bỏ qua KHÓA HỌC LẬP TRÌNH WEB (Full Stack) này nhé.

Học tiếp: Updating…

Đọc thêm: Pesudo class trong CSS

Pesudo class trong CSS

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Pesudo class trong CSS
Pesudo class trong CSS

1. Pesudo class là gì?

Pesudo class là các lớp giả cho phép bạn nhắm mục tiêu và tạo kiểu cho các trạng thái động của một phần tử như hover, active, focus cũng như các phần tử đang tồn tại trong DOM tree mà không cần thêm bất kỳ ID hoặc class và chúng.

Ví dụ: Nhắm mục tiêu các phần tử con đầu tiên (first child) hoặc cuối cùng (last child).

Một pesudo class bắt đầu bằng dấu hai chấm (:).

Cú pháp của nó như sau:

selector:pseudo-class { property: value; }

Phần sau đây, bạn sẽ được học, tìm hiểu về các pesudo class được sử dụng phổ biến nhất.

2. Pesudo class với thẻ a

Sử dụng pesudo class cho thẻ <a> có thể được dùng theo những cách khác nhau:

Các pesudo class này cho phép bạn tạo kiểu cho các liên kết không được truy cập khác với những liên kết đã được truy cập.

Kỹ thuật tạo kiểu phổ biến nhất là xóa gạch chân khỏi các liên kết đã truy cập.

HTML:

<a href="https:/niithanoi.edu.vn/" class"">Học lập trình</a>

CSS:

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

Hoặc đổi màu cho link đã truy cập.

a:link {
    color: blue;
}
a:visited {
    color: brown;
}

Một số pesudo class là động – chúng được áp dụng dựa theo tương tác của người dùng với liên kết như khi hover hoặc là focus, v.v.

HTML:

<a href="https://niithanoi.edu.vn/">Học lập trình</a>

CSS:

a:visited {
    color: brown;
}
a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

Các pesudo class này thay đổi cách các liên kết được hiển thị để đáp ứng với các hành động của người dùng.

  • :hover áp dụng khi người dùng di con trỏ lên phần tử, nhưng không chọn nó.
  • :active áp dụng khi phần tử được kích hoạt hoặc click vào.
  • :focus áp dụng khi phần tử được focus (tập trung) vào

Lưu ý: Để làm cho các lớp giả này hoạt động hoàn hảo, bạn phải xác định chúng theo thứ tự chính xác -:link,:visited,:hover,:active,:focus.

3. Pesudo class :first-child

Lớp giả :first-child sẽ khớp với một phần tử là phần tử con đầu tiên của một số phần tử khác.

Bộ chọn ol li:first-child trong ví dụ bên dưới sẽ nhắm đến phần tử <li> đầu tiên trong <ol>. Sau đó, áp dụng các thuộc tính CSS cho nó.

HTML:

<ol>
    <li>Khóa học Java</li>
    <li>Khóa học PHP</li>
    <li>Khóa học Python</li>
</ol>

CSS:

ol li:first-child {
    text-transform: uppercase;
}

Thử chạy ví dụ trên, bạn sẽ text thấy thẻ li đầu tiên đã được chuyển đổi thành chữ viết HOA.

Lưu ý: Để làm cho :first-child hoạt động trong IE 8 và các phiên bản cũ hơn thì, <!DOCTYPE> phải được khai báo ở đầu tài liệu.

4. Pesudo class :last-child

Lớp giả :last-child khớp với một phần tử con cuối cùng của phần tử nào đó.

Bộ chọn ul li:last-child trong ví dụ dưới đây sẽ chọn đến phần tử <li> cuối cùng trong phần tử <ul>, sau đó, áp dụng các quy tắc css cho nó.

HTML:

<ul>
    <li>Khóa học Java</li>
    <li>Khóa học PHP</li>
    <li>Khóa học Python</li>
</ul>

CSS:

ul li:last-child {
    text-transform: uppercase;
}

Lưu ý: Bộ chọn CSS :last-child không hoạt động trong IE 8 và các phiên bản cũ hơn. Nó được hỗ trợ trong IE 9 trở lên.

5. Pesudo class :nth-child

Trong phiên bản CSS3, có một lớp giả mới :nth-child cho phép bạn nhắm mục tiêu một hoặc nhiều phần tử con cụ thể của một phần tử cha nhất định.

Cú pháp cơ bản của bộ chọn này có thể được đưa ra với :nth-child(N)

Trong đó N là đối số, có thể là số, từ khóa even (chẵn) hoặc odd (lẻ) hoặc biểu thức có dạng xn + y trong đó x và y là các số nguyên (ví dụ: 1n, 2n, 2n + 1,…)

HTML:

<table>
    <tr>
        <th>STT</th>
        <th>Họ và tên</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Vi Đại Doanh</td>
        <td>vidaidoanh@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Hoàng Công Việt</td>
        <td>hoangcongviet@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Trần Văn Hải</td>
        <td>tranvanhai@mail.com</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Nguyễn Linh Trang</td>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
</table>

CSS:

table{
    margin: 30px;
    border-collapse: collapse;
}
table tr{
    border-bottom: 1px solid #666;
}
table tr th, table tr td{
    padding: 10px;
}
table tr:nth-child(2n) td{
    background: #f2f2f2;
}

Các quy tắc CSS trong ví dụ trên chỉ đơn giản làm thay đổi background của hàng chẵn (Bảng này có 5 hàng, bao gồm cả tiêu đề) mà không cần thêm vào phần tử <tr> đó class nào cả.

Mẹo: Bộ chọn CSS :nth-child(N) rất hữu ích trong các trường hợp bạn phải chọn các phần tử xuất hiện bên trong cây tài liệu trong một khoảng hoặc mẫu cụ thể như ở vị trí chẵn hoặc lẻ, v.v.

6. Pesudo class :lang

Peseudo-class :lang cho phép xây dựng các bộ chọn dựa trên cài đặt ngôn ngữ cho các thẻ cụ thể.

Lớp giả :lang trong ví dụ dưới đây xác định dấu ngoặc kép cho phần tử <q>.

HTML:

<p><q lang="no">Ai cũng nên học lập trình!</q> - Steve Jobs.</p>

CSS:

q:lang(no) {
    quotes: "~" "~";
}

Lưu ý: IE8 trở về trước không hỗ trợ :lang. IE 8 có hỗ trợ nếu <!DOCTYPE> được chỉ định.

7. Kết hợp Pesudo class với CSS class

Bạn hoàn toàn có thể kết hợp Pesudo class với CSS class để định dạng cho các phần tử của website.

HTML:

<a class="red" href="https://niithanoi.edu.vn/">Học lập trình</a>

CSS:

a.red:link {
    color: #ff0000;
}

Các pesudo class rất hữu ích khi bạn chỉ muốn thực hiện thay đổi trên CSS mà không muốn thêm thắt vào HTML.

Nó sẽ giúp bạn tiết kiệm thời gian làm việc, tránh được nhiều lỗi phát sinh khi lập trình web đấy.

Học tiếp: Pesudo element trong CSS

Đọc thêm: Căn chỉnh trong CSS (CSS Align)

Căn chỉnh trong CSS | CSS Alignment

Hôm nay bạn sẽ được học về các phương pháp căn chỉnh CSS phổ biến và 3 giải pháp clear float mà đã làm bao nhiêu lập trình viên đau đầu.

Một trong những thứ quan trọng nhất của Lập trình Front end đó chính là xây dựng bố cục, căn chỉnh các phần tử để tạo ra một bố cục thống nhất, mạch lạc, thân thiện với người dùng.

Để làm được điều đó, CSS có một số thuộc tính có thể được sử dụng để căn chỉnh các phần tử trên trang web.

Các phương pháp căn chỉnh trong CSS

1. Căn chỉnh Text

Văn bản bên trong các phần tử cấp khối (Block – element) có thể được căn chỉnh bằng cách thiết lập thuộc tính text-align đúng cách.

HTML:

<h1>Tiêu đề: Căn chỉnh văn bản</h1>
<p>Đây là một đoạn văn bản sẽ được căn chỉnh đều 2 bên (như trong tài liệu word). Để làm như thế, chúng ta sử dụng thuộc tính text-align trong CSS và thiết lập giá trị justify cho nó (Ngoài ra còn có các giá trị khác như: left, right, center)</p>

CSS:

h1 {
    text-align: center;
}
p {
    width: 300px;
    text-align: justify;
}

Kết quả chúng ta được như hình dưới đây:

Ví dụ minh họa về căn chỉnh text với thuộc tính text-align

Để hiểu rõ hơn về việc căn chỉnh text, vui lòng đọc lại bài viết CSS Text bạn nhé.

2. Căn giữa với thuộc tính margin

Căn giữa của phần tử cấp khối (block-level) là một trong những kỹ thuật có ý nghĩa quan trọng nhất của thuộc tính margin trong CSS.

Ví dụ: Bạn có thể căn chỉnh thẻ div (theo chiều ngang) ở giữa bằng cách thiết lập thuộc tính margin thành auto.

HTML:

<div>Thẻ DIV này sẽ được căn giữa theo chiều ngang</div>

CSS:

div {
    width: 50%;
    margin: 0 auto;
    padding: 15px;
    background: yellow;
}

Kết quả ta được như hình:

Ví dụ minh họa về căn giữa với thuộc tính margin

Lưu ý: Giá trị tự auto của thuộc tính margin sẽ không hoạt động trong IE 8 và các phiên bản cũ hơn, trừ khi <!DOCTYPE> được chỉ định.

3. Căn chỉnh sử dụng thuộc tính position

Thuộc tính postion trong CSS kết hợp với thuộc tính left, right, top bottom có thể được sử dụng để căn chỉnh các phần tử theo khung nhìn của tài liệu hoặc phần tử cha chứa nó.

HTML:

<p class="up">Đoạn văn bản này được căn ở ngoài cùng bên trái</p>
<p class="down">Đoạn văn bản này được căn ở ngoài cùng bên phải</p>

CSS:

p {
    width: 200px;
    padding: 10px;
}
.up {
    background: red;
    position: absolute;
    left: 0;

}
.down {
    background: yellow;
    position: absolute;
    right: 0;
}

Kết quả ta được như hình:

Để tìm hiểu thêm về cách định vị với thuộc tính position, hãy xem bài viết Position trong CSS

4. Căn chỉnh với thuộc tính float

Như bạn đã được học trong bài thuộc tính Float trong CSS:

  • Thuộc tính float CSS có thể được sử dụng để căn chỉnh một phần tử ở bên trái (left) hoặc bên phải (right) của khối chứa nó.

Do đó, nếu một phần tử được chuyển sang bên trái, nội dung sẽ chảy dọc theo bên phải của nó.

Ngược lại, nếu phần tử được đẩy sang bên phải, nội dung sẽ chảy dọc theo bên trái của nó.

HTML:

<div class="red">Khối được đẩy sang bên trái</div>
<div class="yellow">Khối được đẩy sang bên phải</div>

CSS:

div {
    width: 200px;
    padding: 10px;
}
div.red {
    float: left;       
    background: red;
}
div.yellow{
    float: right;
    background: yellow;
}

Ta được kết quả như hình:

5. Clear float

Một trong những điều khó hiểu nhất khi làm việc với các bố cục dựa trên float là phần tử cha tự động bị thu gọn.

Phần tử cha không tự động lớn lên để chứa các phần tử nổi.

Mặc dù, điều này không phải lúc nào cũng rõ ràng nếu phần tử cha không chứa bất kỳ hình nền hoặc đường viền trực quan nào, nhưng điều quan trọng là phải biết và phải xử lý để ngăn chặn vấn đề bố cục bị phá vỡ.

Hãy xem hình minh họa bên dưới:

Ví dụ minh họa phần tử bị tràn (phần tử cha tự động thu gọn) khi sử dụng float
Ví dụ minh họa phần tử bị tràn (phần tử cha tự động thu gọn) khi sử dụng float

Bạn có thể thấy phần tử div không tự động lớn lên để chứa các ảnh được float. Sự cố này có thể được khắc phục bằng cách clear float sau các phần tử float trong vùng chứa nhưng trước thẻ đóng của phần tử vùng chứa.

Để làm được điều này, chúng ta có 3 giải pháp:

Giải pháp #1: Float container

Cách dễ nhất để khắc phục sự cố này là áp dụng thuộc tính float cho phần tử cha chứa các phần tử float.

HTML:

<div class="container">
    <p class="red">Đẩy phần tử sang trái</p>
    <p class="yellow">Đẩy phần tử sang phải</p>
</div>

CSS:

.container{
    float: left;
    background: grey;
    border: 1px solid black;      
}
p {
    width: 200px;        
    margin: 10px;
    padding: 10px;
}
.red {
    float: left;       
    background: red;
}
.yellow {
    float: right;
    background: yellow;
}

Kết quả ta được như hình:

Cảnh báo: Giải pháp này sẽ chỉ hoạt động trong một số trường hợp hạn chế, vì việc áp dụng float cho phần tử cha có thể tạo ra kết quả không mong muốn.

Giải pháp #2: Sử dụng phần tử DIV trống

Đây là một cách cũ nhưng là một giải pháp dễ dàng và hoạt động trên mọi trình duyệt.

HTML:

<div class="container">
    <p class="red">Đẩy phần tử sang trái.</p>
    <p class="yellow">Đẩy phần tử sang phải</p>
    <div class="clearfix"> </div>
</div>

CSS:

.container{
    background: grey;
    border: 1px solid black;      
}
.clearfix {
    clear: both;
    visibility: hidden;
    height: 0;
}
p {
    width: 200px;        
    margin: 10px;
    padding: 10px;
}
.red {
    float: left;       
    background: red;
}
.yellow {
    float: right;
    background: yellow;
}

Kết quả ta được như hình:

Giải pháp #3: Sử dụng phần tử giả :after

Phần tử giả :after kết hợp với thuộc tính content đã được sử dụng rất rộng rãi để giải quyết các vấn đề về float.

Đây là giải pháp:

HTML:

<div class="container clearfix">
    <div class="red">Floated to left.</div>
    <div class="yellow">Floated to right.</div>
</div>
<p><strong>Chú ý:</strong> IE 7 trở về trước không hỗ trợ phần tử :after, IE 8 có hỗ trợ nhưng phải khai báo <code>!DOCTYPE</code> rõ ràng </p>

CSS:

.container{
    background: grey;
    border: 1px solid black;      
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.container div {
    width: 200px;        
    margin: 10px;
    padding: 10px;
}
div.red {
    float: left;       
    background: red;
}
div.yellow {
    float: right;
    background: yellow;
}

Kết quả ta được như hình:

Như vậy, qua bài viết này, bạn đã biết cách căn chỉnh các phần tử với CSS, các sắp xếp bố cục với những thuộc tính cốt lõi của CSS.

Ngoài ra, bạn còn học được 3 giải pháp để giải quyết vấn đề phần tử bị tràn với clear float. Đây chắc chắn là những phương pháp cực kỳ hữu ích giúp bạn kiểm soát bố cục tốt như một lập trình viên Front end thực thụ.

Chúc bạn sớm trở thành một lập trình viên giỏi.

Học tiếp: Pesudo class

Đọc thêm: Float trong CSS

Thuộc tính float trong CSS

Thuộc tính float của CSS chỉ định sắp xếp các phần tử theo chiều ngang. Đây là thuộc tính dàn trang căn bản mà bất cứ lập trình viên phát triển web nào cũng phải biết.

Thuộc tính float của CSS chỉ định sắp xếp phần tử theo chiều ngang. Đây là thuộc tính dàn trang căn bản mà bất cứ lập trình viên phát triển web nào cũng phải biết.

Thuộc tính float trong CSS
Thuộc tính float trong CSS

Mặc dù với nhiều phương pháp CSS hiện đại người ta đã ít sử dụng Float. Nhưng hiểu biết về nó là không thể thiếu được.

Với thuộc tính float bạn có đẩy các phần tử sang trái hoặc phải, nhưng nó chỉ áp dụng cho các phần tử tạo ra các hộp không được định vị tuyệt đối (absolute).

Xem bài viết: CSS Postion để biết thêm chi tiết về định vị tuyệt đối.

Bất kỳ phần tử nào theo sau phần tử float sẽ chảy xung quanh phần tử float ở phía bên kia.

Thuộc tính float có thể có một trong ba giá trị:

  • left: Phần tử được đẩy về phía bên trái của khối chứa nó.
  • right: Phần tử được đẩy về phía bên phải của khối chứa nó.
  • none: Loại bỏ thuộc tính float khỏi một phần tử.

Cách sử dụng thuộc tính float trong CSS

Một phần tử float sẽ được đưa ra khỏi luồng thông thường và chuyển sang cuối cùng bên trái hoặc bên phải trong không gian có sẵn của phần tử chứa nó.

Các phần tử khác thường chảy xung quanh các phần tử float, trừ khi chúng bị ngăn cản bởi thuộc tính clear.

Các phần tử float được đẩy theo theo chiều ngang, có nghĩa là một phần tử chỉ có thể được đẩy sang trái hoặc sang phải, không thể đẩy lên trên hoặc xuống dưới.

Ví dụ:

HTML:

<p><img src="/images/logo.jpg"/>Đây là ví dụ minh họa sử dụng thuộc tính float trong CSS. Ở đây, chúng ta sẽ áp dụng thuộc tính float: left cho phần tử img. Khi đó chúng ta được kết quả như thế này</p>

CSS:

img {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
}

Lưu ý: Nhớ lưu 1 ảnh với tên là logo.jpg ở thư mục images (cùng cấp với file html) để có thể thấy thuộc tính float hoạt động rõ hơn nhé.

Và, nếu một số phần tử float được đặt liền nhau, chúng sẽ nổi cạnh nhau nếu có đủ khoảng trống theo chiều ngang.

Nếu không có đủ chỗ, phần tử được được dịch chuyển xuống hàng bên dưới dưới cho đến khi khớp hoặc không còn phần tử float nào nữa.

HTML:

<ul>
    <li class="thumbnail"><img src="/images/a.jpg"></li>
    <li class="thumbnail"><img src="/images/b.jpg"></li>
    <li class="thumbnail"><img src="/images/c.jpg"></li>
    <li class="thumbnail"><img src="/images/d.jpg"></li>
</ul>

CSS:

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

Tắt float bằng cách sử dụng thuộc tính clear

Các phần tử tiếp sau phần tử float sẽ chảy xung quanh nó, nó có thể phá vỡ bố cục của bạn. Để giải quyết vấn đề này, thuộc tính clear chỉ định không cho phép mặt nào của xuất hiện phần tử float.

HTML:

<p>Đẩy phần tử sang bên trái.</p>
<p class="clear">Không phần tử float nào được phép ở bên trái phần tử này</p>

CSS:

.clear {
    clear: left;
}
p {
    float: left;
    margin: 10px; 
    padding: 10px;
    background: yellow;
}

Lưu ý: Thuộc tính này chỉ có thể xóa một phần tử khỏi các hộp float trong cùng một khối. Nó không xóa phần tử khỏi các hộp float con trong chính phần tử đó. Để biết thêm về cách xóa float, bạn sẽ được học trong bài hướng dẫn về CSS Alignment.

Học tiếp: Thuộc tính Float trong CSS

Đọc thêm: Thuộc tính z-index trong CSS