Home-theater-designers
CSS thuộc về một lớp ngôn ngữ duy nhất, được gọi là ngôn ngữ bảng định kiểu. Nó chủ yếu được sử dụng để xác định bản trình bày trang web của bạn. Mặc dù HTML cho phép bạn chỉ định cách cấu trúc trang của bạn, nhưng đó là CSS được sử dụng để tạo kiểu cho nó. Nếu không, bạn sẽ kết thúc với một trang web khá kém hấp dẫn.
Tập trung vào CSS là một trong những cách tốt hơn để cải thiện sức hấp dẫn của trang web, đặc biệt là khi nâng cao trải nghiệm người dùng của bạn. Bằng cách này, bạn cũng có thể tăng lưu lượng truy cập của mình. Đối với người mới bắt đầu, bạn có thể sử dụng biểu mẫu xếp chồng lên nhau.
Biểu mẫu xếp chồng lên nhau là gì?
Biểu mẫu xếp chồng cho phép bạn tạo một biểu mẫu chuyên biệt, nơi bạn có thể đặt các nhãn và thông tin đầu vào của mình chồng lên nhau, thay vì đặt chúng theo một mẫu nằm ngang.
Đây là cách bạn có thể làm điều đó.
Mã HTML
Sử dụng phần tử HTML, , để xử lý thông tin của bạn. Thêm nhãn cho các trường liên quan và gán các trường đầu vào có liên quan. Trong ví dụ này, chúng tôi yêu cầu người dùng cung cấp tên đầy đủ và địa chỉ email của họ cùng với loại đầu vào của biểu mẫu chữ , trong khi menu thả xuống được tạo qua chọn id để giúp họ chọn ngành của mình.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Tuy nhiên, việc chạy đoạn mã này sẽ chỉ tạo ra một dạng nhạt nhẽo mà không xếp chồng các trường theo chiều dọc. Và đó là nơi bạn sẽ phải thêm CSS.
làm cách nào để truy cập ổ icloud của tôi
Mã phần CSS
Bây giờ, hãy tạo một biểu định kiểu riêng và thêm nó vào HTML của bạn trước thẻ body:
Tiếp theo, chọn nội dung, loại đầu vào và vùng chứa HTML của bạn và tạo kiểu cho chúng thông qua CSS. Điều này sẽ bao gồm việc thử nghiệm các thuộc tính CSS khác nhau, chẳng hạn như họ phông chữ, chiều rộng, phần đệm, lề, hiển thị, đường viền, v.v. và thêm các giá trị ưa thích của bạn. Bằng cách này, bạn sẽ có một biểu mẫu xếp chồng lên nhau phù hợp với sở thích chính xác của bạn. Đây là một ví dụ.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Kiểm tra đầu ra bên dưới.
Bây giờ bạn có thể tạo một biểu mẫu xếp chồng lên nhau trong CSS
Với bài viết này, bạn đã học cách tạo một biểu mẫu xếp chồng lên nhau trong CSS. Với thực hành, bạn sẽ có thể tinh chỉnh các biểu mẫu của mình và làm cho trang web của bạn thân thiện hơn với người dùng.
chuyển đổi png sang vector trong minh họa
Tên của trò chơi lập trình là 'thực hành'. Rèn luyện kỹ năng CSS của bạn ngày này qua ngày khác với các dự án triển lãm để trở thành một nhà thiết kế web sành điệu và nhà phát triển web hiệu quả hơn.
Đăng lại Đăng lại tiếng riu ríu E-mail 10 ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phútCần trợ giúp với CSS? Hãy thử các ví dụ mã CSS cơ bản này để bắt đầu, sau đó áp dụng chúng cho các trang web của riêng bạn.
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- CSS
Usman là một nhà tiếp thị nội dung, người đã giúp một số doanh nghiệp tăng trưởng hữu cơ trên các nền tảng kỹ thuật số. Anh ấy thích cả lập trình và viết lách, có nghĩa là viết kỹ thuật là thứ anh ấy rất thích. Khi không làm việc, Usman thích dành thời gian xem các chương trình truyền hình, theo dõi cricket và đọc về phân tích dữ liệu.
Xem thêm từ Usman GhaniTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký