Đăng nhập Đăng ký

Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn

Người tìm đường và việc học của tôi

Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng

Nâng cấp

Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)

Bắt đầu từ đâu

Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi

Trình chỉnh sửa mã (Dùng thử)

Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình

Video

Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn

Mẫu

Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!

Web hosting

Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces

Tạo một máy chủ

Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.

Làm thế nào để

Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript

Khung CSS

Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi

Thống kê trình duyệt

Đọc xu hướng dài hạn của việc sử dụng trình duyệt

Tốc độ gõ

Kiểm tra tốc độ đánh máy của bạn

Đào tạo AWS

Tìm hiểu dịch vụ web của Amazon

Bộ chọn màu

Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau. Bánh xe màu hình tròn thể hiện sự chuyển màu của màu trong quang phổ

Trò chơi mã

Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông Logo Lynx

Đặt mục tiêu

Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn

Bản tin

Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng

Việc làm

Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo

Liên hệ chúng tôi

Về bán hàng: [email protected]
Về lỗi: [email protected]

Lớp học

Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục

×

Ví dụ CSS

❮ Trước Sau ❯

Cú pháp CSS

Cú pháp CSS được giải thích

Bộ chọn CSS

Bộ chọn phần tử Bộ chọn id Bộ chọn lớp (cho tất cả các phần tử) Bộ chọn lớp (chỉ dành cho các phần tử <p>) Một phần tử HTML tham chiếu đến hai lớp Bộ chọn phổ quát Nhóm các bộ chọn

Giải thích về bộ chọn CSS

CSS Cách thực hiện/Nơi đến

CSS bên ngoài CSS nội bộ CSS nội tuyến Nhiều biểu định kiểu Thứ tự xếp tầng

CSS cách giải thích

Nhận xét CSS

Bình luận một dòng Bình luận nhiều dòng

Giải thích về nhận xét CSS

Màu CSS

Đặt màu nền của một phần tử Đặt màu văn bản Đặt màu đường viền Đặt các giá trị màu khác nhau Đặt giá trị RGB Đặt giá trị HEX Đặt giá trị HSL

Màu CSS được giải thích

Nền CSS

Đặt màu nền của trang Đặt màu nền của các thành phần khác nhau Đặt hình ảnh làm nền của trang Cách chỉ lặp lại hình nền theo chiều ngang Cách định vị hình nền Một hình nền cố định (hình ảnh này sẽ không cuộn với phần còn lại của trang) Tất cả các thuộc tính nền trong một khai báo Ví dụ về nền nâng cao

Giải thích thuộc tính nền CSS

Đường viền CSS

Đặt độ rộng của bốn đường viền Đặt độ rộng của đường viền trên Đặt độ rộng của đường viền dưới Đặt độ rộng của đường viền bên trái Đặt độ rộng của đường viền bên phải Đặt kiểu của bốn đường viền Đặt kiểu của đường viền trên Đặt kiểu của đường viền dưới Đặt kiểu của đường viền bên trái Đặt kiểu của đường viền bên phải Đặt màu của bốn đường viền Đặt màu của đường viền trên Đặt màu của đường viền dưới Đặt màu của đường viền bên trái Đặt màu màu của đường viền bên phải Tất cả các thuộc tính đường viền trong một khai báo Thêm đường viền tròn cho một phần tử Đặt các đường viền khác nhau ở mỗi bên Tất cả các thuộc tính đường viền trên cùng trong một khai báo Tất cả các thuộc tính đường viền dưới cùng trong một khai báo Tất cả các thuộc tính đường viền bên trái trong một khai báo Tất cả các thuộc tính đường viền bên trái trong một khai báo thuộc tính viền phải trong một khai báo

Giải thích thuộc tính đường viền CSS

Lề CSS

Chỉ định các lề khác nhau cho mỗi cạnh của một phần tử Sử dụng thuộc tính lề tốc ký với bốn giá trị Sử dụng thuộc tính lề tốc ký với ba giá trị Sử dụng thuộc tính lề tốc ký với hai giá trị Sử dụng thuộc tính lề tốc ký với một giá trị Đặt lề thành tự động để căn giữa phần tử trong vùng chứa của nó Để lề trái được kế thừa từ phần tử cha

Thuộc tính ký quỹ được giải thích

Phần đệm CSS

Chỉ định phần đệm khác nhau cho mỗi cạnh của một phần tử Sử dụng thuộc tính phần đệm tốc ký với bốn giá trị Sử dụng thuộc tính phần đệm tốc ký có ba giá trị Sử dụng thuộc tính phần đệm tốc ký có hai giá trị Sử dụng thuộc tính phần đệm tốc ký có một giá trị Phần đệm và chiều rộng phần tử (không có kích thước hộp) Phần đệm và phần tử chiều rộng (với kích thước hộp) Đặt phần đệm bên trái của một phần tử Đặt phần đệm bên phải của một phần tử Đặt phần đệm trên cùng của một phần tử Đặt phần đệm dưới cùng của một phần tử

Giải thích về thuộc tính đệm CSS

Chiều cao/Chiều rộng CSS

Đặt chiều cao và chiều rộng của một phần tử Đặt chiều rộng tối đa của một phần tử Đặt chiều cao và chiều rộng của các phần tử khác nhau Đặt chiều cao và chiều rộng của hình ảnh bằng phần trăm Đặt chiều rộng tối thiểu và chiều rộng tối đa của một phần tử Đặt chiều cao tối thiểu và tối đa -chiều cao của một phần tử

Giải thích về thuộc tính chiều cao/chiều rộng CSS

Mô hình hộp CSS

Minh họa mô hình hộp Chỉ định một phần tử có tổng chiều rộng 250px

Mô hình hộp CSS đã được giải thích

Tóm tắt CSS

Vẽ một đường xung quanh một phần tử (đường viền) Đặt kiểu đường viền Đặt màu của đường viền Đặt độ rộng của đường viền Sử dụng thuộc tính đường viền tốc ký Thêm khoảng cách giữa đường viền và cạnh/viền của một phần tử

Giải thích các thuộc tính phác thảo CSS

Văn bản CSS

Đặt màu văn bản của các thành phần khác nhau Căn chỉnh văn bản Xóa dòng bên dưới các liên kết Trang trí văn bản Kiểm soát các chữ cái trong văn bản Thụt lề văn bản Chỉ định khoảng cách giữa các ký tự Chỉ định khoảng cách giữa các dòng Đặt hướng văn bản của một phần tử Tăng khoảng trắng giữa các từ Chỉ định bóng văn bản cho một phần tử Tắt tính năng ngắt dòng văn bản bên trong một phần tử Căn chỉnh theo chiều dọc của hình ảnh bên trong văn bản

Giải thích thuộc tính văn bản CSS

Phông chữ CSS

Đặt phông chữ của văn bản Đặt kích thước của phông chữ Đặt kích thước phông chữ theo px Đặt kích thước phông chữ theo em Đặt kích thước phông chữ theo phần trăm và em Đặt kiểu phông chữ Đặt biến thể của phông chữ Đặt độ đậm của phông chữ Tất cả các thuộc tính phông chữ trong một khai báo

Thuộc tính phông chữ được giải thích

Biểu tượng CSS

Phông chữ Biểu tượng tuyệt vời Biểu tượng Bootstrap Biểu tượng Google

Biểu tượng CSS được giải thích

Liên kết CSS

Thêm các màu khác nhau cho các liên kết đã truy cập/chưa truy cập Sử dụng trang trí văn bản trên các liên kết Chỉ định màu nền cho các liên kết Thêm các kiểu khác cho siêu liên kết Các loại con trỏ khác nhau Nâng cao - Tạo hộp liên kết Nâng cao - Tạo hộp liên kết có viền

Giải thích thuộc tính liên kết CSS

Danh sách CSS

