Nội Dung Tệp Css Và Cách Sử Dụng Tệp Css Trong File Nguồn

c) Định dạng bởi bộ chọn thẻ (tag)

Khi muốn cho một loạt các phần tử cùng loại có định dạng giống nhau mà không cần ID giống nhau thì người định nghĩa CSS kiểu bộ chọn:

…

}

</style>

Hình 3.82. Sử dung bộ chọn thẻ

d) Định dạng bởi lớp (Class)

Còn một cách định nghĩa khác hay dùng nhất và linh hoạt nhất đó là cách định nghĩa lớp, ý tưởng chủ đạo là: Ta định nghĩa sẵn một lớp chứa các định dạng và khi muốn áp dụng định dạng đó cho phần tử nào nó thì chỉ việc gán lớp này cho phần tử.

Có thể bạn quan tâm!

Xem toàn bộ 285 trang tài liệu này.

.<Tên_Lớp> { Tên_Thuộc_Tính: Giá_trị; Tên_Thuộc_Tính: Giá_trị;

….

}

</style>

Ví dụ: Định nghĩa 2 lớp là NenXanh_ChuTrang và lớp Lien_Ket.

.NenXanh_ChuTrang { color: black; background-color:blue;

}

.Lien_Ket{

cursor:hand; color:Blue;

}

</style>

Ví dụ sử dụng:

Hình 3.83. Sử dung bộ chọn class

e) Tổ chức lưu trữ

Các định nghĩa về CSS có thể được đặt ngay trong tệp nguồn nhưng cũng có thể được đặt riêng ra một tệp khác. Tệp này thường có đuôi mở rộng là style. Nội dung của tệp chỉ chứa các định nghĩa CSS (Gồm định nghĩa bộ chọn ID, bộ chọn thẻ và lớp).

Ví dụ về một tệp CSS và cách tham chiếu (sử dụng) tệp đó.

Hình 3.84. Nội dung tệp CSS và cách sử dụng tệp CSS trong file nguồn

f) Truy xuất các thuộc tính CSS

Trong quá trình hoạt động của Website, có thể có những lúc ta cần phải sửa đổi giá trị thuộc tính CSS nào đó của một phần tử, khi đó ta cần phải truy cập đến thuộc tính này. Cú pháp truy cập như sau:

window.<gía trị ID>.style.<thuộc_Tính> hoặc

<giá trị của thẻ>.style.<thuộc_Tính> hoặc window.<Giá trị Name>.style.<thuộc_Tính> hoặc

<Giá trị Name của thẻ>.style.<thuộc_Tính>

Ví dụ, có thẻ được đặt CSS như sau:

<html>

<body>

{

txtThongBao.style.color="yellow";

// Hoặc txtTB.style.color="yellow";

// Hoặc window.txtThongBao.style.color="yellow";

// Hoặc window.txtTB.style.color="yellow";

}

</script>

</body>

</html>

Trong các ứng dụng Web ngày nay, thuộc tính name ít được dùng và thuộc tính id được sử dụng phổ biến hơn. Vì vậy, để định danh cho các phần tử trong trang Web, nên sử dụng thuộc tính id thay vì name.

3.5.3. Theme và Skin

Tạo Themes bằng cách thêm vào ứng dụng một Folder đặc biệt của ứng dụng được đặt tên là App_Themes trong thư mục gốc của ứng dụng,

Trong Folder themes có thể chứa nhiều kiểu File bao gồm cả ảnh và text có thể tổ chức nội dung của themes trong các folder con của nó. Hai kiểu của File quan trọng nhất trong themes là skin files và Cascading Style Sheet files

a) Thêm Skin vào trong themes

Một Themes có thể chứa đựng một hoặc nhiều Skin, một Skin cho phép thay đổi một số thuộc tính của các điều khiển trong ASP.NET mà những thuộc tính đó biễu diễn hiển thị của Control đó với người dùng.

Có thể tạo ra các skin mặc định(sẽ áp dụng cho các điều khiển trên Form), skin áp dụng cho 1 điều khiển được chỉ định Form.

Để không áp dụng skin mặc định cho điều khiển có thể sử dụng thuộc tính EnableTheming=“false”.

Ví dụ tạo Skin:

Trong ví dụ này sẽ đưa ra ba trường hợp mặc định, chỉ định, không áp dụng Skin vào trong các điều khiển trên Form.

Hộp thoại Add New Item cho phép chọn Skin File và đặt tên Skin vào hộp Name và nhấn vào nút Add như hình sau:

Hình 3.85. Hộp thoại Add New Item cho phép tạo Skin File

- Hộp thoại thông báo hiện ra chọn YES

- Trong Project sẽ thêm vào thư mục App_Theme và Skin “Simple” Trong File simple.skin soạn nội dung như sau:

<asp:TextBox SkinID="txtChidinh" BorderStyle="dashed" BorderWidth="5px" Runat="Server" />

<asp:TextBox BorderStyle="none" BorderWidth="0px" Runat="Server" />

Để sử dụng skin này cho trang aspx phải thêm vào chỉ dẫn Theme=“simple” trong chỉ dẫn <%@ Page …%>

Trang Themes.aspx sau:

<%@ Page Language="C#" Theme="simple"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head runat="Server"> <title>Using Themes</title></head>

<div>

<h3>Skin tới điều khiển được chỉ định</h3>

<asp:TextBox ID="txtChidinh" runat="Server" SkinID="txtChidinh"></asp:TextBox>

<h3>Skin mặc định cho điều khiển TextBox</h3>

<asp:TextBox ID="txtmacdinh" runat="Server"></asp:TextBox>

<h3>Không áp dụng Skin mặc định</h3>

<asp:TextBox ID="txtnone" runat="Server" EnableTheming="false"></asp:TextBox>

</div>

</Form>

</body>

</html>

Khi sử dụng Themes thì mặc định nếu trong các điều khiển trên Form có quy định thuộc tính thì hiển thị của điều khiển đó sẽ bị ảnh hưởng của các thuộc tính đó. Tuy nhiên cũng có thể ghi đè các thuộc tính đó để sử dụng thuộc tính trong Themes quy định, bằng cách đưa vào chỉ dẫn <%@ Page StyleSheetTheme=“simple” %>.

b) Đăng ký Themes với Web.config

Khi muốn sử dụng themes cho tất cả các trang Web trong Website có thể đăng ký nó vào trong file Web.config trong ứng dụng Web của mình như sau:

<system.Web>

</system.Web>

</configuration>

Để ghi đè vào thuộc tính của điều khiển trong Website

<system.Web>

</system.Web>

</configuration>

Trong một trang ta ko muốn sử dụng Themes, ta có thể gỡ bỏ nó trong trang này bằng cách: <%@ Page Language=“C#” EnableTheming=“false” %>

Thêm CSS tới Themes

Css là một thay thế cho skins để điều khiển cách xuất hiện của các thành phần của cả HTML và ASP.NET

Khi thêm css vào folder Themes thì nó sẽ được áp dụng cho tất cả các trang được áp dụng theme

Ví dụ:

Trang simple.css

html{background-color:gray;font:14px Georgia,Serif;}

.content{margin:auto;width:600px;border:solid 1px black;background- color:black;padding:10px;}

h1{color:Gray;font-size:18px;border-bottom:solid 1px orange;} label{font-weight:bold;}

input{background-color:Yellow;border:double 3px orange;}

.button{background-color:#eeeeee;}

Trang skintotheme.aspx

<%@ Page Language="C#" Theme="blue" AutoEventWireup="true" CodeFile="skintotheme.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head runat="Server"> <title>SIMPLE CSS</title></head>

<body>

<h1>Registration Form</h1>

<asp:Label id="lblFirstName" Text="First Name:" AssociatedControlID="txtFirstName" Runat="Server" /><br />

<asp:TextBox id="txtFirstName" Runat="Server" /><br /><br />

<asp:Label id="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" Runat="Server" /><br />

<asp:TextBox id="txtLastName" Runat="Server" /><br /><br />

<asp:Button id="btnSubmit" Text="Submit Form" CssClass="button" Runat="Server" />

</div>

</Form>

</body>

</html>

Hình 3.85. Kết quả sử dụng CSS kết hợp với Themes

Ở ví dụ trên css được sử dụng tới kiểu của các thành phần html, bởi vì điều khiển ASP.NET đưa ra mã html khi trình duyệt lên áp dụng css cho các điều khiển của aspx phải sử dụng với thẻ của HTML, như trog ví dụ trên cả hai điều khiển TextBox và Button được đưa ra mã HTML là thẻ <imput>.

c) Đưa nhiều CSS vào một Themes

Khi muốn đưa nhiều css vào một thư mục themes, ví dụ tạo ra hai file css là ThemeA.css và ThemesB.css thì khi sử dụng phải dùng cú pháp:

3.5.4. Navigation Controls

Có nhiều cách để một người truy cập trang Web từ trang này sang trang khác. Ví dụ có thể thêm các liên kết HTML (hoặc điều khiển HyperLink) trong trang để cho phép người dùng lướt Web. Nếu muốn thực hiện chuyển hướng trang có thể gọi Response.Redirect() hoặc Server.Transfer() trong trang mã lệnh. Nhưng trong ứng dụng Web chuyên nghiệp, các yêu cầu chuyển hướng chuyên sâu hơn. Các ứng dụng này cần một hệ thống cho phép người dùng lướt Web thông qua một hệ thống các trang, mà không viết đoạn code chuyển hướng. ASP.NET cung cấp một mô hình chuyển hướng dễ dàng để cho phép người dùng lướt Web thông qua các ứng dụng Web. Trước khi có thể sử dụng mô hình này cần phải xác định hệ thống cấp bậc của trang Web, nói cách khác, làm thế nào các trang được tổ chức thành các nhóm một cách logic. Sau đó xác định rằng cấu trúc trong một tập tin chuyên dụng và kết nối thông tin đó để chuyển hướng với các điều khiển menu bao gồm TreeView và Menu.

Hình 3.86 ASP.NET navigation với SiteMap