Tiếp phần này, mình sẽ hướng dẫn các bạn làm một việc rất quan trọng để quyết định theme của bạn có đẹp hay không, đó là viết CSS cho theme để nó ra được giao diện hoàn chỉnh. Và ở bài mở đầu mình đã có yêu cầu bạn chuẩn bị kiến thức HTML cơ bản và CSS cơ bản vì trong các phần CSS mình sẽ không nói về các vấn đề cơ bản như cú pháp, các thuộc tính cơ bản,…mà chỉ tập trung vào những gì quan trọng mà thôi.Tham khảo:
Trước khi bắt đầu bài này, đó là mình khuyến khích bạn đã theo serie này đến đây rồi thì viết cái gì thì bạn nên làm cái đó, vì mục đích mình viết serie này là để giúp bạn hiểu cách làm được một theme. Còn theme đó có đẹp hay không thì do kỹ năng Front-end Development của bạn như CSS, Javascript, jQuery,….Mình trả lời độc giả thường xuyên nên mình cũng đoán được phần nào thói quen xem tutorial của nhiều bạn nên mình nhắc trước hờ như vậy để bạn biết.
Nếu bạn muốn làm một theme chuyên nghiệp hơn, thì hãy chắc chắn bạn đã hiểu hết serie này, cùng với việc cải thiện kỹ năng CSS sẽ giúp bạn làm tất cả những gì bạn muốn.
Ok, chúng ta bắt đầu vào nội dung chính nhé. Và tất cả những đoạn CS mà chúng ta sẽ làm là viết vào file style.css trong theme, chèn bên dưới các đoạn comment khai báo thông tin theme.
Thêm Reset CSS
Reset CSS là tên chung để chỉ các đoạn CSS có chức năng đưa các giá trị của một số thành phần HTML về giá trị ban đầu. Bởi vì mỗi trình duyệt nó sẽ có một số quy tắc để xử lý CSS riêng nên nếu không reset CSS thì giao diện của bạn có thể sẽ không hiển thị tốt trên các trình duyệt.
Do vậy, bạn hãy chèn đoạn dưới đây vào file style.css nhé:
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{
display:block}
audio,canvas,video{
display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){
display:none;height:0}
[hidden]{
display:none}
html{
font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{
font-family:sans-serif}
body{
margin:0}
a:focus{
outline:thin dotted}
a:active,a:hover{
outline:0}
h1{
font-size:2em;margin:.67em 0}
h2{
font-size:1.5em;margin:.83em 0}
h3{
font-size:1.17em;margin:1em 0}
h4{
font-size:1em;margin:1.33em 0}
h5{
font-size:.83em;margin:1.67em 0}
h6{
font-size:.75em;margin:2.33em 0}
abbr[title]{
border-bottom:1px dotted}
b,strong{
font-weight:bold}
blockquote{
margin:1em 40px}
dfn{
font-style:italic}
mark{
background:#ff0;color:#000}
p,pre{
margin:1em 0}
code,kbd,pre,samp{
font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{
white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{
quotes:none}
q:before,q:after{
content:'';content:none}
small{
font-size:75%}
sub,sup{
font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{
top:-0.5em}
sub{
bottom:-0.25em}
dl,menu,ol,ul{
margin:1em 0}
dd{
margin:0 0 0 40px}
menu,ol,ul{
padding:0 0 0 40px}
nav ul,nav ol{
list-style:none;list-style-image:none}
img{
border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){
overflow:hidden}
figure{
margin:0}
form{
margin:0}
fieldset{
border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{
border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{
font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{
line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{
cursor:default}
input[type="checkbox"],input[type="radio"]{
box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{
-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{
border:0;padding:0}
textarea{
overflow:auto;vertical-align:top}
table{
border-collapse:collapse;border-spacing:0}
Đừng quan tâm nó là cái gì và đừng hiểu nó làm gì luôn, cứ chèn vào đi rồi sau này muốn sửa style gì thì cứ khai báo lại là được.
Giao diện sau khi reset CSS.
Viết CSS cho các thuộc tính quan trọng
Ban đầu, chúng ta sẽ cần thiết lập một số thuộc tính CSS cho các phần tử quan trọng trong website như kiểu chữ, màu chữ, màu liên kết,….Chúng ta có đoạn sau:
/*---:[GLOBAL CSS]:---*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-size: 100%; font-family: Helvetica Neue, Arial, sans-serif; font-color: #333333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #F6591C; text-decoration: none;
}
a:hover, a:visited, a:active {
color: #FF3F00; text-decoration: underline; }
input,input[type=”submit”],button {
border: 1px solid #C8C8C8 !important; padding: 5px 10px;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.8em;
}
h4 {
font-size: 1.55em;
}
h5 {
font-size: 1.3em;
}
table, table tr, table td {
border: 1px solid #e7e7e7;
padding: 8px;
}
Ở đoạn này, chúng ta sẽ thiết lập một số giá trị cho giao diện của mình như kích thước size chữ, màu chữ và các màu liên kết. Các bạn lưu ý ở chỗ phần tử img, mình đặt max-width: 100% nghĩa là dù ảnh có to cách mấy thì nó sẽ không thể tràn ra khỏi cái khung mẹ của nó được, còn height: auto nghĩa là chiều dài của hình ảnh sẽ căn theo kích thước gốc của ảnh để ảnh hạn chế bị méo mó.
CSS chia cột website
Như lúc code theme này, chúng ta phân rõ trang ra làm 2 cột đó là cột hiển thị nội dung #main-content và #sidebar. Và tất cả thành phần trong website được bao bọc trong một vùng chọn là #container. Vậy thì bây giờ, chúng ta sẽ viết CSS thiết lập chiều rộng của theme ở vùng chọn #container:
/*---:[WEBSITE COLUMNS]:---*/
#container {
width: 1024px; margin: 0 auto; background :#ffffff; border: 1px solid #D1D1D1; padding: 10px 25px;
}
.content {
overflow: hidden;
}
#main-content {
width: 620px; float: left; margin-right: 10px;
}
#sidebar {
width: 320px; float: right; margin-left: 20px; padding-left: 20px;
}
Chỗ này nghĩa là mình sẽ đặt chiều rộng của website với kích thước là 1024px cho toàn website và đặt khoảng cách bên trong khung (padding) là 10px với top và bottom, 25px cho left và right vì #container là nó bao quát toàn bộ nội dung trong website.
Kế tiếp là mình sẽ cho chiều rộng của khung #main-content là 620px rồi nhảy qua trái với thuộc tính float: left, sau đó phần #sidebar sẽ có chiều rộng là 300px, cũng nhảy qua trái với float: left, còn dư 30px thì mình cho nó làm khoảng cách bên ngoài (margin) ở lề trái. Điều quan trọng là do #main-content và #sidebar là hai thẻ div nên khi nó float, thẻ nằm bao bọc nó phải tiến hành clear float, ở đây mình dùng cách clear float đó là sử dụng thuộc tính overflow để kiểm soát nội dung bị tràn tràn khỏi box, mình sẽ có bài phân tích cụ thể vào dịp khác.
Bây giờ ta có giao diện website thế này:
Được rồi, bây giờ chúng ta sẽ viết CSS cho từng thành phần trên website từ trên xuống dưới, từ trái sang phải nhé.
Viết CSS cho tiêu đề website ở header
Bây giờ việc đầu tiên là hãy viết lại cái header cho website đẹp hơn một chút (không bao gồm banner). Ta có đoạn CSS như sau:
/*---:[LOGO]---*/
.logo {
margin-bottom: 30px; line-height: 2;
}
.logo .site-name {
}
.logo .site-name h1 {
margin: 0;
font-size: 0;
}
.logo .site-name a {
color: rgb(0, 100, 212);
font-size: 32px;
font-weight: bold;
}
.logo .site-description {
margin-top: -1em; color: rgb(111, 111, 111); font-family: Time New Roman,serif; font-size: 1.04em; font-style: italic;
}
Lúc này, cái tên website của bạn ở header sẽ chuyển sang màu xanh và mô tả website sẽ chuyển sang màu xám, kiểu chữ có chân và in nghiêng.
Nếu bạn muốn sử dụng logo dạng ảnh riêng của bạn thì hãy chờ đến cuối serie, sẽ có bài hướng dẫn làm theme option để thiết lập hiển thị logo hình ảnh hoặc chữ tùy thích, còn nếu bạn vẫn muốn dùng CSS thì có thể viết cái vùng chọn .logo .site-name a thành thế này:
.logo .site-name a {
display: block;
width: 220px; /*chiều rộng của logo*/
height: 90px; /*chiều cao của logo*/
background: url(‘link của logo’) left top no-repeat;
text-indent: -969696px;
}
Kết thúc phần 1 của CSS
Viết CSS tới đây thì chắc cũng khá dài rồi nhỉ, do vậy mình xin kết thúc phần 1 tại đây và ở phần sau chúng ta sẽ viết tiếp CSS cho các thành phần khác, để tránh việc cô đọng quá nhiều nội dung cho người đọc.