Tất cả các điểm đánh dấu mục danh sách khác nhau trong danh sách Đặt hình ảnh làm điểm đánh dấu mục danh sách Định vị điểm đánh dấu mục danh sách Xóa cài đặt danh sách mặc định Tất cả các thuộc tính danh sách trong một khai báo Kiểu danh sách có màu Danh sách có viền có chiều rộng đầy đủ

Giải thích thuộc tính danh sách CSS

Bảng CSS

Chỉ định đường viền màu đen cho các phần tử bảng, th và td Sử dụng tính năng thu gọn đường viền Một đường viền xung quanh bảng Chỉ định chiều rộng và chiều cao của bảng Đặt căn chỉnh nội dung theo chiều ngang (text-align) Đặt căn chỉnh nội dung theo chiều dọc (vertical- căn chỉnh) Chỉ định phần đệm cho các phần tử th và td Ngăn chia ngang Bảng có thể di chuột Bảng sọc Chỉ định màu của đường viền bảng Đặt vị trí của chú thích bảng Bảng đáp ứng Tạo bảng ưa thích

Giải thích thuộc tính bảng CSS

Hiển thị CSS

Cách ẩn một phần tử (khả năng hiển thị:ẩn) Cách không hiển thị một phần tử (hiển thị: không có) Cách hiển thị phần tử cấp khối dưới dạng phần tử nội tuyến Cách hiển thị phần tử nội tuyến dưới dạng phần tử cấp khối Cách sử dụng CSS cùng với JavaScript để hiển thị nội dung ẩn

Giải thích thuộc tính hiển thị CSS

Định vị CSS

Định vị một phần tử so với cửa sổ trình duyệt Định vị một phần tử so với vị trí bình thường của nó Định vị một phần tử có giá trị tuyệt đối Định vị cố định Các phần tử chồng chéo Đặt hình dạng của một phần tử Đặt cạnh trên của hình ảnh bằng giá trị pixel Đặt cạnh dưới của một hình ảnh sử dụng giá trị pixel Đặt cạnh trái của hình ảnh bằng giá trị pixel Đặt cạnh phải của hình ảnh bằng giá trị pixel Định vị văn bản hình ảnh (góc trên cùng bên trái) Định vị văn bản hình ảnh (góc trên bên phải) Định vị văn bản hình ảnh (góc dưới bên trái ) ) Định vị văn bản hình ảnh (góc dưới bên phải) Định vị văn bản hình ảnh (giữa)

Giải thích thuộc tính định vị CSS

Tràn CSS

Sử dụng tràn: hiển thị - Phần tràn không bị cắt bớt. Nó hiển thị bên ngoài hộp của phần tử. Sử dụng tràn: ẩn - Phần tràn bị cắt bớt và phần nội dung còn lại bị ẩn. Sử dụng tràn: cuộn - Phần tràn bị cắt bớt nhưng thanh cuộn được thêm vào để xem phần còn lại của nội dung. Sử dụng tràn: tự động - Nếu phần tràn bị cắt bớt, cần thêm thanh cuộn để xem phần còn lại của nội dung. Sử dụng tràn-x và tràn-y.

Giải thích về thuộc tính tràn CSS

CSS nổi

Cách sử dụng đơn giản thuộc tính float Một hình ảnh có đường viền và lề nổi về bên phải trong một đoạn Một hình ảnh có chú thích nổi về bên phải Để chữ cái đầu tiên của đoạn văn nổi về bên trái Tắt float (sử dụng thuộc tính clear ) Tắt float (sử dụng hack "clearfix") Tạo hộp nổi Tạo hình ảnh cạnh nhau Tạo hộp có chiều cao bằng nhau (với flexbox) Tạo menu ngang Tạo ví dụ về bố cục web

Giải thích thuộc tính float CSS

Khối nội tuyến CSS

Hiển thị sự khác biệt giữa nội tuyến, khối nội tuyến và khối Sử dụng khối nội tuyến để tạo liên kết điều hướng

