20 ESSENTIAL CSS TRICKS EVERY DESIGNER SHOULD KNOW

Nếu bạn là một lập trình viên lập trình web thì chắc chắn các bạn phải có kiến thức cơ bản về html, và CSS. Chính vì tầm quan trọng của nó hôm nay mình sẽ giới thiệu cho các bạn một stricks khá nay mà các lập trình web nên biết đặc biệt là những lập trình viên Front end.

1. Absolute positioning Nếu bạn muốn kiểm soát vị trí của một element trên trang web của mình. Bạn muốn nó nằm ở góc trái, góc phải, hay ở giữa màn hình thì thuộc tính position: absolute là chìa khóa để bạn thực hiện điều đó. Nếu bạn nghĩ trình duyệt của mình là một hộp giới hạn lớn, định vị tuyệt đối cho phép bạn kiểm soát chính xác vị trí trong hộp đó. Sử dụng trên cùng, bên phải, dưới cùng và bên trái, kèm theo một giá trị pixel để kiểm soát vị trí của từng element.

position:absolute;
top:20px;
right:20px;

CSS ở trên đặt vị trí của một phần tử giữ 20px từ cạnh trên và bên phải của trình duyệt của bạn. Bạn cũng có thể sử dụng định vị tuyệt đối bên trong div.

2. • • selector Các * cho phép bạn chọn tất cả các yếu tố của một selector cụ thể. Ví dụ: nếu bạn đã sử dụng * p và sau đó thêm các kiểu CSS vào đó, nó sẽ thực hiện điều đó cho tất cả các thành phần trong tài liệu của bạn bằng thẻ

       . Điều này giúp dễ dàng style cho các phần của trang web của bạn trên toàn bộ giao diện.

3. Overriding all styles Điều này nên được sử dụng một cách hợp lý và hạn chết, bởi vì nếu bạn làm điều này cho tất cả mọi thứ, bạn sẽ thấy mình gặp rắc rối trong khi mà code của chúng ta ngày càng nhiều lên và việc kiểm soát nó sẽ gặp rất nhiều khó khăn. Tuy nhiên, nếu bạn muốn ghi đè một kiểu CSS khác cho một phần tử cụ thể, hãy sử dụng ! important sau kiểu trong css của bạn. Ví dụ: nếu tôi muốn các tiêu đề H2 trong một phần cụ thể của trang web của tôi có màu đỏ thay vì màu xanh, tôi sẽ sử dụng CSS sau:

.section h2 { color:red !important; }

4. Centering Việc căn giữa phụ thuộc vào element mà chúng ta đang muốn thực hiện.

TEXT text được căn giữa bằng cách sử dụng text-align: centre; . Nếu bạn muốn nó sang một bên, sử dụng left hoặc right thay vì center.

DIV Một div (hoặc bất kỳ element nào khác) có thể được căn giữa bằng cách thêm thuộc tính khối vào nó, sau đó sử dụng margin: auto. CSS sẽ trông như thế này:

#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 
}

Lý do mình đặt anything under 100% cho chiều rộng là vì nếu nó rộng 100%, thì nếu đó là toàn chiều rộng và sẽ không cần định tâm. Tốt nhất là có chiều rộng cố định, như 60% hoặc 550px, v.v.

5. Vertical alignment (for one line of text) Bạn sẽ sử dụng điều này trong một menu điều hướng CSS, mình có thể đảm bảo điều đó. Điều quan trọng là làm cho chiều cao của menu và chiều cao của văn bản giống nhau. Mình thấy kỹ thuật này rất nhiều khi mình quay lại và chỉnh sửa các trang web hiện có cho khách hàng. Đây là một ví dụ:

.nav li{
    line-height:50px;
    height:50px;
}

6. Hover effects Điều này được sử dụng cho các nút, liên kết văn bản, phần bock của trang web, biểu tượng của bạn và hơn thế nữa. Nếu bạn muốn một cái gì đó thay đổi màu sắc khi ai đó di chuột qua nó, hãy sử dụng cùng một CSS, nhưng thêm :hover đến nó và thay đổi kiểu dáng. Đây là một ví dụ:

.entry h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.entry h2:hover{
    color:#f00;
}

Điều này làm là nó thay đổi màu của thẻ h2 của bạn từ đen sang đỏ khi ai đó di chuyển qua nó. Điều tuyệt vời khi sử dụng :hover là bạn không phải khai báo lại kích thước phông chữ hoặc trọng lượng nếu nó không thay đổi. Nó chỉ thay đổi những gì bạn chỉ định.

