Kéo dài CSS

Định nghĩa và sử dụng

• Thẻ được sử dụng để nhóm các nội tuyến trong văn bản HTML.
• Ta có thể sử dụng span kèm theo css để định dạng một phần nội dung trong văn bản HTML

Sự khác nhau giữa HTML và XHTML

HTML4. 01XHTML1. 0XHTML1. 1Không có sự khác biệt

Ví dụ

viết Html

Đây là đoạn văn bản có sử dụng span.

Show the browser

Đây là đoạn văn bản có sử dụng span

Support browser

được hỗ trợ trong nhiều trình duyệt

Thuộc tính

Cách sử dụng

Thuộc tính tổng hợp (xem thêm)

Thuộc tínhGiá trịVí dụMô tả classTên class="section"Tên classdirrtl
ltrdir="rtl"Xác định hướng văn bản cho các nội dung trong một thành phần. idName idid="layout"Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id duy nhất có trong một thành phần) trong một bản HTMLlangMã language text="vi"Xác định mã ngôn ngữ . styleKiểu định dạng style="color. red"Xác định một định dạng cho một thành phần. tabindexSốtabindex="5"Xác định thứ tự tab của một thành phần. titleTexttitle="Đây là title"Xác định thêm thông tin cho thành phần. xml. langMã languagelang="vi"Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

Thuộc tính sự kiện

DTD Strict không được hỗ trợ

Thuộc tínhGiá trịVí dụMô tảonclickCode scriptonclick="code"Script chạy khi click chuột.ondblclickCode scriptondblclick="code"Script chạy khi double click chuột.onmousedownCode scriptonmousedown="code"Script chạy khi button chuột được nhấn.onmousemoveCode scriptonmousemove="code"Script chạy khi di chuyển con trỏ chuột.onmouseoutCode scriptonmouseout="code"Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.onmouseoverCode scriptonmouseover="code"Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.onmouseupCode scriptonmouseup="code"Script chạy khi button chuột được thả ra.onkeydownCode scriptonkeydown="code"Script chạy khi nút trên bàn phím được nhấn.onkeypressCode scriptonkeypress="code"Script chạy khi nút trên bàn phím được nhấn và thả ra.onkeyupCode scriptonkeyup="code"Script chạy khi nút trên bàn phím được thả ra.

thẻ được sử dụng làm vùng chứa chung của các phần tử nội tuyến. Nó được sử dụng cho mục đích tạo kiểu cho các thành phần nội tuyến được nhóm (sử dụng thuộc tính lớp và id hoặc kiểu nội tuyến)

Thẻ không có bất kỳ ý nghĩa hoặc hiển thị mặc định nào.

Thẻ có thể hữu ích cho tác vụ sau.

• Để thay đổi ngôn ngữ của một phần của văn bản
• Để thay đổi màu sắc, phông chữ, nền của một phần văn bản bằng CSS
• Để áp dụng các tập lệnh cho phần cụ thể của văn bản

Ghi chú. HTML rất giống với

gắn thẻ, nhưng

được sử dụng cho các phần tử cấp khối và thẻ được sử dụng cho các phần tử nội tuyến.

cú pháp

Sau đây là một số thông số kỹ thuật về thẻ HTML

DisplayInlineThẻ bắt đầu/Thẻ kết thúcCả thẻ bắt đầu và thẻ kết thúcSử dụngKiểu và ngữ nghĩa

Thí dụ

Kiểm tra nó ngay bây giờ

đầu ra

Thuộc tính

Thuộc tính dành riêng cho thẻ

Thẻ không chứa bất kỳ thuộc tính cụ thể nào trong HTML.

thuộc tính toàn cầu

Thẻ hỗ trợ thuộc tính Global trong HTML.

thuộc tính sự kiện

Thẻ hỗ trợ thuộc tính Sự kiện trong HTML.

Trình duyệt hỗ trợ

Phần tử Chrome IE Firefox Opera SafariYesYesYesYesYes

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Phần tử span HTML là một bộ chứa nội tuyến chung cho các phần tử và nội dung nội tuyến. Nó được sử dụng để nhóm các phần tử cho mục đích tạo kiểu (bằng cách sử dụng thuộc tính lớp hoặc id), Cách tốt hơn để sử dụng nó khi không có sẵn phần tử ngữ nghĩa nào khác

The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag. The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself. span is very similar to the div tag, but div is a block-level tag and span is an inline tag.

cú pháp.  

Some Text 

Thuộc tính. Thẻ này chấp nhận tất cả Thuộc tính toàn cầu và Thuộc tính sự kiện

