Bài tập CSS nâng cao | Bài tập CSS

Bài tập
Hướng dẫn
Bài giải

Bài tập: Thực hiện code CSS theo nội dung design dưới đây.

Tham khảo cấu trúc ở bài tập HTML

Bài tập CSS nâng cao

Hướng dẫn

Design có 2 phần cần chú ý.

Màu nền xen kẻ đậm nhạt giữa các mục, ta sử dụng bộ chọn :nth-child() để lọc vị trí mục chẵn lẻ.
Vị trí của avatar, có thể sử dụng float hoặc position đều được, tuy nhiên phần này sử dụng position thì hiệu qua tốt hơn (kiểm soát vỡ layout tốt hơn float).
Chú ý phần ngày "6th", ở đây Học Web Chuẩn không làm cho chữ "th" lên cao, vì làm thì dễ nhưng khi đổ dữ liệu động sẽ gây khó khăn cho các bạn programmer, nếu muốn làm cho giống design, các bạn chỉ cần gắn thẻ <sup> là được, hoặc điều khiển bằng css.

Công thức chung

Bài giải này dựa trên bài học CSS3, do đó các bạn cần nắm vững kiến thức về CSS và CSS3 để hiểu rõ về bài giải này.
Đối với các tag có class, thì sẽ sử dụng tên .class để viết CSS, tránh viết dạng tag.class, việc này sẽ giúp code không ảnh hưởng nếu tag có thay đổi.
Thứ tự ưu tiên viết CSS (tham khảo):
- Từ trên xuống dưới.
- Sắp xếp cho đúng tương đối vị trí các thành phần bao ngoài, vd: .class-ông .class-cha .class-con.
- Định dạng, sắp xếp vị trí của từng thành phần, sau đó mới trang trí cho các thành phần bên trong.
- Chỉnh lại cho chính xác vị trí của các thành phần bên ngoài và bên trong.
Một số thuộc tính kết hợp hiệu quả:
- margin: 0 auto; và width: 600px;: dịch chuyển toàn bộ thành phần canh giữa, nhưng không ảnh hưởng các thành phần con bên trong.
- line-height: 60px; và height: 60px;: nếu cùng giá trị, sẽ giúp cho thành phần bên trong canh giữa theo chiều dọc.
- max-width: 300px; và width: 90%;: thường dùng cho image lớn hoặc các khối lớn, gặp nhiều trong responsive; Khi màn hình có chiều rộng nhỏ, thì thành phần sẽ theo phần trăm là width, ngược lại khi màn hỉnh có chiều rộng lớn, thì thành phần có chiều rộng lớn nhất sẽ theo pixcel là max-width.
- min-width: 200px; và padding: 0 20px;: thường sử dụng cho button, khi chiều rộng lớn thì thành phần sẽ cách đều trái và phải 20px, còn khi chiều rộng nhỏ, thì chiều rộng nhỏ nhất sẽ theo min-width.
Để cho gọn bài giảng, hocwebchuan sẽ không tập trung vào việc chỉnh chính xác font-family, image, hay khoảng cách nhe (tương đối thôi).
Trong bài giải, hocwebchuan đã code các thuộc tính theo việc sắp xếp thứ tự ABC, indent 2 spaces, các vị trí khoảng cách như nhau, mục đích của việc này sẽ giúp cho code được đẹp hơn, dễ quản lý hơn.

↔

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Học web chuẩn</title>
<link rel="stylesheet" href="/exercises/css/fontawesome.css" media="all">
<style>
  /* Reset */
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  body {
    color: #191919;
    font-family: Helvetica,sans-serif;
    font-size: 15px;
    line-height: 1.5;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
  }
  
  /* Layout */
  .comment {
    margin: 30px auto;
    width: 978px;
  }
  .comment h2 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 14px;
  }
  .comment .comment-list li {
    background-color: #fbfbfb;
    margin-bottom: 10px;
    padding: 15px 15px 18px;
  }
  .comment .comment-list li:nth-child(2n) {
    background-color: #f7f7f7;
  }
  .comment .head-commnent {
    position: relative;
  }
  .comment .head-commnent .avatar {
    border: 1px solid #d7d7d7;
    font-size: 30px;
    height: 38px;
    padding-top: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 38px;
  }
  .comment .head-commnent .name {
    font-weight: 600;
    margin-bottom: 8px;
  }
  .comment .head-commnent .name em {
    color: #a2b70d;
    font-style: normal;
  }
  .comment .head-commnent .time {
    font-size: 13px;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
  <section class="comment">
    <h2>COMMENTS</h2>
    <ul class="comment-list">
      <li>
        <div class="head-commnent">
          <p class="name">By <em>A Name</em></p>
          <p class="time">Friday, 6th April 2015 @08:15:00</p>
          <p class="avatar"><i class="fas fa-user-alt"></i></p>
        </div>
        <p class="content">Vestibulum justo libero, dapibus vitae nibh at, faucibus dignissim massa. Curabitur quis urna scelerisque, dignissim turpis nec, volutpat risus.</p>
      </li>

<li>
        <div class="head-commnent">
          <p class="name">By <em>A Name</em></p>
          <p class="time">Friday, 6th April 2015 @08:15:00</p>
          <p class="avatar"><i class="fas fa-user-alt"></i></p>
        </div>
        <p class="content">Mauris nec dictum ipsum. Proin massa orci, laoreet non scelerisque in, tempor quis nunc. Maecenas lacus arcu, posuere et congue sed, volutpat posuere orci.</p>
      </li>
      
      <li>
        <div class="head-commnent">
          <p class="name">By <em>A Name</em></p>
          <p class="time">Friday, 6th April 2015 @08:15:00</p>
          <p class="avatar"><i class="fas fa-user-alt"></i></p>
        </div>
        <p class="content">Etiam ac pharetra leo. Ut vel diam sagittis, vestibulum neque et, efficitur nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
    </ul>
  </section>
</body>
</html>

Bài tập HTML nâng cao

Hướng dẫn

Công thức chung