Tìm hiểu kiến ​​thức cơ bản về CSS bằng cách tạo thành phần thẻ – cách tạo thẻ trong css

Nếu bạn muốn làm cho trang web của mình trông hấp dẫn, bạn cần biết CSS. CSS, hay Trang tính kiểu xếp tầng, là một ngôn ngữ trang định kiểu được sử dụng để tạo kiểu cho nội dung trang web của bạn. Trong hướng dẫn này, chúng ta sẽ tìm hiểu các khái niệm cơ bản về CSS bằng cách xây dựng một thành phần thẻ từ

Bạn đang xem: cách tạo thẻ trong css

Nếu bạn muốn làm cho trang web của bạn trông hấp dẫn, bạn cần biết CSS.

CSS, hoặc Cascading Style Sheets, là một ngôn ngữ biểu định kiểu được sử dụng để tạo kiểu cho nội dung web của bạn.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về các khái niệm cơ bản về CSS bằng cách xây dựng thành phần thẻ từ đầu.

Nếu bạn muốn làm theo, hãy nhớ xem thiết kế tại đây .

Đây là video bạn có thể xem nếu bạn muốn bổ sung bài viết này:

Nếu bạn đã sẵn sàng, hãy bắt đầu.

Cách tạo khung với HTML

Trước khi bắt đầu làm việc với CSS, chúng ta cần một số nội dung để làm việc với. Trong phần này, chúng ta sẽ nhanh chóng xây dựng một khung bằng HTML. Nếu chưa quen với HTML, bạn có thể xem hướng dẫn tại đây .

Được rồi, hãy mở VS Code. Sau đó, trong thư mục bạn chọn, tạo một tệp mới và đặt tên là index.html .

Trong tệp, nhập ! và nhấn enter. Sau đó, bạn sẽ có mẫu HTML này:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
  & lt; meta charset = "UTF-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
  
& lt; / body & gt;
& lt; / html & gt;
 

Công việc của chúng tôi là xây dựng một thành phần thẻ có hình ảnh, thẻ, tên, mô tả và một nút như sau:

Văn bản thay thế

Trong index.html , trước tiên, hãy thay đổi nội dung tiêu đề từ Document thành Khái niệm cơ bản về CSS . Và trong phần tử & lt; body & gt; , hãy thêm tất cả các phần tử chúng ta cần:

  ...
& lt; body & gt;

  & lt;! - Một div có id vùng chứa để giữ thẻ - & gt;
  & lt; div id = "container" & gt;

    & lt;! - Một div có hạng thẻ cho thẻ - & gt;
    & lt; div class = "thẻ" & gt;
      & lt; img src = "https://images.unsplash.com/photo-1536323760109-ca8c07450053" alt = "Lago di Braies" & gt;

      & lt;! - Một div có lớp card__details để giữ các thông tin chi tiết trong thẻ - & gt;
      & lt; div class = "card__details" & gt;

        & lt;! - Kéo dài với lớp thẻ cho thẻ - & gt;
        & lt; span class = "tag" & gt; Bản chất & lt; / span & gt;

        & lt; span class = "tag" & gt; Lake & lt; / span & gt;

        & lt;! - Một div có lớp tên cho tên của thẻ - & gt;
        & lt; div class = "name" & gt; Lago di Braies & lt; / div & gt;

        & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur sodales morbi dignissim sed diam
          pharetra
          vitae ipsum odio. & lt; / p & gt;

        & lt; nút & gt; Đọc thêm & lt; / button & gt;
      & lt; / div & gt;


    & lt; / div & gt;
  & lt; / div & gt;

& lt; / body & gt;

...
 

Được rồi, bây giờ chúng ta đã có khung cho thành phần của mình. Nếu bạn muốn xem những thay đổi này trực tiếp trong trình duyệt, bạn có thể sử dụng tiện ích mở rộng Máy chủ trực tiếp .

Tạo kiểu bằng CSS

Tiếp theo, chúng ta cần tạo kiểu cho thành phần. Đây là phần chính của hướng dẫn. Trong khi xây dựng thành phần thẻ, tôi cũng sẽ giải thích các khái niệm khác nhau trong phần này.

Cách áp dụng CSS vào HTML

Trước tiên, hãy xem xét 3 cách để áp dụng CSS vào HTML:

  1. Bảng định kiểu bên ngoài

Biểu định kiểu bên ngoài là cách tốt nhất cách phổ biến và hữu ích. Nó chứa CSS trong một tệp riêng biệt, có phần mở rộng là .css .

