Thứ Năm, 26 tháng 12, 2013

CSS Làm thế nào để





Khi một trình duyệt đọc một style sheet, nó sẽ định dạng văn bản theo nó.

Ba cách để chèn CSS

Có ba cách để chèn một tấm hình:
  • Sheet bên ngoài
  • Phong cách nội bộ
  • Phong cách nội tuyến

Bên ngoài Style Sheet

Sheet bên ngoài là lý tưởng khi phong cách được áp dụng cho nhiều trang. Với một phong cách trang bên ngoài, bạn có thể thay đổi giao diện của một trang web toàn bộ bằng cách thay đổi một tập tin. Mỗi trang phải gắn với phong cách sử dụng thẻ <link>. Thẻ <link> đi bên trong phần đầu:

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

Sheet bên ngoài 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 các thẻ HTML.Phong cách của bạn sẽ được lưu với một phần mở rộng css.. Một ví dụ về một tập tin style sheet được hiển thị dưới đây:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

GhiKhông thêm một không gian giữa giá trị tài sản và các đơn vị (như margin-left: 20 px). Cách chính xác là: margin-left: 20px

Nội Style Sheet

Một phong cách trang nội bộ nên được sử dụng khi một tài liệu duy nhất có một phong cách độc đáo. Bạn xác định phong cách nội bộ trong phần đầu của một trang HTML, bằng cách sử dụng thẻ <style>, như thế này:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Phong cách nội tuyến

Một phong cách nội tuyến đánh mất đi những lợi thế của phong cách trang bằng cách trộn với nội dung trình bày. Sử dụng phương pháp này một cách tiết kiệm!

Sử dụng phong cách nội tuyến bạn sử dụng thuộc tính style trong thẻ có liên quan. Thuộc tính phong cách có thể chứa bất kỳ tài sản CSS. Các ví dụ cho thấy làm thế nào để thay đổi màu sắc và lề trái của một đoạn văn:

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Nhiều Style Sheets

Nếu một số tài sản đã được thiết lập cho bộ chọn cùng trong phong cách khác nhau, các giá trị sẽ được thừa hưởng từ phong cách trang cụ thể hơn. 

Ví dụ, trên sheet bên ngoài có các thuộc tính cho bộ chọn h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Và một phong cách trang nội bộ có các thuộc tính cho bộ chọn h3:

h3
{
text-align:right;
font-size:20pt;
}

Nếu trang với phong cách trang nội bộ cũng liên kết đến các sheet bên ngoài các thuộc tính cho h3 sẽ là:

color:red;
text-align:right;
font-size:20pt;

Màu sắc được thừa hưởng từ phong cách trang bên ngoài và các văn bản liên kết và các font-size được thay thế bằng phong cách trang nội bộ.

Nhiều Styles sẽ thác vào một

Phong cách có thể được xác định:
  • bên trong một phần tử HTML
  • trong phần đầu của một trang HTML
  • trong một file CSS bên ngoài
Lời khuyên: Ngay cả nhiều phong cách trang bên ngoài có thể được tham chiếu trong một tài liệu HTML đơn.

Tầng thứ tự

Phong cách những gì sẽ được sử dụng khi có nhiều hơn một phong cách cụ thể cho một phần tử HTML?

Nói chung, chúng tôi có thể nói rằng tất cả các phong cách sẽ "thác" thành "ảo" phong cách tờ mới theo các quy tắc sau đây, nơi số bốn có ưu tiên cao nhất:
  1. Trình duyệt mặc định
  2. Sheet bên ngoài
  3. Phong cách nội bộ (trong phần đầu)
  4. Phong cách nội tuyến (bên trong một phần tử HTML)
Vì vậy, một phong cách nội tuyến (bên trong một phần tử HTML) có ưu tiên cao nhất, có nghĩa là nó sẽ ghi đè lên một phong cách được định nghĩa trong thẻ head, hoặc trong một phong cách bên ngoài, hoặc trong trình duyệt (giá trị mặc định).

GhiLưu ý: Nếu liên kết đến các sheet bên ngoài được đặt sau khi phong cách trang nội bộ trong HTML <head>, phong cách trang bên ngoài sẽ ghi đè lên phong cách trang nội bộ!
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)