CSS - Tập tin định kiểu theo tầng

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets(CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML vàXHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL v.v...Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C).Thay vì đặt các thẻ qui định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dungcủa nó, bạn nên sử dụng CSS....
Nội dung trích xuất từ tài liệu:
CSS - Tập tin định kiểu theo tầngCSSBước tới: menu, tìm kiếmTrong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets(CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML vàXHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL v.v...Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C).Thay vì đặt các thẻ qui định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dungcủa nó, bạn nên sử dụng CSS.Tác dụng • Hạn chế tối thiểu việc làm rối mã HTML của trang web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu...), khiến mã nguồn của trang web được gọn gàng hơn, tách nội dung của trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. • Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau.Sử dụngCó 3 cách để sử dụng CSS. 1. Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style Đoạn text cần in đậm, gạch chân, màu đỏ 2. Đặt CSS ở đầu trang web để áp dụng kiểu dáng cho một mình trang ấy o Đặt đoạn CSS trong header của web (giữa và ): body {font-family:verdana;color:#0000FF;} // Kiểu chữ trong trang web là Verdana, màu chữ thông thường là màu xanh dương 3. Đặt các thuộc tính CSS vào một tệp riêng biệt (*.css), có thể đưa vào nhiều trang khác nhau o Nội dung tệp style.css: body {font-family:verdana;color:#0000FF;} • Đặt tệp này vào trang web bằng đoạn mã (mã có thể nằm ngoài thẻ ): Chú thích: Mở đầu bằng /* và kết thúc bằng */.Cú pháp: cú pháp của : tên_css { thuộc_tính: giá_trị_của_thuộc_tính; }ví dụ: body { background: #eeeeee; font-family: Verdana, Arial, serif;}Tính kế thừa: như ví dụ trên thì tòan bộ các tag HTML có tên body + những tag HTML nằmtrong body đều được định dạng theo body, nghĩa là background: #eeeeee và font-family:Verdana, Arial, serif; mà body là thẻ lớn nhất chưa nội dung của website cho nên tất cả các tagkhác đều sử dụng các định dạng của bodytrong trường hợp muốn sử dụng một định dạng khác trong một đối tượng nhỏ hơn body giảsử: p thì chỉ việc định nghĩa thêm đối tượng đó p {font-family: Tahoma, serif;} lúc này tất cảnội dung trong thẻ HTML đều có font là Tahoma chứ khônng phải Verdana của bodyTính kết hợp: có thể định nghĩa nhiều css cùng một thuộc tính ví dụ: h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif;}=> định nghĩa cung một thuộc tính cho tất cả các tag h1,h2,h3,h4,h5,h6 thay vì phải định nghĩa:h1{ color: #009900; font-family: Georgia, sans-serif;} ...................... h6 { color: #009900; font-family: Georgia, sans-serif;}CSS TutorialSave a lot of work with CSS!In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Webpages all at once.Start learning CSS now!CSS DemoWith CSS you can create good-looking websites with nice effects.With CSS you can control the text (like font, color, size, etc.), and the layout (like backgrounds,margin, padding, etc.) of a website, in one single file!With CSS you save a lot of work!CSS IntroductionWhat You Should Already KnowBefore you continue you should have a basic understanding of the following: • HTML / XHTMLIf you want to study these subjects first, find the tutorials on our Home page.What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save a lot of work • External Style Sheets are stored in CSS filesCSS DemoAn HTML document can be displayed with different styles: See how it worksStyles Solved a Big ProblemHTML was never intended to contain tags for formatting a document.HTML was intended to define the content of a document, like:This is a headingThis is a paragraph.When tags like , and color attributes were added to the HTML 3.2 specification, it started anightmare for web developers. Development of large web sites, where fonts and color informationwere added to every single page, became a long and expensive process.To solve this problem, the World Wide Web Consortium (W3C) created CSS.In HTML 4.0, all formatting could be removed from the HTML document, and stored in aseparate CSS file.All browsers support CSS today.CSS Saves a Lot of Work!CSS defines HOW HTML elements are to be displayed.Styles are normally saved in external .css files. External style sheets enable you to change theappearance and layout of all the pages in a Web site, just by editing one single file!CSS SyntaxExamples • Look at Example 1 • ...