Please enable JavaScript.

Coggle requires JavaScript to display documents.

FRONTEND - Coggle Diagram

- - - - viết lệnh css trực tiếp vào trong thẻ mở
      - <span style="color:green">Lorem ipsum
        dolor.</span>
    - - viết lệnh trong thẻ <style>CSS here </style>.
        Thẻ <style> này nằm trong <head>
    - - việt lệnh CSS trong file .css rồi sau đó import file này vào trong html bằng thẻ <link>.<link ref ="stylesheet" href="css/buoi3.css">
      - Cú pháp dành cho cho dạng internal và external css
        
        p {
        color: red;
        font-size: 14px;
        }
        
        Trong đó p là selector.
        
        Giữa dấu {} là phần khai báo các cặp thuộc tính css.
        
        color: là tên thuộc tính css. red: là gí trị của thuộc tính css color.
        font-size: là thuộc tính css. 14px: là gí trị của thuộc tính css font-size.
        Lưu ý rằng trong {} có bao nhiêu cặp thuộc tính css cũng được
        
        4 loại selector
        
        id selector
        
        "
        cú pháp: #id2 { color: yellow; }
        
        class selector
        
        cú pháp: .class1 { color: red;}
        
        type selector
        
        cú pháp: h1 { color: orange; }
        
        h1 là thẻ html tên h1
        
        descendant selector
  - - - name
        
        cú pháp: #id1{ color: green;}
        
        green : màu xanh lá
      - RGB
        
        cu phap: #id2{ color: rgb(255, 3, 44); }
        
        Gia tri mau tu 0 - 255
        
        rgb(255,0,0) = red
        
        rgb(0, 255,0) = green
        
        rgb(0,0,255) = blue
      - RGBA
        
        cu phap: #id3 { color: rgb(255, 3, 44, 0.1); }
      - hexadecimal
        
        cu phap: #id4 { color: #ff2244; }
        
        gia tri mau : 0 - 9, A - F
        
        FF0000 = red
        
        00FF00 : green
        
        0000FF = blue
    - - cài plugin color picker vào sublime text 3 và ấn Ctrl + Shift + C
      - truy cập vào color chart và color picker online: https://html-color-codes.info/
  - - - có 4 loại từ trong ra ngoài
        
        padding
        
        khoảng cách tính từ content đến border
        
        border
        
        Đường viền của hình hôp (thẻ)
        
        4.Margin
        
        Margin: Khoảng cách của phần tử này so với phần tử khác
        
        Content
        
        phần nội dung của thẻ
    - - (tính thuận chiều kim đồng hồ, bắt đầu từ top)
      - Ví dụ
        
        padding: 4px 8px => nghĩa là top, bottom là 4px. Left, right là 8px
        
        pading: 4px 8px 12px => nghĩa là top 4px. Left, right là 8px. Bottom là 12px
        
        padding: 4px 8px 12 px 14px => nghĩa là top 4px, right là 8px, bottom là 12px, right là 14px
        
        padding: 4 px => nghĩa là top, right, bottom, left đều có giá trị là 4px
  - - - cm, mm, in, px, pt, pc.
        Trong đó px (pixels) được dùng nhiều nhất
      - cm, mm,
        in (inches,1in = 96px = 2.54cm),
        px ( pixels,1px = 1/96th of 1in),
        pt (points, 1pt = 1/72 of 1in),
        pc ( picas, 1pc = 12 pt)
    - - em, ex, ch, rem, vw, vh, vmin, vmax, %.
        
        Thông dụng
        
        % được sử dụng
        nhiều nhất
        
        em (element) và rem (root element – html), nhiều thứ
        
        em
        
        Liên quan đến font-size của element
        (2em nghĩa là 2 lần kích thước của font hiện tại)
        
        width của id selector sau dau = 10 x 14 = 140px, #id6 { font-size:14px; width: 10em; }
        
        rem
        
        Liên quan đến font-size của phần tử gốc
        
        width của id selector sau dau = 10 x 16 = 160px, vì Font-size của html là 16px, #id8 { font-size:14px; width: 10rem; }
        
        ex Liên quan đến x-height của font-size hiện tại (hiếm sử dụng), ch Liên quan đến chiều rộng của số 0, vw Liên quan đến 1% chiều rộng của khung nhìn, vh Liên quan đến 1% chiều cao của khung nhìn, vmin Liên quan đến 1% chiều cao hoặc chiều rộng nhỏ nhất của khung nhìn, vmax Liên quan đến 1% chiều cao hoặc chiều rộng lớn nhất của khung nhìn, % Liên quan đến % của phần tử cha
  - - - phân loại
        
        background-image: hình nền
        
        background-size: chỉ định kích thước của hình
        
        giá trị
        
        auto: giữ nguyên kích thước hình gốc
        
        cover: phóng to/thu nhỏ hình gốc để lấp đầy. Nếu cần nó cũng cắt hình (Nó không làm méo hình gốc)
        
        contain: Cố gắng phóng to hoặc thu nhỏ hình gốc để vừa phần nồi dung. Hình không bị cắt nên rất có thể hình sẽ không lắp đầy hết nội dung (tỉ lệ kích thước hình khác nội dung thẻ)
        
        Để hình vừa vặn với nội dung có thể dùng 100% ngang và 100% dọc, đương nhiên hình bị méo nếu (tỉ lệ kích thước hình khác nội dung thẻ)
        
        background-color: màu nền
    - - dinh nghia
        
        Dùng border-left, border-right, border-top, border-bottom để định dạng từng đường viền
        
        sử dung border để tạo đường viền
      - Cu phap
        
        border: <width> <style> <color>
        
        Ví dụ: border: 1px solid black
        
        Có thể chỉ định riêng lẻ từng thuộc tính như border-width, border-style, border-color.
      - style
        
        dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
    - - dinh nghia
        
        thêm đổ bóng vào phần tử
      - cu phap
        
        box-shadow: h-shadow v-shadow blur-radius color.
        
        h-shadow là đổ bóng ngang
        v-shadow là đổ bóng dọc
        blur-radius là độ mờ
        color là màu của bóng
    - - inline
        
        <a>, <b>, <br>, <i>, <label>, <object>, <select>, <span>, <strong>, <sub>, <sup>, <progress>, <meter>
        
        Thẻ dạng inline là thẻ không bắt đầu trên 1 dòng mới
        có chiều rộng vừa đủ với nội dung văn bản.
        Không thể set được width/height, margin-top/margin-bottom
      - inline block
        
        Thẻ dạng inline-block giống với thẻ dạng inline,
        nhưng có thể set được width/height,
        
        <image>, <button>, <textarea>, <input>, <audio>, <video>, <svg>
      - block
        
        Thẻ dạng block là thẻ luôn bắt đầu trên dòng mới
        chiếm chiều rộng tối đa có thể (trái qua phải).
        Có thể set được width/height, margin-top/margin-bottom
        
        <article>, <aside>, <div>, <fieldset>, <footer>, <form>, <h1>, -<h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>
  - - - buoi14, dia chi va icon
    - - about us
        
        box va info
    - - canh giua theo chieu doc
    - - chieu cao dong
      - neu co chu se tu canh giua theo chieu doc
    - - position : absolute
      - top: 100%
    - - ap dung cho mobile
