Nội dung CSS của nút
|
Nút văn bản là một nút có vẻ như là văn bản nhưng hoạt động như một nút nếu chúng ta nhấn nó. Các nút văn bản khác với các thẻ neo ngay cả khi chúng có thể trông giống nhau. Để tạo các nút văn bản trước tiên chúng ta tạo các nút đơn giản trong HTML bằng cách sử dụng thẻ nút. Sau khi tạo nút, chúng tôi áp dụng CSS và thay đổi các thuộc tính của nó để làm cho nó trông giống như một nút văn bản. Để làm cho nó trông giống như một nút văn bản, chúng tôi xóa đường viền và nền mặc định của nó. Để xác định rằng đó là một nút, chúng tôi cung cấp màu di chuột, vì vậy khi chúng tôi di chuyển con trỏ qua nút đó, nó sẽ thay đổi màu từ trong suốt sang xanh lục Show cú pháp #textButton{
background:none;
border:none;
}
#textButton:hover{
background-color: green;
}Thí dụ. Sau đây minh họa cách tiếp cận trên. Chúng tôi đã tạo một tệp HTML và chúng tôi đã tạo một nút có tên “GeeksforGeeks” bằng cách sử dụng thẻ nút có id là “textButton”. Sau đó, chúng tôi đã tạo một thẻ kiểu trong đó chúng tôi đã chọn nút đó bằng cách sử dụng id của nó và xóa các thuộc tính nền và đường viền của nó bằng cách đặt chúng thành không. Chúng tôi đã thêm màu nền di chuột để người dùng có thể xác định nút của chúng tôi. CSS chủ yếu được sử dụng để cung cấp phong cách tốt nhất cho trang web HTML. Sử dụng CSS, Chúng tôi có thể chỉ định cách sắp xếp các thành phần trên trang Có nhiều phương pháp căn chỉnh nút ở giữa trang web. Chúng ta có thể căn chỉnh các nút theo chiều ngang cũng như chiều dọc. Chúng ta có thể căn giữa nút bằng cách sử dụng các phương pháp sau
Hãy hiểu các phương pháp trên bằng cách sử dụng một số hình ảnh minh họa Thí dụTrong ví dụ này, chúng tôi đang sử dụng thuộc tính text-align và đặt giá trị của nó thành trung tâm. Nó có thể được đặt trong thẻ body hoặc trong thẻ div cha của phần tử Ở đây, chúng tôi đặt text-align. trung tâm; Kiểm tra nó ngay bây giờđầu ra Thí dụTrong ví dụ này, chúng tôi đang sử dụng màn hình. lưới; . Tự động; . Ở đây, chúng tôi đặt màn hình. lưới; Nút sẽ đặt ở trung tâm của các vị trí ngang và dọc Kiểm tra nó ngay bây giờđầu ra Thí dụĐây là một ví dụ khác về việc đặt nút ở trung tâm. Trong ví dụ này, chúng tôi đang sử dụng màn hình. uốn cong; . trung tâm; . trung tâm; Ví dụ này sẽ giúp chúng ta đặt nút ở giữa vị trí ngang và dọc Các nút được tạo kiểu giúp bạn tạo các trang web thú vị. Có rất nhiều kiểu mà bạn có thể áp dụng cho các nút. Dưới đây là hướng dẫn để tạo kiểu nút Lúc đầu, tạo một phần tử Vì vậy, đã đến lúc áp dụng các kiểu cho nút của bạn. Hãy làm điều đó từng bước một Chúng tôi đang bắt đầu bằng cách thêm các phong cách này
Bây giờ, chúng ta sẽ đi vòng quanh các đường viền và sử dụng thuộc tính border. Ngoài ra, hãy làm cho văn bản của chúng tôi lớn hơn một chút. Vì vậy, hãy thêm những dòng này vào mã Tốt hơn nhiều, phải không? Hãy thêm con trỏ. con trỏ để có biểu tượng tay trong khi đưa con trỏ của chúng ta đến nút và đặt lề một chút là 5px, vì vậyBạn cần phải nhận thức được một sự khác biệt nhỏ ở đây. Trong ví dụ trước, khi chúng ta di chuyển con trỏ đến văn bản Gửi, nó sẽ bị biến thành bàn tay. Nhưng bây giờ toàn bộ nút sẽ chuyển thành bàn tay ngay khi chúng ta di chuyển chuột về phía nó Bước thứ ba của bạn là tạo kiểu cho trạng thái di chuột để đưa ra phản hồi trực quan cho người dùng khi trạng thái của nút thay đổi Thay đổi màu khi di chuột quá nhanh và không dễ chịu lắm Vì vậy, hãy thêm quá trình chuyển đổi và hãy cẩn thận rằng chúng tôi phải sử dụng nó trong phần tử nút chứ không phải ở trạng thái di chuột của nó tôi thích nó. Tốt hơn rất nhiều Bây giờ, là bước cuối cùng, hãy thêm chức năng cho nút đẹp của chúng ta. Chúng tôi muốn mở một cảnh báo bất cứ khi nào nhấp vào nút này Vì vậy, hãy nhấp vào nút bên dưới và chúng ta hãy chào Chúng tôi vừa sử dụng sự kiện onclick của javascript và cảnh báo điều gì đó trên màn hình sau khi nhấp vào nút Bây giờ hãy xem một ví dụ thú vị sử dụng phần tử Các mã bạn thấy ở đây tương tự như những gì chúng tôi đã thực hiện trong ví dụ trước Ở đây, chúng tôi đã sử dụng thẻ span bên trong nút. Sau này chúng ta có thể sử dụng. sau lớp giả để tạo hiệu ứng di chuột sáng tạo Chúng tôi sẽ đặt dấu mũi tên » trên nút của chúng tôi, nút này sẽ hiển thị nó trên hiệu ứng di chuột của chuột, với sự chuyển tiếp mượt mà Đây là phần thiết yếu của đoạn mã trên ________số 8_______ Mã ở trên là mã cuối cùng và bạn có thể xem kết quả trong phần "Tự mình thử" Bây giờ hãy chia nhỏ mã và giải thích những phần phức tạp để bạn hiểu rõ về nó. Chúng tôi giải thích rằng các phần trong đoạn trích bên dưới dưới dạng nhận xét trước mỗi dòng Chúng tôi đã áp dụng một số kiểu chung cho nội dung và sau đó chúng tôi có một lớp trình bao bọc hoạt động giống như cha của trình bao bọc cho hai thẻ mà trong ví dụ này sẽ được coi như các nút Bạn có thể đọc các ý kiến dưới đây để giải thích thêm Hãy tìm hiểu những gì xảy ra ở đây trong các phần thiết yếu của mã Hãy chia nhỏ các phần phức tạp của mã Nhưng trước đó, xin lưu ý rằng những ví dụ này chỉ cung cấp cho bạn một gợi ý hoặc toàn bộ ý tưởng về việc sáng tạo với các nút để xây dựng hoặc sử dụng trên hành trình web của bạn Cách tốt nhất để hiểu chúng là mở nó trong phần demo (Tự mình thử. ) và chơi với các thuộc tính hoặc có nó trong trình chỉnh sửa mã của bạn và kiểm tra chúng Chúng tôi cung cấp cho bạn các gợi ý cũng như các mẹo và giải thích cần thiết mà bạn có thể cần để hiểu rõ hơn về nó Vì vậy, như đã nói, hãy giải thích một số phần thiết yếu của đoạn mã trên Và đây là một ví dụ khác, hãy giải thích một số phần phức tạp của nó bên dưới Ví dụ này khá đơn giản Chúng tôi vừa thêm hiệu ứng di chuột với độ trong suốt bằng 0. 5 , đây là một cách thực hành đơn giản nhưng tốt trong thế giới phát triển web Làm cách nào tôi có thể tạo kiểu cho nút của mình trong CSS?Cách tạo kiểu nút bằng CSS . Create a button. At first, create a Tạo kiểu cho nút của bạn. Vì vậy, đã đến lúc áp dụng các kiểu cho nút của bạn. Hãy làm điều đó từng bước một Làm cách nào để đưa nội dung vào CSS?CSS có thể chèn nội dung văn bản trước hoặc sau phần tử hoặc thay đổi nội dung của điểm đánh dấu mục danh sách (chẳng hạn như ký hiệu dấu đầu dòng hoặc số) trước tạo quy tắc và thêm. trước ,. sau, hoặc. điểm đánh dấu cho bộ chọn .
Làm cách nào để sử dụng thuộc tính nội dung trong CSS?Hàm CSS attr() được sử dụng để truy xuất giá trị của một thuộc tính của thành phần được chọn và sử dụng nó trong biểu định kiểu . Nó cũng có thể được sử dụng trên các phần tử giả, trong trường hợp đó, giá trị của thuộc tính trên phần tử gốc của phần tử giả được trả về.
Làm cách nào để thay đổi giá trị nút trong CSS?Bạn không thể thay đổi giá trị của nút bằng CSS , bạn có thể thay đổi nội dung hiển thị TRÊN nút, nhưng không thể thay đổi chính giá trị đó. Sử dụng Javascript. |
