Css chuyên sâu

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

với các id và class như sau. Lưu ý là sử dụng class hay id thì tùy các bạn nhưng mình thích dùng id cho các phần chính mà sẽ chắc chắn chỉ hiển thị một lần trên website, còn các class mình sẽ có thể tái sử dụng cho thành phần khác.

• 
  
  /*==Trang trí menu==*/
  
  #menu ul {
  
   list-style-type: none;
  
   padding: 0;
  
   margin: 0;
  
  }
  
  

  4. Khung này sẽ bao phủ toàn trang để khi bạn muốn chỉnh sửa chiều rộng của trang web thì sẽ chỉnh ở khu vực này là nó áp dụng lên toàn trang

  • 
    
    /*==Trang trí menu==*/
    
    #menu ul {
    
     list-style-type: none;
    
     padding: 0;
    
     margin: 0;
    
    }
    
    

    5. Khu vực hiển thị menu color black side left

  • 
    
    /*==Trang trí menu==*/
    
    #menu ul {
    
     list-style-type: none;
    
     padding: 0;
    
     margin: 0;
    
    }
    
    

    6. Khu vực hiển thị nội dung bên phải

    • 
      
      /*==Trang trí menu==*/
      
      #menu ul {
      
       list-style-type: none;
      
       padding: 0;
      
       margin: 0;
      
      }
      
      

      7. Hiển thị logo và khẩu hiệu của trang web bên phải

      • 
        
        /*==Trang trí menu==*/
        
        #menu ul {
        
         list-style-type: none;
        
         padding: 0;
        
         margin: 0;
        
        }
        
        

        8. Hiển thị logo

      • 
        
        /*==Trang trí menu==*/
        
        #menu ul {
        
         list-style-type: none;
        
         padding: 0;
        
         margin: 0;
        
        }
        
        

        9. Hiển thị khẩu hiệu

    • 
      
      #menu ul li {
      
       line-height: 2.9em;
      
       height: 2.9em;
      
      }
      
      

      0. Hiển thị cái khung màu xám

    • 
      
      #menu ul li {
      
       line-height: 2.9em;
      
       height: 2.9em;
      
      }
      
      

      1. Cái khung bao bọc 3 cột ở dưới

      • 
        
        #menu ul li {
        
         line-height: 2.9em;
        
         height: 2.9em;
        
        }
        
        

        2. First column

      • 
        
        #menu ul li {
        
         line-height: 2.9em;
        
         height: 2.9em;
        
        }
        
        

        3. Thứ hai cột

      • 
        
        #menu ul li {
        
         line-height: 2.9em;
        
         height: 2.9em;
        
        }
        
        

        4. Cột thứ ba

    • 
      
      #menu ul li {
      
       line-height: 2.9em;
      
       height: 2.9em;
      
      }
      
      

      5. Website phần chân

Do đó, chúng ta sẽ có mã HTML như sau trong cặp thẻ

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

0

[html đánh dấu =”2-31″]

<. –#thùng chứa–>

[/html]

Lưu ý cho mình một điều là các chỗ mình ghi

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

7 là các câu lệnh ghi chú trong HTML để bạn dễ nhìn sau này khi tài liệu có nhiều thẻ

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

2 chứ nó không có ý nghĩa gì trên trình duyệt

Viết nội dung cho từng phần

Tiếp theo là chúng ta sẽ tạo ra các thẻ chứa nội dung cho từng thành phần vì không ai vừa viết thẻ vừa viết CSS cả mà chỉ nên viết CSS sau khi hoàn thành nội dung HTML

Phần 

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5

Giống như cách chúng ta tạo menu Dọc ở phần trước, menu sẽ được khai báo bằng một thẻ tạo danh sách như sau trong khu vực

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5

[html]

<. –END #menu–>
[/html]

Phần 

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

6

Trong phần

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

6 này chúng ta có 3 phần nhỏ nữa là

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

7,

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

0 và

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

1. Chúng ta sẽ làm từng phần một

Phần 

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

7

Ở phần này, chúng ta sẽ chèn một tấm ảnh có tên là

#menu li a {

 display: block;

 color: #fff;

 padding: 0 1em;

 border-bottom: 1px solid #333;

}

7 trong thư mục

#menu li a {

 display: block;

 color: #fff;

 padding: 0 1em;

 border-bottom: 1px solid #333;

}

8 và một khẩu hiệu như sau

[html]

<. –#tiêu đề–>
[/html]

Phần 

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

0

Phần này chúng ta cũng có một số nội dung đơn giản như sau

[html]

<. –. kêu gọi hành động–>
[/html]

Phần 

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

1

Phần này chúng ta sẽ có 3 cột nên có 3 phần con bên trong nữa, ở ví dụ này thì mình cho 3 cột với nội dung giống y chang nhau nhé mà chỉ khác hình ảnh thôi

[html]

<. –. kêu gọi hành động–>
[/html]

Phần 

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

5

Phần footer thì chúng ta chỉ đơn giản là có nội dung như thế này thôi

[html]

<. –#footer–>
[/html]

Bây giờ ta đã có một văn bản thuần HTML như hình