TRANSITION Đối với các hiệu ứng di chuột, như với các menu hoặc trên hình ảnh trong trang web của bạn, bạn không muốn màu sắc bị chụp quá nhanh đến kết quả cuối cùng. Bạn lý tưởng muốn giảm bớt sự thay đổi dần dần, đó là nơi mà thuộc tính TRANSITION phát huy tác dụng.

.entry h2:hover{
    color:#f00;
    transition: all 0.3s ease;
}

Điều này làm cho thay đổi xảy ra trong hơn 3 giây, thay vì chỉ chuyển sang màu đỏ ngay lập tức. Điều này làm cho hiệu ứng di chuột dễ chịu hơn cho mắt và ít bị chói hơn.

7. Link states Những phong cách này bị bỏ qua bởi rất nhiều nhà thiết kế và nó thực sự gây ra các vấn đề về khả năng sử dụng với khách truy cập của bạn. Link states: kiểm soát tất cả các liên kết chưa được nhấp vào. Link states :visited xử lý kiểu dáng của tất cả các liên kết bạn đã truy cập. Điều này cho khách hàngf truy cập trang web biết họ đã ở từng click vào đường link đó trên trang web hay chưa.

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

8. Easily resize images to fit Đôi khi bạn nhận được trong một yêu cầu là làm cho hình ảnh cần phải phù hợp với một chiều rộng của từng màn hình. Một cách dễ dàng để làm điều này là sử dụng thuộc tính max-width để xử lý việc này. Đây là một ví dụ:

img {
    max-width:100%;
    height:auto;
}

Điều này có nghĩa là hình ảnh lớn nhất có thể là 100% và chiều cao được tự động tính toán, dựa trên chiều rộng của hình ảnh. Trong một số trường hợp, bạn cũng có thể phải xác định chiều rộng ở mức 100%.

9. Control the elements of a section Sử dụng ví dụ hình ảnh ở trên, Nếu bạn chỉ muốn thêm style cho img nằm trong một class nào đó ta có thể sử dụng nó kết hợp với tên class. Điều này sẽ cho phép bạn chỉ chọn các hình ảnh của phần blog chứ không phải các hình ảnh khác.

.blog img{
    max-width:100%;
    height:auto;
}

10. Direct children Mình ước mình biết điều này khi lần đầu tiên mình bắt đầu tìm hiểu CSS. Điều này sẽ giúp mình tiết kiệm rất nhiều thời gian! Sử dụng > để chọn con trực tiếp của một element. Ví dụ:

#footer > a

Điều này sẽ chọn và style cho tất cả thẻ a ngay dưới ID Footer.

SPECIFIC CHILD ELEMENTS Hãy tin mình, điều này rất hữu ích khi bạn có danh sách các element con giống nhau và bạn chỉ muốn style cho một thằng con cụ thể. Bạn chỉ cần đếm vị trí element đó ở đâu và sử dụng style sau:

li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}

CSS ở trên style cho thẻ li thứ 3 và làm cho nó đậm, gạch chân và màu xanh.

11. Apply CSS to multiple classes, or selectors Giả sử bạn muốn thêm một đường viền giống hệt nhau xung quanh tất cả các hình ảnh, phần blog và thanh bên. Bạn không cần phải viết ra CSS chính xác 3 lần. Chỉ cần liệt kê các mục đó ra, phân tách bằng dấu phẩy. Đây là một ví dụ:

.blog, img, .sidebar {
    border: 1px solid #000;
}

Cho dù bạn đã là một nhà thiết kế web trong nhiều năm hay bạn mới bắt đầu, học cách xây dựng trang web đúng cách có thể giống như một hành trình không bao giờ kết thúc. Khi bạn đã thu hẹp những ngôn ngữ bạn muốn học, bạn phải học và hoàn thiện các kỹ năng của mình.

Bất kể bạn học gì, CSS là một trong những kỹ năng cần thiết, nhưng đáng ngại mà bạn phải thành thạo. Tuy nhiên, điều đó không quá khó khăn, đặc biệt là nếu bạn biết một vài kỹ thuật CSS tiện dụng và ít được biết đến để hoàn thành công việc.

12. box-sizing: border-box; Đây là một thuộc tính yêu thích của nhiều nhà thiết kế web, bởi vì nó giải quyết vấn đề đệm và các vấn đề bố cục. Về cơ bản, khi bạn đặt một div một chiều rộng cụ thể và thêm phần margin vào nó, phần margin đó sẽ thêm vào kích thước của div. Tuy nhiên, với box-sizing:border-box; điều này bị phủ định và các hộp giữ nguyên kích thước của chúng.