Khối nội tuyến CSS được giải thích

Các phần tử căn chỉnh CSS

Căn giữa với lề Căn giữa văn bản Căn giữa một hình ảnh Căn trái/phải căn chỉnh với vị trí Trái/Phải căn chỉnh với vị trí - Giải pháp trình duyệt chéo Căn trái/phải căn chỉnh với float Căn trái/phải với float - Giải pháp Crossbrowser Căn giữa theo chiều dọc với phần đệm Giữa theo chiều dọc và chiều ngang Giữa theo chiều dọc với chiều cao dòng ở giữa theo chiều dọc và chiều ngang với vị trí

Giải thích về thuộc tính căn chỉnh CSS

Bộ kết hợp CSS

Bộ chọn con cháu Bộ chọn con Bộ chọn anh chị em liền kề Bộ chọn anh chị em chung

Giải thích về tổ hợp CSS

Các lớp giả CSS

Thêm các màu khác nhau vào siêu liên kết Thêm các kiểu khác vào siêu liên kết Sử dụng :focus :first-child - khớp với phần tử p đầu tiên :first-child - khớp với phần tử i đầu tiên trong tất cả các phần tử p :first-child - Khớp tất cả các phần tử i trong tất cả Phần tử p con đầu tiên Sử dụng :lang

Các lớp giả CSS được giải thích

Các phần tử giả CSS

Làm cho chữ cái đầu tiên trở nên đặc biệt trong văn bản Làm cho dòng đầu tiên trở nên đặc biệt trong văn bản Làm cho chữ cái đầu tiên và dòng đầu tiên trở nên đặc biệt Sử dụng :trước để chèn một số nội dung trước một phần tử Sử dụng :after để chèn một số nội dung sau một phần tử

Giải thích về các phần tử giả CSS

Độ mờ CSS

Tạo hình ảnh trong suốt Tạo hình ảnh trong suốt - hiệu ứng di chuột qua Hiệu ứng di chuột đảo ngược cho hình ảnh trong suốt Hộp/div trong suốt Hộp/div trong suốt với giá trị RGBA Tạo hộp trong suốt có văn bản trên ảnh nền

Giải thích về độ mờ của hình ảnh CSS

Thanh điều hướng CSS

Thanh điều hướng dọc được tạo kiểu đầy đủ Thanh điều hướng ngang được tạo kiểu đầy đủ Thanh điều hướng dọc cố định có chiều cao đầy đủ Thanh điều hướng ngang cố định Thanh điều hướng cố định (không hoạt động trong IE hoặc Edge 15 trở về trước) Điều hướng trên cùng đáp ứng Điều hướng bên đáp ứng

Thanh điều hướng CSS được giải thích

CSS thả xuống

Văn bản thả xuống Menu thả xuống Menu thả xuống căn phải Hình ảnh thả xuống Thanh điều hướng thả xuống

Giải thích về CSS thả xuống

Thư viện hình ảnh CSS

Thư viện hình ảnh Thư viện hình ảnh đáp ứng

Thư viện hình ảnh CSS được giải thích

Hình ảnh CSS

Một hình ảnh sprite Một hình ảnh - một danh sách điều hướng Một hình ảnh với hiệu ứng di chuột

Giải thích về các hình ảnh CSS

Bộ chọn thuộc tính CSS

Chọn tất cả các phần tử <a> có thuộc tính target Chọn tất cả các phần tử <a> có thuộc tính target="_blank" Chọn tất cả các phần tử có thuộc tính title chứa danh sách các từ được phân tách bằng dấu cách, một trong số đó là "flower" Chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top" (phải là toàn bộ từ) Chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top" (không được là toàn bộ từ) Chọn tất cả các phần tử có giá trị thuộc tính lớp kết thúc bằng "test" Chọn tất cả các phần tử có giá trị thuộc tính lớp chứa "te"

