Hướng dẫn code with harry css - mã với harry css

Học PHP

PHP là ngôn ngữ kịch bản máy chủ và một công cụ mạnh mẽ để tạo các trang web năng động và tương tác.

PHP là một sự thay thế được sử dụng rộng rãi, miễn phí và hiệu quả cho các đối thủ cạnh tranh như Microsoft's ASP.

Bắt đầu học PHP ngay bây giờ »

---

Dễ học với "php tryit"

Với trình chỉnh sửa "Php Tryit" trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã PHP và nhấp vào nút để xem kết quả.

Thí dụ

echo "My first PHP script!";
?>

Try it Yourself »

Hãy tự mình thử »

---

Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.

---

---

Bài tập PHP

Ví dụ PHP

Tìm hiểu bằng ví dụ! Hướng dẫn này bổ sung tất cả các giải thích với các ví dụ làm rõ.

---

Xem tất cả các ví dụ PHP

Bài kiểm tra câu đố PHP

Tìm hiểu bằng cách làm một bài kiểm tra! Câu đố này sẽ cung cấp cho bạn một tín hiệu về mức độ bạn biết hoặc không biết về PHP.

---

Bắt đầu câu đố PHP!

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools.

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm!

---

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi.

Tài liệu tham khảo PHP

Tham chiếu PHP của W3Schools chứa các loại khác nhau của tất cả các hàm, từ khóa và hằng số PHP, cùng với các ví dụ.

Khởi động sự nghiệp của bạnthe course

Được chứng nhận bằng cách hoàn thành khóa học

Được chứng nhận

Khi thiết kế và phát triển web, đôi lúc chúng ta gặp khó khăn trong việc tổ chức và quản lý code CSS. Nhiều nhà thiết kế website nghĩ rằng việc tổ chức và quản lý code thật là rắc rối, tuy nhiên nếu bạn đưa chúng vào một tiêu chuẩn cụ thể, thì sẽ giúp cho công việc của bạn tốt hơn, cũng như website của bạn sẽ hoạt động và có khả năng cải tiến tốt hơn trong tương lai.

Cú pháp

Sử dụng tabs ngắn (2 khoảng trắng) - đó là cách để đảm bảo code được dịch giống nhau trong mọi môi trường.

Khi có bộ chọn (selectors), hãy giữ mỗi bộ chọn nằm trên một dòng.

• Giữa các khối nên có một dòng trắng để dễ đọc code
• Thêm một khoảng trắng phía sau dấu

  .selector {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
  
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
  
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
  
    /* Misc */
    opacity: 1;
  }
  

  7 của mỗi thuộc tính.
• Với mỗi định nghĩa chỉ nên nằm trên riêng một dòng sẽ cho báo lỗi được chính xác hơn.
• Luôn sử dụng dấu chấm phẩy để kết thúc tất các định nghĩa. Dấu chấm phẩy ở định nghĩa cuối cùng là không bắt buộc nhưng vẫn nên thêm dấu chấm phẩy
• Thêm khoảng trắng phía sau dấu phẩy ở mỗi định nghĩa có nó (ví dụ

  .selector {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
  
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
  
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
  
    /* Misc */
    opacity: 1;
  }
  

  8).
• Không thêm khoảng trắng vào phía sau dấu phẩy trong giá trị của

  .selector {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
  
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
  
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
  
    /* Misc */
    opacity: 1;
  }
  

  9,

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  0,

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  1,

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  2, hoặc

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  3.Nó giúp phân biệt giữa các giá trị màu sắc (dấu phẩy, không khoảng trắng) và các giả trị thuộc tính (có dấu phẩy cùng khoảng cách).
• Không cần phải thêm tiền tố với các giá trị hoặc màu sắc bắt đầu bằng số 0 (ví dụ:

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  4 thay vì 0.5 và

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  5 thay vì -0.5px).
• Sử dụng chữ thường cho giá trị Hex của màu sắc, ví dụ

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  6. Chữ thường sẽ giúp việc dịch code được dễ dàng khi gặp những hình khối phức tạp.
• Sử dụng kiểu hiển thị giá trị màu sắc Hex theo kiểu rút ngọn nếu có thể, ví dụ

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  6 thay vì

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  8.
• Sử dụng dấu ngoặc kép để khai báo thành phần giá trị trong bộ chọn, ví dụ input[type="text"]. Nó chỉ bắt buộc trong một số trường hợp nhất định, nhưng sẽ mang tính nhất quán nếu sử dụng cho toàn bộ.
• Tránh thêm đơn vị cho giá trị bằng 0, ví dụ

  
  <style>
    @import url("more.css");
  style>
  
  <link rel="stylesheet" href="core.css" />
  

  9; thay vì margin: 0px;.
