Học CSS cơ bản thì việc tạo menu (ngang hay dọc) khá khó khăn đối với một số người bởi để tạo được một menu với CSS cần dùng khá nhiều kiến thức về CSS. Chính vì vậy, trong phần cuối này của serie học CSS cơ bản, tôi sẽ hướng dẫn các bạn cách tạo menu (ngang-dọc) với CSS rất đơn giản, dễ hiểu và hướng dẫn các bạn cách tạo một giao diện website.
Kỹ thuật tạo menu ngang cơ bản
Hướng dẫn tạo menu ngang cơ bản
Áp dụng những kiến thức mà tôi đã đề cập tới trong những phần trước của serie học CSS cơ bản, để tạo menu ngang bạn cần sử dụng thẻ <ul> để tạo khu vực menu và thẻ <li> để tạo mục con trong menu đó. Trước khi viết cấu trúc menu bằng HTML, tôi sẽ đặt menu vào trong thẻ với id là #menu.
Tiếp theo là thêm một đoạn CSS để reset CSS thuận tiện cho việc viết CSS về sau.
* {
margin: 0;
padding: 0;
}Bây giờ đến phần bao bọc menu (tức là thẻ <ul> trong #menu), bạn dùng thuộc tính list-style-type để xóa các dấu đầu dòng.
#menu ul {
background: #0fda2c;
list-style-type: none;
text-align: center;
}Kết quả:
Tiếp theo, bạn muốn các mục con nằm trên cùng một hàng ngang thì đưa các thẻ <li> về kiểu hiển thị inline-block.
Kiểu inline-block
#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}Kết quả:
Và cuối cùng bạn thêm style cho các thẻ <a> và đưa kiểu hiển thị của thẻ này thành kiểu block để nó được phủ kín #menu ul
#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}Kết quả:
Hướng dẫn tạo menu dropdown đơn giản
Tương tự như ví dụ trên, bây giờ tôi muốn ở mục Kiếm tiền online có thêm một vài menu con, vì vậy tôi sẽ thêm thẻ <ul> lồng bên trong item. Kiếm tiền online và thẻ <ul> mang class tên là sub-menu.
Thêm đoạn CSS như trong ví dụ trên để tạo menu đơn giản.
* {
margin: 0;
padding: 0;
}
#menu ul {
background: #0fda2c;
list-style-type: none;
text-align: center;
}
#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}
#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}Kết quả:
Trước tiên, bạn cần ẩn .sub-menu đi.
.sub-menu li {
display: none;
}Bây giờ bạn muốn tùy biến lại .sub-menu để nó không bị đẩy lên thì sử dụng thuộc tính position để tùy biến vị trí một phần tử mà không ảnh hưởng đến phần tử khác. Nhưng tôi muốn .sub-menu nằm gần menu mẹ thì tôi sẽ thiết lập #menu li thành kiểu relative bởi #menu li là item cấp lớn nhất.
#menu li {
position: relative;
}Tiếp theo, thiết lập cho .sub-menu thành kiểu absolute để nó luôn nằm trong menu mẹ,
.sub-menu {
display: none;
position: absolute;
}Cuối cùng thì bạn cho hiển thị .sub-menu khi rê chuột đến menu mẹ bằng việc sử dụng pseudo class là :hover. Để hiển thị ra chúng bạn gán display: block.
#menu li:hover .sub-menu {
display: block;
}Đoạn #menu li: hover . sub-menu tức là khi bạn rê chuột vào #menu li thì nó sẽ thực hiện thay đổi cho .sub-menu.
Thêm đoạn CSS sau cho menu con bên trong để xóa margin không cần thiết.
.sub-menu li {
margin-left: 0 !important;
}Kết quả:
Kỹ thuật tạo menu dọc cơ bản
Tương tự như với menu ngang, bạn cũng áp dụng những kiến thức mà tôi đã nói tới trong những phần trước của serie học CSS cơ bản để tạo menu dọc. Đó là tạo danh sách với thẻ <ul> rồi xóa list-style-type cho các thẻ <li> bên trong là được.
Tạo menu dọc cơ bản
Tạo một danh sách menu như sau:
Thêm CSS cho #menu ul để thêm màu nền và bỏ đi các dấu đầu dòng.
#menu ul {
background: #200af4;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}Tiếp theo viết CSS cho các thẻ <li> để thêm chiều cao cho nó và thêm line-height bằng chiều cao để nó ở giữa block.
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}Cuối cùng viết CSS cho thẻ <a> và chuyển nó thành block.
#menu li a {
text-decoration: none;
color: #fffbfb;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #f40a20;
}Kết quả:
Tạo menu dọc có đổ xuống
Bạn bổ sung các menu con vào menu đơn giản trong ví dụ trên:
Sử dụng lại đoạn CSS ở phần trên:
#menu ul {
background: #200af4;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #fffbfb;
font-weight: bold;Đến đây thì các mục con trong mục Kiếm tiền online bị lỗi hiển thị, để khắc phục vấn đề này bạn thêm đoạn CSS như sau:
Trước hết, đưa #menu li về kiểu hiển thị relative.
#menu ul li {
position: relative;
}Chuyển #menu .sub-menu về kiểu absolute, tùy chỉnh vị trí hiển thị của nó thụt qua phải 250px (bằng chiều rộng của menu) và đưa nó về mép top của phần tử mẹ.
#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
}Kết quả:
Cuối cùng viết thêm CSS cho .sub-menu ẩn đi và hiện lên khi rê chuột vào #menu li chứa .sub-menu.
#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
display: none;
}
#menu li:hover .sub-menu {
display: block;
}Kết quả:
Hướng dẫn tạo Layout đơn giản
Ở trên, tôi đã nói đến việc hướng dẫn các bạn cách tạo một Layout CSS đơn giản trong serie học CSS cơ bản này và trước khi bắt đầu thực hành tạo layout thì bạn cần chuẩn bị một số bức ảnh và file normalize.css để reset CSS.
Bắt đầu
Trước tiên, bạn hãy tạo một thư mục riêng và copy file normalize.css và thư mục img vào. Tiếp đó tạo thêm tập tin index.html (tập tin website) và style.css (chứa CSS của website).
Bây giờ bạn mở file index.html lên để viết HTML cho website.
Việc đầu tiên cần làm là khai báo loại tập tin, thẻ <html>, cặp thẻ <head> và <body>.
!DOCTYPE html> <html cuong="vi"> <head> </head> <body> </body> </html>
Thêm thẻ khai báo thông tin
Sau khi khai báo loại tập tin, thẻ <html>, thẻ <head>, thẻ <body> thì cần khai báo thông tin về tài liệu website như tiêu đề, mô tả và thêm hai tập tin style.css và normalize.css để nó đọc CSS.
Bạn dùng cặp thẻ <head> để khai báo thông tin cho tài liệu HTML.
<head> <meta charset="utf-8" /> <title>Sy Cuong Blog</title> <meta name="description" content="Hướng dẫn tạo Layout đơn giản" /> <meta name="author" content="Sy Cuong" /> <meta name="keyword" content="hoc css,css co ban,css layout" /> <link type="text/css" rel="stylesheet" href="style.css" /> <link type="text/css" rel="stylesheet" href="normalize.css" /> </head>
Tạo các khu vực trong website
Trong phần này của serie học CSS cơ bản, tôi sẽ tạo một layout đơn giản bao gồm các thành phần như menu, logo, khung giới thiệu, 3 khung nhỏ và footer. Vì vậy tôi sẽ thêm các thẻ div với các id và class như sau:
- #cotainer: Phần này sẽ bao phủ toàn trang phòng khi bạn muốn tùy chỉnh chiều rộng của website thì có thể tùy chỉnh ở khu vực này là nó áp dụng cho toàn trang.
- #menu: Khu vực hiển thị menu bên tay trái
- #content: Khu vực hiển thị nội dung bên tay phải
- #header: Hiển thị logo và slogan của website bên tay phải
- #logo: Hiển thị logo
- #slogan: Hiển thị slogan
- .call-to-action: Hiển thị khung màu xám
- .row: Khung bao bọc 3 cột phía dưới
- #box1: Cột thứ 1
- #box2: Cột thứ 2
- #box3: Cột thứ 3
- #footer: Phần chân của website
Trong cặp thẻ <body> tôi sẽ viết HTML như sau:
Viết nội dung cho từng phần
Phần #menu
Giống như tạo menu dọc, menu được khai báo bằng thẻ tạo danh sách trong khu vực #menu
Phần #content
Trong phần #content có 3 phần nhỏ là #header, .call-to-action, .row.
Phần #header
Ở phần tôi sẽ chèn logo từ thư mục img/ và một slogan như sau:
Học HTML và CSS cơ bản</h3</h3
Phần .call-to-action
Bạn sẽ được học những gì?
Bạn sẽ được học những kiến thức cơ bản về HTML và CSS, giúp bạn hình dung rõ hơn việc làm một giao diện website bằng HTML và CSS, giúp bạn tự làm một giao diện website cho riêng mình.
Phần .row
Hướng dẫn chi tiết học HTML cơ bản
HTML cơ bản là việc bạn cần làm khi muốn thiết kế webiste dù là chuyên nghiệp hay nghiệp dư bởi HTML là một trong hai nền tảng quan trọng nhất cho việc xây dựng website, HTML có một vai trò quan trọng giúp bạn hiểu khái quát về một website và bạn có thể tự tùy biến giao diện trong việc thiết kếweb.
Hướng dẫn chi tiết học HTML cơ bản
Hướng dẫn chi tiết học HTML cơ bản
Phần #footer
Kết quả là ta đã có một văn bản thuần HTML như sau:
Viết CSS cho giao diện
Phần CSS đầu tiên mà bạn cần viết là thiết lập các thuộc tính cơ bản cho website như kiểu chữ, màu chữ, size, box-sizing,…
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.254em;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #3B8BBA;
}
a:hover,
a:visited {
color: #265778;
}Chia khung cho website
Tiếp theo đến phần viết CSS cho #container và chia cột cho #menu.
#container {
padding-left: 150px;
position: relative;
left: 0;
width: 100%;
}
#menu {
position: fixed;
height: 100%;
background-color: #191818;
width: 150px;
left: 0;
}Trong phần #container tôi sử dụng padding-left vì muốn nó có một khoảng trống bên trái trang. Ở phần #menu tôi sử dụng kiểu hiển thị là fixed để nó đứng cố định trên trang.
Kết quả:
Viết CSS cho #menu
Đầu tiên xóa các style của danh sách mặc định, xóa margin và padding.
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}Thêm chiều cao cho các mục trong menu.
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}Sau đó chuyển các thẻ liên kết về kiểu block, thêm các style cho chữ.
#menu li a {
display: block;
color: #fff;
padding: 0 1em;
border-bottom: 1px solid #333;
}Thêm style khi rê chuột đến từng menu.
#menu li:hover {
background-color: #454545;
}Kết quả:
Viết CSS cho #content
Trong phần này , tôi sẽ thêm padding để nó lùi về giữa và các nội dung tại phần #header, .call-to-action sẽ được căn giữa.
#content {
padding: 1em 8em;
}
#header,
.call-to-action {
text-align: center;
}Thêm màu chữ cho slogan.
#header{}
#slogan {
color: #8997A0;
font-size: 0.8em;
}Thêm màu nền và viền cho .call-to-action.
.call-to-action {
padding: 1.5em 20%;
background: #EFEFEF;
border: 1px solid#E8E8E8;
}Cuối cùng là chia cột trong .row để chia thành 3 cột. Thêm overflow: auto cho .row để clear float và thêm margin để cách xa các phần tử khác.
.row {
overflow: auto;
margin: 1.5em auto;
}Tiếp theo, bạn viết CSS cho class .col để nó float sang trái và thêm margin để nó cách xa nhau. Ở đây có phần .row .col:last-child tức là tôi chọn cột .row .col cuối cùng để nó foat qua phải và xóa margin-right để trông cân đối hơn.
.row {
overflow: auto;
margin: 1.5em auto;
}
.row .col {
float: left;
width: 31.3333%;
margin-right: 2.99%;
}
.row .col:last-child {
float: right;
margin-right: 0;
}Viết CSS cho các ảnh để nó float sang bên trái chữ.
.row .col img {
float: left;
margin-right: 1em;
}Kết quả:
Viết CSS cho #footer
#footer {
font-size: 85%;
border-top: 1px solid #E6E6E6;
color: #838383;
padding: 1em 3em;
}Vậy là tôi đã hoàn thành việc tạo một Layout CSS đơn giản.
CSS Framework là gì và sử dụng như thế nào?
Qua các bài hướng dẫn trong serie học CSS cơ bản thì bạn cũng hiểu rằng viết CSS cho website không hề đơn giản và tốn khá nhiều công sức. Nhưng sau đây tôi sẽ giới thiệu đến các bạn cách làm được một giao diện website như ý muốn là sử dụng CSS Framework.
CSS Framework là gì?
CSS Framework là một công cụ hỗ trợ thiết kế giao diện website nhanh chóng và bắt mắt. CSS Framework là bộ mã nguồn CSS được viết một số chức năng nhất định và khai báo từng chức năng vào từng class riêng, để bạn dễ dàng áp dụng bằng cách thêm thành phần muốn sử dụng vào phần tử mà bạn muốn áp dụng.
Trong serie học CSS cơ bản này, tôi sẽ giới thiệu tới các bạn hai loại CSS chính là:
Grid System: Chức năng của Framework này là hỗ trợ bạn chia cột trong website nhanh chóng. Mỗi Gird System có từ 12 hoặc 24 cột trên một hàng.
CSS UI Framework: Loại framework này là một bộ các thành phần UI (User Interface) hoàn chỉnh như có sẵn CSS cho nút bấm, menu, form…
Nên sử dụng khi nào?
Grid System
Nếu bạn muốn tự viết CSS cho các thành phần trên website và chỉ cần framework hỗ trợ chia cột nhanh gọn. Ưu điểm là nhẹ vì không có nhiều CSS.
CSS UI System
Nếu bạn muốn dùng CSS như công cụ hỗ trợ làm giao diện website có sẵn CSS cho nút bấm, menu, form chữ…thì có thể dùng nó. Tuy nhiên bộ UI này nặng hơn rất nhiều so với Grid System.
Một vài CSS tiêu biểu và thông dụng
Bootstrap
- Loại: CSS UI Framework
- Cấp độ: Khó
- Responsive: Có
Bootstrap là bộ UI Framework chi tiết và hỗ trợ gần như toàn bộ các thành phần trong website. Ngoài ra mọi người thích sử dụng Bootstrap bởi vì các style có sẵn cho các thành phần rất đẹp, bạn có thể xem các thành phần của nó tại đây. Và nó cũng hỗ trợ nhiều hiệu ứng Javascript với jQuery mà bạn có thể tham khảo tại đây.
960 Grid
- Loại: Grid System
- Cấp độ: Dễ
- Responsive: Không
Pure CSS
- Loại: CSS UI Framework
- Cấp độ: Dễ
- Responsive: Có
Bạn không cần đến một UI Framework nặng như Bootstrap mà vẫn có thể đảm bảo được các thành phần chính trên website như nút bấm, form, menu và grid thì Pure CSS khá phù hợp. Nó vẫn hỗ trợ đầy đủ Responsive như dùng khá đơn giản, cấu trúc class có sẵn cũng không nhiều.
Golden Grid System
- Loại: Grid System
- Cấp độ: Dễ
- Responsive: Có
Cái này giống như 960 Grid.
Foundation
- Loại: CSS UI Framework
- Cấp độ: Trung bình
- Responsive: Có
Giống với Bootstrap, đây là bộ UI Framework khá hoàn chỉnh hỗ trợ quy trình mobile-first, đặc biệt hỗ trợ thêm các kiểu menu cho mobile và cũng hỗ trợ nhiều hiệu ứng Javascript.
Tạo hiệu ứng chuyển động với transition
Tiếp tục với serie học CSS cơ bản, tôi sẽ giới thiệu đến các bạn một kỹ thuật khá phổ biến trong website đó là tạo các hiệu ứng chuyển động cho từng đối tượng được làm bằng CSS3.
Câu trúc khai báo trasition:
transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động];
Lưu ý: Bạn cần khai báo thêm hai thuộc tính đi kèm 2 tiền tố -moz- và webkit để nó hoạt động tốt trên các trình duyệt khác nhau. Ví dụ:
#box {
transition: margin-left 2s 0.5s ease-in-out;
-moz-transition: margin-left 2s 0.5s ease-in-out;
-webkit-transition: margin-left 2s 0.5s ease-in-out;
}Ở đây, margin-left là thuộc tính mà bạn cần nó kích hoạt chuyển động nhưng nó chỉ có tác dụng với các hiệu ứng trong danh sách này, nếu bạn muốn nó áp dụng lên toàn bộ thuộc tính thì sửa nó thành all, 2s là thời gian chuyển động và 0.5s là thời gian trễ trước khi bắt đầu chuyển động, ease-in-out có nghĩa chuyển động nhanh lúc bắt đầu và chậm lúc kết thúc.
Trước đó bạn đã khai báo cho #box áp dụng hiệu ứng chuyển động rồi nhưng nó sẽ chưa chuyển động mà cần một sự kiện để kích hoạt nó. Tôi sẽ thêm CSS với pseudo-class là :hover và sửa giá trị margin-right để nó chuyển động theo giá trị mới.
#box:hover {
margin-left: 150px;
}Ví dụ:
Bạn cũng có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách như sau:
#box {
transition: margin-left 2s, background-color 1s;
-moz-transition: margin-left 2s, background-color 1s;
-webkit-transition: margin-left 2s, background-color 1s;
}
Thay đổi hình dạng với transform và transform-origin
Bên cạnh thuộc tính transition sử dụng để tạo các hiệu ứng chuyển động cho các phần tử trong website thì còn có thuộc tính transform có chức năng thay đổi hình dạng các phần tử block trong website và thường sử dụng đi kèm với thuộc tính transition.
Thay đổi hình dạng với transform
Với thuộc tính transform thì bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng của phần tử.
Cấu trúc như sau:
transform: function( value ); -moz-transform: function( value ); -webkit-transform: function( value );
Ở đây, function() là tên hàm thay đổi hình dạng và giá trị của hàm.
Các hàm cơ bản thay đổi hình dạng cho transform.
Xoay-roate()
Hàm rotate() giúp bạn thiết lập đối tượng bị xoay theo góc độ. Với hàm này bạn có thể thiết lập giá trị kiểu [n]deg (thiết lập giá trị góc) hoặc [n]turn (1 tun=360 độ). Ví dụ:
Co giãn-scale()
Hàm scale() giúp bạn có thể thiết lập co giãn kích thước của phần tử dựa vào trục y (trục đứng) và trục x (trục nằm ngang), hàm sẽ được thiết lập là scaleX() và scaleY() hoặc scale(X).
Ví dụ:
Kéo nghiêng-skew()
Bạn có thể kéo một đối tượng nghiêng dựa theo trục Y và trục X với hàm skewX() và skewY(), giá trị bên trong là số [n]deg.
Tùy chỉnh tâm hình dạng với transform-origin
Thuộc tính transform-origin cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ở transform.
Ví dụ: bạn dùng rotate() để xoay ảnh và khi dùng thêm transform-origin thì bạn có thể chỉnh độ lớn của vòng xoay tính từ tâm. Thuộc tính transform-origin phải đi kèm với thuộc tính transform và có thể áp dụng với bất kỳ hàm nào.
Thuộc tính transform-origin có 2 giá trị là X (phương thẳng đứng), Y (phương nằm ngang) và giá trị của nó dựa vào kích thước của phần tử.
transform-origin: 100% 50%;
Lời kết
Vậy là kết thúc phần cuối cùng của serie học CSS cơ bản. Và trong toàn bộ serie hướng dẫn học CSS cơ này, các bạn đã nắm được CSS là gì? Vai trò của nó đối với website như thế nào? Các khái niệm và thuộc tính cơ bản liên quan đến CSS cũng như biết cách để lên bố cục cho giao diện website, tạo menu và làm ra được một giao diện website đơn giản.
Hy vọng những kiến thức này sẽ giúp ích cho các bạn trong việc thiết kế website. Chúc các bạn thành công!
Tham gia cùng 67,322 người đăng ký
Nhận thông tin khi có bài viết đặc biệt, hướng dẫn chuyên sâu và cập nhật mới.
Mọi thông tin đều được mã hóa và bảo mật.