ví dụ 1. Trong ví dụ này, chúng tôi chỉ đơn giản sử dụng thẻ span với style trong HTML

HTML

<____3____4

 

<body>

    ____2010>

________số 8

 

<67

8<<0 <1<2<3>

<5<6<0<8

8<<0 <1<2html4html5<0html7

    html96>

 

 

html9body>

 

html9html____4

đầu ra

HTML tag

Example 2: In this example, suppose we want to write three times GeeksforGeeks in three lines with bold, italic, underline, in green color with font-family = courier new, so we need to use many HTML tags such as , , , for every time in every line, and we want to make changes need to modify every tag.

HTML

<____3____4

 

<body>

_______8______20____280>

    ____2<0body4<0>

    ______2<0>0<0>

    ______2<0>6<0>

    ______2    1>

 

        4

    _______2    7     8<2<0 <1<2<3>

8<<7>

<5<01>

03<050605>

<5html901>

8html9<7>

    html9    7>

 

    ______2    1>

 

    26

    _______2    7     8<2<0 <1<2<3>

8<<7>

<5<01>

03<050605>

<5html901>

8html9<7>

    html9    7>

 

    ______2    1>

 

    68

    _______2    7     8<2<0 <1<2<3>

8<<7>

<5<01>

03<050605>

<5html901>

8html9<7>

    html9    7>

 

 

html9body>

 

html9html____4

đầu ra

Example 3: In this example, by using tag, we can reduce code and HTML Attributes, see the below example that will display the same output as the above example with using tag by applying CSS in a span tag.

HTML

<____3____4

 

<<16____4

    ____2<20<21<20>

 

    <25

    ____2<1 <29<2<31<32

8<34

<5<36

<5<38

<5<40

<5<42

<5<44

8<46

    ____39<1>

html9<16____4

 

<body>

    ______20____2600>

    ______2<006<0<68    1>

    ______2<006<0<68    1>

    ______2<006<0<68    1>

html9body>

 

html9html____4

đầu ra

Styling the tag using the CSS properties

Ví dụ 4. Như chúng ta đã biết, span là một thẻ nội tuyến & nó chiếm nhiều dung lượng theo yêu cầu và để lại không gian cho các phần tử khác. Tất cả các phần tử bốn nhịp sẽ hiển thị trên cùng một dòng vì mỗi thẻ chỉ chiếm không gian cần thiết và phần không gian còn lại dành cho các phần tử khác

HTML

<____3____4

 

<<16____4

html00<____220<21<20>

html9<16____4

 

<body>

html00<0<80>

html00html19

html00<<0 <1<2html25>

    ____328<0>

html00<<0 <1<2html36>

    html39____20>

html00<<0 <1<2html47>

    html50<0>

html00<<0 <1<2html4>

_______8____361____20>

html9body>

 

html9html____4

đầu ra

thẻ span minh họa phần tử nội tuyến để có được không gian cần thiết cho phần tử

Ví dụ 5. Thẻ span có thể được sử dụng để đặt màu/màu nền làm một phần của văn bản. Trong ví dụ dưới đây bên trong đoạn áp dụng, thẻ span ba lần với một phong cách khác.  

HTML

<____3____4

 

<<16____4

    ____2<20<21<20>

html9<16____4

 

<body>

_______8______20____280>

________số 8

___8html97

html98html99

________số 8

 

<6____4

8<<0 <1<2>09>

<5>12

8html9<0>16

8<<0 <1<2>22>23

8html9<0>27

8<<0 <1<2>33>34

8html9<0>38

    html96>

 

 

html9body>

 

html9html____4

đầu ra

Setting the color using tag

Ví dụ 6. Thao tác JavaScript với thẻ span, trong ví dụ dưới đây, chúng tôi thêm thẻ span vào trong một đoạn có id=”demo”, chúng tôi có thể thay đổi văn bản của nó bằng cách áp dụng javascript trong ví dụ này GFG sẽ được thay đổi thành “GeeksforGeeks” sau khi nhấp vào Nút.  

HTML

<____3____4

 

<body>

    ______20>590>

________số 8

 

<6____4

8<<0 >69<2>71

_______472<1____22____475>76

>77html9____20>

8>82

    html96>

 

 

________số 8

    >89

    ______2>92 <29<2>95

<5>97____498 <2

<00<01______202

_______8____39____492>

html9body>

 

html9html____4

đầu ra

Manipulation of the

programming css

Reply 5 0 Chia sẻ