Được rồi, bây giờ sẽ là phần viết CSS

Viết CSS cho giao diện

Bao giờ cũng vậy, khi viết CSS thì bạn nên viết theo từng thành phần theo thứ tự từ lớn đến bé và từ trên xuống dưới cho dễ làm

Đoạn CSS đầu tiên bạn nê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ữ, kích thước chữ, thêm kích thước hộp,…Ta viết đoạn đầu tiên như sau

/*==Style cơ bản cho website==*/

* {

 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

Bây giờ ta đến phần lớn nhất là viết CSS cho phần

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

4 và chia cột cho phần

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5 để nó hiển thị bên trái như hình ảnh. Ở ví dụ này, mình sử dụng menu khung dọc và hiển thị cố định trên trình duyệt, chiều dài mở rộng hết cửa sổ

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

Sở dĩ ở

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

4 mình có

#menu li:hover {

 background-color: #454545;

}

5 là vì mình muốn nó dư một khoảng trống 150px bên tay trái của trang để đỡ thằng

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5 che mất. Ở

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5 Mình sử dụng kiểu hiển thị là

#menu li:hover {

 background-color: #454545;

}

8 để nó đứng vững trên trang

Kết quả ban đầu ta được thế này

Viết CSS cho 

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

5

Bây giờ mình sẽ tiếp tục làm cái menu cho nó đẹp hơn một chút giống như ảnh demo vậy. Trước tiên là xóa các kiểu của danh sách mặc định đi và xóa lề, phần đệm

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

And more height for each side item in menu

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

Tiếp đến là chuyển các thẻ liên kết về định dạng khối, thêm chữ màu và kiểu dáng linh tinh

#menu li a {

 display: block;

 color: #fff;

 padding: 0 1em;

 border-bottom: 1px solid #333;

}

Cuối cùng là thêm kiểu khi rê chuột vào từng menu

#menu li:hover {

 background-color: #454545;

}

Kết quả

Viết CSS chung cho 

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

6

Tiếp theo là ta cần xử lý tiếp phần

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

6 một chút cho nó gọn gàng lại bằng cách thêm phần đệm để nó lùi về giữa một lúc, đồng thời mình cho rằng các nội dung văn bản trong phần

/*==Trang trí menu==*/

#menu ul {

 list-style-type: none;

 padding: 0;

 margin: 0;

}

7 và

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

0 trong đây sẽ được căn giữa

/*==Trang trí khung content==*/

#content {

 padding: 1em 8em;

}

#header,

.call-to-action {

 text-align: center;

}

Và thêm màu chữ ốp cho thằng slogan để nó có điểm nhấn, slogan mà lị

/*==Trang trí header của content==*/

#header{}

#slogan {

 color: #8997A0;

 font-size: 0.8em;

}

Tiếp theo là phần

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

0, mình sẽ thêm màu nền cho nó và thêm một cái vách ngăn để nó nổi bật một chút

/*==Call to Action==*/

.call-to-action {

 padding: 1.5em 20%;

 background: #EFEFEF;

 border: 1px solid#E8E8E8;

}

Cuối cùng là đến phần chia cột trong

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

1 để nó hiển thị thành 3 cột. Trước tiên là thêm

/*==Trang trí khung content==*/

#content {

 padding: 1em 8em;

}

#header,

.call-to-action {

 text-align: center;

}

6 cho

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

1 để nó có thể xóa số float và lề để nó cách xa các phần tử khác một chút

/*==Chia cột phần content==*/

.row {

 overflow: auto;

 margin: 1.5em auto;

}

Tiếp theo là viết CSS cho lớp

/*==Trang trí khung content==*/

#content {

 padding: 1em 8em;

}

#header,

.call-to-action {

 text-align: center;

}

8 nằm trong đây để nó nổi qua bên trái và thêm lề cần thiết để cách xa nhau. Riêng phần

/*==Trang trí khung content==*/

#content {

 padding: 1em 8em;

}

#header,

.call-to-action {

 text-align: center;

}

9 nghĩa là mình chọn cột

/*==Trang trí header của content==*/

#header{}

#slogan {

 color: #8997A0;

 font-size: 0.8em;

}

0 cuối cùng trong khu vực này để cho nó nổi qua bên phải, xóa

/*==Trang trí header của content==*/

#header{}

#slogan {

 color: #8997A0;

 font-size: 0.8em;

}

1 để hiển thị cân đối hơn

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

0

Và viết CSS note cho mấy cái ảnh bên trong để nó float qua bên trái chữ

/*==Lên khung cho website==*/

#container {

 padding-left: 150px;

 position: relative;

 left: 0;

 width: 100%;

}

#menu {

 position: fixed;

 height: 100%;

 background-color: #191818;

 width: 150px;

 left: 0;

}

1

Kết quả ta có

Kết quả sau khi viết CSS cho #content

Viết CSS cho 

#menu ul li {

 line-height: 2.9em;

 height: 2.9em;

}

5

Phần này thì dễ rồi, ta chỉ là muốn giảm kích thước chữ xuống một chút, cho màu nhạt hơn và thêm cái viền trên (đỉnh viền)