• Sử dụng

  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
  
  @media (min-width: 480px) {
    .element {
      ...;
    }
    .element-avatar {
      ...;
    }
    .element-selected {
      ...;
    }
  }
  

  0 thay vì none để xác định rằng đối tượng này không có đường viền.

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  border: none;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  border: 0
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Thứ tự khai báo

1. Định vị trí (Positioning)
2. Kiểu hình khối (Box model)
3. Kiểu kí tự (Typographic)
4. Hình ảnh (Visual)

Định vị trí ở đầu tiên vì nó có thể loại bỏ phần tử trong một layout bình thường. Kiểu hình khối được định nghĩa tiếp theo để có thể xác định được khích thước của mỗi thành phần.

Các thành phần còn lại hãy đặt theo từng thành phần tương ứng những phần mà không ảnh hưởng đến giá trị đã đặt trước đó sẽ đặt ở cuối cùng.

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

Không sử dụng @import

So với các

.element {
  ...;
}
.element-avatar {
  ...;
}
.element-selected {
  ...;
}

@media (min-width: 480px) {
  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
}

1, @import sẽ chậm hơn, nó sẽ cần nhiều yêu cầu từ trang hơn và không dự tính được hết các lỗi có thể xảy ra. Hãy dùng một số cách thay thế sau thay vì sử dụng @import:

• Sử dụng nhiều

  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
  
  @media (min-width: 480px) {
    .element {
      ...;
    }
    .element-avatar {
      ...;
    }
    .element-selected {
      ...;
    }
  }
  

  1
• Sử dụng các trình phiên dịch như SASS & LESS để phiên dịch CSS vào trong một file duy nhất
• Kết nối các files CSS của bạn bằng các tính năng được môi trường cung cấp sẵn nhu Rail, Jekyll và các môi trường khác

<style>
  @import url("more.css");
style>

<link rel="stylesheet" href="core.css" />

Vị trí đặt Media query

Hãy đặt Media query gần với bộ chọn có liên quan khi có thể. Đừng gom tất cả các quy tắc trong một khu vực riêng biệt như phần cuối trang.

.element {
  ...;
}
.element-avatar {
  ...;
}
.element-selected {
  ...;
}

@media (min-width: 480px) {
  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
}

Thuộc tính tiền tố

Khi sử dụng các thuộc tính tiền tố (Prefixed properties), hãy thụt đầu dòng vào dể các giá trị có thể thẳng hàng với nhau giúp dễ dàng để thay đổi giá trị.

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Khai báo CSS đơn

Trong trường hợp chỉ có 1 định nghĩa CSS, hãy loại bỏ những ngắt dòng để có thể dễ chỉnh sửa hơn. Còn lại thì nên xuống dòng

Đây là một trong yếu tố quan trọng để phát hiện ra lỗi, ví dụ một CSS đang có báo lỗi ở Line 200. Với định nghĩa nằm ở 1 dòng, bạn sẽ dễ tìm hơn.

/* Single declarations on one line */
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.icon {
  background-position: 0 0;
}
.icon-home {
  background-position: 0 -20px;
}
.icon-account {
  background-position: 0 -40px;
}

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

Kí hiệu viết tắt

Hãy hạn chế các kí hiệu viết tắt, thay vào đó hãy định nghĩa rõ ràng các giá trị. Các thuộc tính viết tắt thường được sử dụng nhiều bao gồm:

• padding
• margin
• font
• background
• border
• border-radius Thông thường hầu như không cần phải đặt toàn bộ các thuộc tính của chúng. Sử dụng đinh nghĩa viết tắt quá nhiều sẽ dẫn dến các định nghĩa bị lặp lại quá nhiều và xảy ra lỗi ngoài ý muốn.

/* Bad CSS */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good CSS */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Bộ chọn

