<h1>Ví dụ tiêu đề 1h1>
<h2>Ví dụ tiêu đề 2h2>
<h3>Ví dụ tiêu đề 3h3>
<h4>Ví dụ tiêu đề 4h4>
<h5>Ví dụ tiêu đề 5h5>
<h6>Ví dụ tiêu đề 6h6>

3. CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó giúp tạo màu sắc cho hình ảnh, kiểu dáng,… cho trang HTML. Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên trang web như việc tạo ra các đoạn văn bản, tiêu đề, bảng,… thì CSS sẽ giúp chúng ta có thể thêm phong cách vào các phần tử

• Cách chèn CSS vào trang HTML. Có 3 cách chèn CSS vào trang HTML

  Cách 1: Chèn trong cặp thẻ đóng mở

<h1>Ví dụ tiêu đề 1h1>
<h2>Ví dụ tiêu đề 2h2>
<h3>Ví dụ tiêu đề 3h3>
<h4>Ví dụ tiêu đề 4h4>
<h5>Ví dụ tiêu đề 5h5>
<h6>Ví dụ tiêu đề 6h6>

cách 2. Chèn CSS ngay trong các dòng HTML bằng thuộc tính style=””

<h1>Ví dụ tiêu đề 1h1>
<h2>Ví dụ tiêu đề 2h2>
<h3>Ví dụ tiêu đề 3h3>
<h4>Ví dụ tiêu đề 4h4>
<h5>Ví dụ tiêu đề 5h5>
<h6>Ví dụ tiêu đề 6h6>

Cách 3. Chèn CSS bằng file. css

Chèn link file style.css vào file index.html được đặt bên trong thẻ :

<h1>Ví dụ tiêu đề 1h1>
<h2>Ví dụ tiêu đề 2h2>
<h3>Ví dụ tiêu đề 3h3>
<h4>Ví dụ tiêu đề 4h4>
<h5>Ví dụ tiêu đề 5h5>
<h6>Ví dụ tiêu đề 6h6>

Thuộc tính trong kiểu tệp. css as after

    <p>Nội dung đoạn văn bảnp>

4. Các thẻ CSS

• Unit. Trong css chia làm 2 loại đơn vị

  Tương đối (Đơn vị tương đối) là những đơn vị được tính theo cách tương đối dựa trên các phần tử khác (có thể là phần tử cha hoặc phần tử gốc). Các loại đơn vị này khá linh hoạt, rất thích hợp cho công việc thích ứng trên các thiết bị khác nhau. Một vài đơn vị tương thích với các đối tượng. rem, em, %, vw, vh, ex, ch, vmin, vmax

  Tuyệt đối (Absolute Units) là những đơn vị mà giá trị của nó không bao giờ thay đổi và không bị ảnh hưởng bởi các thành phần khác. Tức là trong mọi kích thước màn hình, kích thước của nó vẫn như thế. Với loại đơn vị này, bạn chỉ nên sử dụng cho những thứ có kích thước cố định kích thước hoặc kích thước nhỏ không quá ảnh hưởng như đường viền, … Một vài đơn vị tuyệt vời đối như. px, pt, cm, mm, máy tính, trong

Lúc mới học thì ta chỉ cần chú ý một vài đơn vị phổ biến

Đơn vị tương đối % – Đơn vị phần trăm sẽ tỷ lệ theo phần tử trực tiếp của nó

Ví dụ

    <p>Nội dung đoạn văn bảnp>

Đơn vị tương đối của đối tượng - là đơn vị mà giá trị của nó được tính dựa trên tỷ lệ so với phần tử cha của nó hoặc chính nó thông qua giá trị của thuộc tính font-size

Ví dụ

    <p>Nội dung đoạn văn bảnp>

Đơn vị tương đối rem (root em) tương tự như em, nhưng đơn giản là nó sẽ tỉ lệ theo thuộc tính font-size của phần tử root

Ví dụ

    <p>Nội dung đoạn văn bảnp>

Đơn vị tuyệt đối px – pixel (1px = 1/96th of 1in). Pixels (px) khác nhau giữa các thiết bị. Với các thiết bị có tốc độ phân giải thấp (thiết bị có dpi thấp), 1px là một dấu chấm hiển thị trên màn hình của thiết bị. Với máy vào và các thiết bị có độ phân giải cao, 1px quay lại là nhiều dấu chấm hiển thị trên màn hình của thiết bị

• Thuộc tính nền được sử dụng để thiết lập nền cho phần tử html

sử dụng màu nền để đặt màu nền cho một thành phần

Các loại màu trong css. https. //www. w3schools. com/css/css_colors. asp

    <p>Nội dung đoạn văn bảnp>

background-image định nghĩa cho hình nền của một thành phần. Nó là giá trị được định nghĩa bằng một đường dẫn hình ảnh với url ký hiệu ()

    <p>Nội dung đoạn văn bảnp>

lặp lại nền kiểm tra cách hình nền sau khi nó được đặt kích thước (theo thuộc tính kích thước nền) và vị trí (theo thuộc tính nền-vị trí). Giá trị của thuộc tính này có thể là một trong những từ khóa sau. lặp lại-x, lặp lại-y, lặp lại, dấu cách, vòng, không lặp lại

kích thước nền định nghĩa kích thước của hình nền. Giá trị của nó có thể là chiều dài và chiều rộng hoặc là tỷ lệ phần trăm. Từ khóa có sẵn thuộc tính là chứa và che phủ. Giá trị chứa sẽ mở rộng hình ảnh để phù hợp với khung. giá trị bìa, ở một mặt khác, nó sẽ kéo mở rộng hình ảnh sao cho phù hợp với khung mà không gây ra sai lệch tỷ lệ

• Sử dụng cỡ chữ để thiết lập "kích thước chữ" của văn bản

• Định dạng văn bản. màu - thêm màu chữ, thiết lập chữ in hoa và thông thường với ‘text-transform’. chữ hoa. chuyển đổi trong văn bản hoa văn, chữ thường. chuyển đổi trong văn bản văn bản thông thường

• Thiết lập vị trí của văn bản gốc (trái, phải, giữa, đều) với 'text-align'. trung tâm. hiển thị văn bản ngay giữa. bên trái. show text side left. đúng. hiển thị văn bản bên phải. biện minh. display text canh đều so với lề phải và lề trái

• Trang trí gạch chân, gạch đầu dòng text với ‘text-decoration’. gạch đầu dòng. gạch ngang trên văn bản. gạch dưới. gạch dưới văn bản văn bản. đường cắt ngang. gạch ngang chữ text. không ai. không có gạch đá gì cả

• Hình ảnh

Ví dụ

    <p>Nội dung đoạn văn bảnp>

• liên kết. Ta can use css setting style for the status link

Trạng thái. liên kết – biểu thị rằng trang web này trình duyệt chưa lưu (người dùng tức thì nhấp lần đầu tiên vào đường dẫn này)

Trạng thái. đã truy cập – biểu thị rằng đường dẫn đến trang web này đã được lưu bởi trình duyệt (tức là người sử dụng đã nhấp vào đường dẫn này trước đó rồi)

Trạng thái. hover – biểu thị rằng khi người sử dụng di chuyển chuột qua phần tử có chứa liên kết đó (tức là phần tử đó là một liên kết khi người sử dụng di chuyển chuột qua phần tử đó)

Trạng thái. đang hoạt động – biểu tượng đường liên kết đang hoạt động khi người dùng nhấp chuột vào

Ví dụ

    <p>Nội dung đoạn văn bảnp>

• Class và Id

Thuộc tính id được sử dụng để đặt tên cho một phần tử trong HTML, mỗi thuộc tính id chỉ được xác định cho một phần tử duy nhất trong tệp HTML hiện hành