Bạn có thể thêm một biểu định kiểu bên ngoài bằng cách tạo một tệp mới, style.css , trong cùng thư mục với index.html . Và bên trong phần tử & lt; head & gt; , bạn có thể nhập biểu định kiểu với nội dung sau:

  & lt; link rel = "stylesheet" href = "style.css" & gt;
 

Với phương pháp này, có thể sử dụng cùng một biểu định kiểu để áp dụng CSS cho nhiều trang.

2. Bảng định kiểu nội bộ

Bạn có thể thêm biểu định kiểu nội bộ bằng cách đặt CSS bên trong phần tử & lt; style & gt; bên trong & lt; head & gt; Phần tử. Ví dụ:

  & lt; head & gt;
  & lt; phong cách & gt;
    /* phong cách của bạn */
  & lt; / style & gt;
& lt; / head & gt;
 

Phương pháp này hữu ích khi bạn phải làm việc với hệ thống ngăn bạn chỉnh sửa các biểu định kiểu bên ngoài.

Một nhược điểm của phương pháp này là không thể áp dụng các kiểu cho nhiều trang.

3. Kiểu nội tuyến (tránh sử dụng)

Bạn cũng có thể thêm kiểu trực tiếp vào một phần tử bằng cách sử dụng thuộc tính style . Ví dụ: nếu bạn muốn đổi màu văn bản của đoạn văn thành màu đỏ:

  & lt; p style = "color: red;" & gt; paragraph & lt; / p & gt ;
 < strong> không  là một phương pháp hay - rất khó đọc và khó hiểu, do đó, bạn nên tránh thực hiện khi có thể. 

Cách thêm biểu định kiểu bên ngoài vào thành phần thẻ

Được rồi, bây giờ bạn đã biết cách áp dụng CSS cho HTML. Đối với bài tập này, hãy sử dụng một biểu định kiểu bên ngoài.

Tạo một tệp mới có tên style.css và thêm & lt; link rel = "stylesheet" href = "style.css" & gt; vào bên trong Phần tử & lt; head & gt; .

CSS ruleset

Nếu bạn muốn cung cấp cho hình ảnh chiều rộng 50%, bạn có thể làm như vậy bằng cách thêm cái này:

  img {
  chiều rộng: 50%;
}
 

Để chọn và tạo kiểu cho một phần tử, bạn cần có một bộ chọn, thuộc tính bạn muốn tạo kiểu và giá trị của thuộc tính.

Thuộc tính phải nằm bên trong dấu ngoặc nhọn và nó phải được phân tách bằng dấu hai chấm và kết thúc bằng dấu chấm phẩy, toàn bộ cấu trúc này được gọi là ruleet:

y6g4upcbymin9kyjl0lr-1

Tạo kiểu các phần tử của chúng tôi

  1. Phần tử body

Đối với phần tử body , chúng tôi muốn thay đổi màu nền và họ phông chữ:

  body {
  màu nền: # eaeff1;
  font-family: "Raleway", sans-serif;
}
 

Tuy nhiên, để phông chữ Raleway hoạt động, chúng ta cần nhập phông chữ. Chúng tôi có thể làm như vậy bằng cách đặt nó vào dòng đầu tiên của biểu định kiểu.

  @ import url ("https://fonts.googleapis.com/css2?family = Raleway: wght @ 500; 600 & amp; display = swap ");
 

Để tìm hiểu thêm về các phông chữ của Google, bạn có thể truy cập font.google.com .

Được rồi, nếu màu nền của phần nội dung và phông chữ đã thay đổi, xin chúc mừng, bạn vừa thêm CSS đầu tiên của mình 🎉

2. Phần tử img

Hiện tại, hình ảnh có chiều rộng ban đầu, nhưng chúng tôi muốn nó vừa với màn hình. Chúng tôi có thể làm như vậy bằng cách cung cấp cho nó chiều rộng 100%:

  img {
  chiều rộng: 100%;
}
 

Chúng tôi cũng muốn cung cấp cho nó một đường viền tròn và cung cấp cho nó một chiều cao nhỏ hơn so với ban đầu:

  img {
  ...
  bán kính đường viền: 12px;
  chiều cao: 214px;
}
 

Bây giờ, bạn có thể thấy hình ảnh bị méo. Chúng tôi có thể khắc phục bằng cách thêm object-fit: cover; :

  img {
  ...
  object-fit: che đậy;
}
 

Được rồi, bây giờ bạn sẽ có một hình ảnh đáp ứng với chiều cao là 214px. Vì vậy, hãy tiếp tục.