• Sử dụng Class cho những tag để tối ưu hiệu suất dịch code.
• Hạn chế chọn phần tử kiểu chọn theo thuộc tính (attribute) (ví dụ

  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
  
  @media (min-width: 480px) {
    .element {
      ...;
    }
    .element-avatar {
      ...;
    }
    .element-selected {
      ...;
    }
  }
  

  3) . Hiệu suất trình duyệt sẽ bị ảnh hưởng.
• Giữ cho tên Class ngắn và gọi phần cha ít. Cố gắng gọi tối đa 3 Class.
• Gọi tên class cha chỉ khi nào cần thiết (ví dụ khi không cần tạo css tùy chỉnh).

/* Bad CSS */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good CSS */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ...

Chú thích

• Nên dùng hai gạch (

  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
  
  @media (min-width: 480px) {
    .element {
      ...;
    }
    .element-avatar {
      ...;
    }
    .element-selected {
      ...;
    }
  }
  

  4) để đặt chú thích.
• Nên đặt chú thích trên một dòng riêng, không đặt ở cuối dòng.
• Viết chú thích chi tiết cho những dòng code mà không thể hiện được ý nghĩa rõ ràng khi đọc, ví dụ:
  • Sử dụng

    .element {
      ...;
    }
    .element-avatar {
      ...;
    }
    .element-selected {
      ...;
    }
    
    @media (min-width: 480px) {
      .element {
        ...;
      }
      .element-avatar {
        ...;
      }
      .element-selected {
        ...;
      }
    }
    

    5
  • Khả năng tương thích và trình duyệt

Đặt tên Class

Khuyến khích một số cách kết hợp giữa OOCSS và BEM cho những lý do sau:

• Giúp tạo ra mối quan hệ chặt chẽ rõ ràng giữa CSS và HTML
• Giúp tạo ra những thành phần có thể tái sử dụng.
• Cho phép ít lồng nhau (nested) và giảm sự riêng biệt
• Giúp xây dựng stylesheet có khả năng mở rộng

OOCSS, hay “CSS hướng đối tượng”, là một phương pháp để viết CSS mà khuyến khích bạn định hình stylesheet như một sự tập hợp của nhiều “đối tượng” (object): có thể tái sử dụng, có thể lặp lại độc lập xuyên suốt toàn bộ một trang web., hay “CSS hướng đối tượng”, là một phương pháp để viết CSS mà khuyến khích bạn định hình stylesheet như một sự tập hợp của nhiều “đối tượng” (object): có thể tái sử dụng, có thể lặp lại độc lập xuyên suốt toàn bộ một trang web.

• OOCSS wiki của Nicole Sullivan
• Giới thiệu về OOCSS trên Smashing Magazine

BEM, hay “Block-Element-Modifier”, là một quy ước đặt tên cho class trong HTML và CSS. Ban đầu nó được phát triển bởi Yandex với codebase lớn, có khả năng mở rộng, và có thể coi như một tập hợp của các hướng dẫn cho việc thực hiện OOCSS., hay “Block-Element-Modifier”, là một quy ước đặt tên cho class trong HTML và CSS. Ban đầu nó được phát triển bởi Yandex với codebase lớn, có khả năng mở rộng, và có thể coi như một tập hợp của các hướng dẫn cho việc thực hiện OOCSS.

• BEM 101 trên CSS Tricks
• Giới thiệu về BEM của Harry Roberts

Ví dụ

.block {}   /* Block */

    .block__element {}  /* Element */
    .block--modifier {}  / Modifier /

• .block: Thành phần cấp to nhất của abstraction hoặc component. Thành phần cấp to nhất của abstraction hoặc component.
• .block__element: Thành phần con bên trong của block Thành phần con bên trong của block
• .block--modifier Là 1 phiên bản # của block. Hay những thay đổi style khác so với style ban đầu 1. Modifier Là 1 phiên bản # của block. Hay những thay đổi style khác so với style ban đầu 1. Modifier

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

0

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

1

2. Element

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

2

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

3

3. Chainable Modifiers

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

4

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

5

JavaScript hook

Nên tạo ra các class riêng cho JavaScript để gắn kết, tiền tố bắt đầu với

.element {
  ...;
}
.element-avatar {
  ...;
}
.element-selected {
  ...;
}

@media (min-width: 480px) {
  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
}

6:

.selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

6