CSS 5. Định dạng ảnh, box, form nhập liệu

Đăng ký tài khoản để xem

Đăng ký Đăng nhập

CSS 5. Định dạng ảnh, box, form nhập liệu

Khóa học: Thiết kế Web với HTML CSS - Giảng viên: Phạm Quang Trường

CSS 5: Định dạng ảnh và hộp (Box Model)

1. Định dạng ảnh

Hình ảnh là một phần quan trọng trong thiết kế web. CSS cung cấp nhiều thuộc tính để điều chỉnh kích thước, viền, bo góc của ảnh giúp bố cục trở nên đẹp và hài hòa hơn.

a. Thuộc tính `width` và `height`

Điều chỉnh chiều rộng (width) và chiều cao (height) của ảnh.
Đơn vị có thể là px, %, em, vw, vh, auto.
Giá trị auto giúp ảnh giữ nguyên tỉ lệ khung hình khi chỉ định một trong hai thuộc tính width hoặc height.

Ví dụ:

img {
    width: 300px;
    height: auto;
}

b. Thuộc tính `border-radius`

Bo tròn các góc của ảnh.
Giá trị có thể là px, %, em.
border-radius: 50%; giúp ảnh hiển thị thành hình tròn.

Ví dụ:

img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

c. Thuộc tính `object-fit`

Điều chỉnh cách ảnh hiển thị trong khung chứa.
Giá trị phổ biến:
- contain: Hiển thị toàn bộ ảnh mà không bị cắt.
- cover: Phủ kín khung hình, có thể bị cắt một phần.
- fill: Kéo giãn ảnh để lấp đầy khung.
- none: Giữ nguyên kích thước ảnh.

Ví dụ:

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

2. Mô hình hộp (Box Model)

Mô hình hộp giúp xác định không gian chiếm dụng của một phần tử trên trang web. Bao gồm:

a. Thuộc tính `border`

Xác định đường viền của phần tử.
Cú pháp: border: [độ dày] [kiểu] [màu sắc];
Kiểu viền phổ biến: solid, dashed, dotted, double.

Ví dụ:

div {
    border: 2px solid black;
}

b. Thuộc tính `padding`

Xác định khoảng cách giữa nội dung và viền.
Đơn vị: px, em, %, auto.

Ví dụ:

div {
    padding: 20px;
}

c. Thuộc tính `margin`

Xác định khoảng cách giữa phần tử với phần tử khác.
Giá trị auto có thể dùng để căn giữa.

Ví dụ:

div {
    margin: 10px auto;
}

3. Định dạng Form nhập liệu

Các thẻ nhập liệu như input, textarea, select có thể được tùy chỉnh với CSS để phù hợp với giao diện trang web.

a. Định dạng `input`

Điều chỉnh kích thước, viền, màu sắc, và kiểu chữ.

Ví dụ:

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

b. Định dạng `textarea`

Tương tự như input, nhưng có thể chỉnh kích thước theo chiều dọc.

Ví dụ:

textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

c. Định dạng `button`

Điều chỉnh kích thước, màu nền, viền, và hiệu ứng hover.

Ví dụ:

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Kết luận

Việc sử dụng các thuộc tính CSS để định dạng ảnh, mô hình hộp và form giúp cải thiện giao diện trang web và nâng cao trải nghiệm người dùng. Hãy thực hành để làm chủ những kỹ thuật này!

CODE BÀI GIẢNG

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Code bài 5: chia khung</title>
<style>
body {
font-family: Arial;
}

.call {
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
}
/*CSS UL MENU*/
.menu {
width: 100%;
height: 70px;
position: sticky;
top: 0px;
padding-left: 200px;
padding-right: 200px;
display: flex;
box-sizing: border-box;
align-items: center;
}

.menu img {
height: 60px;
width: auto;
left: 200px;
}

.menu ul {
flex: 1;
text-align: right;
}

.menu ul li {
display: inline-block;
padding: 10px 15px;
}

.menu ul li a {
font-weight: 700;
color: #515151;
text-decoration: none;
font-size: 13px
}

.menu button {
padding: 12px 20px;
background: #ff6a00;
color: white;
border: none;
border-radius: 30px;
font-size: 14px;
}
/* CSS BANNER*/
.banner {
width: 100%;
height: 600px;
padding-top: 200px;
padding-left: 200px;
box-sizing: border-box;
position: relative;
border-bottom: 1px solid #808080
}

.banner .hello {
top: 250px;
left: 200px;
}

.banner h1 {
top: 0;
left: 0;
font-size: 80px;
line-height: 0;
}

.banner h2 {
top: 150px;
line-height: 0;
}

.banner button {
padding: 12px 20px;
background: #ff6a00;
color: white;
border: none;
border-radius: 30px;
font-size: 14px;
font-weight: bold;
}

.banner button.black {
background-color: black;
}

.banner .social-box {
margin-top: 20px;
display: flex;
}

.banner .social-box .social {
display: block;
border: 2px solid #ff6a00;
width: 40px;
height: 40px;
margin-right: 20px;
text-align: center;
padding: 10px 10px;
box-sizing: border-box;
color: #ff6a00;
font-weight: bold;
border-radius: 20px
}

.banner .social-box .social:hover {
background: #ff6a00;
color: white;
cursor: pointer
}

.banner img {
position: absolute;
right: 200px;
bottom: 0;
height: 600px
}
</style>
</head>
<body>

<section class="menu">
<img src="logo.svg" />
<ul>
<li>
<a href="#">Home</a>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testmonial</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<button>Components</button>
</div>
</section>

<section class="banner">
<div class="hello">
hello,I'm
</div>
<h1>
James Smith
</h1>
<h2>
UI/UX Designer
</h2>
<div>
<button>HIRE ME</button>
<button class="black">DOWNLOAD CV</button>
</div>
<div class="social-box">
<a class="social">F</a>
<a class="social">G</a>
<a class="social">T</a>
<a class="social">W</a>
</div>

.box-counter .item {
padding:0px 40px;
text-align:center;
color:#ababab
}

.box-counter .counter {
font-size: 40px;
font-weight: 500;
color: #3d3d3d;
line-height:50px
}
</style>

<div class="box-counter">
<div class="item">
<div class="counter">124</div>
Happy Clients
</div>
<div class="item" style="border-right: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; ">
<div class="counter">
456
</div>
Project Completed
</div>
<div class="item">
<div class="counter">
789
</div>
Awards Won
</div>
</div>
</section>

<img class="call" src="https://cdn-icons-png.flaticon.com/512/9073/9073336.png" />
</body>
</html>

Bài trước

Bài tiếp theo

Tài liệu khóa học

Chưa có tài liệu.

Danh sách bài học

Đăng ký tài khoản để xem

CSS 5. Định dạng ảnh, box, form nhập liệu

CSS 5: Định dạng ảnh và hộp (Box Model)

1. Định dạng ảnh

a. Thuộc tính width và height

b. Thuộc tính border-radius

c. Thuộc tính object-fit

2. Mô hình hộp (Box Model)

a. Thuộc tính border

b. Thuộc tính padding

c. Thuộc tính margin

3. Định dạng Form nhập liệu

a. Định dạng input

b. Định dạng textarea

c. Định dạng button

Kết luận

a. Thuộc tính `width` và `height`

b. Thuộc tính `border-radius`

c. Thuộc tính `object-fit`

a. Thuộc tính `border`

b. Thuộc tính `padding`

c. Thuộc tính `margin`

a. Định dạng `input`

b. Định dạng `textarea`

c. Định dạng `button`