Giải thích về bộ chọn thuộc tính CSS

Biểu mẫu CSS

Trường nhập có độ rộng đầy đủ Trường nhập có đệm Trường nhập có viền Trường nhập có viền dưới Trường nhập màu Trường nhập tập trung Trường nhập tập trung 2 Đầu vào có biểu tượng/hình ảnh Đầu vào tìm kiếm hoạt hình Tạo kiểu vùng văn bản Tạo kiểu menu chọn Kiểu nút nhập Kiểu Hình thức đáp ứng

Các biểu mẫu CSS đã được giải thích

Bộ đếm CSS

Tạo một bộ đếm Bộ đếm lồng nhau 1 Bộ đếm lồng nhau 2

Giải thích về bộ đếm CSS

Bố cục trang web CSS

Bố cục trang web đơn giản, đáp ứng Một ví dụ về trang web

Bố cục trang web CSS được giải thích

Các góc tròn CSS

Thêm các góc tròn vào các phần tử Làm tròn từng góc riêng biệt Tạo các góc hình elip

Giải thích về các góc bo tròn của CSS

Hình ảnh viền CSS

Tạo đường viền hình ảnh xung quanh một phần tử, sử dụng từ khóa round Tạo đường viền hình ảnh xung quanh một phần tử, sử dụng từ khóa Stretch Đường viền hình ảnh - Các giá trị lát cắt khác nhau

Giải thích về hình ảnh đường viền CSS

Nền CSS

Thêm nhiều hình nền cho một phần tử Chỉ định kích thước của hình nền Chia tỷ lệ hình nền bằng cách sử dụng "contain" và "cover" Xác định kích thước của nhiều hình nền Hình nền có kích thước đầy đủ (lấp đầy hoàn toàn vùng nội dung) Sử dụng nguồn gốc nền để chỉ định nơi đặt hình nền. Sử dụng clip nền để chỉ định vùng vẽ của nền

Nền CSS được giải thích

Độ dốc CSS

Độ dốc tuyến tính - từ trên xuống dưới Độ dốc tuyến tính - từ trái sang phải Độ dốc tuyến tính - Độ dốc tuyến tính chéo - với một góc xác định Độ dốc tuyến tính - với nhiều điểm dừng màu Độ dốc tuyến tính - màu của cầu vồng + văn bản Độ dốc tuyến tính - với độ trong suốt Độ dốc tuyến tính - tuyến tính lặp lại gradient Radial gradient - các điểm dừng màu cách đều nhau Radial gradient - các điểm dừng màu có khoảng cách khác nhau Radial gradient - đặt hình dạng Radial gradient - các từ khóa có kích thước khác nhau Radial gradient - một gradient xuyên tâm lặp lại

Giải thích về độ dốc CSS

Hiệu ứng đổ bóng CSS

Hiệu ứng bóng đơn giản Thêm màu cho bóng Thêm hiệu ứng làm mờ cho bóng Văn bản màu trắng với bóng đen Bóng phát sáng neon màu đỏ Bóng phát sáng neon màu đỏ và xanh lam Văn bản màu trắng với bóng đen, xanh lam và xanh đậm Thêm bóng hộp đơn giản vào một phần tử Thêm màu cho bóng hộp Thêm màu và hiệu ứng làm mờ cho bóng hộp Tạo thiệp giống giấy (văn bản) Tạo thiệp giống giấy (ảnh Polaroid)

Giải thích về hiệu ứng bóng CSS

Hiệu ứng văn bản CSS

Chỉ định cách báo hiệu nội dung bị ẩn, tràn cho người dùng Cách hiển thị nội dung bị tràn khi di chuột qua phần tử Cho phép các từ dài có thể ngắt dòng và ngắt dòng xuống dòng tiếp theo Chỉ định quy tắc ngắt dòng

Giải thích văn bản CSS

Phông chữ web CSS

Sử dụng phông chữ "của riêng bạn" trong quy tắc @font-face Sử dụng phông chữ "của riêng bạn" trong quy tắc @font-face (in đậm)