- - - - <a>
        
        liên kết đến mail, telephong
        
        2 thuộc tính href, target
        
        Thẻ liên kết page này đến page
      - <img>
        
        Chèn hình vào web
      - marquee
        
        Để văn bản tự chạy, mặc định chạy từ phải sang trái
      - <p>
        
        Định nghĩa đoạn văn
      - <b>
        
        Thẻ in đậm
      - <strong>
        
        Thẻ in đậm tốt cho SEO
      - <i>
        
        In nghiên văn bản
      - <em>
        
        In nghiêng tốt cho SEO
      - <br> xuống dòng
      - <mark>
        
        Highlight văn bản
      - <h1>...<h6>
        
        Tạo tiêu đề, h1 có size nhỏ nhất, h6 có size lớn nhất
      - <hr>
        
        tạo đường kẻ ngang
    - - <input>
        
        Thẻ input, thuộc tính type có một số giá trị như: text,password, date, number, email, range, radio, checkbox, button, submit, reset
        
        type="text": cho phép người dùng nhập bất kỳ ký tự nào
        
        type="password": cho phép người dùng nhập password
        
        type="date": cho phép người dùng nhập ngày tháng năm
        
        type="number": chỉ cho phép người dùng nhập số. Việc kiểm tra người dùng nhập đúng định dạng số hay chưa sẽ được kiểm tra ở bước submit form
        
        type="email": chỉ cho phép người dùng nhập email. Việc kiểm tra người dùng
        nhập đúng định dạng email hay chưa sẽ được kiểm tra ở bước submit form
        
        type="range": tạo thanh trượt, cho phép điều chỉnh giá trị, dùng cho thể hiện âm
        lương, phóng to thu nhỏ, level (trình độ tiếng anh) dạng slider control
        
        type="radio": dùng để tạo nút radio (nút chỉ cho phép chọn 1). Sử dụng thuộc tính
        name để tạo nhóm
        
        type="checkbox": dùng để tạo nút checkbox (nút cho phép chọn nhiều)
        
        type="button": tạo nút, không có chức năng submit form
        
        type="submit": tạo nút, đây là nút dùng để submit form. Nút này phải nằm trong form mới có thể submit
        
        type="reset": reset lại toàn bộ input trong form
        
        Nhập liệu
        
        Với Radio, checkbox, mặc định được chọn thì dùng thuộc tính đơn: checked
    - - select, option, textarea, ol, ul, li, div, span, form , input, button, label, iframe , video, audio, figure, figcaption , picture, source, table, thead, tbody, tr, th, td, svg, use, defs, symbol, header, footer, section, article, nav, main, aside, style, noscript, script, link
  - - - dùng để tô màu cho text
    - - được sử dụng để căn lề văn bản theo chiều ngang.
        
        left (mặc định), right, center, justify
        
        Justify là cân chỉnh sao cho các dòng bằng nhau về chiều rộng, trong đó dòng
        cuối cùng chỉ canh trái
    - - dùng để xác định cách vẽ đường thẳng trong text.
      - none, underline, overline, line-through
    - - dùng để chỉ định chữ hoa, chữ thường.
      - uppercase, lowercase, capitalize
    - - Dùng để xác định khoảng thụt đầu dòng của dòng đầu tiên trong đoạn văn
    - - tăng/giảm khoảng cách giữa các ký tự.
    - - khoảng cách giữa các dòng (chiều cao của 1 dòng)
    - - tăng/giảm khoảng cách giữa các từ.
        Mặc định khoảng cách giữa các từ là 2.5em
    - - Cân chỉnh theo chiều dọc (xét trên 1 dòng).
      - Có một số giá trị:
        text-top, text-bottom, middle , super, sub
    - - chỉ định khoảng trắng trong văn bản được đối xử như thế nào.
      - Có một số giá
        trị: normal (mặc định), nowrap, pre, pre-line, pre-wrap.
        
        Nên quan tâm đến normal,
        nowrap và pre thôi.
        
        normal
        
        nhiều khoảng trắng kề nhau sẽ thành 1 khoảng trắng. Bọc lại khi cần thiết
        
        nowrap
        
        nhiều khoảng trắng kề nhau sẽ thành 1 khoảng trắng. Không bọc lại.
        
        pre
        
        nhiều khoảng trắng kề nhau sẽ được giữ nguyên. Không bọc lại. Xuống dòng được giữa nguyên. Thuộc tính này giống y như thẻ <pre>
        
        pre-line
        
        nhiều khoảng trắng kề nhau sẽ thành 1 khoảng trắng. Bọc lại khi cần
        thiết. Giữ nguyên xuống dòng.
        
        normal + xuống dòng
        
        pre-wrap
        
        nhiều khoảng trắng kề nhau được giữ nguyên. Bọc lại khi cần thiết.
        Giữa nguyên xuống dòng.
        
        pre + wrap
  - - - font-family:
        
        chỉ định loại font dùng cho văn bản (mặc định là tùy vào browser)
        
        Các font thường có sẵn trên máy người dùng: Arial, Helvetica, Times New
        Roman, Courier New, Verdana, Georgia, Tahoma, Calibri, Garamond, Bookman
        
        Tham khảo những font an toàn cho web
      - font-size:
        
        chỉ định kích thước font chữ dùng cho văn bản
      - font-weight:
        
        chỉ định độ đậm nhạt của văn bản
      - font-style:
        
        chỉ dịnh kiểu của font chữ