13. :before CSS này là một bộ chọn cho phép bạn chọn một element CSS và chèn nội dung trước mỗi element với một lớp cụ thể được áp dụng cho nó. Giả sử bạn có một trang web nơi bạn muốn có văn bản cụ thể trước mỗi thẻ H2. Bạn sẽ cho chúng tôi thiết lập này:

h2:before { content: "Read: "; <span class="Apple-converted-space"> color: #F00;</span> }

14. :after Giống như bộ chọn :before, bạn có thể sử dụng: sau để chèn nội dung trên toàn cầu vào các element cụ thể. Một cách sử dụng thực tế sẽ được thêm vào đó là đọc thêm nhiều lượt đọc sau mỗi đoạn trích trên blog. Đây là cách bạn sẽ làm điều đó.

p:after{ content: " -Read more… "; color:#f00; }

15. content content là một thuộc tính CSS có ích khi bạn cần chèn một phần tử mà bạn muốn có thể kiểm soát. Việc sử dụng phổ biến nhất tôi từng thấy cho việc này là chèn một icon từ một phông chữ biểu tượng ở một vị trí cụ thể. Trong các ví dụ trên, bạn có thể thấy rằng bạn phải bọc văn bản bạn muốn chèn vào dấu ngoặc kép.

16. CSS reset Các trình duyệt khác nhau có cài đặt CSS mặc định, do đó bắt buộc phải reset các cài đặt đó. Hãy nghĩ về nó như xây dựng một ngôi nhà, và cho dù bạn xây dựng trên sườn núi, trên bãi cát hay giữa khu vực rừng cây, bạn muốn nền móng đó được san bằng.

Phương pháp đặt lại CSS này đặt cơ sở chuẩn cho tất cả các trang web của bạn, mang lại cho chúng tính nhất quán trong điểm bắt đầu CSS. Nó loại bỏ các đường viền không mong muốn, lề đặt trước, phần đệm, độ cao của đường kẻ, kiểu trong danh sách, v.v.

17. Drop caps Chắc hẳn các bạn đã từng đọc báo, Hẳn bạn cũng đã bắt gặp trường hợp chữ cái đầu tiên được chỉnh to gấp 3 lần các chứ khác. Và cách mà nó thực hiện điều đó trong CSS là một ví dụ:

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

Những gì nó làm là đặt chữ cái kích thước gấp 3 lần các chữ cái khác. Nó đặt 3px không gian xung quanh chữ cái để tránh chồng chéo và đặt màu của chữ thành màu đỏ.

18. Force text to be all caps, all lowercase, or capitalized Một đoạn text ta có thể kiểm soát được style của nó. Làm cho toàn bộ đoạn text được viết họa, viết thừờng hoặc là viết hoa chữ cái đầu.

h2 {text-Transform: uppercase; } h2 {text-Transform: lowercase; } h2 {text-Transform: capitalize; }

19. Vertical screen height Đôi khi bạn muốn một phần để lấp đầy toàn bộ màn hình, bất kể kích thước màn hình là gì. Bạn có thể kiểm soát điều này với vh, hoặc xem chiều cao. Số trước nó là một tỷ lệ phần trăm, vì vậy nếu bạn muốn nó lấp đầy 100% trình duyệt, bạn sẽ đặt nó thành 100. Bạn có thể đặt nó thành một giá trị như 85% để chứa menu điều hướng cố định.

Tạo một lớp cho container và áp dụng số lượng vh bạn muốn nó có. Một điều bạn có thể cần điều chỉnh là giá trị truy vấn phương tiện cho các màn hình hoặc hướng cụ thể như điện thoại ở chế độ dọc. Hãy tưởng tượng kéo dài một hình ảnh phong cảnh để phù hợp với chế độ chân dung. Điều đó sẽ không nhìn tốt.

.fullheight { height: 85vh; }

20. Liên kết điện thoại kiểu Nếu bạn có một liên kết gọi một số điện thoại khi người dùng chạm vào điện thoại của họ, bạn có thể gặp khó khăn khi tạo kiểu cho nó bằng bộ chọn liên kết hoạt động truyền thống. Thay vào đó, hãy sử dụng CSS sau:

a[href^=tel] { <span class="Apple-converted-space"> color: #FFF;</span> <span class="Apple-converted-space"> text-decoration: none;</span> }