Cho đến thời điểm này, chúng tôi đã thảo luận về một số cách để sửa đổi định dạng trang web của chúng tôi. Bao gồm các
- Có thể thay đổi màu, kích thước và khuôn mặt phông chữ bằng thẻ phông chữ
- Màu sắc của toàn bộ trang có thể được thay đổi bằng thẻ body --
- Bàn có thể được sử dụng để sắp xếp
Tuy nhiên, có một số nhược điểm khi dựa vào các phương pháp này để sửa đổi các trang của chúng tôi
- Để có một trang web có giao diện nhất quán, chúng tôi cần đảm bảo rằng tất cả các thẻ này đều nhất quán trên tất cả các trang. Nếu chúng tôi có hàng trăm trang, chỉ cần thay đổi màu nền, chúng tôi sẽ phải sửa đổi thuộc tính bgcolor của thẻ nội dung của tất cả các trang đó. Đó sẽ là một cơn ác mộng
- Đôi khi, các phương pháp được liệt kê ở trên khá hạn chế và không đáp ứng được nhu cầu của chúng tôi. Nó buộc chúng ta phải giải quyết những gì chúng ta có thể làm hơn là những gì chúng ta muốn làm
- Có thể hơi quá sức khi phải chèn các thẻ phông chữ cho mọi đoạn văn và ô bảng trong tài liệu để giữ cho phong cách nhất quán xuyên suốt
- Ban đầu, HTML được cho là xác định cấu trúc của một trang trong khi trình duyệt cung cấp giao diện mà khách hàng hài lòng nhất. Điều đó không đủ linh hoạt, đặc biệt là khi cần thiết kế. CSS cho phép tài liệu HTML quay lại cung cấp cấu trúc trong khi vẫn cho phép nhà thiết kế kiểm soát giao diện của trang
Các biểu định kiểu được đề xuất bởi W3C vào năm 1996 và mặc dù đề xuất của họ vẫn chưa được thực hiện đầy đủ, các biểu định kiểu theo tầng cung cấp các giải pháp cho các vấn đề được liệt kê ở trên. Những lợi ích chính của biểu định kiểu cho phép người thiết kế
- xác định kiểu thẻ mặc định và các lớp kiểu thẻ để chúng nhất quán trên toàn bộ trang hoặc thậm chí toàn bộ trang web;
- chỉ duy trì một tệp trong đó thay đổi kiểu cho toàn bộ trang hoặc toàn bộ trang web sẽ được thực hiện thay vì thay đổi mọi thẻ và tiêu đề trong mọi tài liệu;
- có nhiều thuộc tính hơn để sửa đổi;
- tạo các tài liệu nhỏ hơn vì họ chỉ phải xác định từng thuộc tính một lần;
- sử dụng một tính năng HTML xuống cấp nhẹ nhàng khi được sử dụng với các trình duyệt không hỗ trợ tính năng này [i. e. , các trình duyệt cũ không đặt rác trên màn hình để phản hồi các thẻ mà chúng không hiểu]
Hãy xem những biểu định kiểu có thể làm gì cho chúng ta bằng cách chạy một vài ví dụ
Khái niệm cơ bản về Style Sheets
Biểu định kiểu chỉ đơn giản là một khối văn bản, chứa trong chính tệp HTML hoặc trong một tệp riêng biệt. Trong biểu định kiểu là danh sách các quy tắc xác định cách trình duyệt muốn trình duyệt hiển thị một số thành phần nhất định của trang web. Cấu trúc chung của một luật là
tag {property: value; property: value; .. property: value}Ví dụ: người thiết kế có thể xác định lại cách thức bất kỳ văn bản nào nằm giữa các thẻ tiêu đề 1,
, sẽ được hiển thị. Giả sử chúng tôi muốn hiển thị tiêu đề 1 văn bản màu xanh lam với phông chữ Arial ở kích thước 37 pixel. Quy tắc cho điều này sẽ làh1 {color: blue; font-size: 37px; font-family: arial}
h1 is the tag [notice that it is entered without the "" brackets], and between the curly brackets are pairs of rules, "color" is to be set to "blue" [the #rrggbb format can also be used], font size is to be 37 pixels high [px stands for pixels and pt is points], and the font type or family is to be Arial. If a second rule is to be defined, simply place it on the next line.
h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}
Quy tắc mới này sẽ buộc các đoạn văn được hiển thị bằng màu xanh lam bằng cách sử dụng phông chữ Impact. Bất kỳ văn bản nào giữa tags will have an indent of 1 centimeter, a green Courier font, and be placed on a light green background [#ccffcc].
Many of the property values have units associated with them. Below you should see a table of some of the more common units and the abbreviations used to represent them.
UnitsAbbreviationpixelspxpoints [1/72 of an inch]ptpica [1/6 of an inch]pcinchesinmillimetersmmcentimeterscmpercentage%To get a comprehensive list of the units of the values [e.g., px=pixels] a list of the text related style properties, see DevGuru.com's CSS2 Quick Reference. Brian Wilson also has a nice index of CSS properties.
There are three ways to assign the rules of a cascading style sheet to your HTML file:
- define all of the rules between the tags of the HTML document [embedded style sheets];
- define the rules just before you use the tag that the rule applies to [in-line styles]; or
- define the rules in a separate file and refer to the file from each HTML document that uses it [external or linked style sheets].
The remaining sections of this document will discuss how each of these types is used.
Setting the Characteristics of Text Using Embedded Style Sheets
Either using the HTML view of Dreamweaver or using a text editor of your choice, create the HTML file below:
Stylesheet Exercise 1
Stylesheets Exercise 1________số 8
This string of text is contained between code tags. [ and ]
h1 {color: blue; font-size: 37px; font-family: arial}0
Hiển thị điều này trong trình duyệt của bạn sẽ dẫn đến một trang web đơn giản là nạn nhân của các giá trị mặc định của trình duyệt HTML
Chuỗi văn bản này được chứa giữa các thẻ đoạn văn. [
và
]h1 {color: blue; font-size: 37px; font-family: arial}1]Mỗi người trong chúng ta sẽ có thể thêm gia vị này bằng cách sử dụng phông chữ, in đậm, in nghiêng hoặc các thẻ khác, nhưng hãy xem cách thực hiện bằng biểu định kiểu
Biểu định kiểu nhúng được thêm vào một tài liệu bằng cách thêm mã vào phần đầu của trang. Khi một biểu định kiểu được nhúng trong tệp HTML, nó sẽ được đặt giữa thẻ bắt đầu
h1 {color: blue; font-size: 37px; font-family: arial}2Thẻ này báo cho các trình duyệt hỗ trợ biểu định kiểu nơi thông tin biểu định kiểu sẽ được đặt. Các trình duyệt không hỗ trợ biểu định kiểu [hy vọng] sẽ bỏ qua văn bản này. Loại thuộc tính xác định định dạng của biểu định kiểu xếp tầng sẽ được sử dụng. Đối với mục đích của chúng tôi, loại sẽ được đặt thành "text/css"
h1 {color: blue; font-size: 37px; font-family: arial}3
Đặt biểu định kiểu được nhúng ở trên vào phần đầu của trang HTML mà bạn đã nhập trong trình soạn thảo văn bản. Xem nó trong một trình duyệt sẽ dẫn đến
Làm điều đó một mình
Bây giờ, hãy tạo một trang HTML có tên exer1. html với biểu định kiểu được nhúng với các thuộc tính sau
- Đoạn văn bản được đặt thành màu đỏ, có cỡ chữ là 14 pixel [px] và thuộc họ phông chữ arial
- Tiêu đề 1 [h1] được đặt thành màu "#660000", có cỡ chữ là 24 point [pt], thuộc họ phông chữ arial và có thuộc tính text-align được đặt ở giữa
Đảm bảo thêm ít nhất một đoạn văn và một tiêu đề 1 vào tệp để kiểm tra mã của bạn
Đặt các đặc điểm của văn bản bằng cách sử dụng các kiểu trong dòng
Có một cách thứ hai để các trang web HTML chứa các quy tắc kiểu. kiểu nội tuyến. Điều này cho phép nhà thiết kế thay đổi kiểu cho một phiên bản duy nhất của thẻ. Ví dụ: nếu bạn có ba đoạn văn và bạn chỉ muốn thay đổi kiểu ở đoạn thứ hai, các quy tắc kiểu nội tuyến sẽ thực hiện việc này
Điều này được thực hiện bằng cách sử dụng thuộc tính "kiểu" trong thẻ để xác định quy tắc. Ví dụ: để thay đổi kiểu của một đoạn văn, sau đó thêm thuộc tính h1 {color: blue; font-size: 37px; font-family: arial}4 vào
nhãn. Để thử điều này, hãy sử dụng trình soạn thảo văn bản của bạn để thêm mã HTML sau vào sau đoạn đầu tiên trong bài tập đầu tiên của bài học này
h1 {color: blue; font-size: 37px; font-family: arial}5
h1 {color: blue; font-size: 37px; font-family: arial}6
Thuộc tính kiểu nội tuyến này đặt màu thành màu đỏ và cỡ chữ thành 24 điểm. Dưới đây là hình ảnh hiển thị tệp HTML mới của bạn sẽ trông như thế nào
Lưu ý cách chỉ dòng có quy tắc kiểu nội tuyến thay đổi. Ngay sau khi đoạn kết thúc với thẻ đóng
, kiểu đã quay trở lại kiểu được xác định trong phần đầu của tài liệu HTMLLàm điều đó một mình
Sao chép bài tập trước của bạn [exer1. html] vào một tệp có tên exer2. html. Thêm một đoạn bổ sung mà bạn có thể thay đổi các thuộc tính của việc sử dụng quy tắc kiểu nội tuyến. Đặt đoạn văn mới được hiển thị in nghiêng bằng cách sử dụng kiểu phông chữ quy tắc. chữ nghiêng
Đặt các đặc điểm của văn bản bằng biểu định kiểu bên ngoài [Liên kết]
Để duy trì giao diện chung trên tất cả các trang trên trang web bạn đang thiết kế, tốt nhất là tạo một bộ quy tắc kiểu duy nhất và có tất cả các trang truy cập vào tệp duy nhất đó. Trong trường hợp này, bạn sẽ tạo một tệp văn bản riêng chứa các quy tắc. Chúng sẽ có cú pháp giống như các quy tắc biểu định kiểu nhúng được đặt giữa các thẻ nhận xét. Ví dụ: bài tập đầu tiên bạn thực hiện có các quy tắc sau
h1 {color: blue; font-size: 37px; font-family: arial}7
Đặt văn bản này vào một tệp và bạn đã tạo một tệp biểu định kiểu bên ngoài. Điều quan trọng cần lưu ý là giống như các tệp HTML được nhận dạng bằng phần mở rộng tệp. html hoặc. htm, các tệp biểu định kiểu bên ngoài cũng phải có phần mở rộng riêng. Phần mở rộng tệp phổ biến cho biểu định kiểu là. css
Giả sử chúng tôi đã lưu biểu định kiểu này dưới dạng exer3. css. Bây giờ, hãy xem cách kết hợp biểu định kiểu này vào một trang web
Thẻ cho một phong cách bên ngoài thay thế
các thẻ trong phần đầu của trang web. Thẻ mới tạo liên kết đến biểu định kiểu. định dạng của nó làh1 {color: blue; font-size: 37px; font-family: arial}2
- rel xác định cách tệp bên ngoài mà chúng tôi đang liên kết sẽ được sử dụng trong tài liệu HTML
- href cung cấp cho trình duyệt URL [tương đối hoặc tuyệt đối] của biểu định kiểu sẽ được sử dụng
- loại giống như loại cho biểu định kiểu được nhúng
Đối với bạn, mục duy nhất trong thẻ này mà bạn cần quan tâm là liên kết href cho biết tên và vị trí của tệp biểu định kiểu bên ngoài của bạn
Làm điều đó một mình
Sao chép bài tập trước của bạn [exer2. html] vào một tệp có tên exer3. html. Sao chép các quy tắc được xác định là biểu định kiểu nhúng vào biểu định kiểu bên ngoài có tên exer3. css. Sau khi sao chép các quy tắc, hãy xóa chúng khỏi exer3. tệp html. Cuối cùng, thêm thetag vào exer3. html để sử dụng biểu định kiểu bên ngoài exer3. css thay vì sử dụng biểu định kiểu được nhúng
Nhập biểu định kiểu
Có một phương pháp thứ hai [ít phổ biến hơn và không được đề xuất] để truy xuất các quy tắc kiểu từ một tệp biểu định kiểu bên ngoài. Nó được gọi là "nhập" và nó hoạt động giống như sự kết hợp giữa biểu định kiểu được nhúng và liên kết. Nó thay thế các quy tắc của biểu định kiểu được nhúng bằng h1 {color: blue; font-size: 37px; font-family: arial}9. một ví dụ đã được biểu diễn ở dưới
h1 {color: blue; font-size: 37px; font-family: arial}0h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
1
Stylesheets Exercise 1________số 8
This string of text is contained between code tags. [ and ]
h1 {color: blue; font-size: 37px; font-family: arial}0
Cái hay của phương pháp này là bạn cũng có thể thêm các quy tắc kiểu bổ sung sau lệnh nhập
Di sản
Tính kế thừa xác định điều gì sẽ xảy ra khi có nhiều quy tắc kiểu cố gắng đặt các đặc điểm của cùng một thẻ. Ví dụ: điều gì sẽ xảy ra khi hai quy tắc khác nhau cố gắng thay đổi màu của văn bản được xác định bằng một
nhãn? . Nói cách khác, có thể có một biểu định kiểu bên ngoài xác định các thuộc tính của tất cả các trang trên một trang web cụ thể, sau đó trong một trang web trên trang web đó, cũng có thể có một biểu định kiểu được nhúng thay đổi một số đặc điểm chỉ dành cho trang đó. Để hiểu thêm về ví dụ này, trên một dòng cụ thể của mã HTML trong trang có biểu định kiểu được nhúng, có thể có một quy tắc kiểu nội tuyến thay đổi kiểu cho chỉ dòng văn bản đó. Kế thừa cho chúng ta biết trình duyệt giải quyết người chiến thắng như thế nào?
Kế thừa cũng có thể là một vấn đề khi các thẻ được nhúng bên trong các thẻ khác. Ví dụ: điều gì sẽ xảy ra nếu bạn nhúng h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
6
h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
7
h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
8
h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
9code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}0
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}1code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}2
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}3Bộ chọn lớp
Được rồi, vậy nếu bạn có hai hoặc ba loại đoạn văn khác nhau mà bạn muốn đưa vào tài liệu HTML của mình thì sao?. Ví dụ: các đoạn văn nói chung nên có một định dạng, nhưng bạn cũng muốn có một loại đoạn văn có phông chữ để ngụ ý một thông báo quan trọng và có thể là đoạn thứ ba được thụt vào để thể hiện một khối tài liệu được trích dẫn. Bạn có thể tạo kiểu khác nhau cho từng kiểu trong khi vẫn sử dụng các thẻ đoạn văn để xác định văn bản. Chúng tôi làm điều này với thuộc tính lớp
Có hai bước chúng ta cần thực hiện để xác định nhiều lớp kiểu. Đầu tiên, chúng ta cần phân biệt luật của lớp này với luật của lớp khác. Để thực hiện việc này, trong quy tắc, hãy tuân theo tên thẻ có dấu chấm và tên lớp. Ví dụ, nếu chúng ta muốn tạo một lớp "chung" cho
thẻ, chúng ta sẽ phải có một quy tắc phong cách bắt đầu như thế này
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}4
Bước thứ hai là xác định trong tài liệu HTML lớp nào đang được sử dụng. Điều này được thực hiện bằng cách thêm lớp thuộc tính vào thẻ mà lớp đó thuộc về. Để tiếp tục ví dụ của chúng tôi, nếu chúng tôi muốn tạo một đoạn văn với lớp mà chúng tôi đã xác định là "chung", chúng tôi sẽ sử dụng thẻ sau
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}5
Dưới đây là một ví dụ đầy đủ sử dụng các lớp
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}6
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}7
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}8
code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}9
h1 {color: blue; font-size: 37px; font-family: arial}
p {color: blue; font-family: impact}
1Hiển thị ví dụ này trong trình duyệt sẽ dẫn đến kết quả như thế này
Chỉ vì bạn sử dụng bộ chọn lớp không có nghĩa là tất cả các quy tắc thẻ của bạn phải có lớp được xác định. Ví dụ: nếu bạn đã định nghĩa các lớp "chung", "quan trọng" và "trích dẫn" cho
thẻ, bạn vẫn có thể có quy tắc P {property. giá trị; . giá trị}
Làm điều đó một mình
Sao chép bài tập của bạn exer1. html vào một tệp có tên exer5. html. Hãy nhớ rằng, đây là bài tập đầu tiên mà bạn đã tạo một biểu định kiểu nhúng. Trong bài tập này, bạn sẽ cần tạo ba đoạn văn, mỗi đoạn sẽ sử dụng một lớp khác nhau. Các lớp như sau
- Lớp bình thường sẽ có kích thước phông chữ được đặt thành 13pt, họ phông chữ được đặt thành lần và màu được đặt thành "#003300"
- Thụt lề lớp sẽ có kích thước phông chữ được đặt thành 13pt, họ phông chữ được đặt thành thời gian, màu được đặt thành "#003300" và lề trái được đặt thành 0. 5in
- Lớp emp sẽ có cỡ chữ được đặt thành 13pt, họ phông chữ được đặt thành thời gian, màu được đặt thành "#003300", kiểu phông chữ được đặt thành nghiêng và độ dày phông chữ được đặt thành đậm
Tạo quy tắc biểu định kiểu cho ba loại đoạn văn này bằng cách sử dụng biểu định kiểu được nhúng và đặt từng đoạn trong ba đoạn văn của bạn thành một trong các lớp để kiểm tra mã của bạn
Bộ chọn theo ngữ cảnh
Bạn cũng có thể chỉ muốn đặt kiểu thẻ khi nó được nhúng trong một thẻ khác. Ví dụ: nếu bạn chỉ muốn thay đổi cách thẻ ảnh hưởng đến việc hiển thị văn bản in đậm trong một đoạn chứ không muốn thay đổi ở đâu khác, hãy sử dụng quy tắc kiểu sau
tags will have an indent of 1 centimeter, a green Courier font, and be placed on a light green background [#ccffcc].1
Bộ chọn giả
Định nghĩa đầu tiên về biểu định kiểu xếp tầng bao gồm thêm hai "bộ chọn" để xác định các kiểu khác nhau trong một thẻ đơn. Ví dụ: một số tài liệu làm cho ký tự đầu tiên của đoạn văn được in đậm hoặc lạ mắt theo một cách nào đó. Biểu định kiểu xếp tầng cho phép người thiết kế xác định kiểu của ký tự đoạn đầu tiên hoặc dòng. Điều này được thực hiện tương tự như cách định nghĩa một lớp hoặc bộ chọn theo ngữ cảnh, nhưng với một tên lớp được xác định trước
tags will have an indent of 1 centimeter, a green Courier font, and be placed on a light green background [#ccffcc].2
Điều này sẽ làm cho ký tự đầu tiên có kích thước gấp 3 lần các ký tự khác và có màu đỏ
Điều quan trọng cần lưu ý là một số yếu tố giả có thể được kết hợp. Ví dụ, quy tắc dưới đây là hoàn toàn hợp pháp
tags will have an indent of 1 centimeter, a green Courier font, and be placed on a light green background [#ccffcc].3
Làm điều đó một mình
Sao chép bài tập đầu tiên của bạn exer1. html vào một tệp có tên exer6. html. Thêm một quy tắc để chỉ thay đổi chữ cái đầu tiên của một đoạn sao cho nó lớn gấp đôi so với các ký tự còn lại của đoạn, kiểu phông chữ của nó được đặt thành nghiêng, độ đậm của phông chữ được đặt thành đậm và màu của nó được đặt
Ghi chú. Tôi đã may mắn hơn khi nhận được điều này để hiển thị đúng cách trong Internet Explorer
Thẻ mới với biểu định kiểu
-- Thẻ bắt đầu
và thẻ kết thúc
có thể được sử dụng để đặt kiểu cho một khối mã HTML. Khối này thường bao gồm một vùng mã lớn hơn có thể có nhiều thẻ-- Thẻ bắt đầu và thẻ kết thúc có thể được sử dụng để đặt kiểu của phần tử HTML được nhúng trong các thẻ HTML khác. Nó thường được sử dụng cho các đoạn mã rất ngắn. Ví dụ.
tags will have an indent of 1 centimeter, a green Courier font, and be placed on a light green background [#ccffcc].4
Hai thẻ tiếp theo cũng mới với biểu định kiểu và có thể được sử dụng để thể hiện văn bản đã chỉnh sửa trong tài liệu HTML. Đôi khi, thật tuyệt khi sử dụng các thẻ này nếu một số người đang làm việc trên một tài liệu và muốn xem các mục đã được thay đổi từ bản sửa đổi này sang bản sửa đổi tiếp theo
Cái nào sau đây là một biểu định kiểu mặc định?
Biểu định kiểu mặc định. Biểu định kiểu mặc định còn được gọi là Biểu định kiểu trình duyệt Hoặc Biểu định kiểu tác nhân người dùng . Đây là biểu định kiểu mà trình duyệt áp dụng theo mặc định cho mọi trang web mà nó hiển thị. Vì vậy, nếu tác giả của một trang web không áp dụng bất kỳ kiểu dáng nào từ phía anh ta, thì trang web đó sẽ không phải là không có kiểu dáng.
Điều gì xảy ra nếu trình duyệt không hỗ trợ chữ thảo hoặc helvetica?
Điều gì xảy ra nếu trình duyệt không hỗ trợ Chữ thảo hoặc Helvetica? . The browser defaults override rules specified in an external style sheets.
Kiểu nội tuyến kiểu nhúng và biểu định kiểu bên ngoài mà bạn sẽ sử dụng để xác định thiết kế cho toàn bộ trang web là gì?
Kiểu nội tuyến là những kiểu được sử dụng như một phần của chính thẻ HTML. Các kiểu được nhúng nằm trong tiêu đề của trang và áp dụng cho toàn bộ trang đó. Biểu định kiểu bên ngoài là một tệp văn bản riêng biệt mà mỗi trang trong trang web có thể liên kết với nó để nhận hướng dẫn của nó
Điều nào sau đây là cách tốt nhất để truyền đạt rằng văn bản của bạn có ý nghĩa đặc biệt?
Cách nào sau đây là cách tốt nhất để truyền đạt rằng văn bản của bạn có ý nghĩa đặc biệt? . Sử dụng thẻ ngữ nghĩa ngoài màu sắc và/hoặc phông chữ .