Trong phần này mình sẽ giới thiệu đến các bạn một số thuộc tính nâng cao khác trong CSS.
- a:hover{color:orange;}: Đối với thuộc tính "a" có thêm "hover" nhằm giúp, khi chúng di chuột đến thì chữ sẽ chuyển sang màu khác. Đối với thuộc tính trên khi di chuột tới thì nó sẽ đổi sang màu cam. Đối với thuộc tính thêm "hover" mình cũng có thể áp dụng cho hình ảnh, khi di chuột lên thì sẽ có viền hoặc background.
- float:left; Đây là Thuộc tính xếp hàng ngang. Thuộc tính này có tác dụng, khi các khối tin nhỏ đang trồng lên nhau theo hàng dọc, bạn có thể thêm thuộc tính này cho toàn khối tin nhỏ đó để nó có thể xếp hàng ngang. Điểm đặc biệt của thuộc tính này là khi ta phóng lớn trang web lên thì các khối tin nhỏ sẽ được sắp xếp vừa đủ hàng ngang, còn nếu không đủ chỗ nó sẽ tự động chuyển khối tin xuống dưới.
- Trường hợp nếu chúng ta muốn những khối tin cố định chỉ xuất hiện 2 cột khối tin nhỏ, thì ta có thể sử dụng thẻ "section" hoặc thẻ "div" để đóng khối toàn bộ các khối tin nhỏ, rồi chỉnh lại độ rộng của khối "section" nếu chúng ta sử dụng "section" để đóng khối. Độ rộng này phải được tính bằng tổng của 2 khối nhỏ và khoảng cách nếu có. Nếu chúng ta tính sai có thể khối "section" sẽ không xếp thành 2 cột khối tin.
- Trường hợp nếu có 2 thẻ img đóng trong các khối khác nhau. Nếu mình muốn định dạng 1 khối nhất định, thì mình phải dùng luôn thẻ bố của nó. Ví dụ, nếu mình muốn áp dụng thẻ img trong cặp thể div, thì mình sẽ viết như sau: div img {float:right;}
- Thuộc tính "line-height:15px;" đây là thuộc tính dãn dòng. Nhưng chó có một định mức cố định. Nếu muốn co dãn dòng không giới hạn, chúng ta cần phải cho thêm thuộc tính "display:block;" thuốc tính này sẽ giúp bỏ qua việc cố định dãn dòng.
Ứng Dụng Thực Tế Cho Các Thuộc Tính CSS Trên:
File HTML Được Viết Chi Tiết.
<html lang="en">
<head><meta charset="UTF-8">
<title>Thực Tập Tạo Khối Tin Kênh 14 P2</title>
<link rel="stylesheet" href="2.css"></head>
<body>
<section>
<div> <img src="3.png" alt="ảnh kênh 14">
<a href="#">Lâu lắm rồi mới có một sự kiện khiến fan đau đầu vì không chọn nổi sao đình đám nào đẹp xuất sắc hơn</a>
<p>Sulli, Gong Yoo, Han Hyo Joo, Seolhyun, Park Hyung Sik, EXO cùng loạt ngôi sao đình đám khác đã tụ hội tại một sự kiện tối ngày 7/6, thu hút sự chú ý lớn của truyền thông.</p> </div>
<article> <a href="#"><img src="2.png" alt="ảnh kênh 14"></a>
<a href="#">Nữ du học sinh Việt trổ tài hóa thân thành bà Phương trong "Sống chung với mẹ chồng" xuất sắc</a> </article>
<article> <a href="#"><img src="3.jpg" alt="ảnh kênh 14"></a>
<a href="#">Lý Nhã Kỳ khoác cánh vàng, lộng lẫy như Nữ hoàng Ai Cập đi họp báo</a> </article>
<article> <a href="#"><img src="4.jpg" alt="ảnh kênh 14"></a>
<a href="#">10 nam thần Đài Loan bất ngờ tái xuất màn ảnh xứ Trung trong năm 2017</a> </article>
<article> <a href="#"><img src="5.jpg" alt="ảnh kênh 14"></a>
<a href="#">Cảnh giác: Một tuần sau khi đi bơi, bé trai 4 tuổi bất ngờ chết đuối cạn</a> </article>
<article> <a href="#"><img src="6.jpg" alt="ảnh kênh 14"></a>
<a href="#">Khám phá độ tuổi tâm hồn bạn qua bức tranh khuôn mặt ông lão</a> </article>
<article> <a href="#"><img src="7.jpg" alt="ảnh kênh 14"></a>
<a href="#">CHÍNH THỨC: Man City phá kỷ lục chuyển nhượng thủ môn</a> </article>
</section>
</body>
</html>
File CSS Được Viết Cụ Thể.
section{width: 334px;}
div{ width: 319px;}
div img{ float: right;
width: 152px;
height: 89px;}
div a{font-size: 12px;}
div a:hover{ color: red;}
article{ width: 152px;
height: 156px;
margin-right:15px;
float: left;}
article img{width: 152px;
height: 89px;}
a{ font-family: tahoma;
font-weight: bold;
font-size:10.5px;
text-decoration: none;
display:block;
line-height: 15px;
color:#555;}
a:hover{ color: orange;}
Mong rằng những thuộc tính này sẽ giúp ích cho các bạn trong việc tìm hiểu về CSS.
DANH SÁCH BÀI TRONG SERIE
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
 |
| Một Số Thuộc Tính CSS Nâng Cao |
- a:hover{color:orange;}: Đối với thuộc tính "a" có thêm "hover" nhằm giúp, khi chúng di chuột đến thì chữ sẽ chuyển sang màu khác. Đối với thuộc tính trên khi di chuột tới thì nó sẽ đổi sang màu cam. Đối với thuộc tính thêm "hover" mình cũng có thể áp dụng cho hình ảnh, khi di chuột lên thì sẽ có viền hoặc background.
- float:left; Đây là Thuộc tính xếp hàng ngang. Thuộc tính này có tác dụng, khi các khối tin nhỏ đang trồng lên nhau theo hàng dọc, bạn có thể thêm thuộc tính này cho toàn khối tin nhỏ đó để nó có thể xếp hàng ngang. Điểm đặc biệt của thuộc tính này là khi ta phóng lớn trang web lên thì các khối tin nhỏ sẽ được sắp xếp vừa đủ hàng ngang, còn nếu không đủ chỗ nó sẽ tự động chuyển khối tin xuống dưới.
- Trường hợp nếu chúng ta muốn những khối tin cố định chỉ xuất hiện 2 cột khối tin nhỏ, thì ta có thể sử dụng thẻ "section" hoặc thẻ "div" để đóng khối toàn bộ các khối tin nhỏ, rồi chỉnh lại độ rộng của khối "section" nếu chúng ta sử dụng "section" để đóng khối. Độ rộng này phải được tính bằng tổng của 2 khối nhỏ và khoảng cách nếu có. Nếu chúng ta tính sai có thể khối "section" sẽ không xếp thành 2 cột khối tin.
- Trường hợp nếu có 2 thẻ img đóng trong các khối khác nhau. Nếu mình muốn định dạng 1 khối nhất định, thì mình phải dùng luôn thẻ bố của nó. Ví dụ, nếu mình muốn áp dụng thẻ img trong cặp thể div, thì mình sẽ viết như sau: div img {float:right;}
- Thuộc tính "line-height:15px;" đây là thuộc tính dãn dòng. Nhưng chó có một định mức cố định. Nếu muốn co dãn dòng không giới hạn, chúng ta cần phải cho thêm thuộc tính "display:block;" thuốc tính này sẽ giúp bỏ qua việc cố định dãn dòng.
Ứng Dụng Thực Tế Cho Các Thuộc Tính CSS Trên:
 |
| Bài Tập Ứng Dụng Tạo Khối Tin. |
<html lang="en">
<head><meta charset="UTF-8">
<title>Thực Tập Tạo Khối Tin Kênh 14 P2</title>
<link rel="stylesheet" href="2.css"></head>
<body>
<section>
<div> <img src="3.png" alt="ảnh kênh 14">
<a href="#">Lâu lắm rồi mới có một sự kiện khiến fan đau đầu vì không chọn nổi sao đình đám nào đẹp xuất sắc hơn</a>
<p>Sulli, Gong Yoo, Han Hyo Joo, Seolhyun, Park Hyung Sik, EXO cùng loạt ngôi sao đình đám khác đã tụ hội tại một sự kiện tối ngày 7/6, thu hút sự chú ý lớn của truyền thông.</p> </div>
<article> <a href="#"><img src="2.png" alt="ảnh kênh 14"></a>
<a href="#">Nữ du học sinh Việt trổ tài hóa thân thành bà Phương trong "Sống chung với mẹ chồng" xuất sắc</a> </article>
<article> <a href="#"><img src="3.jpg" alt="ảnh kênh 14"></a>
<a href="#">Lý Nhã Kỳ khoác cánh vàng, lộng lẫy như Nữ hoàng Ai Cập đi họp báo</a> </article>
<article> <a href="#"><img src="4.jpg" alt="ảnh kênh 14"></a>
<a href="#">10 nam thần Đài Loan bất ngờ tái xuất màn ảnh xứ Trung trong năm 2017</a> </article>
<article> <a href="#"><img src="5.jpg" alt="ảnh kênh 14"></a>
<a href="#">Cảnh giác: Một tuần sau khi đi bơi, bé trai 4 tuổi bất ngờ chết đuối cạn</a> </article>
<article> <a href="#"><img src="6.jpg" alt="ảnh kênh 14"></a>
<a href="#">Khám phá độ tuổi tâm hồn bạn qua bức tranh khuôn mặt ông lão</a> </article>
<article> <a href="#"><img src="7.jpg" alt="ảnh kênh 14"></a>
<a href="#">CHÍNH THỨC: Man City phá kỷ lục chuyển nhượng thủ môn</a> </article>
</section>
</body>
</html>
File CSS Được Viết Cụ Thể.
section{width: 334px;}
div{ width: 319px;}
div img{ float: right;
width: 152px;
height: 89px;}
div a{font-size: 12px;}
div a:hover{ color: red;}
article{ width: 152px;
height: 156px;
margin-right:15px;
float: left;}
article img{width: 152px;
height: 89px;}
a{ font-family: tahoma;
font-weight: bold;
font-size:10.5px;
text-decoration: none;
display:block;
line-height: 15px;
color:#555;}
a:hover{ color: orange;}
Mong rằng những thuộc tính này sẽ giúp ích cho các bạn trong việc tìm hiểu về CSS.
DANH SÁCH BÀI TRONG SERIE
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
1 Comments
thuộc tính css nâng cao mà bạn nên biết. tks ad.
ReplyDeleteđọc thêm tìm kiếm bất động sản uy tín tại đây:
mua bán đất nền dự án huyện dĩ an bình dương
bán đất nền dự án thành phố mới bình dương
đất nền dự án quận bình chánh giá rẻ
đất nền dự án quận thủ đức uy tín
mua bán đất nền dự án quận tân phú