12 Mẹo CSS nâng cao giúp bạn viết CSS tốt hơn

12 Mẹo CSS nâng cao giúp bạn viết CSS tốt hơn

Nếu bạn đã học được kha khá các thuộc tính về CSS hay CSS3 xong mà vẫn cảm thấy khó khăn trong việc viết CSS cho trang web của mình thì bạn đã tìm đúng bài viết này.

 

Bài viết này mình sẽ hướng dẫn bạn 12 mẹo CSS nâng cao, nó sẽ giúp bạn giải quyết rất nhiều vướng mắc khi viết CSS.

 

12 Mẹo CSS Nâng cao giúp bạn viết CSS tốt hơn

12 Mẹo CSS Nâng cao giúp bạn viết CSS tốt hơn

Chúng ta sẽ bắt đầu ngay.

 

LƯU Ý!

“ĐỂ XEM ĐƯỢC CODE MẪU. BẠN CẦN MỞ TAB KHÁC, VÀO CODEPEN.IO (VƯỢT CAPTCHA) TRƯỚC VÀ F5 LẠI BÀI VIẾT”


 

Verical padding liên quan đến chiều rộng chứ không phải chiều cao.

Cụ thể để thấy vertical padding liên quan đến chiều rộng chúng ta hãy xem ví dụ.
 

 

See the Pen <a data-cke-saved-href='https://codepen.io/vikhanhkhanh/pen/ZoKrKQ/' href='https://codepen.io/vikhanhkhanh/pen/ZoKrKQ/' rel="nofollow">Vertical padding</a> by Vi Khánh (<a data-cke-saved-href='https://codepen.io/vikhanhkhanh' href='https://codepen.io/vikhanhkhanh' rel="nofollow">@vikhanhkhanh</a>) on <a data-cke-saved-href='https://codepen.io' href='https://codepen.io' rel="nofollow">CodePen</a>.

 


Trong đoạn code trên mình lấy 1 div lớn làm container có width: 200px;height: 600px;

 

Bạn hãy theo dõi chỉ số widthheight để rõ hơn.

 

  • Trong khoi1 mình đã để padding-top: 100%;

  • khoi2padding-top: 50%;

     


Tuy nhiên, kết quả ở đây bạn có thể thấy rõ, padding-top: 100%; là bằng 200pxpadding-top: 50%; là bằng 100px.

 

Vậy, ở đây, padding-top là chỉ số gắn với chiều rộng của phần tử cha, chứ không phải là theo chiều cao.

 

Biết được điều này chúng ta dễ dàng tạo ra các yếu tố giúp giữ tỷ lệ width / height:

 

.square

 {

    

width

100%

;

    

height

0

;

    

padding-bottom

100%

;

}
 


 

Opacity có thể thay đổi việc sắp xếp theo thứ tự của z-index

Đây là sự thực.

 

Giả sử bạn có 3 khối div. Mỗi khối được thêm thuộc tính z-index để chúng xếp chèn lên nhau.


 

See the Pen <a data-cke-saved-href='https://codepen.io/vikhanhkhanh/pen/qYmxwY/' href='https://codepen.io/vikhanhkhanh/pen/qYmxwY/' rel="nofollow">Z-index order and opacity</a> by Vi Khánh (<a data-cke-saved-href='https://codepen.io/vikhanhkhanh' href='https://codepen.io/vikhanhkhanh' rel="nofollow">@vikhanhkhanh</a>) on <a data-cke-saved-href='https://codepen.io' href='https://codepen.io' rel="nofollow">CodePen</a>.


 

Ở đây chúng ta có 3 khối:

 

  • red (z-index: 10;)

  • green (z-index: 2;)

  • và blue (z-index: 1;)

Theo thứ tự thì chúng ta có khối green chèn lên trên khối blue và khối red chèn lên trên tất cả.

 

Bây giờ chúng ta sẽ thêm thuộc tính opacity: 0.99; vào khối red. Kết quả nhận được là khối red nằm bên dưới tất cả.

 

Để giải thích điều này chúng ta có lẽ sẽ cần tới 1 bài viết khác. Ở bài viết này mình chỉ tập trung giới thiệu về các mẹo CSS.

 

Lề trùng lặp (margins overlap)

Chúng ta có ví dụ sau:

 

<

div

 

style

=

margin-bottom: 20px

>

foo

</

div

>

<

div

 

style

=

margin-top: 20px

>

bar

</

div

>

 

Kết quả được hiển thị như trong hình.


 

See the Pen &amp;amp;lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh/pen/yjbKoz/' href='https://codepen.io/vikhanhkhanh/pen/yjbKoz/' rel=&quot;nofollow&quot;&amp;amp;gt;Margins overlap&amp;amp;lt;/a&amp;amp;gt; by Vi Kh&aacute;nh (&amp;amp;lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh' href='https://codepen.io/vikhanhkhanh' rel=&quot;nofollow&quot;&amp;amp;gt;@vikhanhkhanh&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a data-cke-saved-href='https://codepen.io' href='https://codepen.io' rel=&quot;nofollow&quot;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.


 

Bạn có thể thấy, ở đây khối div có khoảng cách với nhau là 20px mà không phải là cộng dồn thành 40px.

 

Tuy nhiên, sẽ có những ngoại lệ:

 

1. Phần tử sử dụng float

2. Phần tử sử dụng position: absolute;

3. Phần tử có thuộc tính inline-block

4. Các phần tử có thuộc tính overflow

5. Phần tử đã clear

6. Phần tử gốc (root)

 

Thuộc tính CSS tùy chỉnh và biến

Sử dụng SASS hoặc LESS chúng ta có thể có sức mạnh phi thường của của thuộc tính CSS tùy chỉnh và biến ở trong bộ tiền xử lý đó.

 

> Đọc thêm ngay: HỌC SASS (CSS) trong 10 phút

Nhưng có một vài điểm khác biệt.

 

// bạn có thể thiết lập thuộc tính tùy chỉnh như vậy:

:root

 {

    

–foo

#000

;

}

button

 {

    

background-color

var

(

–foo

); 

//background màu #000

}
 

Chúng có tính kế thừa, vì vậy, nếu bạn gán lại cho biến cục bộ nó sẽ ảnh hưởng đến tất cả các phần tử con và ngược lại trong bộ tiền xử lý.

Trình duyệt sẽ tính toán lại tất cả các biến và biểu thức có thể xảy ra.

 

Bạn có thể sử dụng các dấu gạch chéo ngược bằng dấu phẩy, bạn có thể ngăn xếp nhiều lần dự phòng sau dấu phẩy, thậm chí các biến khác:

 

.foo

 {

    

color

var

(

—-my-var

‘blue’

);

}
 

Điều này dẫn chúng ta đến sự khác biệt chính từ bộ tiền xử lý: Biến CSS nhận thức được cấu trúc của DOM và tính dynamic.

 

:root

 {

    

–default-color

#000000

;

}

header

 {

    

–primary-color

#ff0000

;

}

a

 {

    

color

var

(

–primary-color

–default-color

);

}
 

 

<

a

 

href

=

“”

>

this is black

</

a

>

 


 

<

header

>

    

<

a

 

href

=

“”

>

this is red.

</

a

>

</

header

>

 


 

Trái ngược với ví dụ đầu tiên về khả năng kế thừa, ví dụ này dựa trên tính kế thừa từ cha.

 

Thẻ a sẽ không có màu đỏ như màu đã khai báo trong header, vì nó không nằm trong header.

Và nó có thiết lập thêm lựa chọn màu thứ hai.
 

 

See the Pen &amp;lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh/pen/RyVyBg/' href='https://codepen.io/vikhanhkhanh/pen/RyVyBg/' rel=&quot;nofollow&quot;&amp;gt;CSS custom properties and variables&amp;lt;/a&amp;gt; by Vi Kh&aacute;nh (&amp;lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh' href='https://codepen.io/vikhanhkhanh' rel=&quot;nofollow&quot;&amp;gt;@vikhanhkhanh&amp;lt;/a&amp;gt;) on &amp;lt;a data-cke-saved-href='https://codepen.io' href='https://codepen.io' rel=&quot;nofollow&quot;&amp;gt;CodePen&amp;lt;/a&amp;gt;.


 

Hơn nữa, chúng cũng có thể dễ dàng thay đổi bằng javascript:

 

// lấy biến từ kiểu inline style

element

.

style

.

getPropertyValue

(

“—-my-var”

);

// set biến trên kiểu inline style

element

.

style

.

setProperty

(

“–my-var”

jsVar

 + 

4

);
 

*Được hỗ trợ kể từ Edge15.


 

Vertical align: top | middle | bottom

Vertical-align: top | middle | bottom: hoạt động cho inline (và cả inline-block) và table-cell, đó không phải là cách đúng để căn chỉnh phần tử bên trong phần tử gốc theo cách mà người ta có thấy một cách trực quan.
 

Trong trường hợp này, hãy sử dụng flexbox.
 


Đọc ngay:

Tự học Flexbox (Toàn Tập)


 

Height: 100% có thể không làm đúng những gì bạn nghĩ

Trong nhiều trường hợp đặt height: 100%; không mang lại kết quả như bạn mong đợi vì chiều cao của phần tử gốc chưa được thiết lập.

 

Ví dụ:

 

<

html

>

    

<

body

>

        

<

div

 

style

=

height: 100%; background: red;

></

div

>

    

</

body

>

</

html

>

 

Trong trường hợp này chiều cao của bodyhtml chưa được thiết lập.

Do đó thuộc tính height: 100%; của khối div trên không xác định được chiều cao gốc là như thế nào.

 

Thế nên, sẽ không hoạt động đúng như bạn mong muốn.

 

ID > Class

Kiểu id sẽ ghi đè tất cả các kiểu class.

Điều này là do id là duy nhất, nó chính xác hơn class, xem ví dụ sau:

 

#foo

 { 

color

red

; } 

.bar

 { 

color

green

; }
 


 

<

h1

 

id

=

“foo”

 

class

=

“bar”

>

This will be red not green

</

h1

>

 

Trong ví dụ này, màu của h1 sẽ là màu đỏ thay vì màu xanh (mặc dù .bar được viết bên dưới nhằm mục đích ghi đè).

 

Nhắm mục tiêu theo thuộc tính

Bạn có thể nhắm mục tiêu vào các thuộc tính cụ thể và nội dung của chúng, ví dụ như nội dung thuộc tính src hoặc href.

 

// Nhắm mục tiêu vào các thuộc tính có giá trị kết thúc bằng .zip

a

[href$=”.zip” i] { }

// Nhắm mục tiêu vào thuộc tính có giá trị chứa “google.com”

[

href

*=

google.com

] { 

color

red

; }
 

Điều này rất hữu ích khi gỡ lỗi, ví dụ như hiển thị hình ảnh không có thuộc tính Alt hoặc trống:

 

img:not

([

alt

]) {

    

border

2px

 

dashed

 

red

;

}

img

[

alt

=

“”

] {

    

border

2px

 

dashed

 

red

;

}
 


 

Nếu bạn đang sử dụng Angular, kiểu CSS Selector này rất hữu ích khi muốn nhắm mục tiêu một số thành phần chứa [ng-click].

Hoặc muốn nhắm mục tiêu bắt đầu bằng “http” hoặc “https“.
 


Tham khảo ngay:

8 Loại CSS Selector cần phải biết


 

Các giá trị trục Horizontal / Vertical không nhất quán.


 

Khi khai báo giá trị cho trục ngang và trục dọc, thường là số đầu tiên khai báo giá trị dọc và thứ hai là chiều ngang.

Ví dụ: Trong padding: 10px 20px;, 10px ở trên và dưới, 20px là trái và phải).

Điều này đúng với padding, margin, border, v.v.. và khá nhiều thứ.

 

… Ngoại trừ border-spacing (khoảng cách đường viền) trong các bảng, trong đó:

 

  • Số đầu tiên đặt cho giá trị ngang

  • Giá trị dọc là số thứ hai…


 

Nhiều background

Bạn có thể thêm nhiều background vào một phần tử duy nhất và định vị chúng hoàn toàn khác nhau, chỉ cần tách biệt bằng dấu phẩy như sau:

 


background: url(‘name.png’) 

no-repeat

 

center

 50px,

            url(‘name2.png’) 

no-repeat

 bottom top;
 

* Hỗ trợ từ IE11


 

Xếp chồng hình động


 

Tương tự như background, bạn cũng có thể chồng hình ảnh động CSS:

 

@keyframes

 

foo

 { 

    

0%

 { 

opacity

0

; } 

    

100%

 { 

opacity

1

; } 

}

@keyframes

 

bar

 { 

    

0%

 { 

transform

translateX

(

-100px

); } 

    

100%

 { 

transform

translateX

(

0px

); } 

}

.element

 {

    

animation

: foo 

2s

 

0s

, bar 

1s

 

0s

;

}
 


 

Hành vi lạ của “position: fixed;” và “translateZ”.


 

Thêm transform: translateZ(0); vào container có chứa một phần tử có position: fixed; làm cho phần tử cố định căn chỉnh với container thay vì window.

 

Như ví dụ dưới đây.
 

 

See the Pen &lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh/pen/deWKJm/' href='https://codepen.io/vikhanhkhanh/pen/deWKJm/' rel=&quot;nofollow&quot;&gt;TranslateZ and position: fixed behavior&lt;/a&gt; by Vi Kh&aacute;nh (&lt;a data-cke-saved-href='https://codepen.io/vikhanhkhanh' href='https://codepen.io/vikhanhkhanh' rel=&quot;nofollow&quot;&gt;@vikhanhkhanh&lt;/a&gt;) on &lt;a data-cke-saved-href='https://codepen.io' href='https://codepen.io' rel=&quot;nofollow&quot;&gt;CodePen&lt;/a&gt;.


 

Ở đây, phần tử cha của khối fixed đang căn theo window. Nhưng sau khi thêm thuộc tính transform: translateZ(0) thì nó bây giờ căn theo khối div cha.

 

Chúc mừng bạn đã biết thêm nhiều mẹo CSS Nâng cao!


 

Trên đây là 12 mẹo CSS Nâng cao rất hữu ích trong quá trình lập trình Front end hay lập trình web.

 

*Note: Nếu bạn đang muốn có kỹ năng tốt hơn thì tham khảo ngay khóa học Fullstack (Gồm cả Front end và Back end) tại đây.

Khóa học PHP Full stack

Khóa học JAVA Full stack

 

Mình nghĩ điều khó khăn nhất khi viết CSS là do những hành vi lạ, không rõ ràng khiến nhiều khi CSS của bạn hoạt động không như mong muốn.

Nhưng bây giờ, với 12 mẹo CSS nâng cao này bạn đã biết cách nó hoạt động và sửa chữa rồi.

Hi vọng bạn có thể nắm bắt và vận dụng được trong các trường hợp khác nhau.

 

Có thể bạn muốn xem:

CSS Nâng Cao: Advanced Positioning (Định vị nâng cao)

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 – 0383.180086

Email: [email protected]

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

 

#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python