[Newbie] CSS Basic

Discussion in 'Html, Css, Javascript' started by quylevhb, Jan 8, 2018.

  1. quylevhb

    quylevhb New Member

    Dành cho newbie chống chỉ định với pro

    Chapter 1 : Introduction to CSS


    CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

    1. Inline Styles
    Là viết mã trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính Style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.
    Để dùng Inline Styles, bạn hãy thêm thuộc tính Style và thẻ tương ứng. Thuộc tính Style có thể chứa bất kì thuộc tính CSS nào.

    HTML:
    <p style=”color: #ff0000;”>Some red text</p>

    2. Internal Stylesheet

    CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <Style> và đặt trong phần <head> của tài liệu HTML.

    Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file HTML được khai báo nhưng không ảnh hưởng đến các file khác trong cùng website.

    Internal Style Sheet được sử dụng khi toàn bộ nội dung chỉ có một kiểu định dạng duy nhất. Bạn thực hiện định nghĩa Internal Styles trong phần Head của trang HTML, được đặt giữa cặp thẻ <style> và </style>

    HTML:
    <head>
    <title><title>
    <style type=”text/css”>
    CSS Content Goes Here
    </style>
    </head>
    <body>
    Phương pháp này có thể tốt nếu bạn chỉ muốn một trang hoặc nếu bạn muốn các trang khác nhau có các kiểu style khác nhau.

    3. External Stylesheet

    Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.

    CSS ngoại tuyến có phạm vi ảnh hưởng đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do vậy mỗi khi muốn thay đổi thuộc tính của một thành phần nào đó trong website thì ta chỉ cần thay đổi file này.

    Một External Style Sheet được sử dụng để xử lý nhiều trang có cùng định dạng. Bằng cách sử dụng External Style Sheet, bạn có thể thay đổi toàn bộ website thông qua một file duy nhất.

    Mỗi trang HTML phải chứa liên kết đến file CSS bằng cách dùng thẻ <link> được đặt trong cặp thẻ <head></head>.

    HTML:
    <head>
    <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
    </head>
    

    Chú ý: Nên sử dụng cách 3 để khai báo css, sẽ tiện cho việc chỉnh sửa cũng như tốt cho SEO ......


    CHAPTER 2: CSS Syntax => http://xhydra.com/threads/newbie-css-basic.269/#post-632

    CHAPTER 3: ID & Class => http://xhydra.com/threads/newbie-css-basic.269/#post-638

    CHAPTER 4: Margin => http://xhydra.com/threads/newbie-css-basic.269/#post-678

    CHAPTER 5: Padding => http://xhydra.com/threads/newbie-css-basic.269/#post-688

    CHAPTER 6: CSS Text => http://xhydra.com/threads/newbie-css-basic.269/#post-690

    Nguồn: xhydra
     
    Last edited: Jan 11, 2018
  2. Mickey

    Mickey Hacking For Hacker Staff Member

    • Administrator
    thực ra em thấy có thể code lẫn css vào html được a :))) nhưng không khuyến cáo và nên cho vào 1 file riêng rồi gọi cho nó dễ nhìn. trước em gặp mấy bạn mới tập toàn cho luôn vào file html đọc muốn ngất tại chỗ
     
  3. quylevhb

    quylevhb New Member

    Chapter 2 : CSS Syntax

    1. Cú pháp css


    HTML:
    selector { property: value }
    - Selector: Phần từ, hay đối tượng chịu ảnh hưởng bởi css
    - property : Thuộc tính css muốn áp dụng
    - value: Giá trị của thuộc tính.

    Ví dụ:

    HTML:
    h1 {
      color: red;
    }
    - h1: Phần tử
    - color: Thuộc tính
    - red: Giá trị

    => Toàn bộ phần tử h1 sẽ có màu đỏ

    2. Tính kế thừa
    Khi bạn viết 1 phần tử nằm trong phần tử khác, thì phần tử bên trong (Phần tử con) sẽ kế thừa toàn bộ thuộc tính css của phần tử mà nó nằm trong (Phần tử cha), trừ khi bạn đặt thuộc tính css khác cho nó.
    Ví dụ:

    HTML:
    <head>
    
    <style type="text/css">
    body {
    color: red;
    }
    </style>
    </head>
    
    <body>
    <p>CSS BASIC<p/>
    </body>
    
    
    Trong ví dụ ta có phần tử p nằm trong phần tử body. Vậy p sẽ thừa kế toàn bộ các thuộc tính css của body. Ở đây ta có css của body quy định màu chữ là red, nên toàn bộ văn bản trong p cũng sẽ có màu là red.

    Trường hợp nếu bạn viết css riêng cho p thì văn bản trong p sẽ áp dụng theo css riêng của p.

    HTML:
    <head>
    
    <style type="text/css">
    body {
    color: red;
    }
    p {
    color: green;
    }
    </style>
    </head>
    
    <body>
    <p>CSS BASIC</>
    </body>
    Như ở ví dụ trên thì văn bản trong p sẽ có màu là green vì ta đã viết css riêng cho p có color là green.

    Chú ý: Có những trường hợp mà các phần tử con sẽ không kế thừa các thuộc tính của các phần tử cha.

    ví dụ:
    Nếu phần lề của body được đặt là 20 pixel, các phần tử khác bên trong tệp sẽ không thừa kế lề của body.

    HTML:
    body {margin: 20px;}
    3. Kết hợp Selector

    Bạn có thể kết hợp các phần tử trong một selector như sau:


    HTML:
    h1, h2, h3, h4, h5, h6 {
      color: blue;
      font-family: Georgia, sans-serif;
    }
    Như vậy toàn bộ các phần tử h1, h2, h3, h4, h5, h6 sẽ có chung thuộc tính css với màu là blue và font chữ là Georgia, sans-serif

    4. Commen tags (Thẻ chú thích)

    - Commen tags được dụng để ghi chú thích. Dòng chú thích này sẽ không hiển thị trên trình duyệt.
    - Có thể sử dụng comment để giải thích cho source code để tiện cho việc chỉnh sửa nội dung sau này.

    Cú pháp:

    HTML:
    /* Nội dung chú thích */
    Thẻ comment bắt đầu bằng /* và kết thúc bằng */ . Nó bắt buộc phải có thẻ bắt đầu và thẻ kết thúc.
     
  4. quylevhb

    quylevhb New Member

    Giờ ai viết chung nữa đâu e :s viết chung kiểu đó nhìn là muốn ném đi rồi ==" . Xong tut này làm nốt HTML, Java, JQuery, Bootstrap nữa cho đủ bộ =]]]
     
  5. quylevhb

    quylevhb New Member

    Chapter 3 : ID & Class

    I. ID
    1. id là gì

    - id được dùng để xác định một đối tượng duy nhất nào đó. Mỗi id chỉ được sử dụng duy nhất 1 lần, nếu trang html của bạn sử dụng 1 id 2 lần trở lên thì css nó vẫn có hiệu lực, tuy nhiên lúc này trang của bạn sẽ không đúng tiêu chuẩn.

    2. Cách dùng id
    - Do mỗi trang HTML mỗi id chỉ có thể sử dụng 1 lần vì vậy id được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ: khung viền (wrapper), menu chính (main menu),...)
    - Cách khai báo id trong html

    HTML:
    id="ten-id"
    ví dụ:

    HTML:
    <p id="thep">Nội dung văn bản</p>
    Như vậy ở đây ta có thẻ p với id là thep

    - Để viết css cho id ta thêm dấu # trước tên id.

    ví dụ:

    HTML:
    #thep {
    color: red;
    }

    II. Class
    1. Class là gì

    class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Trong một trang html class có thể được sử dụng nhiều lần.

    2. Cách dùng
    - Cách khai báo class trong html

    HTML:
    class="tên-class"
    ví dụ:

    Code:
    <p class="theclassp">Nội dung văn bản</p>
    Như vậy ở đây ta có thẻ p với class là theclassp

    - Để viết css cho id ta thêm dấu . trước tên class

    HTML:
    .theclassp {
    color: red;
    }
    

    III. Một số Lưu ý khi sử dụng ID và Class

    - Trong 1 file HTML, nếu bạn thích dịnh dạng CSS cho nhiều thẻ khác nhau thì dùng class. Ngược lại, dùng ID duy nhất cho 1 thẻ.
    - Nếu dùng 1 ID cho nhiều thẻ trong 1 file HTML, thì nó vẫn chạy được. Nhưng sẽ sai chuẩn.
    - Trong 1 thẻ bạn có thể sử dụng nhiều class khác nhau.
    ví dụ:

    HTML:
    <p class="thep1 thep2 thep3">Nội dung văn bản</p>
    Như ví dụ thẻ p dùng 3 class là thep1, thep2, thep3

    - Trong 1 thẻ mà bạn dùng cả 2 id và class thì id được ưu tiên hơn.

    ví dụ:

    HTML:
    <p id="thep" class="thep1">Nội dung văn bản</p>
    Như ví dụ thì css của id sẽ được ưu tiên trước sau đó mới đến css của class.
    Ví dụ cụ thể:


    HTML:
    <head>
    <style type="text/css">
    #thep {color: red;}
    .thep1 {color: blue;}
    </style>
    </head>
    <body>
    <p id="thep" class="thep1">Nội dung văn bản</p>
    </body>
    
    
    Như ví dụ này thì văn bản trong thẻ p sẽ có màu là red vì nó sẽ ưu tiên id trước.
     
    Last edited: Jan 11, 2018
  6. Mickey

    Mickey Hacking For Hacker Staff Member

    • Administrator
    em gặp mấy đứa ra trường code kiểu vậy rồi anh a :))) nhìn chỉ muốn đáp
     
  7. quylevhb

    quylevhb New Member

    CHAPTER 3: Margin

    1. Margin là gì

    - margin là thuộc tính css dùng để canh lề của 1 khối (div) với các khối xung quanh nó trong 1 trang html.
    - margin có 4 thuộc tính như sau: top, right, bottom, left

    margin.png

    Như hình thì trang có 9 khối và margin sẽ canh khoảng cách giữa khối 5 và các khối còn lại trong trang

    2. Cú pháp

    HTML:
    margin-top: length percentage or auto; 
      margin-left: length percentage or auto;
      margin-right: length percentage or auto;
      margin-bottom: length percentage or auto;
    
    length: khoảng cách tính bằng pixcel (px)
    percentage: khoảng cách tính theo %
    auto: tự động


    ví dụ: Canh lề trên
    HTML:
    margin-top: 15px;
    margin-top: 5%;
    margin-top: auto;
    

    * Ngoài cách viết riêng cho từng vị trí (top, left, bottom, right) như ở ví dụ trên ta có thể viết gộp như sau

    - Viết 4 giá trị:

    HTML:
    margin: 10px 15px 20px 25px;
    
    Vậy trình duyệt sẽ hiểu lần lượt theo thứ tự như sau:

    sshot-1.png

    - Viết 3 giá trị:

    HTML:
    margin: 10px 15px 20px;
    
    sshot-2.png

    - Viết 2 giá trị:

    HTML:
    margin: 10px 15px;
    
    sshot-4.png


    - Viết 1 giá trị:

    HTML:
    margin: 10px;
    
    sshot-5.png

    * Ngoài ra nếu các bạn không muốn đặt lề thì ta viết như sau

    HTML:
    margin: 0;
    

    => Chú ý: Nếu giá trị là 0 thì không cần thêm đơn vị (px, % ...)


    Ở đây mình sẽ có 1 ví dụ về vấn đề không đặt lề để các bạn hiểu rõ hơn

    sshot-6.png

    Như các bạn thấy ở đây web của mình sẽ có một khoảng cách nhất định với mép trình duyệt và nó tạo thành 1 khoảng trắng nhỏ, lý do là vì nội dung nằm trong thẻ body, và bản thân thằng body này nó là 1 khối nên nó sẽ có lề và tạo ra khoảng cách với mép trình duyệt. Giờ mình muốn nó full hết trình duyệt luôn thì mình sẽ bỏ lề của body. Thêm vào file css:

    HTML:
    body {
    margin: 0;
    }
    
    Và đây là kết quả

    sshot-7.png


    3. Tính thừa kế : Không

    Như đã nói ở chap trước thì nếu 1 phần tử nằm trong phần tử khác thì nó sẽ là con của phần tử chứa nó, và phần tử con sẽ kế thừa css của phần tử cha. Tuy nhiên đối với margin thì phần tử con sẽ không kế thừa thuộc tính margin của phần tử cha.
     
  8. quylevhb

    quylevhb New Member

    CHAPTER 5: Padding

    1. Padding là gì

    Padding là khoảng cách giữa viền của một phần tử HTML và nội dung bên trong nó.

    padding.png

    2. Cú pháp

    HTML:
      padding-top: length percentage;
      padding-left: length percentage;
      padding-right: length percentage;
      padding-bottom: length percentage;
    Cách viết tương tự như margin chỉ thay margin bằng padding

    3. Tính kế thừa: Không
     
  9. quylevhb

    quylevhb New Member

    CHAPTER 6: CSS Text

    1. Tính kế thừa: Có

    Phần tử con sẽ kế thừa thuộc tính của phần tử cha

    2. Color

    Quy định màu chữ của văn bản

    - Cú pháp:
    HTML:
      color: value;
    -Ví dụ:
    HTML:
      color: red;

    color.png

    3. Letter spacing (Khoảng cách giữa các ký tự)

    - Khoảng cách giữa các ký tự

    HTML:
     letter-spacing: value;
    - Có các giá trị sau:

    + normal : Không tăng khoảng cách giữa các ký tự cho chữ.
    + length : Đặt giá trị cụ thể. ví dụ: 1px, 2px
    + inherit : Thừa hưởng giá trị của phần tử cha

    HTML:
     
    letter-spacing: normal;
    letter-spacing: 3px;
    letter-spacing: inherit;
    

    letter-spacing.png


    4. Text align
    - Sắp xếp văn bản theo chiều ngang
    - Cú pháp:
    HTML:
     text-align: value;
    
    - Có các giá trị sau:

    + left: Sắp xếp nội dung theo chiều ngang và lệch về bên trái.
    + right: Sắp xếp nội dung theo chiều ngang và lệch về bên phải
    + center: Sắp xếp nội dung theo chiều ngang và nằm ở giữa
    + justify : Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau.
    + inherit : Thừa hưởng giá trị của phần tử cha

    HTML:
     text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
    text-align: inherit;
    

    text-align.png

    5. Text Decoration

    Thuộc tính text-decoration thiết lập các trang trí thêm cho văn bản.

    - Cú pháp:

    HTML:
     text-decoration: value;
    - Các giá trị:

    + none: Định dạng văn bản bình thường

    + underline : Gạch chân (gạch dưới )văn bản

    + overline : Gạch bên trên văn bản

    + line-through : Gạch ngang văn bản

    + blink : Văn bản nhấp nháy

    Ví dụ:

    Decoration.png


    - Thuộc tính text-decoration được hỗ trợ trong đa số các trình duyệt.
    - Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
    - Giá trị blink không hỗ trợ trong trình duyệt IE, Safari và Chrome.


    6. Text Indent (Thụt lề văn bản)
    Bạn có thể thụt dòng đầu tiên của văn bản trong một phần tử với thuộc tính text-indent
    - Cú pháp:

    HTML:
    text-indent: value;
    Với value ta có thể dùng px hoặc %

    indent.png

    7. Text Transform
    Thuộc tính text-transform thiết lập các ký tự viết hoa cho văn bản.

    - Cú pháp:
    HTML:
    text-transform: value;
    - Các giá trị:
    + none : Trả văn bản về dạng mặc định ban đầu.
    + capitalize : Chữ đầu tiên của mỗi từ là chữ hoa.
    + uppercase : Tất cả chữ trong văn bản thành chữ hoa.
    + lowercase : Tất cả chữ trong văn bản thành chữ thường.
    + inherit : Xác định thừa hưởng thuộc tính từ thành phần cha

    transform.png

    8. White space
    - Kiểm soát khoảng trắng trong một phần tử HTML
    - Cú pháp:
    HTML:
    white-space: value;
    - Giá trị:
    + normal : Khoảng trắng sẽ thể hiện bình thường
    + pre : Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ hiển thị trên cùng một hàng, chỉ ngắt dòng tại đoạn văn bản sử dụng thẻ <pre>
    + nowrap : Văn bản sẽ hiển thị trên cùng một hàng, chỉ xuống hàng khi gặp thẻ <br />

    Ngoài ra còn nhiều giá trị khác các bạn google thêm nhé

    9. Word Spacing
    - Điều chỉnh khoảng cách giữa các từ
    - Cú pháp:
    HTML:
    word-spacing: value;
    - Giá trị:
    + normal : Bình thường
    + length : Đặt giá trị theo px ví dụ: 1px, 2px

    word.png

    * Chú ý: Letter spacing là khoảng cách giữa các ký tự (Chữ cái) còn word spacing là khoảng cách giữa các từ.
     

Share This Page