KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?
Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!
>>>> Tham khảo khóa học đã giúp mình tại:
Contents
Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế
700.000₫
599.000
₫
Tìm hiểu thêm
unica.vn
Mô tả
Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix
Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40
Còn bây giờ thì vào bài viết thôi!
Align là sự thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh (align) một phần tử như margin, padding, text-align, position, float…Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh.
Ở bài viết này, Webaffiliatevn.com sẽ cùng bạn tìm hiểu một số align thường hay sử dụng nhất. Mời bạn đọc theo dõi.
1. Căn lề cho văn bản trong HTML bằng thuộc tính text-aligh
Để có thể căn chỉnh văn bản trong HTML, bạn hãy sử dụng thuộc tính style. Thuộc tính style chỉ định một kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với thẻ HTML <p>, với thuộc tính CSS việc căn chỉnh văn bản cho căn giữa, căn trái và phải được thực hiện một cách dễ dàng. Nhưng các bạn lưu ý đối với phiên bản HTML5 thuộc tính align không còn hỗ trợ cho thẻ <p>, vì thế, kiểu CSS được sử dụng để đặt căn chỉnh văn bản.
Chỉ cần lưu ý, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ style nào được thiết lập trên toàn cầu. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong thẻ HTML <style> hoặc trang định kiểu bên ngoài.
Ví dụ:
Bạn có thể thử chạy đoạn mã sau để đặt căn chỉnh văn bản trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về sử dung thuộc tính style để căn chỉnh HTML</title>
</head>
<body>
<h1>Webaffilatevn</h1>
<p style="text-align:center;">Đoạn văn được căn giữa</p>
</body>
</html>
See the Pen wvGMpzo by DavidKhai (@davidkhai) on CodePen.dark
2. Canh lề cho phần tử bằng thuộc tính margin trong CSS
Thuộc tính margin dùng để canh lề cho phần tử.
Dưới đây là một số thuộc tính margin:
- margin-top (canh lề phía trên)
- margin-right (canh lề bên phải)
- margin-bottom (canh lề phía dưới)
- margin-left (canh lề bên trái)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{
border:1px solid black;
margin-top:25px;
margin-right:45px;
margin-bottom:100px;
margin-left:200px;
}
</style>
</head>
<body>
<h2>Ví dụ về sử dụng thuộc tính margin để căn chỉnh.</h2>
<hr>
</body>
</html>
See the Pen GRZoyWo by DavidKhai (@davidkhai) on CodePen.dark
Lưu ý: Giá trị của thuộc tính margin có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó), auto (trình duyệt tự động thiết lập giá trị)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1{
border:1px solid black;
margin-top:20px;
margin-left:50px;
margin-bottom:30px;
margin-left:150px;
}
.div2{
border:3px solid red;
margin-left: inherit;
}
.div3{
border:1px solid blue;
width:300px;
margin-left:auto;
}
.div4{
border:1px solid green;
width:300px;
margin:auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">Hướng dẫn học HTML</div>
</div>
<hr>
<div class="div3">Hướng dẫn học CSS</div>
<hr>
<div class="div4">Hướng dẫn học JS</div>
</body>
</html>
See the Pen zYqrpzM by DavidKhai (@davidkhai) on CodePen.dark
3. Căn giữa cho phần tử – Sử dụng margin:auto
Trong CSS, để căn giữa một phần tử khối ta sử dụng thuộc tính margin có giá trị là auto để căn chỉnh phần tử nằm ở giữa so với phần tử cha của nó.
Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: 0 auto;
width: 50%;
border: 2px solid red;
padding: 15px;
}
</style>
</head>
<body>
<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử
dụng margin: 0 auto.</p>
<div class="center">
<p><b>Note: </b>Đây là ví dụ cho thấy phần tử được căn giữa bằng thuộc tính margin: 0 auto, với chiều rộng là 50% ,khoảng cách trên dưới trái phải là 15px,...</p>
</div>
</body>
</html>
See the Pen gOrPojg by DavidKhai (@davidkhai) on CodePen.dark
Chú ý:
- Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width (hoặc widthcó giá trị là 100%) vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
- Thuộc tính margin: auto chỉ căn giữa cho phần tử block như các thẻ từ h1 đến h6…còn các phần tử inline như em, a, strong, b,.. sẽ không được áp dụng.
- Có thể ghi đè lại phần tử hiển thị block hay inline bằng cách sử dụng thuộc tính display. Ví dụ: span { display: block;}.
4. Căn giữa hình ảnh với thuộc tính margin
Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Căn giữa hình ảnh</h2>
<p>Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.</p>
<img src="https://webaffiliatevn.com/storage/2020/06/quan-tri-website-la-gi-1.png" alt="quản trị web" style="width:60%">
</body>
</html>
See the Pen PoNZEVj by DavidKhai (@davidkhai) on CodePen.dark
5. Căn trái/phải – Sử dụng position
Một phương pháp khác để căn chỉnh phần tử là sử dụng position: absolute.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 50px;
width: 200px;
border: 3px solid red;
padding: 12px;
}
</style>
</head>
<body>
<h2>Căn phải sử dụng position</h2>
<p>Webaffiliate , Chúng tôi cung cấp dịch vụ thiết kế web bán hàng dưới hình thức tiếp thị liên kết có thể lấy dữ liệu sản phẩm từ bất kì website nào bạn thích, có gắn deeplink affilliate để hỗ trợ các Publisher làm affiliate dễ dàng hơn, chuyên nghiệp, bền vững hơn mà không cần quá nhiều thời gian, công sức, chi phí!
</p>
<div class="right">
<p>Bạn lo sợ mình kinh doanh online không thành công? nếu vậy thì hãy tập kinh doanh và tiếp thị online trước khi đi vào thực chiến, cạnh tranh trực tiếp với các đối thủ mạnh trên internet.
Giải pháp cho bạn chính là làm tiếp thị liên kết, nhưng muốn làm tiếp thị liên kết lâu dài, bền vững như một doanh nghiệp online thực thụ bạn cần đến một website.
Hãy đến với chúng tôi!!!</p>
</div>
</body>
</html>
See the Pen bGpEayL by DavidKhai (@davidkhai) on CodePen.dark
6. Căn trái/phải – Sử dụng float
Thuộc tính float cũng được sử dụng để căn chỉnh phần tử.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 200px;
border: 3px solid red;
padding: 12px;
}
</style>
</head>
<body>
<h2>Căn phải sử dụng position</h2>
<p>Webaffiliate , Chúng tôi cung cấp dịch vụ thiết kế web bán hàng dưới hình thức tiếp thị liên kết có thể lấy dữ liệu sản phẩm từ bất kì website nào bạn thích, có gắn deeplink affilliate để hỗ trợ các Publisher làm affiliate dễ dàng hơn, chuyên nghiệp, bền vững hơn mà không cần quá nhiều thời gian, công sức, chi phí!
</p>
<div class="right">
<p>Bạn lo sợ mình kinh doanh online không thành công? nếu vậy thì hãy tập kinh doanh và tiếp thị online trước khi đi vào thực chiến, cạnh tranh trực tiếp với các đối thủ mạnh trên internet.
Giải pháp cho bạn chính là làm tiếp thị liên kết, nhưng muốn làm tiếp thị liên kết lâu dài, bền vững như một doanh nghiệp online thực thụ bạn cần đến một website.
Hãy đến với chúng tôi!!!</p>
</div>
</body>
</html>
See the Pen OJNMzKx by DavidKhai (@davidkhai) on CodePen.dark
Chú ý: Nếu một phần tử đang được float cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để khắc phục, ta sử dụng clearfix overflow: auto:
.clearfix {
overflow: auto;
}
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid green;
padding: 10px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó,
do đó bị tràn ra bên ngoài:</p>
<div>
<img class="img1" src="https://webaffiliatevn.com/storage/2020/08/1581836855-c0d19e3f95c452e4aa46889009f04c2c.jpg" alt="Dưa hấu" width="170" height="170">
Citrullus lanatus là một loài thực vật thuộc họ Cucurbitaceae, một loài thực vật có hoa giống như cây nho có nguồn gốc từ Tây Phi. Nó được trồng để lấy quả. Dưa này phân chia thành hai giống, dưa hấu và Citrullus caffer bắt nguồn từ việc đặt tên sai lầm của Citrullus lanatus Matsum
</div>
<p style="clear:right">Sử dụng class clearfix với giá trị overflow: auto để
khắc phục:</p>
<div class="clearfix">
<img class="img2" src="https://webaffiliatevn.com/storage/2020/08/1581836855-c0d19e3f95c452e4aa46889009f04c2c.jpg" alt="Dưa hấu" width="170" height="170">
Citrullus lanatus là một loài thực vật thuộc họ Cucurbitaceae, một loài thực vật có hoa giống như cây nho có nguồn gốc từ Tây Phi. Nó được trồng để lấy quả. Dưa này phân chia thành hai giống, dưa hấu và Citrullus caffer bắt nguồn từ việc đặt tên sai lầm của Citrullus lanatus Matsum
</div>
</body>
</html>
See the Pen NWNxyqz by DavidKhai (@davidkhai) on CodePen.dark
7. Căn giữa theo chiều dọc – Sử dụng padding
Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Giải pháp đơn giản nhất đó là sử dụng padding.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 50px 0;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>Căn giữa theo chiều dọc - Sử dụng padding</h2>
<p>Ví dụ này, chúng tôi sử dụng thuộc tính padding để căn giữa phần tử div
theo chiều dọc:</p>
<div class="center">
<p>Website Webafffiliavn</p>
</div>
</body>
</html>
See the Pen xxVZYVw by DavidKhai (@davidkhai) on CodePen.dark
8. Căn giữa theo chiều dọc – Sử dụng line-height
Bạn cũng có cách khác để căn giữa theo chiều dọc là sử dụng thuộc tính line-height với giá trị giống như thuộc tính height.
Ví dụ:
.center {
line-height: 70px;
height: 70px;
border: 3px solid red;
text-align: center;
}
/* Nếu văn bản có nhiều dòng, thêm vào như sau: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
See the Pen rNexJLX by DavidKhai (@davidkhai) on CodePen.dark
9. Căn giữa theo chiều dọc – Sử dụng position và transform
Nếu không sử dụng padding và line-height như trên, bạn có thể dùng cách thứ ba là sử dụng position và transform:
.center {
height: 70px;
position: relative;
border: 3px solid red;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See the Pen zYqrRox by DavidKhai (@davidkhai) on CodePen.dark
>>> Xem thêm:
