CSS How To - CSS Làm thế nào

PVS · 28/01/2016

CSS How To - CSS Làm thế nào

Khi một trình duyệt đọc một style sheet, nó sẽ định dạng các tài liệu HTML theo các thông tin trong style sheet.

Ba cách để chèn CSS
Có ba cách để chèn một style sheet:

External style sheet
Internal style sheet
Inline style

External Style Sheet
Với một external style sheet, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ là một tập tin!

Mỗi trang phải bao gồm một tham chiếu đến tập tin trên external style sheet trong phần tử <link>. Phần tử <link> bên trong <head>:
Ví dụ:

Mã:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

External style sheet có thể được viết bằng bất kỳ trình soạn thảo văn bản. Các tập tin không được chứa bất kỳ tag html. Các tập tin style sheet phải được lưu với một phần mở rộng .css.

Dưới đây là cách làm "myStyle.css":

Mã:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Đừng thêm một dấu cách giữa giá trị và các đơn vị (như margin-left:20 px. Viết đúng là: margin-left:20px;

Internal Style Sheet
Một internal style sheet có thể được sử dụng nếu một trang duy nhất có một style độc đáo.

Internal styles được định nghĩa trong phần tử <style>, bên trong <head> của trang HTML:

Mã:

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Inline Styles
Inline style có thể được sử dụng để áp dụng một style độc đáo cho một phần tử duy nhất.

Để sử dụng inline styles, thêm thuộc tính style cho các phần tử có liên quan. Các thuộc tính style có thể chứa bất kỳ thuộc tính CSS.

Ví dụ dưới đây cho thấy làm thế nào để thay đổi màu sắc và lề trái của phần tử <h1>:

Mã:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Một inline style mất nhiều trong những lợi thế của một style sheet (bằng cách trộn nội dung với bài thuyết trình). Sử dụng phương pháp này một cách tiết kiệm!

Multiple Style Sheets
Nếu một số thuộc tính đã được xác định cho bộ chọn cùng (phần tử) ở dạng style sheets khác nhau, các giá trị từ các style sheets đọc cuối cùng sẽ được sử dụng.
Ví dụ:
Giả sử rằng một external style sheet có style sau cho phần tử <h1>:

Mã:

h1 {
    color: navy;
}

sau đó, giả định rằng một internal style sheet cũng có những style sau cho phần tử <h1>:

Mã:

h1 {
    color: orange;   
}

Nếu internal style được xác định sau khi các liên kết đến các external style sheet, các phần tử <h1> sẽ được là "orange":
Ví dụ:

Mã:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>

Tuy nhiên, nếu internal style được xác định trước khi liên kết với các external style sheet, các phần tử <h1> sẽ là "navy":

Mã:

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Cascading Order
Style gì sẽ được sử dụng khi có nhiều hơn một style chỉ định cho một phần tử HTML?

Nói chung chúng ta có thể nói rằng tất cả các style sẽ "cascade" thành một "virtual" style sheet mới theo các quy tắc sau đây, trong đó có một số ưu tiên cao nhất:

Inline style (trong một phần tử HTML)
External và internal style sheets (trong phần đầu)
Trình duyệt mặc định

Vì vậy, một inline style (bên trong một phần tử HTML cụ thể) có ưu tiên cao nhất, có nghĩa là nó sẽ ghi đè lên một style được định nghĩa bên trong tag <head>, hoặc trong một external style sheet, hoặc một giá trị mặc định của trình duyệt.

Chúc các bạn thành công.

Nguồn: w3schools.com

tranquochoan · 29/09/2016

Mình thì mình thường tạo ra một file css style.css để style riêng cho từng phần, mình sẽ chia ra các phần một cách rõ ràng, header, nav, footer để có thể dễ dàng thay đổi css nếu gặp lỗi.

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

CSS How To - CSS Làm thế nào

PVS

Super Moderator

tranquochoan

Private

Dịch vụ XenForo của VNXF

Hướng dẫn sử dụng

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