3. Tạo kiểu cho vùng chứa

Tiếp theo, chúng ta cần tạo kiểu cho phần tử div có thuộc tính id của container . Đây sẽ là yếu tố quyết định chiều rộng của thẻ và đặt nó ở giữa chế độ xem.

Để chọn vùng chứa, hãy thêm:

  # vùng chứa {
  chiều rộng tối đa: 300px;

  / * Căn giữa vùng chứa trên trục hoành * /
  margin: 0 auto;

  / * Thêm không gian trống phía trên vùng chứa (20% chiều cao của chế độ xem) * /
  margin-top: 20vh;
}
 

Bạn có thể thấy rằng chúng tôi sử dụng margin: 0 auto; để căn giữa phần tử div max-width of 300px .

Bây giờ, bạn chỉ cần nhớ thủ thuật này. Trong các bài hướng dẫn trong tương lai, chúng tôi sẽ đi sâu hơn vào cách hoạt động của lề và cách căn giữa các phần tử.

4. Tạo kiểu cho thẻ

Để tạo kiểu cho thẻ, chúng ta cần chọn phần tử div có loại thẻ . Chúng tôi cũng muốn cung cấp cho nó màu nền trắng, đường viền và khoảng cách giữa nội dung và đường viền:

 . Card {
  / * Thay đổi màu nền * /
  nền-màu: trắng;

  /* Thêm biên giới */
  border: 1px solid # bacdd8;

  / * Thêm khoảng cách giữa đường viền và nội dung * /
  đệm: 8px;

  bán kính đường viền: 12px;
}
 

Được rồi, bây giờ chúng ta đã hoàn thành việc tạo kiểu cho thành phần hoàn chỉnh. Hãy nhanh chóng tạo kiểu cho các phần tử còn lại:


/ * Các phần tử div kiểu có lớp bằng thẻ * /
.nhãn {
  đệm: 4px 8px;
  border: 1px solid # e5eaed;

  bán kính đường viền: 50px;
  font-size: 12px;
  font-weight: 600;
  màu: # 788697;
}

/ * Các phần tử div kiểu có lớp bằng tên * /
.Tên {
  kích thước phông chữ: 24px;
  font-weight: 600;

  margin-top: 16px;
}

/ * Phần tử p kiểu * /
P {
  font-size: 14px;
  màu: # 7f8c9b;
  chiều cao dòng: 150%;
}

/ * Phần tử nút kiểu * /
cái nút {
  biên giới: không có;
  đệm: 12px 24px;
  bán kính đường viền: 50px;

  font-weight: 600;
  màu: # 0077ff;
  màu nền: # e0efff;

  / * Nút là phần tử khối nội tuyến theo mặc định, nó cần có hiển thị khối cho lề: 0 auto; làm việc */
  margin: 0 auto;
  hiển thị: khối;

  / * Nút là một phần tử có thể nhấp, do đó nó phải có một con trỏ trỏ * /
  con trỏ: con trỏ;
}

.chi tiết thẻ {
  / * Thêm không gian xung quanh các chi tiết * /
  đệm: 16px 8px 8px 8px;
}
 

5. Tạo kiểu cho nút khi được lấy tiêu điểm hoặc khi di chuột

Khi nút được đặt tiêu điểm hoặc di chuột, nó tốt có một số dấu hiệu về khả năng sử dụng. Bạn có thể làm như vậy bằng cách chuyển đổi văn bản và màu nền của nút:

  / * Thêm kiểu khi nút được đặt tiêu điểm hoặc di chuột * /
nút: tiêu điểm,
nút: di chuột {
  màu nền: # 0077ff;
  màu: # e0efff;
}
 

Được rồi, bây giờ chúng ta đã hoàn tất việc tạo kiểu cho thành phần. Hãy xem nhanh cách hoạt động của lề, đệm và đường viền trong phần tiếp theo.

Mô hình hộp CSS

Trong CSS , mọi phần tử là một hộp. Mỗi hộp có các thuộc tính sau:

  • Khoảng đệm : Khoảng trắng bên ngoài nội dung
  • Đường viền : Các dòng bên ngoài phần đệm
  • Lề : Khoảng trắng bên ngoài đường viền

acdnznf06c6qgoxid7xw

Ký quỹ

Chúng tôi sử dụng ký quỹ để thêm không gian vô hình bên ngoài một phần tử và đẩy các phần tử khác ra xa.

