Tạo Theme WordPress 3: Viết CSS thành phần chính cho HTML

Ở bài trước chúng ta đã hoàn thành xong sườn của theme bằng html rồi, bây giờ chúng ta bắt đầu xác định các thành phần chính của website và viết css cho những phần chung cho các kích thước màn hình khác nhau.

Các bạn nhìn vào trang chủ Xuân Thức Blog sẽ thấy các phần chung dành cho các loại màn hình như sau:

  • Màu background, màu chữ, màu hover, border.
  • Màu Background của Site Title.
  • Màu background của trang web.
  • Màu background của Featured Posts và các posts.
  • Sidebar.
  • Màu background của Footer, màu chữ, màu hover.

Nào chúng ta bắt đầu vào xây dựng CSS thôi, trước tiên các bạn tạo một file style.less ngang hàng với file index.html và bổ sung thêm vào thẻ <head> của index.html đoạn sau để gọi file style.css (style.css được sinh ra khi bạn save file style.less – với điều kiện là phần mềm Prepros phải được mở nha).

<link rel="stylesheet" href="normalize.min.css" /> <!--Reset CSS-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />

Bắt đầu viết nội dung cho file style.less, trước tiên bạn thêm đoạn này vào đầu file style.less:

body {
  font-size: 93.8%;
  line-height: 1.5em;
  background-color: #EFEFEF;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
}
a {
  color: #1e4684;
  text-decoration: none;
}
a:hover {
  color: #ed1b2d;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Một số thông giải thích như sau:

  • font-size: 93.8%; ở đây nghĩa là ta đưa tỷ lệ của đơn vị em = 15px cho dễ tính, mặc định nó là 16.
  • line-height: 1.5em; là khoảng cách giữa các dòng văn bản với nhau.
  • background-color: #EFEFEF; là màu nền của trang web.
  • ahover chắc các bạn cũng đã biết đó là thiết lập cho link và khi rê chuột vào link.
  • before, after là để set cho các trình duyệt khác như IE chẳng hạn khỏi bị tràn chữ ra ngoài khung.

Tiếp đến ta viết CSS cho phần Header:

#header{
  width: 100%;
  .top-menu{
    margin: 0;
    height: 2em;
    background: #000;
    ul{
      margin: 0;
      list-style: none;
      li{
        display: inline;
        a{
          color: #fff;
        }
      }
    }
  }
  .site-title{
    background: #49B3EB;
    .title{
      h1{
        margin: 0;
        a{
          color: #FF8040;
        }
      }
    }
  }
  .header-menu{
    background: #858585;
  }
}

Ở phần này có một số thông số đáng chú ý đó là:

  • margin: 0; trong thẻ ul để canh lề lại cho thẻ này vì thẻ này mặc định nó bị đẩy vào.
  • list-style: none; lệnh này dùng để bỏ các dấu chấm đen đằng trước mỗi item của list.
  • display: inline; lệnh này dùng để đưa các phần từ về cùng một hàng thay vì nó dạng cột như mặc định.

Tiếp đến là viết CSS cho phần Wrapper:

#wrapper{
  .main-content{
    .featured_cont{
      margin: 5px;
      border: 1px solid #d6d6d6;
      border-radius: 3px;
      box-shadow: 3px 3px 3px #dcdcdc;
      .featured_posts{
        background: #fff;
        margin: 2px;
        border-radius: 2px;
        .featured-title{
          background: #3C78E8;
          text-align: center;
          font-weight: bold;
          color: #fff;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
        .posts-title{
          padding-left: 5px;
          font-weight: bold;
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
        .posts-item{
          ul{
            margin: 0;
            list-style: none;
            li{
              padding-left: 18px;
              background: url("images/list-icon.png") left no-repeat;
            }
          }
        }
      }
    }
    .content{
      .posts{
        background: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        margin: 5px;
        box-shadow: 3px 3px 3px #dcdcdc;
        padding: 5px;
        .post-title{
          a{
             font-weight: bold;
             font-size: 18;
          }
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
      }
    }
  }
  .sidebar{
    .sidebar-item{
      background: #fff;
      border-radius: 4px;
      border: 1px solid #dcdcdc;
      .widget-title{
        background: #3C78E8;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: center;
        font-weight: bold;
        color: #fff;
      }
      .textwidget{
        ul{  
          margin: 0;
          list-style: none;
          li{
            padding-left: 18px;
            background: url("images/list-icon.png") left no-repeat;
          }
        }
      }
    }
  }
}

Các thông số đáng chú ý trong phần Wrapper:

  • border: 1px solid #d6d6d6; lệnh này dùng để tạo đường viền độ dày 1 pixel cho div với màu là #d6d6d6.
  • border-radius: 3px; thẻ này dùng để bo góc 3px cho div đó.
  • box-shadow: 3px 3px 3px #dcdcdc; lệnh này dùng để đổ bóng cho div.
  • background: url(“images/list-icon.png”) left no-repeat; lệnh này trong li dùng để tạo background bên trái cho item.

Cuối cùng là viết CSS cho phần Footer:

#footer{
  background: #5C5C5C;
  border-top: 3px solid #FF0606;
  .footer-logo{
    color: #fff;
    font-size: 18;
  }
  .footer-info{
    color: #272727;
  }
}

Hoàn tất ta sẽ được tương tự như thế này:

Hướng dẫn Viết CSS cho HTML

Hướng dẫn Viết CSS cho HTML

Ở bài trước mình có nhầm tí là id=”footer” nhưng mình để là class=”footer” các bạn sửa lại nhé, mời các bạn download bản mới dành cho bài này tại đây, phần sau mình sẽ hướng dẫn viết CSS dành cho giao diện mobile.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN