Thành thạo kỹ năng CSS của bạn với bộ code cực chất

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Xin chào các bạn hôm nay ngồi code rồi thấy có nhiều đoạn code được dùng đi dùng lại thường xuyên trong quá trình làm từ trước đến giờ, thấy khá là hữu ích cho nên mình quyết định chia sẻ lên blog này để cho các bạn có thể vào tham khảo và lấy về dùng luôn. Những đoạn code này khá cơ bản nhưng thực sự cần thiết trong nhiều trường hợp lắm đây. Chúng ta cùng khám phá dưới đây 20 tấm ảnh kèm ghi chú đi theo cực kỳ chi tiết nhé.

# Center với Flexbox

Đoạn code này khi các bạn muốn làm các phần tử hiển thị chính giữa khi sử dụng với CSS Flexbox nhé.

# Center với CSS Grid

Đoạn này chức năng tương tự đoạn trên nhưng mà sử dụng CSS Grid nhé các bạn. Place-items tương ứng là align-items và justify-content áp dụng với CSS Grid.

# Center theo chiều ngang với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều ngang với thuộc tính position: absolute nhé. Rất hay dùng khi làm việc với thuộc tính position khi căn chỉnh phần tử á.

# Center theo chiều dọc với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều dọc với thuộc tính position: absolute nhé.

# Center theo 2 chiều với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều ngang và chiều dọc luôn cũng với thuộc tính position: absolute nhé.

# Viết rút gọn code CSS cho thuộc tính border

# Viết rút gọn code CSS cho thuộc tính background

# Viết rút gọn code CSS cho giá trị về màu sắc

Nếu mã màu trùng nhau 6 ký tự thì các bạn chỉ cần điền vào 3 là đủ hoặc theo cấu trúc aabbcc thì có thể viết thành abc là được.

# Viết rút gọn code CSS cho thuộc tính về font

Xem thêm các việc làm CSS lương cao trên TopDev

# Hiển thị dấu 3 chấm

Đoạn code này giúp các bạn hiển thị chữ trên 1 hàng mà thôi nếu chữ quá dài thì sẽ xuất hiện dấu 3 chấm… nhe.

# CSS cho placeholder của input, textarea

# CSS cho selection

Khi các bạn vào một trang web các bạn muốn copy nội dung nào đó thì các bạn sẽ bôi đen nó, đoạn code này giúp CSS cho đoạn bôi đen đó đấy nhé. Khá là hay ho.

# Ẩn icon mũi tên ở input có type là number

# Box-sizing

Đoạn code này sẽ được toàn bộ selectors về box-sizing: border-box để hiển thị kích thước cho đúng nhé. Quan trọng lắm nha các bạn.

# Sử dụng đơn vị rem

Nếu các bạn không thích code với đơn vị px cố định thì các bạn có thể sử dụng đơn vị rem nhé, đoạn code này giúp đưa font-size về cơ số 10 cho dễ tính toán. Lúc này 1rem = 10px.

# Responsive media

Nếu các bạn muốn hiển thị video, hình ảnh theo tỉ lệ như 16:9 hay 4:3 thì các bạn có thể dùng biến trong CSS như mình để lưu lại, sau đó dùng CSS để tính toán như dưới đây để video hay hình ảnh có thể hiển thị responsive nhé. HTML của nó trông như thế này:

<div class="responsive-media">
 <img src=""/>
</div>
<div class="responsive-media">
 <iframe src="youtube"></iframe>
</div>

Xem tiếp...

# Background gradient

Đây không đơn thuần là làm background gradient thông thường, mà là các bạn muốn sử dụng 2 lớp nền, lớp ở trên là gradient mờ mờ, còn ở dưới là một hình nền thì các bạn có thể sử dụng đoạn code dưới đây nha. Các bạn sẽ thay mã màu tương ứng cho phù hợp với thiết kế của các bạn và hình nền nhé.

# Hiển thị dấu 3 chấm cho nhiều dòng

Ở mục phía trên mình có nói tới vấn đề hiển thị dấu 3 chấm trên một hàng, còn đoạn code này sẽ giúp các bạn hiển thị dấu 3 chấm… cho nhiều hàng, ví dụ bạn muốn nếu chữ nhiều quá thì tới dòng thứ 5 sẽ hiển thị dấu 3 chấm thì các bạn thay giá trị ở đoạn code -webkit-line-clamp thành 5 chẳng hạn nhé.

# Gradient cho chữ

# Tuỳ chỉnh thanh scroll

Mặc định thanh scrollbar không được đẹp cho lắm thì các bạn có thể dùng đoạn code dưới đây để làm cho nó hiển thị theo ý các bạn nhé. Tuy nhiên việc custom này không hỗ trợ trên Firefox nhé.

# Tạm kết

Bài này mình sẽ cập nhật thường xuyên nếu có những đoạn code mới hay ho và bổ ích cho các bạn nhé. Mình không để code sẵn để các bạn copy vì mình nghĩ nếu các bạn tự gõ lại thì sẽ mau nhớ và mau giỏi hơn cũng như hiểu được bản chất của các thuộc tính trong CSS. Cuối cùng chúc các bạn học tập thật tốt nhé..

Bài viết gốc được đăng tải tại evondev.com

Mình nghĩ những bài viết về CSS này sẽ giúp ích cho các bạn:

Read More

Hướng dẫn cài đặt WordPress trên Mac sử dụng MAMP

Cách cài đặt MAMP trên máy Mac

Mình xin giới thiệu sơ qua xíu về MAMP. MAMP (viết tắt từ cụm từ Macintosh, Apache, MySQL, và PHP) cũng tương tự như XAMPP hay Appserv là chương trình tạo máy chủ Web được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin. Đây có thể được xem như chương trình nhằm để biến máy tính của bạn trở thành máy chủ web để lưu trữ, cài đặt website ngay trên máy tính cá nhân thay vì mua hay thuê hosting (tất nhiên là chỉ để sử dụng offline thôi). Trên Windows thì XAMPP là vua nhưng trong MAC mình thích dùng MAMP hơn vì có vẻ như nó được thiết kế tối ưu hơn cho hệ điều hành MAC OS hơn XAMPP.

Đầu tiên các bạn truy cập vào website của MAMP và download phần mềm này về. Sau khi down xong về bạn tiến hành cài đặt như 1 ứng dụng thông thường.

Sau khi cài đặt MAMP xong bạn mở nó lên. (trong Aplications » MAMP).

Lưu ý: khi cài đặt MAMP nó cũng tiến hành cài luôn bản MAMP Pro (có trả phí), vì vậy nhớ chọn đúng phiên bản miễn phí để mở lên nhé.

Thiết lập cho MAMP

Trước khi bắt đầu cài đặt localhost trên máy Mac, ta nên tiến hành chỉnh sửa 1 số cài đặt như bên dưới đây.

Bạn mở phần menu Preferences và chọn thẻ Ports.

Ô Apache Port các bạn để là 80 sau đó click OK để lưu lại. Việc thiết lập như thế này sẽ giúp bạn sau khi cài đặt xong có thể truy cập ngay vào website theo đường dẫn

http://localhost thay vì phải nhập http://localhost:8888.

Lưu ý: Nếu như trong máy bạn có sử dụng Skype, thì bạn phải vào setting của Skype để chỉnh lại Port, do mặc định Skype đã cướp cổng 80 để dùng rồi.

Bước tiếp theo bạn phải cài đặt thư mục root. Thư mục này là thư mực sẽ chứa toàn bộ source, website của bạn. Mặc định MAMP sẽ lưu thư mục này tại đường dẫn Aplications/MAMP/htdocs/ folder, tuy nhiên bạn có thể thay đổi lại cho dễ truy cập.

Trong menu preferences, click vào thẻ Web Server và chọn lại folder nào muốn lưu, nhớ click OK để lưu lại

Cài đặt WordPress trong localhost trên Mac

Sau khi cài đặt và thiết lập xong MAMP bạn đã có đầy đủ đồ chơi ( webserver, PHP, MySQL server, PHP myadmin…) để vận hành 1 website trong môi trường localhost. Bước tiếp theo là cài đặt WordPress lên localhost mới tạo này.

Download WordPress về máy tính

Đầu tiên bạn lên trang chủ WordPress.org và download bản WordPress mới nhất về, sau đó giải nén ra.

Bước tiếp thep copy folder wordpress và paste vào thư mục root mà mình đã cài đặt phía trên. Bạn cũng có thể đổi tên thư mục này thành tên website của bạn cho dễ quản lý, ví dụ: hoithiendia, lauxanh v.v…Sau này bạn truy cập http://localhost/hoithiendia là vô được website mình tạo nhé.

Tạo database cho website

Xong phần trên bạn coi như xong phần source cho site, tiếp theo bạn phải tạo database cho site. Mở MAMP ra, bấm Start server để chạy Apache Server và mySql Server. Sau đó bấm chọn vào nút Open Web Start Page.

 

Trên cửa sổ trình duyệt mới hiện ra bạn chọn vào Tools » phpMyAdmin.

phpMyAdmin là 1 ứng dụng nền web cho phép bạn tạo và quản lý cơ sở dữ liệu cho website. Sau khi mở phpMyAdmin lên, bạn click vào phần database để tạo database mới. Đặt tên gì tùy bạn, nhưng là nhớ lưu lại tên database để khai báo sau này.

OK tạo database xong rồi tiến hành cài đặt WordPress lên Mac thôi. Mở trình duyệt lên truy cập vào địa chỉ http://localhost/mysite trong đó phần mysite bạn thay bằng tên folder (tên site) mà bạn vừa copy thư mục wordpress vào lúc nãy.

Bạn sẽ thấy màn hình cài đặt WordPress hiện ra như bên dưới.

Chọn ngôn ngữ cài đặt WordPress rồi click Continue.

Ở màn hình kế tiếp, WordPress sẽ yêu cầu bạn khai báo các thông tin database của website . Phần database name hãy nhập lại tên database đã tạo lúc nãy. Phần username và password bạn để là root. Phần database host ghi là localhost. Table prefix bạn để là wp_ hoặc thay chữ wp bằng cái gì cũng được (giúp site bảo mật hơn thôi), không muốn thì cứ để như vậy cũng được.

Xong xuôi đâu đó nhấn nút Submit để tiếp tục.

WordPress sẽ tiến hành kết nối source web với database. Tiếp theo nó sẽ show thông báo thành công, bạn nhấn vào nút ‘Run the installation’ để tiếp tục.

Ở màn hình kế tiếp, WordPress sẽ yêu cầu bạn cung cấp các thông tin về site như tên site, username và password, email quản trị. Bạn điền các thông tin này vô rồi nhấn Install WordPress.

Cài đặt xong nó sẽ show ra 1 cái thông báo thành công như thế này.

Bạn bấm login và đăng nhập bằng username và pass theo thông tin mới khai báo ở trên. Xong, đã vô được rồi, kết thúc cài đặt WordPress trên localhost trong Mac.

Trên đây là hướng dẫn chi tiết cách cài đặt WordPress trên Mac trong môi trường localhost sử dụng phần mềm MAMP. Chúc các bạn thành công.

 

Read More