Giải thích về phông chữ web CSS

Chuyển đổi CSS 2D

dịch() - di chuyển một phần tử khỏi vị trí hiện tại của nó xoay() - xoay một phần tử theo chiều kim đồng hồ Rota() - xoay một phần tử ngược chiều kim đồng hồ tỉ lệ() - tăng tỷ lệ phần tử () - giảm một phần tử skewX() - làm nghiêng một phần tử dọc theo trục X skewY() - nghiêng một phần tử dọc theo trục Y skew() - nghiêng một phần tử dọc theo ma trận trục X và Y () - xoay, chia tỷ lệ, di chuyển và nghiêng một phần tử

Giải thích về chuyển đổi CSS 2D

Chuyển đổi CSS 3D

RotateX() - xoay một phần tử quanh trục X của nó ở một mức độ nhất định RotaY() - xoay một phần tử quanh trục Y của nó ở một mức độ nhất định RotaZ() - xoay một phần tử quanh trục Z của nó ở một mức độ nhất định

Giải thích về chuyển đổi CSS 3D

Chuyển đổi CSS

Chuyển tiếp - thay đổi độ rộng của một phần tử Chuyển tiếp - thay đổi chiều rộng và chiều cao của một phần tử Chỉ định các đường cong tốc độ khác nhau cho quá trình chuyển đổi Chỉ định độ trễ cho hiệu ứng chuyển tiếp Thêm chuyển đổi cho hiệu ứng chuyển tiếp Chỉ định tất cả các thuộc tính chuyển tiếp trong một thuộc tính tốc ký

Giải thích về chuyển đổi CSS

Hoạt ảnh CSS

Liên kết hoạt ảnh với một phần tử Hoạt ảnh - thay đổi màu nền của một phần tử Hoạt ảnh - thay đổi màu nền và vị trí của một phần tử Trì hoãn hoạt ảnh Chạy hoạt ảnh 3 lần trước khi nó dừng Chạy hoạt ảnh mãi mãi Chạy hoạt ảnh theo hướng ngược lại Chạy hoạt ảnh theo chu kỳ thay thế Đường cong tốc độ cho hoạt ảnh Thuộc tính tốc ký hoạt ảnh

Hoạt ảnh CSS được giải thích

Chú giải công cụ CSS

Chú giải công cụ bên phải Chú giải công cụ bên trái Chú giải công cụ trên cùng Chú giải công cụ dưới cùng Chú giải công cụ có mũi tên Chú giải công cụ hoạt hình

Chú giải công cụ CSS đã được giải thích

Hình ảnh kiểu CSS

Hình ảnh tròn Hình ảnh tròn Hình ảnh thu nhỏ Hình ảnh thu nhỏ dưới dạng liên kết Hình ảnh đáp ứng Văn bản hình ảnh (góc trên bên trái) Văn bản hình ảnh (góc trên bên phải) Văn bản hình ảnh (góc dưới bên trái) Văn bản hình ảnh (góc dưới bên phải) Văn bản hình ảnh (ở giữa) Hình ảnh Polaroid Bộ lọc hình ảnh thang độ xám Nâng cao - Phương thức hình ảnh với CSS và JavaScript

Hình ảnh CSS được giải thích

Phản chiếu hình ảnh CSS

Tạo hình phản chiếu bên dưới hình ảnh Tạo hình phản chiếu ở bên phải hình ảnh Tạo khoảng cách giữa hình ảnh và hình phản chiếu Tạo hiệu ứng mờ dần trên hình phản chiếu

Giải thích về phản chiếu hình ảnh CSS

CSS phù hợp với đối tượng

Sử dụng object-fit: cover Sử dụng object-fit: contains Sử dụng object-fit: fill Sử dụng object-fit: none Sử dụng object-fit: thu nhỏ Tất cả các giá trị thuộc tính object-fit trong một ví dụ