Đối với thành phần thẻ của chúng tôi, chúng tôi đã sử dụng lề để thêm không gian trống phía trên vùng chứa, khoảng cách giữa tên và thẻ, đồng thời căn giữa thẻ trên trục hoành.

Bạn có thể đặt margin-top , margin-bottom , margin-left margin -phải riêng lẻ. Hoặc bạn có thể sử dụng cách viết tắt này:

  margin: topValue rightValue bottomValue leftValue;
margin: verticalValue ngangValue;
 

do4y57sxjpkf08o6o01y

Border

Thuộc tính border thêm đường viền xung quanh một phần tử. Đối với thành phần thẻ của chúng tôi, chúng tôi đã thêm đường viền xung quanh thẻ và mỗi thẻ.

Bạn có thể đặt border-top , border-bottom , border-left , border-right , border-width , border-style border-color . Hoặc bạn cũng có thể sử dụng cách viết tắt sau:

  border: widthValue styleValue colorValue;
 

oybb0vi7djd1nlib543i

Padding

Padding được sử dụng để thêm khoảng trống bên trong giữa đường viền và nội dung của nó. Trong thành phần thẻ của mình, chúng tôi đã sử dụng padding trong thẻ và nút.

Bạn có thể đặt padding-top , padding-bottom , padding -left padding-right . Hoặc bạn có thể sử dụng cách viết tắt này:

  padding: topValue rightValue bottomValue leftValue;
padding: verticalValue ngangValue;
 

572lkbb2j8npxn7isifq

Kết luận

Vậy là kết thúc phần hướng dẫn.

Có nhiều khái niệm CSS quan trọng khác cần tìm hiểu. Nhưng với hướng dẫn này, bạn nên sẵn sàng sử dụng CSS trong dự án tiếp theo của mình để làm cho nó trông đẹp hơn.

Bạn có thể theo dõi tôi trên Twitter hoặc YouTube cho các video và hướng dẫn trong tương lai. Nhưng hiện tại, chúc bạn viết mã vui vẻ và hẹn gặp lại bạn trong các bài viết sau.

__________ 👋 Giới thiệu về tôi __________

Tôi là một nhà phát triển toàn diện, một UX / Người thiết kế giao diện người dùng và người tạo nội dung.

Tôi cũng là người sáng lập của d evChallenges . Bạn có thể tìm thêm các video hướng dẫn này tại devchallenges.io/learn .


Xem thêm những thông tin liên quan đến chủ đề cách tạo thẻ trong css

Tạo bảng(Table) trong Html, Css siêu chi tiết | Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-11-15
  • Đánh giá: 4 ⭐ ( 9771 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này giúp bạn nắm bắt được cách sử dụng bảng(table) trong html. Ngoài ra tôi hướng dẫn bạn cách định dạng css cho những phần ở trong bảng để hiển thị theo ý mình.
    Tóm tắt:
    TẠO BẢNG TABLE TRONG HTML
    - Bảng dùng để hiển thị dữ liệu bảng
    - Bảng có hàng, cột, ô

    Tạo bảng html
    - table: Bao quanh bảng
    - tr: Hàng của bảng
    - td: Cột của bảng
    - thead: Tiêu đề bảng
    - tbody: Thân bảng
    - tfoot: Chân bảng
    - ...

    Css cho border
    - Căn lề
    - Padding
    - Border
    - Hover
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

các cách viết CSS

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 2168 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học Cú pháp CSS - các cách viết CSS, các dạng style css như external, internal, inline và lưu ý khi viết css để tối ưu onpage

Tạo Menu Website Với HTML Và CSS Như Thế Nào?

  • Tác giả: codelearn.io
  • Đánh giá: 5 ⭐ ( 7724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết các trang web ngày nay đều có phần menu và khi click vào menu sẽ trỏ ra một list các menu item ở phía dưới, hãy cùng thử làm với menu của codelearn nhé

Cách Tạo Select HTML5 CSS3 Và 27 Ví Dụ Thực Tế Trong Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 8164 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta cùng nhau đi vào thiết kế thẻ select cho trang web bằng HTML, CSS và Javascript nhé!

Ví dụ về các thẻ trong CSS

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 6338 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ về CSS cho bạn hiểu rõ hơn về cách sử dụng các thẻ - Học Web Chuẩn.

CSS trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 9501 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách viết CSS trong HTML.

Cách dùng thẻ div trong HTML để tạo các khối giao diện

  • Tác giả: web888.vn
  • Đánh giá: 4 ⭐ ( 9624 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Các kiểu dữ liệu SQL cho MySQL, SQL Server và MS Access - kiểu dữ liệu float sql