CSS căn bản cho người sáng tạo nội dung HTML

Bài giới thiệu cơ bản CSS cho mã HTML để có ý tưởng thiết kế nội dung.
Một trang nội dung phức tạp thường phải có "sự kết hợp giữa CSS và HTML" để tạo ra "những cách trình bày" theo "những điều kiện nào đó". Công thức chung CSS về sự kết hợp này sẽ giúp cho bạn cảm thấy đơn giản, dễ hiểu dễ nhớ và thực hiện được ngay.

Ghi chú:
  1. Cách trình bày bài hướng dẫn này dành cho số đông, không viết dành cho chuyên gia HTML.
  2. Đây là kiến thức CSS cơ bản, khi cần dùng đến CSS-Grid, Table được tạo sẵn trong "CSS dành cho W3AMP", thì bạn cảm thấy mọi thứ đã trở nên quá dễ.

A. Ví dụ: bạn đề ra một ý tưởng thiết kế là:

Một bài viết được chia nhỏ để trong nhiều khối.
Bố cục bài viết "trên mỗi kích thước màn hình" là khác nhau (điện thoại, máy tính bảng, latop..): "vị trí" và "cách hiển thị của từng khối",..
Mỗi khối có cách làm đẹp riêng: đường viền, màu nền, chứa gì bên trong nó.
Từng đoạn text được trang trí kiểu font chữ, kích thước, màu sắc...
Và làm đẹp cho các đối tượng khác cũng tương tự như một đoạn text... mà thôi!?

B. Và bạn sẽ hiện thực nó bằng cách kết hợp HTML-Tags với CSS

HTML-Tags nên được hiểu là dùng để tạo ra những khối. Bên trong những khối lại có thể chứa những khối khác, hoặc đơn giản là chứa một đoạn text, hoặc chứa hình...vv
Những HTML-Tag căn bản thường dùng:
Những HTML-Tag khác:

Nếu không có CSS thì các khối đó có cách hiển thị mặc định, thường là các khối nằm nối tiếp hoặc xêp chồng lên nhau. Có CSS, bạn có thể chỉnh cho từng khối:
  • Kích thước: thường dùng đơn vị là px(pixel) và %.
    Có thể điều chỉnh các yếu tố theo width,height,min-width,min-height,max-width,max-height.
    Ví dụ <div style="min-width:320px;max-width:350px;height:480px; background:#336699;padding:20px;color:#ffffff">Hello world</div>
  • Vị trí các khối: canh giữa, dùng <center></center>, phải: float:right
  • Đường viền: border: size type color. Ví dụ: <div style="border:3px dotted #4B0082;font-size:200%;color:FireBrick;text-align:center;background:lavender">Hello world</div>
  • Màu sắc: màu font chữ, màu nền, đường viền
  • Font chữ: Loại font (cung cấp bởi Google), kích thước, màu sắc

    • C. Công thức chung

    Chỉ cần bạn nắm rõ mẫu tham khảo này, có thể áp dụng cho mọi ý tưởng thiết kế.
    <HTML-TAG style=❝
    float:right;
    width:100px;min-height:200px;max-height:300px;
    background:#00ff00;
    border: 2px solid #555555;
    padding: 10px 11px 12px 13px;
    margin: 1px 2px 3px 4px;
    color:white;
    font-family:K2D;font-size:123%; ❞>
    Any HTML Code inside...
    </HTML-TAG>

    GHI CHÚ VÀ GIẢI THÍCH

    Trong đoạn code mẫu trên, ký hiệu #xxxxxx là mã màu sắc.
    1. HTML-TAG có thể là: a, div, span, td... xem đầy đủ ở đây
    2. Mẫu: <HTML-TAG style=❝❞> nội dung bị CSS áp dụng </HTML-TAG>
    3. Bên trong style=❝mã lệnh1;mã lệnh2;..;mã n❞ Các đoạn mã cách nhau bởi dấu;
    4. float:right Cho phép nó nằm sát mép bên phải màn hình.
      Nếu như muốn nó nằm ngay chính giữa, hãy thêm vào <center> ... </center>
    5. width,height: Chiều rộng và chiều cao... xin xem ở mục kích thước - CSS
    6. background:#MÃMÀU Chỉnh màu nền
    7. border: 2px solid MÃMÀU Đường viền dày 2pixel có màu sắc #MÃMÀU
      Kiểu đường viền: solid
      Còn các kiểu khác nữa như: solid, dotted, dashed, double và none
    8. padding: 10px 11px 12px 13px;
      Tương đương với kiểu viết khác: padding-top:10px;padding-right:11px;padding-bottom:12px;padding-left:13px;
      Để chỉnh lề cho nội dung bên trong - cách viền: phía trên 10 pixel, bên phải 11px, dưới: 12px, bên trái: 13px.
    9. margin giống như padding, khác ở chỗ là viền của nó cách với đối tượng phía bên ngoài - kế bên nó.
    10. color:MÃMÀU Chỉnh màu sắc của đoạn text bên trong
    11. font-family:Tên font chữ chọn kiểu font cho đoạn text bên trong. Có hơn 1400 fonts
    12. font-size:123% phóng to (nhỏ) đoạn text bằng 123% lần. Có thể sử dụng đơn vị px,em hoặc %.
    13. MÃ MÀU: Xin xem ở đây "color-names-in-html"

    D. CÁC VÍ DỤ

    <div style="min-width:320px;max-width:350px;height:480px; background:#336699;padding:20px;color:#ffffff">Hello world</div>
    Hello world

    <div style="border:3px dotted #4B0082;font-size:200%;color:FireBrick;text-align:center;background:lavender">Hello world</div>
    Hello world

    Any HTML Code inside...
    <DIV style="
    float:right;
    width:100px;min-height:200px;max-height:300px;
    background:#00ff00;
    border: 2px solid #555555;
    padding: 10px 11px 12px 13px;
    margin: 1px 2px 3px 4px;
    color:white;
    font-family:K2D;font-size:123%; ">
    Any HTML Code inside...
    </DIV>


    E. Cách hành văn & Dành cho chuyên gia

    Đa số người từng làm admin, là người chuyên gia một lĩnh vực nào đó, không phải chuyên gia về mã nguồn web. Cho nên, chúng tôi viết bài hướng dẫn cô đọng nhất, theo kiểu trực quan. Mong rằng, người đọc sẽ hiểu và thấy rõ việc trình bày một nội dung bài viết dạng khối là không quá khó.
    Khi bạn quen dần một số lệnh và một số thuật ngữ, bạn sẽ tự phối hợp các cách dùng hoặc dễ dàng tìm thấy các trang tham khảo cung cấp tài liệu chi tiết và đầy đủ về HTML, AMP.dev, CSS.

    Chúc bạn cảm thấy thoải mái sáng tạo nội dung,
    trình bày nội dung được như ý muốn

    Nếu bạn cần hỗ trợ, xin truy cập mục "Check website health" ở menu trái trên trang admin, sau đó chọn bài viết cần gửi cho chúng tôi bằng cách bấm [contact] kế bên đường link. Chúng tôi sẽ có những gợi ý phù hợp với nhu cầu của bạn, theo đó, bạn sẽ có thêm kinh nghiệm thực tế trong việc trình bày nội dung!
    Create Blog     Contact   Terms