Giải thích về tính năng phù hợp với đối tượng CSS

Vị trí đối tượng CSS

Đặt hình ảnh sao cho tòa nhà cổ vĩ đại ở chính giữa Định vị hình ảnh sao cho tháp Eiffel nổi tiếng ở chính giữa

Đã giải thích vị trí đối tượng CSS

Nút CSS

Các nút CSS cơ bản Màu nút Kích thước nút Nút tròn Các viền nút màu Nút có thể di chuột Nút bóng Nút bị vô hiệu hóa Độ rộng nút Nhóm nút Nhóm nút có viền Nút hoạt hình (Hover Effect) Nút hoạt hình (Hiệu ứng gợn sóng) Nút hoạt hình (Hiệu ứng nhấn)

Các nút CSS được giải thích

Phân trang CSS

Phân trang đơn giản Phân trang chủ động và có thể di chuột Phân trang hoạt động tròn và có thể di chuột Hiệu ứng chuyển tiếp có thể di chuyển Phân trang có viền Phân trang có viền tròn Phân trang có khoảng cách giữa các liên kết Kích thước phân trang Phân trang với khoảng trắng giữa các liên kết Phân trang ở giữa Breadcrumbs

Giải thích về phân trang CSS

CSS nhiều cột

Tạo nhiều cột Chỉ định khoảng cách giữa các cột Chỉ định kiểu quy tắc giữa các cột Chỉ định độ rộng của quy tắc giữa các cột Chỉ định màu của quy tắc giữa các cột Chỉ định độ rộng, kiểu và màu của quy tắc giữa các cột Chỉ định số lượng cột một phần tử nên trải rộng trên Chỉ định chiều rộng được đề xuất, tối ưu cho các cột

CSS nhiều cột được giải thích

Giao diện người dùng CSS

Cho phép người dùng thay đổi kích thước chiều rộng của phần tử Cho phép người dùng thay đổi kích thước chiều cao của phần tử Cho phép người dùng thay đổi kích thước cả chiều rộng và chiều cao của phần tử Thêm khoảng trắng giữa đường viền và đường viền của phần tử

Giao diện người dùng CSS được giải thích

Biến CSS

Sử dụng hàm var() Sử dụng hàm var() để chèn một số giá trị thuộc tính tùy chỉnh

Các biến CSS được giải thích

Kích thước hộp CSS

Chiều rộng của các phần tử không có kích thước hộp Chiều rộng của các phần tử có kích thước hộp Các phần tử biểu mẫu + kích thước hộp

Giải thích kích thước hộp CSS

CSS Flexbox

Flexbox với ba mục flex Flexbox với ba mục flex - rtl Direction flex-direction - row-reverse flex-direction - cột flex-direction - cột-ngược lại căn chỉnh-nội dung - flex-end biện minh-nội dung - căn giữa -nội dung - dấu cách- giữa các mục căn chỉnh hợp lý - các mục căn chỉnh khoảng cách xung quanh - các mục căn chỉnh kéo dài - các mục căn chỉnh bắt đầu flex - các mục căn chỉnh cuối flex - các mục căn giữa - đường cơ sở flex-wrap - nowrap flex-wrap - bọc flex-wrap - Wrap-reverse Align-content - center Sắp xếp các mục linh hoạt Margin-right:auto; Ký quỹ:tự động; = căn giữa hoàn hảo , tự sắp xếp trên các mục flex Chỉ định độ dài của mục flex, so với phần còn lại của các mục flex Tạo thư viện hình ảnh phản hồi với flexbox Tạo một trang web phản hồi với flexbox

CSS flexbox đã giải thích

Truy vấn phương tiện CSS

Thay đổi màu nền thành màu xanh nhạt nếu khung nhìn rộng 480px hoặc rộng hơn Hiển thị menu sẽ nổi ở bên trái trang nếu khung nhìn rộng 480px hoặc rộng hơn

Giải thích các truy vấn phương tiện CSS