Giá trị id được sử dụng trong CSS hoặc JavaScript để chỉ công cụ có thể định dạng hoặc thực hiện tác vụ được xác định rõ nhất cho phần tử đó

Thuộc tính lớp được sử dụng để đặt tên cho các phần tử trong html, mỗi lớp thuộc tính có thể chỉ định cho nhiều phần tử HTML (cùng hoặc loại khác) để có cùng định dạng

Giá trị lớp được sử dụng trong CSS hoặc JavaScript để chỉ định đồng loạt các định dạng chung hoặc thực hiện tác vụ chung cho các phần tử HTML có cùng lớp thuộc tính

    <p>Nội dung đoạn văn bảnp>

• Phần tử khối so với phần tử nội tuyến Khối chiếm toàn bộ khoảng trắng mà nó có thể chiếm theo chiều ngang (các khả năng h1, h2, thẻ p, … có mặc định là phần tử khối)

  Còn inline thì có thể chọn các phần tử hiển thị trên cùng 1 dòng ngang (các thẻ img, thẻ input, textarea, …. This default is inline element )

  Tham khảo. https. //www. w3schools. com/html/html_blocks. asp

• hộp mô hình css

in which

Nội dung. Vùng hiển thị nội dung (văn bản, hình ảnh,…) của phần tử HTML

đệm. Khoảng đệm từ nội dung (nội dung) đến đường viền (Border), bao quanh các mặt của nội dung

Biên giới. Đường bao quanh các phần tử HTML, bao quanh các mặt của Padding

Lề. Khoảng cách từ đường viền (Border) của phần tử này đến các phần tử khác hoặc các phần của trang Web (viền trang web), bao quanh các mặt của Border

• Đường viền css ta dùng thuộc tính border

Use border type { border-style. giá trị;}

Độ dày của khung được sử dụng

chiều rộng biên giới. giá trị;

Màu sắc của đường viền ta sử dụng

màu viền. giá trị;

Thiết lập đường viền cho từng cạnh (trên, phải, dưới, trái)

    <p>Nội dung đoạn văn bảnp>

9

• Sử dụng đặt lại css để giúp thiết lập các kiểu của tất cả các đối tượng HTML (phần tử) theo một tiêu chuẩn nhất định

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

• đệm. used to make not space between the content and border (bên trong đường viền)

  Padding:

• Margin to create not space between the border of this section with other element (Bên ngoài Border)

  Margin:

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

• Chức vụ

  Trong những bài trước, ta có thể biết khi thay đổi hoặc di chuyển một phần tử nào đó qua Model Box của nó thì các phần tử liền kề đều bị ảnh hưởng

In this question set up. "Làm thế nào để chuyển một phần tử mà không ảnh hưởng đến các phần tử khác hoặc không làm thay đổi định dạng cục bộ sẵn có của trang web mà bạn đã định sẵn?"

Giải pháp cho vấn đề này chính là Vị trí

Thuộc tính Vị trí chỉ cách định vị trí của một phần tử

Thuộc tính vị trí. fixed With the value position is fixed, will get the start is the root screen screen browser, do that when you scroll trang website down (dùng chuột cuộn xuống) thì nó vẫn luôn nằm trên vị trí màn hình mà bạn quan sát

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

Thuộc tính vị trí. relative With value position is relative thì chúng ta có thể di chuyển vị trí của nó xung quanh vị trí ban đầu, lấy vị trí ban đầu làm việc

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

Thuộc tính vị trí. tuyệt đối Với thuộc tính vị trí tuyệt đối thì sẽ lấy góc của phần tử cha có chứa thuộc tính vị trí gần nhất là lửa

    <p>Nội dung đoạn văn bản 1p>
    <br>
    <br>
    <br>
    <p>Nội dung đoạn văn bản 2p>

5. Tổng kết

Qua bài viết này mình đã giới thiệu về định nghĩa html, css, cũng như cách sử dụng 1 số thẻ cơ bản của html, css. Hy vọng được thảo luận và góp ý của anh em