Khái niệm

CSS: Cascading Style Sheets

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).

Khi sử dụng css chúng ta sẽ dễ dàng quản lý nội dung trang HTML, dễ điều khiển phần định dạng, và đặc biệt là sẽ tốn ít thời gian khi code hay chỉnh sửa, giả sử các bạn có ~100 file HTML có tiêu đề như nhau, các tiêu đề này được định dạng trong từng trang HTML, khi các bạn muốn chỉnh sửa các tiêu đề này, thì các bạn sẽ phải mở và chỉnh từng trang trong ~100 file, việc này mất bao nhiêu thời gian chắc các bạn có thể ước lượng được, còn nếu ~100 file này được kết hợp với 1 file CSS thì việc định dạng tiêu đề trong ~100 file này chỉ mất vài phút.

Code

	*
Thế giới này là của anh thì anh có quyền đi với em

	*
Hai thế giới: Karik.

	*

	*
Bla bla bla!, Bất sáng tất cả đèn xanh , anh chạy thật nhanh Với em tay trong tay cầm vài chai chơi hết đêm nay uống không say đến ngày tiếp vài chai Em thích gì anh cho đó , em thích bentley anh vẫn cho Em thích villa anh vẫn lo , cho đến em vì anh cũng có Chỉ cần em chơi với anh thì cả thế giới này thuộc về em Chỉ cần em đi với anh là những thứ gì thuộc về em , anh dẹp.....
Un-Styled

Thế giới này là của anh thì anh có quyền đi với em

Hai thế giới: Karik.

Bla bla bla!, Bất sáng tất cả đèn xanh , anh chạy thật nhanh Với em tay trong tay cầm vài chai chơi hết đêm nay uống không say đến ngày tiếp vài chai Em thích gì anh cho đó , em thích bentley anh vẫn cho Em thích villa anh vẫn lo , cho đến em vì anh cũng có Chỉ cần em chơi với anh thì cả thế giới này thuộc về em Chỉ cần em đi với anh là những thứ gì thuộc về em , anh dẹp.....

Styled

Thế giới này là của anh thì anh có quyền đi với em

Hai thế giới: Karik.

Bla bla bla!, Bất sáng tất cả đèn xanh , anh chạy thật nhanh Với em tay trong tay cầm vài chai chơi hết đêm nay uống không say đến ngày tiếp vài chai Em thích gì anh cho đó , em thích bentley anh vẫn cho Em thích villa anh vẫn lo , cho đến em vì anh cũng có Chỉ cần em chơi với anh thì cả thế giới này thuộc về em Chỉ cần em đi với anh là những thứ gì thuộc về em , anh dẹp.....

.hello {
*background: #fff;
*border-radius: 3px;
*border-left: 3px solid #ff0000;
*padding: 10px;
}

.hello:hover {
*border-left: 3px solid #0000ff;
}

.hello h1 {
*font-size: 1.2rem;
*color: #ff0000;
}

.hello .quick {
*color: #b3b2b2;
*text-align: right;
*border-bottom: 1px solid #807f7f;
*background: #fff000;
*padding-top: 0;
*padding-right: 0.5rem;
*padding-bottom: 0;
*padding-left: 0.5rem;
*text-transform: capitalize;
}

.hello figure {
*float: left;
*margin-right: 5px;
*margin-bottom: 2px;
}

.hello figure img {
*max-width: 34px;
}

.hello a:hover {
*color: #ff0000;
}

.hello p {
*line-height: 1.3rem;
}

.hello p:last-child {
*text-align: justify;
}

Vấn đề

TOP