Truy vấn phương tiện CSS - Ví dụ khác

Đặt các màu nền khác nhau tùy thuộc vào độ rộng màn hình Menu điều hướng đáp ứng Các cột phản hồi bằng cách sử dụng float Cột phản hồi bằng cách sử dụng flexbox Ẩn các thành phần với truy vấn phương tiện Kích thước phông chữ đáp ứng Thư viện hình ảnh đáp ứng Trang web đáp ứng Thay đổi bố cục của trang tùy theo hướng của trình duyệt Chiều rộng tối thiểu đến chiều rộng tối đa

Ví dụ về truy vấn phương tiện CSS đã được giải thích

Thiết kế web đáp ứng CSS

Chế độ xem lưới đáp ứng Thêm điểm dừng cho máy tính để bàn, máy tính xách tay và điện thoại Điểm dừng điển hình Hình ảnh đáp ứng Video đáp ứng Khung đáp ứng: W3.CSS Khung đáp ứng: Bootstrap

Giải thích về thiết kế web đáp ứng CSS

Lưới CSS

Bố cục lưới Các phần tử lưới Các khoảng trống cột lưới Đường lưới Thùng chứa lưới Các mục lưới

Lưới CSS đã được giải thích

❮ Trước Sau ❯

Người tìm đường W3schools

Theo dõi tiến trình của bạn - hoàn toàn miễn phí!

Được chứng nhận

MÁY CHỌN MÀU

người chọn màu

QUẢNG CÁO MIỄN PHÍ

ĐƯỢC CHỨNG NHẬN

LIÊN HỆ CHÚNG TÔI

×

Liên hệ bán hàng

Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Báo cáo lỗi

Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Hướng dẫn hàng đầu

Hướng dẫn HTML
Hướng dẫn CSS
Hướng dẫn JavaScript
Cách hướng dẫn
Hướng dẫn SQL
Hướng dẫn Python
Hướng dẫn W3.CSS
Hướng dẫn khởi động
Hướng dẫn PHP
Hướng dẫn Java
Hướng dẫn C++
Hướng dẫn jQuery

Tài liệu tham khảo hàng đầu

Tham chiếu HTML
Tham khảo CSS
Tham chiếu JavaScript
Tham chiếu SQL
Tham khảo Python
Tham chiếu W3.CSS
Tham khảo Bootstrap
Tham khảo PHP
Màu HTML
Tài liệu tham khảo Java
Tham chiếu góc
Tham khảo jQuery

Ví dụ hàng đầu

Ví dụ về HTML
Ví dụ CSS
Ví dụ về JavaScript
Làm thế nào để ví dụ
Ví dụ về SQL
Ví dụ về Python
Ví dụ về W3.CSS
Ví dụ về khởi động
PHP Ví dụ
Ví dụ Java
Ví dụ XML
Ví dụ về jQuery

Được chứng nhận

Chứng chỉ HTML
Chứng chỉ CSS
Chứng chỉ JavaScript
Chứng chỉ giao diện người dùng
Chứng chỉ SQL
Chứng chỉ Python
Chứng chỉ PHP
Chứng chỉ jQuery
Chứng chỉ Java
Chứng chỉ C++
Chứng chỉ C#
Chứng chỉ XML

DIỄN ĐÀN GIỚI THIỆU LỚP HỌC

Example.com.vn được tối ưu hóa cho việc học tập và đào tạo. Các ví dụ có thể được đơn giản hóa để cải thiện khả năng đọc và học. Các hướng dẫn, tài liệu tham khảo và ví dụ liên tục được xem xét để tránh sai sót, nhưng chúng tôi không thể đảm bảo tính chính xác hoàn toàn của mọi nội dung. Trong khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng , chính sách cookie và quyền riêng tư của chúng tôi.

Bản quyền 1999-2024 của Refsnes Data. Đã đăng ký Bản quyền. Example.com.vn được cung cấp bởi W3.CSS .